2019-12-30 14:17:29 +05:30
import React from 'react' ;
2020-06-04 22:11:27 +05:30
import { defineMessages , FormattedMessage as Message } from 'react-intl' ;
2019-12-30 12:59:39 +05:30
import { Helmet } from 'react-helmet-async' ;
2020-05-24 04:38:24 +05:30
import { Input , Button , Checkbox , Form , FormModel } from 'app/components/ui/form' ;
2019-12-08 00:32:00 +05:30
2019-12-30 14:17:29 +05:30
import { BackButton } from '../ProfileForm' ;
import styles from '../profileForm.scss' ;
2020-06-04 22:11:27 +05:30
const labels = defineMessages ( {
changePasswordButton : 'Change password' ,
newPasswordLabel : 'New password:' ,
repeatNewPasswordLabel : 'Repeat the password:' ,
logoutOnAllDevices : 'Logout on all devices' ,
} ) ;
2016-04-17 15:05:04 +05:30
2019-12-30 14:17:29 +05:30
interface Props {
2020-05-24 04:38:24 +05:30
form : FormModel ;
onSubmit : ( form : FormModel ) = > Promise < void > ;
2019-12-30 14:17:29 +05:30
}
2016-05-01 23:20:55 +05:30
2019-12-30 14:17:29 +05:30
export default class ChangePassword extends React . Component < Props > {
2020-05-24 04:38:24 +05:30
static get defaultProps ( ) : Partial < Props > {
return {
form : new FormModel ( ) ,
} ;
}
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
render() {
const { form } = this . props ;
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
return (
< Form onSubmit = { this . onFormSubmit } form = { form } >
< div className = { styles . contentWithBackButton } >
< BackButton / >
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
< div className = { styles . form } >
< div className = { styles . formBody } >
2020-06-04 22:11:27 +05:30
< Message key = "changePasswordTitle" defaultMessage = "Change password" >
2020-05-24 04:38:24 +05:30
{ ( pageTitle ) = > (
< h3 className = { styles . title } >
< Helmet title = { pageTitle as string } / >
{ pageTitle }
< / h3 >
) }
< / Message >
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
< div className = { styles . formRow } >
< p className = { styles . description } >
2020-06-04 22:11:27 +05:30
< Message
key = "changePasswordDescription"
defaultMessage = "Please take a password, that will be different from your passwords on the other sites and will not be the same you are using to enter Minecraft game servers you are playing."
/ >
2020-05-24 04:38:24 +05:30
< br / >
< b >
2020-06-04 22:11:27 +05:30
< Message
key = "achievementLossWarning"
defaultMessage = "Are you cherish your game achievements, right?"
/ >
2020-05-24 04:38:24 +05:30
< / b >
< / p >
< / div >
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
< div className = { styles . formRow } >
< Input
{ . . . form . bindField ( 'newPassword' ) }
type = "password"
required
skin = "light"
2020-06-04 22:11:27 +05:30
label = { labels . newPasswordLabel }
2020-05-24 04:38:24 +05:30
/ >
< / div >
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
< div className = { styles . formRow } >
< p className = { styles . description } >
2020-06-04 22:11:27 +05:30
< Message
key = "passwordRequirements"
defaultMessage = "Password must contain at least 8 characters. It can be any symbols — do not limit yourself, create an unpredictable password!"
/ >
2020-05-24 04:38:24 +05:30
< / p >
< / div >
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
< div className = { styles . formRow } >
< Input
{ . . . form . bindField ( 'newRePassword' ) }
type = "password"
required
skin = "light"
2020-06-04 22:11:27 +05:30
label = { labels . repeatNewPasswordLabel }
2020-05-24 04:38:24 +05:30
/ >
< / div >
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
< div className = { styles . formRow } >
< Checkbox
{ . . . form . bindField ( 'logoutAll' ) }
defaultChecked
skin = "light"
2020-06-04 22:11:27 +05:30
label = { labels . logoutOnAllDevices }
2020-05-24 04:38:24 +05:30
/ >
< / div >
< / div >
2019-11-27 14:33:32 +05:30
2020-06-04 22:11:27 +05:30
< Button color = "green" block label = { labels . changePasswordButton } type = "submit" / >
2020-05-24 04:38:24 +05:30
< / div >
< / div >
< / Form >
) ;
}
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
onFormSubmit = ( ) = > {
const { form } = this . props ;
2019-11-27 14:33:32 +05:30
2020-05-24 04:38:24 +05:30
this . props . onSubmit ( form ) . catch ( ( resp ) = > {
if ( resp . errors ) {
form . setErrors ( resp . errors ) ;
} else {
return Promise . reject ( resp ) ;
}
} ) ;
} ;
2016-04-17 15:05:04 +05:30
}