Fix login design and to implement security(but is in progress)

Author: AnderssonProgramming

src/api/usuario/administrador.js

@@ -21,6 +21,24 @@ export async function consultarUsuarios(filtros) {
     }
 }
 
+/**
+ * Consulta un usuario por su correo institucional.
+ * @param {string} correo - Correo institucional del usuario.
+ * @returns {Promise<Object>} - Datos del usuario.
+ * @throws {Error} - Si la consulta falla.
+ */
+export async function consultarUsuarioPorCorreo(correo) {
+    try {
+      // Verifica la ruta y el parámetro "correo"
+      const response = await axios.get(`${ADMIN_API}/usuarioPorCorreo`, {
+        params: { correo: correo },
+      });
+      return response.data;
+    } catch (error) {
+      throw new Error(error.response?.data?.message || "Error consultando usuario");
+    }
+  }
+
 /**
  * Agrega un nuevo usuario al sistema.
  * @param {Object} usuario - Datos del usuario a agregar.

src/components/Login/FormInput.js

@@ -1,30 +1,35 @@
 import React from "react";
 import styled from "styled-components";
-import PropTypes from "prop-types";
 
-const FormInput = ({ label, type = "text" }) => {
+const FormInput = ({ label, type = "text", onChange, placeholder }) => {
   return (
     <InputWrapper>
       <InputLabel>{label}</InputLabel>
-      <StyledInput type={type} aria-label={label} />
+      <StyledInput
+        type={type}
+        aria-label={label}
+        onChange={onChange}
+        placeholder={placeholder}
+      />
       <InputUnderline />
     </InputWrapper>
   );
 };
 
 const InputWrapper = styled.div`
-  margin-bottom: 108px;
+  margin-bottom: 60px; /* Ajusta el espacio vertical entre los campos */
   width: 100%;
   @media (max-width: 640px) {
-    margin-bottom: 60px;
+    margin-bottom: 40px;
   }
 `;
 
 const InputLabel = styled.label`
-  color: ${(props) => (props.children === "CONTRASEÑA" ? "#000" : "#aaba70")};
+  color: rgb(22, 45, 255); /* Negro */
   font-family: "Inter", sans-serif;
-  font-size: 11px;
-  margin-bottom: 22px;
+  font-size: 18px; /* Tamaño mayor */
+  font-weight: bold;
+  margin-bottom: 10px;
   display: block;
 `;
 
@@ -33,21 +38,22 @@ const StyledInput = styled.input`
   border: none;
   background: transparent;
   font-family: "Inter", sans-serif;
-  font-size: 16px;
+  font-size: 16px; /* Tamaño mayor */
+  font-weight: bold;
   outline: none;
   padding: 0;
+  color: #000; /* Texto en negro */
+
+  ::placeholder {
+    color: #999; /* Color del placeholder */
+  }
 `;
 
 const InputUnderline = styled.div`
   width: 100%;
   height: 1px;
-  margin-top: 20px;
+  margin-top: 10px;
   background-color: #aaba70;
 `;
-FormInput.propTypes = {
-  label: PropTypes.string.isRequired,
-  type: PropTypes.string,
-};
 
 export default FormInput;
-

src/components/Login/LoginForm.js

@@ -2,37 +2,33 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import FormInput from "./FormInput";
 import { useNavigate } from "react-router-dom";
+import { consultarUsuarioPorCorreo } from "../../api/usuario/administrador"; // Importa la nueva función
+
 
 const LoginForm = () => {
   const navigate = useNavigate();
   const [correo, setCorreo] = useState("");
-  const [password, setPassword] = useState("");
+  const [password, setPassword] = useState(""); // Aquí se ingresa el idInstitucional
+  const [errorMsg, setErrorMsg] = useState("");
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    // Aquí realiza la llamada a tu API de login con fetch o axios.
-    // Por ejemplo:
-    /*
+    setErrorMsg("");
     try {
-      const response = await fetch('https://localhost:8443/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ correo, password })
-      });
-      if (!response.ok) throw new Error('Error en la autenticación');
-      const data = await response.json();
-      // Guarda el token en localStorage o maneja la cookie según corresponda
-      localStorage.setItem('token', data.token);
-      // Redirige a la pantalla de administrador
-      navigate('/adminhome');
+      // Consulta el usuario por su correo institucional
+      const usuario = await consultarUsuarioPorCorreo(correo);
+      // Valida que el idInstitucional (password) ingresado sea igual al del usuario retornado.
+      if (usuario && String(usuario.idInstitucional) === password) {
+        // Si coincide, redirige a la pantalla de administrador
+        localStorage.setItem("token", "dummy-token");
+        navigate("/adminhome");
+      } else {
+        setErrorMsg("Usuario no encontrado o contraseña incorrecta");
+      }
     } catch (error) {
+      setErrorMsg("Usuario no encontrado o contraseña incorrecta");
       console.error(error);
-      // Aquí puedes mostrar un mensaje de error en la UI
     }
-    */
-    // Para la demostración, simulamos un login exitoso:
-    localStorage.setItem("token", "dummy-token");
-    navigate("/adminhome");
   };
 
   return (
@@ -45,15 +41,18 @@ const LoginForm = () => {
         <FormInput
           label="CORREO INSTITUCIONAL"
           type="email"
+          placeholder="[email protected]"
           onChange={(e) => setCorreo(e.target.value)}
         />
         <FormInput
           label="CONTRASEÑA"
           type="password"
+          placeholder="idInstitucional"
           onChange={(e) => setPassword(e.target.value)}
         />
         <LoginButton type="submit">Ingresar</LoginButton>
       </form>
+      {errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
       <CvdsLogo
         src="https://cdn.builder.io/api/v1/image/assets/TEMP/a04bfa90ef84cb31360009a48d4d01c2ac370589"
         alt="CVDS Logo"
@@ -93,11 +92,12 @@ const LoginButton = styled.button`
   height: 54px;
   border-radius: 2px;
   border: none;
-  color: #fff;
+  color:rgb(22, 45, 255);
   font-family: "Inter", sans-serif;
   font-size: 19px;
   font-weight: 700;
   margin: 0 auto;
+  margin-top: 100px;
   cursor: pointer;
   background-color: #d9ed92;
   display: block;
@@ -106,6 +106,14 @@ const LoginButton = styled.button`
   }
 `;
 
+const ErrorMessage = styled.div`
+  color: red;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 20px;
+`;
+
 const CvdsLogo = styled.img`
   width: 59px;
   height: 63px;

src/pages/Login/LoginPage.js

@@ -16,7 +16,7 @@ const PageContainer = styled.main`
   display: flex;
   width: 100%;
   height: 100vh;
-  background-color: #fff;
+  background-color:rgb(242, 245, 229);
   @media (max-width: 991px) {
     flex-direction: column;
   }