mirror of
https://github.com/Paris-est-Ludique/intranet.git
synced 2025-09-11 13:56:29 +02:00
Add password reset
This commit is contained in:
48
src/components/ForgotForm/ForgotForm.tsx
Normal file
48
src/components/ForgotForm/ForgotForm.tsx
Normal 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'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'identifier </Link>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(ForgotForm)
|
43
src/components/ForgotForm/styles.module.scss
Executable file
43
src/components/ForgotForm/styles.module.scss
Executable 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;
|
||||
}
|
@@ -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>
|
||||
)
|
||||
}
|
||||
|
@@ -26,5 +26,12 @@
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-top: 10px;
|
||||
color: rgb(255, 0, 0);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
@@ -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>
|
||||
|
@@ -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",
|
||||
},
|
||||
]}
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user