React Based Login Script

[rockwood]

 

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;

 

[AdamHull]

Any context to this? 

[rockwood]

On 1/23/2022 at 6:42 PM, AdamHull said:

Any context to this? 

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

[URBANZ]

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 February 2, 2022 by URBANZ

[rockwood]

any one using React for development here?

 

[KyleMassacre]

I personally am not a fan of react. If I were to use a front end js framework I prefer Vue and that is mainly due to its ease of use over React. I also feel you get more control over your components in regards to styling. And to be honest with myself, I am not too familiar with React so what I said about control can be completely wrong but it is just what I feel. 
 

I also looked over a few articles before responding so I didn’t look like a complete tool and found my hunch to be a bit more accurate in regards to performance. The articles that I did read show that Vue is a bit more performant since it does lack a bit of bloat but Vue is supposed to be for “smaller projects” opposed to React.

Plus, I feel that JSX syntax is a bit wonky and like the HTML with a mix of ol' fashioned JS.

https://www.monterail.com/blog/vue-vs-react

https://fireart.studio/blog/vue-vs-react-in-2022/