diff --git a/src/components/auth/changePassword/ChangePassword.intl.json b/src/components/auth/changePassword/ChangePassword.intl.json index 3770687..81afbdf 100644 --- a/src/components/auth/changePassword/ChangePassword.intl.json +++ b/src/components/auth/changePassword/ChangePassword.intl.json @@ -2,7 +2,7 @@ "changePasswordTitle": "Change password", "changePasswordMessage": "To enhance the security of your account, please change your password.", "skipThisStep": "Skip password changing", - "change": "Change", + "change": "Change password", "currentPassword": "Enter current password", "newPassword": "Enter new password", "newRePassword": "Repeat new password" diff --git a/src/components/auth/forgotPassword/ForgotPasswordBody.jsx b/src/components/auth/forgotPassword/ForgotPasswordBody.jsx index daa6336..fae1612 100644 --- a/src/components/auth/forgotPassword/ForgotPasswordBody.jsx +++ b/src/components/auth/forgotPassword/ForgotPasswordBody.jsx @@ -14,9 +14,22 @@ export default class ForgotPasswordBody extends BaseAuthBody { static panelId = 'forgotPassword'; static hasGoBack = true; + state = { + isLoginEdit: !(this.context.user.email || this.context.user.username) + }; + + autoFocusField = this.state.isLoginEdit ? 'email' : null; + + onClickEdit = () => { + this.setState({ + isLoginEdit: true + }); + }; + render() { const { user } = this.context; - const login = user.email || user.username; + const login = user.email || user.username || ''; + const isLoginEditShown = this.state.isLoginEdit; // TODO: нужно парсить инфу о том, какой кд у отправки кода и во сколько точно можно будет повторить @@ -28,16 +41,7 @@ export default class ForgotPasswordBody extends BaseAuthBody { - {login ? ( -
-
- {login} -
-

- -

-
- ) : ( + {isLoginEditShown ? (

@@ -50,6 +54,16 @@ export default class ForgotPasswordBody extends BaseAuthBody { defaultValue={login} />

+ ) : ( +
+
+ {login} + +
+

+ +

+
)} ); diff --git a/src/components/auth/forgotPassword/forgotPassword.scss b/src/components/auth/forgotPassword/forgotPassword.scss index 46bd2e1..96f8313 100644 --- a/src/components/auth/forgotPassword/forgotPassword.scss +++ b/src/components/auth/forgotPassword/forgotPassword.scss @@ -18,3 +18,22 @@ .login { composes: email from 'components/auth/password/password.scss'; } + +.editLogin { + composes: pencil from 'components/ui/icons.scss'; + + position: relative; + bottom: 1px; + padding-left: 3px; + + color: #666666; + font-size: 10px; + + transition: color .3s; + + cursor: pointer; + + &:hover { + color: #ccc; + } +} diff --git a/src/components/auth/recoverPassword/RecoverPassword.intl.json b/src/components/auth/recoverPassword/RecoverPassword.intl.json index 4743dc1..03bdb3b 100644 --- a/src/components/auth/recoverPassword/RecoverPassword.intl.json +++ b/src/components/auth/recoverPassword/RecoverPassword.intl.json @@ -1,6 +1,7 @@ { "title": "Restore password", "contactSupport": "Contact support", + "messageWasSent": "The recovery code was sent to your account email.", "messageWasSentTo": "The recovery code was sent to your email {email}.", "enterCodeBelow": "Please enter the code received into the field below:", "enterNewPasswordBelow": "Enter and repeat new password below:", diff --git a/src/components/auth/recoverPassword/RecoverPasswordBody.jsx b/src/components/auth/recoverPassword/RecoverPasswordBody.jsx index 96a45d7..71d70d8 100644 --- a/src/components/auth/recoverPassword/RecoverPasswordBody.jsx +++ b/src/components/auth/recoverPassword/RecoverPasswordBody.jsx @@ -25,7 +25,6 @@ export default class RecoverPasswordBody extends BaseAuthBody { autoFocusField = this.props.params && this.props.params.key ? 'newPassword' : 'key'; - // Если юзер вводил своё мыло во время попытки авторизации, то почему бы его сюда автоматически не подставить? render() { const {user} = this.context; const {key} = this.props.params; @@ -39,14 +38,16 @@ export default class RecoverPasswordBody extends BaseAuthBody { {user.maskedEmail} }} /> - ) : null} + ) : ( + + )} {' '}