Add: backend dir and moved frontend to frontend dir

2026-02-17 01:43:08 +01:00
parent 95dd13595e
commit dcc1d55db6
82 changed files with 197 additions and 419 deletions
--- a/frontend/src/components/Auth/LoginForm.jsx
+++ b/frontend/src/components/Auth/LoginForm.jsx
@@ -0,0 +1,105 @@
+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';
+import { useTranslation } from 'react-i18next';
+
+const LoginForm = () => {
+    const { login, error } = useContext(AuthContext);
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+
+    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:", err.message);
+        }
+    };
+
+    return (
+        <CustomContainer>
+            <ContentWrapper>
+                <div className="login-card card shadow rounded-0 mx-auto col-12 col-md-8 col-lg-6 col-xl-5 d-flex flex-column gap-4">
+                    <h1 className="text-center">{t("login.title")}</h1>
+                    <Form className="d-flex flex-column gap-5" onSubmit={handleSubmit}>
+                        <div className="d-flex flex-column gap-3">
+                            <FloatingLabel
+                                controlId="floatingUsuario"
+                                label={
+                                    t("login.user_label")
+                                }
+                            >
+                                <Form.Control
+                                    type="text"
+                                    placeholder=""
+                                    name="emailOrUserName"
+                                    value={formState.emailOrUserName}
+                                    onChange={handleChange}
+                                    className="rounded-0"
+                                />
+                            </FloatingLabel>
+
+                            <PasswordInput
+                                value={formState.password}
+                                onChange={handleChange}
+                                name="password"
+                            />
+                        </div>
+
+                        {error && (
+                            <Alert variant="danger" className="text-center py-2 mb-0">
+                                {error}
+                            </Alert>
+                        )}
+
+                        <div className="text-center">
+                            <Button type="submit" className="border-0 w-75 padding-4 rounded-0  shadow-sm login-button">
+                                {t("login.button")}
+                            </Button>
+                        </div>
+                    </Form>
+                </div>
+            </ContentWrapper>
+        </CustomContainer>
+    );
+};
+
+
+export default LoginForm;