From 24d9bd2c0748723077938b4423d6a528020fbcc1 Mon Sep 17 00:00:00 2001 From: Arnaud Fauconnet Date: Thu, 20 Oct 2022 11:53:28 +0200 Subject: [PATCH] Created the reset passowrd component. Linked every page for the lifecycle of the user forgetting his password. --- src/components/ForgotPassword.tsx | 10 ++++++- src/components/Login.tsx | 15 ++++++---- src/components/Reset.tsx | 46 +++++++++++++++++++++++++++++++ src/components/index.tsx | 7 +++++ src/index.tsx | 20 +++++++++++--- src/scss/reset.scss | 2 ++ src/scss/variables.module.scss | 2 -- tsconfig.json | 1 + 8 files changed, 90 insertions(+), 13 deletions(-) create mode 100644 src/components/Reset.tsx create mode 100644 src/components/index.tsx create mode 100644 src/scss/reset.scss diff --git a/src/components/ForgotPassword.tsx b/src/components/ForgotPassword.tsx index ab39e31..6426677 100644 --- a/src/components/ForgotPassword.tsx +++ b/src/components/ForgotPassword.tsx @@ -1,18 +1,26 @@ import React, { useState, ChangeEvent, MouseEvent } from "react"; import { Card, Button, TextField } from "@mui/material"; +import { useNavigate } from "react-router-dom"; import "@scss/forgot_password.scss"; export default function ForgotPassword() { const [email, setEmail] = useState(""); + const navigate = useNavigate(); function handleEmail(e: ChangeEvent) { setEmail(e.target.value); console.log(email); } + function buttonCancel(e: MouseEvent) { + e.preventDefault(); + navigate("/") + } + function buttonSubmit(e: MouseEvent) { e.preventDefault(); console.log(`Sumbitting email "${email}" to which send a link.`); + navigate("/reset") } return ( @@ -34,7 +42,7 @@ export default function ForgotPassword() { diff --git a/src/components/Login.tsx b/src/components/Login.tsx index fa94b44..a88ddd5 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -1,28 +1,31 @@ import React, { useState, ChangeEvent, MouseEvent } from "react"; import { Card, Button, TextField } from "@mui/material" import "@scss/login.scss" +import { Link, Navigate, useNavigate } from "react-router-dom"; export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const navigate = useNavigate(); - function hash(s: string){ + function hash(s: string) { return s; } - function handleEmail(e: ChangeEvent){ + function handleEmail(e: ChangeEvent) { setEmail(e.target.value); console.log(email); } - function handlePassword(e: ChangeEvent){ + function handlePassword(e: ChangeEvent) { setPassword(e.target.value); console.log(hash(password)); } - function buttonSubmit(e: MouseEvent){ + function buttonSubmit(e: MouseEvent) { e.preventDefault(); console.log(`Sumbitting username "${email}" and password "${hash(password)}"`) + navigate("/main") } return ( @@ -30,9 +33,9 @@ export default function Login() {

Login

- + -

Forgot your password?

+

Forgot your password?

 ) diff --git a/src/components/Reset.tsx b/src/components/Reset.tsx new file mode 100644 index 0000000..5589662 --- /dev/null +++ b/src/components/Reset.tsx @@ -0,0 +1,46 @@ +import React, { useState, ChangeEvent, MouseEvent } from "react"; +import { Card, Button, TextField } from "@mui/material" +import { useNavigate } from "react-router-dom"; +import "@scss/reset.scss" + +export default function Reset() { + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const navigate = useNavigate(); + + function hash(s: string) { + return s; + } + + function handlePassword(e: ChangeEvent) { + setPassword(e.target.value); + console.log(hash(password)); + } + + function handleConfirmPassword(e: ChangeEvent) { + setConfirmPassword(e.target.value); + console.log(confirmPassword); + } + + function buttonSubmit(e: MouseEvent) { + e.preventDefault(); + if (password == confirmPassword && password.length != 0){ + console.log(`Sumbitting password "${hash(password)}"`) + navigate("/") + } + else{ + console.warn("Passwords are not matching or are empty"); + } + } + + return ( +
+ +

Reset Password

+ + + + +
+ ) +} diff --git a/src/components/index.tsx b/src/components/index.tsx new file mode 100644 index 0000000..68d5dfc --- /dev/null +++ b/src/components/index.tsx @@ -0,0 +1,7 @@ +import App from "@components/App"; +import Login from "@components/Login"; +import ForgotPassword from "@components/ForgotPassword"; +import Reset from "@components/Reset"; +import ErrorPage from "@components/ErrorPage"; + +export { App, Login, ForgotPassword, Reset, ErrorPage }; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index f841048..2b8d95d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,15 +1,27 @@ import * as React from "react"; import { createRoot } from "react-dom/client"; -import App from "@components/App"; -import ErrorPage from "@components/ErrorPage"; -import { createBrowserRouter, RouterProvider, Route } from "react-router-dom"; +import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom"; +import { ErrorPage, Login, ForgotPassword, Reset } from "@components"; + const router = createBrowserRouter([ { path: "/", - element: , + element: , errorElement: , }, + { + path: "/login", + element: , + }, + { + path: "/forgot", + element: , + }, + { + path: "/reset", + element: , + }, ]); createRoot(document.querySelector("#root")).render( diff --git a/src/scss/reset.scss b/src/scss/reset.scss new file mode 100644 index 0000000..64cac64 --- /dev/null +++ b/src/scss/reset.scss @@ -0,0 +1,2 @@ +@use "style.scss"; +@use "cards.scss"; \ No newline at end of file diff --git a/src/scss/variables.module.scss b/src/scss/variables.module.scss index bd6c5b0..c9df605 100644 --- a/src/scss/variables.module.scss +++ b/src/scss/variables.module.scss @@ -1,4 +1,2 @@ $bg1: #333; $fg1: #c5c8c6; - -// :export {} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 4ac0a70..9165b22 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,7 @@ "moduleResolution": "node", "baseUrl": "./src", "paths" : { + "@components": ["components"], "@components/*": ["components/*"], "@scss/*": ["scss/*"], }