Fix: some css and useEffects. Add: clearError on AuthContext.

src/components/Auth/LoginForm.jsx

@@ -16,7 +16,7 @@ import '@/css/LoginForm.css';
 const LoginForm = () => {
     const PHRASES = ["U got the wrong house fool!", "¿Te conozco?", "Hola :3", "¿Quién chota sos?🧐", "Identifícate", "Arto ahí ¿quién ere?"];
 
-    const { login, error } = useContext(AuthContext);
+    const { login, error, clearError } = useContext(AuthContext);
     const [randomPhrase, setRandomPhrase] = useState("");
     const navigate = useNavigate();
 
@@ -33,6 +33,8 @@ const LoginForm = () => {
     const handleChange = (e) => {
         const { name, value } = e.target;
         setFormState((prev) => ({ ...prev, [name]: value }));
+
+        if (error) clearError();
     };
 
     const handleSubmit = async (e) => {

src/components/Auth/RegisterForm.jsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { faAt, faIdCard, faUser } from '@fortawesome/free-solid-svg-icons';
-import { Form, Button, Alert, FloatingLabel} from 'react-bootstrap';
+import { Form, Button, Alert, FloatingLabel } from 'react-bootstrap';
 import PasswordInput from './PasswordInput.jsx';
 
 import { useContext, useState } from "react";
@@ -13,24 +13,34 @@ import ContentWrapper from '@/components/ContentWrapper.jsx';
 import '@/css/LoginForm.css';
 
 const RegisterForm = () => {
-    const { register, error } = useContext(AuthContext);
+    const { register, error, clearError } = useContext(AuthContext);
     const navigate = useNavigate();
 
     const [formState, setFormState] = useState({
+        displayName: "",
         username: "",
+        email: "",
         password: ""
     });
 
     const handleChange = (e) => {
         const { name, value } = e.target;
-        setFormState((prev) => ({ ...prev, [name]: value }));
+
+        setFormState((prev) => ({
+            ...prev,
+            [name]: name === "displayName" ? value.toUpperCase() : value
+        }));
+
+        if (error) clearError();
     };
 
     const handleSubmit = async (e) => {
         e.preventDefault();
 
         const registerBody = {
+            displayName: formState.displayName ? formState.displayName.toUpperCase() : "",
             username: formState.username,
+            email: formState.email,
             password: formState.password,
             serviceId: 0
         };
@@ -50,6 +60,26 @@ const RegisterForm = () => {
                     <h1 className="text-center">Centro de cuentas</h1>
                     <Form className="d-flex flex-column gap-5" onSubmit={handleSubmit}>
                         <div className="d-flex flex-column gap-3">
+                            <FloatingLabel
+                                controlId="floatingDisplayName"
+                                label={
+                                    <>
+                                        <FontAwesomeIcon icon={faIdCard} className="me-2" />
+                                        Nombre (será el usuario si se deja vacío)
+                                    </>
+                                }
+                            >
+                                <Form.Control
+                                    type="text"
+                                    placeholder=""
+                                    name="displayName"
+                                    value={formState.displayName}
+                                    onChange={handleChange}
+                                    required
+                                    className="themed-input rounded-0"
+                                />
+                            </FloatingLabel>
+
                             <FloatingLabel
                                 controlId="floatingUsuario"
                                 label={
@@ -69,6 +99,25 @@ const RegisterForm = () => {
                                 />
                             </FloatingLabel>
 
+                            <FloatingLabel
+                                controlId="floatingEmail"
+                                label={
+                                    <>
+                                        <FontAwesomeIcon icon={faAt} className="me-2" />
+                                        Email
+                                    </>
+                                }
+                            >
+                                <Form.Control
+                                    type="email"
+                                    placeholder=""
+                                    name="email"
+                                    value={formState.email}
+                                    onChange={handleChange}
+                                    className="themed-input rounded-0"
+                                />
+                            </FloatingLabel>
+
                             <PasswordInput
                                 value={formState.password}
                                 onChange={handleChange}

src/context/AuthContext.jsx

@@ -150,6 +150,8 @@ export const AuthProvider = ({ children }) => {
     setAuthStatus("unauthenticated");
   };
 
+  const clearError = () => setError(null);
+
   return (
     <AuthContext.Provider
       value={{
@@ -160,6 +162,7 @@ export const AuthProvider = ({ children }) => {
         register,
         logout,
         error,
+        clearError
       }}
     >
       {children}

src/pages/Accounts.jsx

@@ -12,6 +12,7 @@ import AccountCard from "@/components/Accounts/AccountCard";
 import CustomModal from "@/components/CustomModal";
 import { Button } from "react-bootstrap";
 import { useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
 
 const Accounts = () => {
     const { config, configLoading } = useConfig();
@@ -41,6 +42,7 @@ const Accounts = () => {
 
 const AccountsContent = ({ reqConfig }) => {
     const { data, dataLoading, putData } = useDataContext();
+    const { logout } = useAuth();
     const [showConfirmModal, setShowConfirmModal] = useState(false);
     const [pendingAccountId, setPendingAccountId] = useState(null);
     const [pendingStatus, setPendingStatus] = useState(null);
@@ -76,6 +78,10 @@ const AccountsContent = ({ reqConfig }) => {
                 },
                 true
             );
+            
+            if(updatedIdentity?.status == 0) {
+                logout();
+            }
         } catch (err) {
             console.error(err);
         }
@@ -87,7 +93,7 @@ const AccountsContent = ({ reqConfig }) => {
         <CustomContainer>
             <ContentWrapper>
                 <PaginatedCardGrid
-                    items={data}
+                    items={data == null ? [] : data}
                     renderCard={(identity, idx) => (
                         <AccountCard
                             key={idx}

src/pages/Register.jsx

@@ -1,13 +1,17 @@
 import RegisterForm from "@/components/Auth/RegisterForm";
 import { useAuth } from "@/hooks/useAuth";
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 const Register = () => {
     const { authStatus } = useAuth();
     const navigate = useNavigate();
 
-    if (authStatus == "authenticated")
+    useEffect(() => {
+        if (authStatus === "authenticated") {
             navigate("/");
+        }
+    }, [authStatus, navigate]);
 
     return (
         <RegisterForm />