Made Login.tsx use the useForm hook and expanded the error page so that it can take another error if other shit happens. AuthComponent now doesn't have a hardcoded isLogged var, but looks at the query.

This commit is contained in:
Arnaud Fauconnet 2022-10-23 15:09:28 +02:00
parent 57ae7f5c3b
commit 97b92fa60c
4 changed files with 72 additions and 26 deletions

View File

@ -14,6 +14,7 @@
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.10.4",
"@hookform/resolvers": "^2.9.10",
"@mui/material": "^5.10.9", "@mui/material": "^5.10.9",
"@types/jest": "^29.1.1", "@types/jest": "^29.1.1",
"@types/node": "^18.8.2", "@types/node": "^18.8.2",
@ -21,12 +22,14 @@
"@types/react": "^18.0.21", "@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"@types/react-router-dom": "^5.3.3", "@types/react-router-dom": "^5.3.3",
"@types/yup": "^0.32.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.1", "mini-css-extract-plugin": "^2.6.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hook-form": "^7.38.0",
"react-router-dom": "^6.4.2", "react-router-dom": "^6.4.2",
"sass": "^1.55.0", "sass": "^1.55.0",
"sass-loader": "^13.1.0", "sass-loader": "^13.1.0",
@ -36,6 +39,7 @@
"typescript": "^4.8.4", "typescript": "^4.8.4",
"webpack": "^5.74.0", "webpack": "^5.74.0",
"webpack-cli": "^4.10.0", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1" "webpack-dev-server": "^4.11.1",
"yup": "^0.32.11"
} }
} }

View File

@ -2,8 +2,12 @@ import React from "react";
import { useRouteError } from "react-router-dom"; import { useRouteError } from "react-router-dom";
import "@scss/error.scss" import "@scss/error.scss"
export default function ErrorPage() { type ErrorProps = {
const error: any = useRouteError(); err?: Error
}
export default function ErrorPage({err} : ErrorProps) {
const error: any = err || useRouteError();
console.error(error); console.error(error);
return ( return (

View File

@ -2,41 +2,76 @@ import React, { useState, ChangeEvent, MouseEvent, useEffect } from "react";
import { Card, Button, TextField } from "@mui/material" import { Card, Button, TextField } from "@mui/material"
import "@scss/login.scss" import "@scss/login.scss"
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";
import { useForm } from "react-hook-form"
type Inputs = {
email: string;
password: string;
};
const schema = yup.object().shape({
email: yup.string().email("Please provide a valid email").required("No email was provided"),
password: yup.string().required("No password was provided"),
}).required();
export default function Login() { export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate(); const navigate = useNavigate();
const { register, formState: { errors }, handleSubmit } = useForm<Inputs>({
resolver: yupResolver(schema), // yup, joi and even your own.
});
function hash(s: string) { function hash(s: string) {
return s; return s;
} }
function handleEmail(e: ChangeEvent<HTMLInputElement>) { const {ref: emailRef, ...emailRegisterProps} = register("email", {
setEmail(e.target.value); required: "error txt lol"
console.log(email); });
const emailProps = {
...emailRegisterProps,
inputRef: emailRef,
className: "textField",
name: "email",
id: "email",
label: "Email",
error: !!errors.email,
helperText: errors?.email?.message,
} }
function handlePassword(e: ChangeEvent<HTMLInputElement>) { const {ref: passRef, ...passRegisterProps} = register("password");
setPassword(e.target.value);
console.log(hash(password)); const passProps = {
...passRegisterProps,
inputRef: passRef,
className: "textField",
name: "password",
id: "password",
label: "Password",
error: !!errors.password,
helperText: errors?.password?.message,
} }
function buttonSubmit(e: MouseEvent<HTMLButtonElement>) { function onSubmit(data: Inputs) {
e.preventDefault(); console.log("There will be an API call now with the following data");
console.log(`Sumbitting username "${email}" and password "${hash(password)}"`) console.table(data);
navigate("/") setTimeout(() => navigate("/?logged"), 3000)
} }
return ( return (
<main className="cardContainer"> <main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card"> <Card className="card">
<h3>Login</h3> <h3>Login</h3>
<TextField className="textfield" id="email" label="Email" value={email} onChange={handleEmail} /> <TextField {...emailProps} />
<TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword} /> <TextField {...passProps}/>
<Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button> <Button type="submit" id="submit" variant="contained">Login</Button>
<p>Forgot your <Link to="/forgot">password</Link>?</p> <p>Forgot your <Link to="/forgot">password</Link>?</p>
</Card> </Card>
</form>
</main> </main>
) )
} }

View File

@ -1,13 +1,14 @@
import ErrorPage from "@components/ErrorPage";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate, useSearchParams } from "react-router-dom";
type AuthProps = { type AuthProps = {
children: JSX.Element | JSX.Element[], children: JSX.Element | JSX.Element[],
} }
export default function AuthComponent({children} : AuthProps){ export default function AuthComponent({ children }: AuthProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const searchParams = useSearchParams()[0];
const isLogged = true; const isLogged = searchParams.has("logged");
useEffect(() => { useEffect(() => {
// navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect // navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect
@ -17,4 +18,6 @@ export default function AuthComponent({children} : AuthProps){
if (isLogged) if (isLogged)
return <>{children}</>; return <>{children}</>;
// else
// return <ErrorPage err={new Error("You are not logged in and you should have been redirected to the login page. Something went wrong.")}/>;
} }