primero prueba para inicio de sesión
This commit is contained in:
parent
d02cfa345f
commit
54d9fe14c6
|
@ -10,7 +10,7 @@ export class User {
|
|||
@Prop({index: true})
|
||||
dni!: string;
|
||||
|
||||
@Prop({required: true})
|
||||
@Prop()
|
||||
name: string;
|
||||
|
||||
@Prop({required: true})
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue