Made each form use useForm

This commit is contained in:
Karma Riuk 2022-10-26 19:02:19 +02:00
parent e1e1d58335
commit 9728321bf8
3 changed files with 96 additions and 51 deletions

View File

@ -1,15 +1,37 @@
import React, { useState, ChangeEvent, MouseEvent } from "react";
import React, { MouseEvent } from "react";
import { Card, Button, TextField } from "@mui/material";
import { useNavigate } from "react-router-dom";
import "@scss/forgot_password.scss";
import { 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")
}).required();
export default function ForgotPassword() {
const [email, setEmail] = useState("");
const navigate = useNavigate();
const { register, formState: { errors }, handleSubmit } = useForm<Inputs>({
resolver: yupResolver(schema), // yup, joi and even your own.
});
function handleEmail(e: ChangeEvent<HTMLInputElement>) {
setEmail(e.target.value);
console.log(email);
const {ref: emailRef, ...emailRegisterProps} = register("email");
const emailProps = {
...emailRegisterProps,
inputRef: emailRef,
className: "textfield",
id: "email",
label: "Email",
error: !!errors.email,
helperText: errors?.email?.message,
}
function buttonCancel(e: MouseEvent<HTMLButtonElement>) {
@ -17,27 +39,22 @@ export default function ForgotPassword() {
navigate("/login")
}
function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
e.preventDefault();
console.log(`Sumbitting email "${email}" to which send a link.`);
navigate("/reset")
function onSubmit(data: Inputs) {
console.log("There will be an API call now with the following data");
console.table(data);
console.log("You can now go to http://localhost:8080/reset to acces the reset form")
}
return (
<main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card">
<h3>Forgot Passowrd</h3>
<p>
If you have forgot your password, we can send you an email
with a link to reset it.
</p>
<TextField
className="textfield"
id="email"
label="Email"
value={email}
onChange={handleEmail}
/>
<TextField {...emailProps} />
<div className="buttons">
<Button
id="cancel"
@ -50,12 +67,12 @@ export default function ForgotPassword() {
type="submit"
id="submit"
variant="contained"
onClick={buttonSubmit}
>
Submit
</Button>
</div>
</Card>
</form>
</main>
);
}

View File

@ -26,9 +26,7 @@ export default function Login() {
return `hash of '${s}' to be definied`;
}
const {ref: emailRef, ...emailRegisterProps} = register("email", {
required: "error txt lol"
});
const {ref: emailRef, ...emailRegisterProps} = register("email");
const emailProps = {
...emailRegisterProps,

View File

@ -1,46 +1,76 @@
import React, { useState, ChangeEvent, MouseEvent } from "react";
import React, { ChangeEvent, MouseEvent } from "react";
import { Card, Button, TextField } from "@mui/material"
import { useNavigate } from "react-router-dom";
import "@scss/reset.scss"
import { useNavigate } from "react-router-dom";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";
import { useForm } from "react-hook-form"
type Inputs = {
password: string;
confirm_password: string;
};
const schema = yup.object().shape({
password: yup.string().required("No password was provided"),
confirm_password: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match')
}).required();
export default function Reset() {
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const navigate = useNavigate();
const { register, formState: { errors }, handleSubmit } = useForm<Inputs>({
resolver: yupResolver(schema), // yup, joi and even your own.
});
function hash(s: string) {
return s;
return `hash of '${s}' to be definied`;
}
function handlePassword(e: ChangeEvent<HTMLInputElement>) {
setPassword(e.target.value);
console.log(hash(password));
const {ref: passRef, ...passRegisterProps} = register("password");
const passProps = {
...passRegisterProps,
inputRef: passRef,
className: "textField",
name: "password",
id: "password",
label: "Password",
error: !!errors.password,
helperText: errors?.password?.message,
}
function handleConfirmPassword(e: ChangeEvent<HTMLInputElement>) {
setConfirmPassword(e.target.value);
console.log(confirmPassword);
const {ref: confirmPassRef, ...confirmPassRegisterProps} = register("confirm_password");
const confirmPassProps = {
...confirmPassRegisterProps,
inputRef: confirmPassRef,
className: "textField",
name: "confirm_password",
id: "confirm_password",
label: "Confirm Password",
error: !!errors.confirm_password,
helperText: errors?.confirm_password?.message,
}
function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
e.preventDefault();
if (password == confirmPassword && password.length != 0){
console.log(`Sumbitting password "${hash(password)}"`)
navigate("/login")
}
else{
console.warn("Passwords are not matching or are empty");
}
function onSubmit(data: Inputs) {
console.log("There will be an API call now with the following data");
data = {password: hash(data.password), confirm_password: hash(data.confirm_password)}
console.table(data);
// setTimeout(() => navigate("/?logged"), 3000)
}
return (
<main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card">
<h3>Reset Password</h3>
<TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword} />
<TextField className="textfield" id="configrmPassword" label="Confirm Password" type="password" value={confirmPassword} onChange={handleConfirmPassword} />
<Button id="submit" variant="contained" onClick={buttonSubmit}>Reset Password</Button>
<TextField {...passProps}/>
<TextField {...confirmPassProps}/>
<Button type="submit" id="submit" variant="contained">Reset Password</Button>
</Card>
</form>
</main>
)
}