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}) @Prop({index: true})
dni!: string; dni!: string;
@Prop({required: true}) @Prop()
name: string; name: string;
@Prop({required: true}) @Prop({required: true})

View File

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

View File

@ -53,6 +53,17 @@ import './App.scss';
import LogIn from './components/LogIn'; import LogIn from './components/LogIn';
import { PrimeIcons } from 'primereact/api'; import { PrimeIcons } from 'primereact/api';
import AreasComunes from './components/AreasComunes'; 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 = () => { const App = () => {
@ -66,6 +77,9 @@ const App = () => {
const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false); const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
const copyTooltipRef = useRef(); const copyTooltipRef = useRef();
const location = useLocation(); const location = useLocation();
const { token, setToken } = useToken();
PrimeReact.ripple = true; PrimeReact.ripple = true;
@ -351,7 +365,6 @@ const App = () => {
}); });
const [token, setToken] = useState();
if(!token) { if(!token) {
return <LogIn setToken={setToken} /> return <LogIn setToken={setToken} />
@ -364,9 +377,104 @@ const App = () => {
<h1>Application</h1> <h1>Application</h1>
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route path="/dashboard"> <div className={wrapperClass} onClick={onWrapperClick}>
<Dashboard colorMode={layoutColorMode} location={location} /> <Tooltip
</Route> 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> </Switch>
</BrowserRouter> </BrowserRouter>

View File

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