iniciando integracon con backend

servicio-usuarios/src/schemas/user.schema.ts

@@ -39,6 +39,9 @@ export class User {
 
   @Prop()
   number_house?: string;
+
+  @Prop()
+  token?: string;
 }
 
 export const UserSchema = SchemaFactory.createForClass(User);

servicio-usuarios/src/users/users.service.ts

@@ -101,13 +101,14 @@ export class UsersService {
           let passwordEncriptada = Md5.init(password);
           if (res[0].password == passwordEncriptada) {
             resolve(res[0]);
+            console.log(res[0])
           } else {
             resolve(null);
           }
         }
       });
     });
-
+    console.log(await userReturn);
     return userReturn;
   }
 

web-ui/web-react/public/assets/themes/khaki/theme.css

@@ -7156,4 +7156,11 @@
 .status.status--1 {
     background: #565656;
     color: #f7f9f7;
+}
+
+
+.login-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }

web-ui/web-react/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { Route, useLocation } from 'react-router-dom';
+import { BrowserRouter, Switch } from 'react-router-dom'
 import { CSSTransition } from 'react-transition-group';
 
 import { AppTopbar } from './AppTopbar';
@@ -33,7 +34,7 @@ import AdministradoresComunidad from './components/AdministradoresComunidad';
 import GuardasSeguridad from './components/GuardasSeguridad';
 import Communities from './components/ComunidadViviendas';
 import Inquilinos from './components/Inquilinos';
-
+import Dashboard2 from './components/Dashboard';
 import Crud from './pages/Crud';
 import EmptyPage from './pages/EmptyPage';
 import TimelineDemo from './pages/TimelineDemo';
@@ -53,6 +54,7 @@ import LogIn from './components/LogIn';
 import { PrimeIcons } from 'primereact/api';
 import AreasComunes from './components/AreasComunes';
 
+
 const App = () => {
   const [layoutMode, setLayoutMode] = useState('static');
   const [layoutColorMode, setLayoutColorMode] = useState('light');
@@ -348,105 +350,26 @@ const App = () => {
     'layout-theme-light': layoutColorMode === 'light',
   });
 
+
+  const [token, setToken] = useState();
+
+  if(!token) {
+    return <LogIn setToken={setToken} />
+  }
+
+
   return (
-    <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} />
-          <Route path="/logIn" component={LogIn} />
-        </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 className="wrapper">
+      <h1>Application</h1>
+      <BrowserRouter>
+        <Switch>
+          <Route path="/dashboard">
+            <Dashboard colorMode={layoutColorMode} location={location} />
+          </Route>
+          
+        </Switch>
+      </BrowserRouter>
     </div>
   );
 };

web-ui/web-react/src/components/Dashboard.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function Dashboard() {
+  return(
+    <h2>Dashboard</h2>
+  );
+}

web-ui/web-react/src/components/LogIn.js

@@ -1,48 +1,99 @@
 import React, { useState } from 'react';
 import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
 
-const LogIn = () => {
+import PropTypes from 'prop-types';
 
-    const [email, setEmail] = useState(""); 
-    const [password, setPassword] = useState(""); 
+const LogIn = ({ setToken }) => {
+
+  let emptyLogin = {
+    _id: null,
+    name: '',
+    email: '',
+    password: '',
+    status: '1',
+    status_text: '',
+  }
 
 
-    const iniciarSesion = () =>{
+  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))
+  }
 
-    return (
-        <div className="grid">
-            <div className="col-12">
-                <div className="card">
-                    <h5>Iniciar Sesión</h5>
-                    <div className="p-fluid formgrid grid">
-                        <div className="field col-12">
-                            <label htmlFor="correo">Correo electrónico</label>
-                            <InputText id="correo" type="text" placeholder='Correo electrónico'/>
-                        </div>
-                        <div className="field col-12 ">
-                            <label htmlFor="contrasenna">Contraseña</label>
-                            <InputText id="contrasenna" type="text" placeholder='Contraseña'/>
-                        </div>
+  const handleSubmit = async e => {
+    e.preventDefault();
+    const token = await loginUser({
+      email: email,
+      password: password
+    });
+    setToken(await token);
+  }
 
-                        {/* <Button label="Registrar" onClick={registrarAdmin}></Button> */}
-                    </div>
-                </div>
+  const renderErrorMessage = (name) =>
+    name === errorMessages.name && (
+      <div className="error">{errorMessages.message}</div>
+    );
+
+  const errors = {
+    email: "coreo requerido",
+    pass: "contraseña requerida"
+  };
+
+  return (
+    <div className="login-wrapper">
+
+      <div className="grid form justify-content-center my-5">
+        <div className="col-5">
+          <form className="card">
+            <h5>Iniciar Sesión</h5>
+            <div className="p-fluid formgrid grid">
+              <div className="field col-12">
+                <label htmlFor="email">Correo electrónico</label>
+                <InputText id="email"
+                  type="email"
+                  onChange={e => setEmail(e.target.value)}
+                  placeholder='Correo electrónico' />
+                {renderErrorMessage("email")}
+              </div>
+              <div className="field col-12 ">
+                <label htmlFor="password">Contraseña</label>
+                <InputText id="password"
+                  type="text"
+                  onChange={e => setPassword(e.target.value)}
+                  placeholder='Contraseña'
+                />
+                {renderErrorMessage("password")}
+              </div>
+
+              <Button label="Iniciar sesión" type="submit" onClick={ handleSubmit}></Button>
             </div>
-            <div className="field col-12 ">
-              <label htmlFor="apellidos">Contraseña</label>
-              <InputText id="apellidos" type="text" />
-            </div>
-
-            {/* <Button label="Registrar" onClick={registrarAdmin}></Button> */}
-          </div>
+          </form>
         </div>
+
+
+        {/* <Button label="Registrar" onClick={registrarAdmin}></Button> */}
       </div>
     </div>
   );
 };
 
+LogIn.propTypes = {
+  setToken: PropTypes.func.isRequired
+}
+
 export default LogIn