Доработаны формы восстановления пароля

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"

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 {
                     <span className={icons.lock} />
                 </div>
 
-                {login ? (
+                {isLoginEditShown ? (
-                    <div>
-                        <div className={styles.login}>
-                            {login}
-                        </div>
-                        <p className={styles.descriptionText}>
-                            <Message {...messages.pleasePressButton} />
-                        </p>
-                    </div>
-                ) : (
                     <div>
                         <p className={styles.descriptionText}>
                             <Message {...messages.specifyEmail} />
@@ -50,6 +54,16 @@ export default class ForgotPasswordBody extends BaseAuthBody {
                             defaultValue={login}
                         />
                     </div>
+                ) : (
+                    <div>
+                        <div className={styles.login}>
+                            {login}
+                            <span className={styles.editLogin} onClick={this.onClickEdit} />
+                        </div>
+                        <p className={styles.descriptionText}>
+                            <Message {...messages.pleasePressButton} />
+                        </p>
+                    </div>
                 )}
             </div>
         );

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;
+    }
+}

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:",

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 {
                         <Message {...messages.messageWasSentTo} values={{
                             email: <b>{user.maskedEmail}</b>
                         }} />
-                    ) : null}
+                    ) : (
+                        <Message {...messages.messageWasSent} />
+                    )}
                     {' '}
                     <Message {...messages.enterCodeBelow} />
                 </p>
 
                 <Input {...this.bindField('key')}
                     color="lightViolet"
-                    style={{textAlign: 'center'}}
+                    style={{textAlign: 'center'}} // ну это уже низко
                     required
                     value={key}
                     readOnly={!!key}

src/components/auth/recoverPassword/recoverPassword.scss

@@ -3,6 +3,6 @@
 .descriptionText {
     font-size: 15px;
     line-height: 1.4;
-    padding-bottom: 8px;
+    margin-bottom: 8px;
     color: #aaa;
 }

src/i18n/en.json

@@ -14,7 +14,7 @@
     "components.auth.activation.didNotReceivedEmail": "Did not received E-mail?",
     "components.auth.activation.enterTheCode": "Enter the code from E-mail here",
     "components.auth.appInfo.goToAuth": "Go to auth",
-    "components.auth.changePassword.change": "Change",
+    "components.auth.changePassword.change": "Change password",
     "components.auth.changePassword.changePasswordMessage": "To enhance the security of your account, please change your password.",
     "components.auth.changePassword.changePasswordTitle": "Change password",
     "components.auth.changePassword.currentPassword": "Enter current password",
@@ -54,6 +54,7 @@
     "components.auth.recoverPassword.enterCodeBelow": "Please enter the code received into the field below:",
     "components.auth.recoverPassword.enterNewPasswordBelow": "Enter and repeat new password below:",
     "components.auth.recoverPassword.enterTheCode": "Enter confirmation code",
+    "components.auth.recoverPassword.messageWasSent": "The recovery code was sent to your account email.",
     "components.auth.recoverPassword.messageWasSentTo": "The recovery code was sent to your email {email}.",
     "components.auth.recoverPassword.title": "Restore password",
     "components.auth.register.acceptRules": "I agree with {link}",

src/i18n/ru.json

@@ -14,7 +14,7 @@
     "components.auth.activation.didNotReceivedEmail": "Did not received E-mail?",
     "components.auth.activation.enterTheCode": "Enter the code from E-mail here",
     "components.auth.appInfo.goToAuth": "Go to auth",
-    "components.auth.changePassword.change": "Change",
+    "components.auth.changePassword.change": "Сменить пароль",
     "components.auth.changePassword.changePasswordMessage": "To enhance the security of your account, please change your password.",
     "components.auth.changePassword.changePasswordTitle": "Change password",
     "components.auth.changePassword.currentPassword": "Enter current password",
@@ -54,6 +54,7 @@
     "components.auth.recoverPassword.enterCodeBelow": "Please enter the code received into the field below:",
     "components.auth.recoverPassword.enterNewPasswordBelow": "Enter and repeat new password below:",
     "components.auth.recoverPassword.enterTheCode": "Enter confirmation code",
+    "components.auth.recoverPassword.messageWasSent": "The recovery code was sent to your account email.",
     "components.auth.recoverPassword.messageWasSentTo": "The recovery code was sent to your email {email}.",
     "components.auth.recoverPassword.title": "Restore password",
     "components.auth.register.acceptRules": "I agree with {link}",