adeptus-miniaturium/frontend/src/components/Auth/LoginForm.jsx

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;