primero prueba para inicio de sesión

This commit is contained in:
Mariela 2022-08-05 23:55:28 -06:00
parent d02cfa345f
commit 54d9fe14c6
5 changed files with 170 additions and 33 deletions

View File

@ -10,7 +10,7 @@ export class User {
@Prop({index: true})
dni!: string;
@Prop({required: true})
@Prop()
name: string;
@Prop({required: true})

View File

@ -29,7 +29,7 @@ export class UsersService {
let passwordEncriptada = Md5.init(user.password);
user.password = passwordEncriptada;
this.userModel.create(user)
this.userModel.create(user);
let community = await this.findCommunity(user.community_id);
@ -98,10 +98,12 @@ export class UsersService {
if (err) {
reject(err);
} else {
console.log(res);
console.log(Md5.init(password));
let passwordEncriptada = Md5.init(password);
if (res[0].password == passwordEncriptada) {
resolve(res[0]);
console.log(res[0])
res[0].token = '1234';
} else {
resolve(null);
}

View File

@ -53,6 +53,17 @@ import './App.scss';
import LogIn from './components/LogIn';
import { PrimeIcons } from 'primereact/api';
import AreasComunes from './components/AreasComunes';
import { Cookies } from 'react-cookie';
import useToken from './components/useToken';
function setToken(userToken) {
sessionStorage.setItem('token', JSON.stringify(userToken.token));
}
function getToken() {
const tokenString = sessionStorage.getItem('token');
const userToken = JSON.parse(tokenString);
return userToken?.token
}
const App = () => {
@ -66,6 +77,9 @@ const App = () => {
const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
const copyTooltipRef = useRef();
const location = useLocation();
const { token, setToken } = useToken();
PrimeReact.ripple = true;
@ -351,7 +365,6 @@ const App = () => {
});
const [token, setToken] = useState();
if(!token) {
return <LogIn setToken={setToken} />
@ -364,9 +377,104 @@ const App = () => {
<h1>Application</h1>
<BrowserRouter>
<Switch>
<Route path="/dashboard">
<Dashboard colorMode={layoutColorMode} location={location} />
</Route>
<div className={wrapperClass} onClick={onWrapperClick}>
<Tooltip
ref={copyTooltipRef}
target=".block-action-copy"
position="bottom"
content="Copied to clipboard"
event="focus"
/>
<AppTopbar
onToggleMenuClick={onToggleMenuClick}
layoutColorMode={layoutColorMode}
mobileTopbarMenuActive={mobileTopbarMenuActive}
onMobileTopbarMenuClick={onMobileTopbarMenuClick}
onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick}
/>
<div className="layout-sidebar" onClick={onSidebarClick}>
<AppMenu
model={menu}
onMenuItemClick={onMenuItemClick}
layoutColorMode={layoutColorMode}
/>
</div>
<div className="layout-main-container">
<div className="layout-main">
<Route
path="/"
exact
render={() => (
<Dashboard colorMode={layoutColorMode} location={location} />
)}
/>
<Route path="/formlayout" component={FormLayoutDemo} />
<Route path="/input" component={InputDemo} />
<Route path="/floatlabel" component={FloatLabelDemo} />
<Route path="/invalidstate" component={InvalidStateDemo} />
<Route path="/button" component={ButtonDemo} />
<Route path="/table" component={TableDemo} />
<Route path="/list" component={ListDemo} />
<Route path="/tree" component={TreeDemo} />
<Route path="/panel" component={PanelDemo} />
<Route path="/overlay" component={OverlayDemo} />
<Route path="/media" component={MediaDemo} />
<Route path="/menu" component={MenuDemo} />
<Route path="/messages" component={MessagesDemo} />
<Route path="/blocks" component={BlocksDemo} />
<Route path="/icons" component={IconsDemo} />
<Route path="/file" component={FileDemo} />
<Route
path="/chart"
render={() => (
<ChartDemo colorMode={layoutColorMode} location={location} />
)}
/>
<Route path="/misc" component={MiscDemo} />
<Route path="/timeline" component={TimelineDemo} />
<Route path="/crud" component={Crud} />
<Route path="/empty" component={EmptyPage} />
<Route path="/documentation" component={Documentation} />
<Route
path="/administradoresSistema"
component={AdministradoresSistema}
/>
<Route
path="/administradoresComunidad"
component={AdministradoresComunidad}
/>
<Route path="/guardasSeguridad" component={GuardasSeguridad} />
<Route path="/comunidadesViviendas" component={Communities} />
<Route path="/inquilinos" component={Inquilinos} />
<Route path="/areasComunes" component={AreasComunes} />
</div>
<AppFooter layoutColorMode={layoutColorMode} />
</div>
<AppConfig
rippleEffect={ripple}
onRippleEffect={onRipple}
inputStyle={inputStyle}
onInputStyleChange={onInputStyleChange}
layoutMode={layoutMode}
onLayoutModeChange={onLayoutModeChange}
layoutColorMode={layoutColorMode}
onColorModeChange={onColorModeChange}
/>
<CSSTransition
classNames="layout-mask"
timeout={{ enter: 200, exit: 200 }}
in={mobileMenuActive}
unmountOnExit
>
<div className="layout-mask p-component-overlay"></div>
</CSSTransition>
</div>
</Switch>
</BrowserRouter>

View File

@ -4,7 +4,21 @@ import { Button } from 'primereact/button';
import PropTypes from 'prop-types';
const LogIn = ({ setToken }) => {
async function loginUser(credentials) {
return fetch('http://localhost:4000/user/loginUser', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(credentials)
})
.then(data => data.json())
.then(data => data.message);
}
export default function LogIn({ setToken }) {
let emptyLogin = {
_id: null,
@ -16,30 +30,20 @@ const LogIn = ({ setToken }) => {
}
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const [errorMessages, setErrorMessages] = useState({});
const [isSubmitted, setIsSubmitted] = useState(false)
const [login, setLogin] = useState(emptyLogin);
async function loginUser(credentials) {
return fetch('http://localhost:4000/user/loginUser', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(credentials)
})
.then(data => data.json())
.then(data => console.log(data.message))
}
const handleSubmit = async e => {
e.preventDefault();
const token = await loginUser({
email: email,
password: password
email,
password
});
setToken(await token);
}
@ -50,8 +54,8 @@ const LogIn = ({ setToken }) => {
);
const errors = {
email: "coreo requerido",
pass: "contraseña requerida"
email: "correo requerido",
password: "contraseña requerida"
};
return (
@ -59,9 +63,9 @@ const LogIn = ({ setToken }) => {
<div className="grid form justify-content-center my-5">
<div className="col-5">
<form className="card">
<div className="card" >
<h5>Iniciar Sesión</h5>
<div className="p-fluid formgrid grid">
<form className="p-fluid formgrid grid" onSubmit={handleSubmit}>
<div className="field col-12">
<label htmlFor="email">Correo electrónico</label>
<InputText id="email"
@ -73,16 +77,16 @@ const LogIn = ({ setToken }) => {
<div className="field col-12 ">
<label htmlFor="password">Contraseña</label>
<InputText id="password"
type="text"
type="password"
onChange={e => setPassword(e.target.value)}
placeholder='Contraseña'
/>
{renderErrorMessage("password")}
</div>
<Button label="Iniciar sesión" type="submit" onClick={ handleSubmit}></Button>
</div>
</form>
<Button label="Iniciar sesión" type="submit"></Button>
</form>
</div>
</div>
@ -95,5 +99,3 @@ const LogIn = ({ setToken }) => {
LogIn.propTypes = {
setToken: PropTypes.func.isRequired
}
export default LogIn

View File

@ -0,0 +1,25 @@
import { useState } from 'react';
export default function useToken() {
const getToken = () => {
const tokenString = localStorage.getItem('token');
if (tokenString) {
const userToken = JSON.parse(tokenString);
return userToken?.token;
}
};
const [token, setToken] = useState(getToken());
const saveToken = userToken => {
let tokenJSON = {
"token": userToken.token
}
localStorage.setItem('token', JSON.stringify(tokenJSON));
setToken(tokenJSON);
};
return {
setToken: saveToken,
token
}
}