Formatted the code of components

This commit is contained in:
Karma Riuk 2022-10-26 22:40:09 +02:00
parent de07c92579
commit 61d31fa3c4
3 changed files with 94 additions and 62 deletions

View File

@ -2,28 +2,36 @@ import React, { MouseEvent } from "react";
import { Card, Button, TextField } from "@mui/material";
import "@scss/forgot_password.scss";
import { useNavigate } from "react-router-dom";
import { yupResolver } from '@hookform/resolvers/yup';
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form"
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();
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 navigate = useNavigate();
const { register, formState: { errors }, handleSubmit } = useForm<Inputs>({
resolver: yupResolver(schema), // yup, joi and even your own.
const {
register,
formState: { errors },
handleSubmit,
} = useForm<Inputs>({
resolver: yupResolver(schema),
});
const {ref: emailRef, ...emailRegisterProps} = register("email");
const { ref: emailRef, ...emailRegisterProps } = register("email");
const emailProps = {
...emailRegisterProps,
inputRef: emailRef,
@ -32,17 +40,19 @@ export default function ForgotPassword() {
label: "Email",
error: !!errors.email,
helperText: errors?.email?.message,
}
};
function buttonCancel(e: MouseEvent<HTMLButtonElement>) {
e.preventDefault();
navigate("/login")
navigate("/login");
}
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")
console.log(
"You can now go to http://localhost:8080/reset to acces the reset form"
);
}
return (
@ -51,8 +61,8 @@ export default function ForgotPassword() {
<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.
If you have forgot your password, we can send you an
email with a link to reset it.
</p>
<TextField {...emailProps} />
<div className="buttons">
@ -63,11 +73,7 @@ export default function ForgotPassword() {
>
Cancel
</Button>
<Button
type="submit"
id="submit"
variant="contained"
>
<Button type="submit" id="submit" variant="contained">
Submit
</Button>
</div>

View File

@ -1,32 +1,42 @@
import React from "react";
import { Card, Button, TextField } from "@mui/material"
import "@scss/login.scss"
import { Card, Button, TextField } from "@mui/material";
import "@scss/login.scss";
import { Link, useNavigate } from "react-router-dom";
import { yupResolver } from '@hookform/resolvers/yup';
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form"
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"),
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();
})
.required();
export default function Login() {
const navigate = useNavigate();
const { register, formState: { errors }, handleSubmit } = useForm<Inputs>({
resolver: yupResolver(schema), // yup, joi and even your own.
const {
register,
formState: { errors },
handleSubmit,
} = useForm<Inputs>({
resolver: yupResolver(schema),
});
function hash(s: string) {
return `hash of '${s}' to be definied`;
}
const {ref: emailRef, ...emailRegisterProps} = register("email");
const { ref: emailRef, ...emailRegisterProps } = register("email");
const emailProps = {
...emailRegisterProps,
@ -37,9 +47,9 @@ export default function Login() {
label: "Email",
error: !!errors.email,
helperText: errors?.email?.message,
}
};
const {ref: passRef, ...passRegisterProps} = register("password");
const { ref: passRef, ...passRegisterProps } = register("password");
const passProps = {
...passRegisterProps,
@ -50,27 +60,30 @@ export default function Login() {
label: "Password",
error: !!errors.password,
helperText: errors?.password?.message,
}
};
function onSubmit(data: Inputs) {
console.log("There will be an API call now with the following data");
data = { ...data, password: hash(data.password) }
data = { ...data, password: hash(data.password) };
console.table(data);
setTimeout(() => navigate("/?logged"), 3000)
setTimeout(() => navigate("/?logged"), 3000);
}
return (
<main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card">
<h3>Login</h3>
<TextField {...emailProps} />
<TextField {...passProps}/>
<Button type="submit" id="submit" variant="contained">Login</Button>
<p>Forgot your <Link to="/forgot">password</Link>?</p>
<TextField {...passProps} />
<Button type="submit" id="submit" variant="contained">
Login
</Button>
<p>
Forgot your <Link to="/forgot">password</Link>?
</p>
</Card>
</form>
</main>
)
);
}

View File

@ -1,33 +1,42 @@
import React, { ChangeEvent, MouseEvent } from "react";
import { Card, Button, TextField } from "@mui/material"
import "@scss/reset.scss"
import { Card, Button, TextField } from "@mui/material";
import "@scss/reset.scss";
import { useNavigate } from "react-router-dom";
import { yupResolver } from '@hookform/resolvers/yup';
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form"
import { useForm } from "react-hook-form";
type Inputs = {
password: string;
confirm_password: string;
};
const schema = yup.object().shape({
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();
confirm_password: yup
.string()
.oneOf([yup.ref("password"), null], "Passwords must match"),
})
.required();
export default function Reset() {
const navigate = useNavigate();
const { register, formState: { errors }, handleSubmit } = useForm<Inputs>({
resolver: yupResolver(schema), // yup, joi and even your own.
const {
register,
formState: { errors },
handleSubmit,
} = useForm<Inputs>({
resolver: yupResolver(schema),
});
function hash(s: string) {
return `hash of '${s}' to be definied`;
}
const {ref: passRef, ...passRegisterProps} = register("password");
const { ref: passRef, ...passRegisterProps } = register("password");
const passProps = {
...passRegisterProps,
@ -38,9 +47,10 @@ export default function Reset() {
label: "Password",
error: !!errors.password,
helperText: errors?.password?.message,
}
};
const {ref: confirmPassRef, ...confirmPassRegisterProps} = register("confirm_password");
const { ref: confirmPassRef, ...confirmPassRegisterProps } =
register("confirm_password");
const confirmPassProps = {
...confirmPassRegisterProps,
@ -51,13 +61,15 @@ export default function Reset() {
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)}
data = {
password: hash(data.password),
confirm_password: hash(data.confirm_password),
};
console.table(data);
// setTimeout(() => navigate("/?logged"), 3000)
}
return (
@ -65,12 +77,13 @@ export default function Reset() {
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card">
<h3>Reset Password</h3>
<TextField {...passProps}/>
<TextField {...confirmPassProps}/>
<Button type="submit" id="submit" variant="contained">Reset Password</Button>
<TextField {...passProps} />
<TextField {...confirmPassProps} />
<Button type="submit" id="submit" variant="contained">
Reset Password
</Button>
</Card>
</form>
</main>
)
);
}