[REPO REFACTOR]: changed to a better git repository structure with branches

2025-11-01 05:49:49 +01:00
parent 4d0f44e995
commit 589215b2bc
76 changed files with 3529 additions and 0 deletions
--- a/src/components/Auth/LoginForm.jsx
+++ b/src/components/Auth/LoginForm.jsx
@@ -0,0 +1,120 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { Form, Button, Alert, FloatingLabel, Row, Col } from 'react-bootstrap';
+import PasswordInput from '@/components/Auth/PasswordInput.jsx';
+
+import { useContext, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { AuthContext } from "@/context/AuthContext.jsx";
+
+import CustomContainer from '@/components/CustomContainer.jsx';
+import ContentWrapper from '@/components/ContentWrapper.jsx';
+
+import '@/css/LoginForm.css';
+
+const LoginForm = () => {
+    const { login, error } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+    const [formState, setFormState] = useState({
+        emailOrUserName: "",
+        password: "",
+        keepLoggedIn: false
+    });
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormState((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+    
+        const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.emailOrUserName);
+
+        const loginBody = {
+            password: formState.password,
+            keepLoggedIn: Boolean(formState.keepLoggedIn),
+        };
+    
+        if (isEmail) {
+            loginBody.email = formState.emailOrUserName;
+        } else {
+            loginBody.userName = formState.emailOrUserName;
+        }
+    
+        try {
+            await login(loginBody);
+            navigate("/");
+        } catch (err) {
+            console.error("Error de login:", err.message);
+        }
+    };
+
+    return (
+        <CustomContainer>
+            <ContentWrapper>
+                <div className="login-card card shadow p-5 rounded-5 mx-auto col-12 col-md-8 col-lg-6 col-xl-5 d-flex flex-column gap-4">
+                    <h1 className="text-center">Inicio de sesión</h1>
+                    <Form className="d-flex flex-column gap-5" onSubmit={handleSubmit}>
+                        <div className="d-flex flex-column gap-3">
+                            <FloatingLabel
+                                controlId="floatingUsuario"
+                                label={
+                                    <>
+                                        <FontAwesomeIcon icon={faUser} className="me-2" />
+                                        Usuario o Email
+                                    </>
+                                }
+                            >
+                                <Form.Control
+                                    type="text"
+                                    placeholder=""
+                                    name="emailOrUserName"
+                                    value={formState.emailOrUserName}
+                                    onChange={handleChange}
+                                    className="rounded-4"
+                                />
+                            </FloatingLabel>
+
+                            <PasswordInput
+                                value={formState.password}
+                                onChange={handleChange}
+                                name="password"
+                            />
+
+                            <div className="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2">
+                                <Form.Check
+                                    type="checkbox"
+                                    name="keepLoggedIn"
+                                    label="Mantener sesión iniciada"
+                                    className="text-secondary"
+                                    value={formState.keepLoggedIn}
+                                    onChange={(e) => { formState.keepLoggedIn = e.target.checked; setFormState({ ...formState }) }}
+                                />
+                                {/*<Link disabled to="#" className="muted">
+                                    Olvidé mi contraseña
+                                </Link>*/}
+                            </div>
+                        </div>
+
+                        {error && (
+                            <Alert variant="danger" className="text-center py-2 mb-0">
+                                {error}
+                            </Alert>
+                        )}
+
+                        <div className="text-center">
+                            <Button type="submit" className="w-75 padding-4 rounded-4 border-0 shadow-sm login-button">
+                                Iniciar sesión
+                            </Button>
+                        </div>
+                    </Form>
+                </div>
+            </ContentWrapper>
+        </CustomContainer>
+    );
+};
+
+
+export default LoginForm;