rockwood Posted January 23 Share Posted January 23 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; Quote Link to comment Share on other sites More sharing options...
AdamHull Posted January 23 Share Posted January 23 Any context to this? Quote Link to comment Share on other sites More sharing options...
rockwood Posted February 2 Author Share Posted February 2 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 Quote Link to comment Share on other sites More sharing options...
URBANZ Posted February 2 Share Posted February 2 (edited) 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 by URBANZ 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.