Jump to content
MakeWebGames

React Based Login Script


rockwood
 Share

Recommended Posts

 

import { useState, useEffect, useContext } from "react";
import "../styles/LoginForm.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser, faKey, faArrowAltCircleRight } from "@fortawesome/free-solid-svg-icons";
import { useForm } from "react-hook-form";
import Fetch from "../libraries/Fetch";
import Model from "./Model";
import RegistrationForm from "./RegistrationForm";
import ForgetPassword from "./ForgetPassword";
import { useNavigate, Link } from "react-router-dom";
import { AuthContext } from "../libraries/AuthContext";

const Login = () => {
    const { user, setUser } = useContext(AuthContext);
    const [showRegistrationModal, setRegistrationModal] = useState(false);
    const [showForgetModal, setForgetModal] = useState(false);
    const handleOK = (event) => {
        console.log(event);
    };

    const {
        register,
        setError,
        formState: { errors },
        handleSubmit,
        clearErrors,
    } = useForm();
    const navigate = useNavigate();

    const onSubmit = async (data) => {
        const result = await Fetch("auth/login", { method: "post", data });

        if (result.user) {
            const userDetails = {
                userId: result.user.id,
                accessToken: result.access_token,
                loggedIn: true,
            };
            setUser(userDetails);
            navigate("/dashboard");
        } else {
            for (const [fieldName, errors] of Object.entries(result.errors)) {
                setError(fieldName, {
                    type: "manual",
                    message: errors[0],
                });
            }

            setTimeout(() => {
                clearErrors();
            }, 5000);
        }
    };

    return (
        <>
            <div>
                <span className="top" onClick={() => {
                    setForgetModal(true);
                    setRegistrationModal(false);
                    }}>
                    Recover Account
                </span>

                <form className="form-inline" method="post" onSubmit={handleSubmit(onSubmit)}>
                    <div className="form-group">
                        <div className="input-group">
                            <span className="form-addon">
                                <FontAwesomeIcon icon={faUser} color="#63102f" size="xs" />
                            </span>

                            <input type="email" placeholder="Username" {...register("email", { required: true })} />
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="input-group">
                            <span className="form-addon">
                                <FontAwesomeIcon icon={faKey} color="#63102f" size="xs" />
                            </span>

                            <input type="password" placeholder="Password" className="form-control" {...register("password", { required: true })} />
                        </div>
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary">
                            <FontAwesomeIcon icon={faArrowAltCircleRight} color="red" size="xs" />
                        </button>
                    </div>
                </form>
                <span className="bottom" onClick={() => {
                    setRegistrationModal(true)
                    setForgetModal(false);
                    }}>
                    Join Us
                </span>
                {errors.email && <p>{errors.email.message}</p>}
            </div>

            {showRegistrationModal ? (
                <Model title="Singup" onCancel={() => setRegistrationModal(false)}>
                    <RegistrationForm onOK={handleOK} />
                </Model>
            ) : (
                showForgetModal && (
                    <Model title="Forget Password" onCancel={() => setForgetModal(false)}>
                        <ForgetPassword />
                    </Model>
                )
            )}
        </>
    );
};

export default Login;

 

Link to comment
Share on other sites

  • 2 weeks later...
1 hour ago, rockwood said:

my point is code should be indent and reasonable instead this and that

⁉️what exactly are you trying to do here? this dont show anything to anyone it's just a snippet of React with 0 context and any means to use it. i think you should think about actually putting context behind what you post along with basic instructions or what you are trying to accomplish.

 

if your point was to show people about coding standards maybe first look at the particular language as each has its own list of standards.

 

Edited by URBANZ
  • Like 2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...