Jump to content

React Based Login Script


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) => {

    const {
        formState: { errors },
    } = 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,
        } else {
            for (const [fieldName, errors] of Object.entries(result.errors)) {
                setError(fieldName, {
                    type: "manual",
                    message: errors[0],

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

    return (
                <span className="top" onClick={() => {
                    Recover Account

                <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" />

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

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

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

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

  • 10 months later...

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.



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.

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.

  • Create New...