Add password reset

This commit is contained in:
pikiou
2022-01-05 02:05:07 +01:00
parent 395955f32a
commit adde4f366e
35 changed files with 459 additions and 178 deletions

View File

@@ -0,0 +1,48 @@
import React, { memo, useCallback } from "react"
import { Link } from "react-router-dom"
import { AppDispatch } from "../../store"
import { fetchVolunteerForgot } from "../../store/volunteerForgot"
import styles from "./styles.module.scss"
interface Props {
dispatch: AppDispatch
error: string
message: string
}
const ForgotForm = ({ dispatch, error, message }: Props): JSX.Element => {
const onSubmit = useCallback(
(event: React.SyntheticEvent): void => {
event.preventDefault()
const target = event.target as typeof event.target & {
email: { value: string }
}
const email = target.email.value
dispatch(fetchVolunteerForgot({ email }))
},
[dispatch]
)
return (
<form onSubmit={onSubmit}>
<div className={styles.forgotIntro} key="forgot-intro">
Nous allons te renvoyer un mot de passe à l&apos;adresse suivante.
</div>
<div className={styles.formLine} key="line-email">
<label htmlFor="email">Email</label>
<input type="email" id="email" name="utilisateur" />
</div>
<div className={styles.formButtons}>
<button type="submit">Connexion</button>
</div>
<div className={styles.error}>{error}</div>
<div className={styles.message}>{message}</div>
<div className={styles.link}>
<Link to="/login"> S&apos;identifier </Link>
</div>
</form>
)
}
export default memo(ForgotForm)

View File

@@ -0,0 +1,43 @@
@import "../../theme/variables";
@import "../../theme/mixins";
.forgotIntro {
margin-bottom: 10px;
}
.formLine {
padding: 5px 0;
label {
display: block;
margin-left: 5px;
}
input {
width: 100%;
border: 1px solid #333;
border-radius: 4px;
}
}
.formButtons {
margin-top: 10px;
padding: 5px 0;
text-align: center;
}
.message {
margin-top: 10px;
color: rgb(11, 138, 0);
text-align: center;
}
.error {
margin-top: 10px;
color: rgb(255, 0, 0);
text-align: center;
}
.link {
margin-top: 20px;
text-align: center;
}

View File

@@ -1,7 +1,8 @@
import React, { memo, useCallback } from "react"
import styles from "./styles.module.scss"
import { Link } from "react-router-dom"
import { AppDispatch } from "../../store"
import { fetchVolunteerLogin } from "../../store/volunteerLogin"
import styles from "./styles.module.scss"
interface Props {
dispatch: AppDispatch
@@ -41,6 +42,9 @@ const LoginForm = ({ dispatch, error }: Props): JSX.Element => {
<button type="submit">Connexion</button>
</div>
<div className={styles.error}>{error}</div>
<div className={styles.link}>
<Link to="/forgot"> Demander un nouveau mot de passe </Link>
</div>
</form>
)
}

View File

@@ -26,5 +26,12 @@
}
.error {
margin-top: 10px;
color: rgb(255, 0, 0);
text-align: center;
}
.link {
margin-top: 20px;
text-align: center;
}

View File

@@ -22,9 +22,9 @@ describe("<VolunteerInfo />", () => {
adult: 1,
privileges: 0,
active: 0,
comment: "",
timestamp: new Date(0),
password: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
created: new Date(0),
password1: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
password2: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
}}
/>
</MemoryRouter>

View File

@@ -23,9 +23,10 @@ describe("<VolunteerList />", () => {
adult: 1,
privileges: 0,
active: 0,
comment: "",
timestamp: new Date(0),
password:
created: new Date(0),
password1:
"$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
password2:
"$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
},
]}

View File

@@ -24,9 +24,9 @@ describe("<SetVolunteer />", () => {
adult: 1,
privileges: 0,
active: 0,
comment: "",
timestamp: new Date(0),
password: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
created: new Date(0),
password1: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
password2: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
}}
/>
</MemoryRouter>