1+ import React , { useState } from "react" ;
2+ import "./ForgotPasswordPage.css" ;
3+ import Button from "@material-ui/core/Button" ;
4+ import Logo from "../../images/databucket-logo.png" ;
5+ import { Input , InputLabel , Paper } from "@material-ui/core" ;
6+ import Typography from "@material-ui/core/Typography" ;
7+ import FormControl from "@material-ui/core/FormControl" ;
8+ import { MessageBox } from "../utils/MessageBox" ;
9+ import Link from "@material-ui/core/Link" ;
10+ import { Redirect } from "react-router-dom" ;
11+ import { getBaseUrl , getContextPath } from "../../utils/UrlBuilder" ;
12+ import { handleLoginErrors } from "../../utils/FetchHelper" ;
13+ import { validateEmail } from "../../utils/Misc" ;
14+
15+ export default function ForgotPasswordPage ( ) {
16+
17+ const [ back , setBack ] = useState ( false ) ;
18+ const [ email , setEmail ] = useState ( "" ) ;
19+ const [ messageBox , setMessageBox ] = useState ( { open : false , severity : 'error' , title : '' , message : '' } ) ;
20+
21+ const onChange = e => {
22+ setEmail ( e . target . value ) ;
23+ } ;
24+
25+ const handleReset = ( ) => {
26+ fetch ( getBaseUrl ( 'public/forgot-password' ) , {
27+ method : 'POST' ,
28+ body : JSON . stringify ( { email : email , url : window . location . origin + getContextPath ( ) + "/confirmation/forgot-password/" } ) ,
29+ headers : { 'Content-Type' : 'application/json' }
30+ } )
31+ . then ( handleLoginErrors )
32+ . then ( response => {
33+ setMessageBox ( { open : true , severity : 'info' , title : 'Send confirmation email' , message : null } ) ;
34+ } ) . catch ( error => {
35+ setMessageBox ( { open : true , severity : 'error' , title : 'Sending confirmation password failed' , message : error } ) ;
36+ }
37+ ) ;
38+ }
39+
40+ const handleKeypress = e => {
41+ if ( e . key === 'Enter' )
42+ handleReset ( ) ;
43+ } ;
44+
45+ if ( back )
46+ return ( < Redirect to = "/login" /> ) ;
47+ else
48+ return (
49+ < div className = "ContainerClass" >
50+ { < img src = { Logo } alt = '' /> }
51+ < Paper className = "PaperClass" elevation = { 3 } >
52+ < Typography className = "Title" variant = "h5" >
53+ Forgot your password?
54+ </ Typography >
55+ < Typography className = "Description" >
56+ Please enter the email address for your account.
57+ A verification link will be sent to you.
58+ Once you have received the verification link,
59+ you will be able to choose a new password for your account.
60+ </ Typography >
61+ < FormControl className = "EmailInputText" >
62+ < InputLabel htmlFor = "standard-adornment-email" > Email</ InputLabel >
63+ < Input
64+ id = "standard-adornment-email"
65+ name = "email"
66+ type = 'email'
67+ value = { email }
68+ onChange = { onChange }
69+ onKeyPress = { ( event ) => handleKeypress ( event ) }
70+ />
71+ </ FormControl >
72+ < div className = "Button" >
73+ < Button
74+ fullWidth = { true }
75+ variant = "contained"
76+ color = "primary"
77+ size = { 'large' }
78+ disabled = { ! ( validateEmail ( email ) ) }
79+ onClick = { ( ) => {
80+ handleReset ( ) ;
81+ } }
82+ >
83+ Submit
84+ </ Button >
85+ </ div >
86+ < div className = "BackLink" >
87+ < Link
88+ component = "button"
89+ color = "inherit"
90+ onClick = { ( ) => {
91+ setBack ( true ) ;
92+ } }
93+ >
94+ Back
95+ </ Link >
96+ </ div >
97+ </ Paper >
98+ < MessageBox
99+ config = { messageBox }
100+ onClose = { ( ) => setMessageBox ( { ...messageBox , open : false } ) }
101+ />
102+ </ div >
103+ ) ;
104+ }
0 commit comments