From 9728321bf8656fc381f8cf2956fbadfcc8168d15 Mon Sep 17 00:00:00 2001 From: Karma Riuk Date: Wed, 26 Oct 2022 19:02:19 +0200 Subject: [PATCH] Made each form use useForm --- src/components/ForgotPassword.tsx | 57 +++++++++++++------- src/components/Login.tsx | 4 +- src/components/Reset.tsx | 86 +++++++++++++++++++++---------- 3 files changed, 96 insertions(+), 51 deletions(-) diff --git a/src/components/ForgotPassword.tsx b/src/components/ForgotPassword.tsx index c4ba8fb..ac4dfcf 100644 --- a/src/components/ForgotPassword.tsx +++ b/src/components/ForgotPassword.tsx @@ -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({ + resolver: yupResolver(schema), // yup, joi and even your own. + }); - function handleEmail(e: ChangeEvent) { - 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) { @@ -17,27 +39,22 @@ export default function ForgotPassword() { navigate("/login") } - function buttonSubmit(e: MouseEvent) { - 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 (
- +
+

Forgot Passowrd

If you have forgot your password, we can send you an email with a link to reset it.

- +
- + +
); } diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 9aad1f5..228b9bf 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -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, diff --git a/src/components/Reset.tsx b/src/components/Reset.tsx index 984f2e6..f2a8dd9 100644 --- a/src/components/Reset.tsx +++ b/src/components/Reset.tsx @@ -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({ + 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) { - setPassword(e.target.value); - console.log(hash(password)); - } - - function handleConfirmPassword(e: ChangeEvent) { - setConfirmPassword(e.target.value); - console.log(confirmPassword); + 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 buttonSubmit(e: MouseEvent) { - 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"); - } + 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 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 (
- -

Reset Password

- - - - +
+ +

Reset Password

+ + + + +
+ ) }