password reset seems to work correctly

src/i18n/de.json

@@ -1307,8 +1307,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "Eine E-Mail wurde an {email} gesendet. Folgen Sie den Anweisungen in der E-Mail, um Ihr Passwort zurückzusetzen.",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "Eine E-Mail mit Sicherheitscode wurde gesendet.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "Eine Textnachricht mit Sicherheitscode wurde an {phone} gesendet. Geben Sie den Code unten ein.",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "Eine SMS mit einem Sicherheitscode wurde gesendet.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/en.json

@@ -1314,8 +1314,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "An email has been sent to {email}. Follow the directions in the email to reset your password.",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "An email with security code has been sent.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "A text message with security code has been sent to {phone}. Enter the code below.",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "A text message with security code has been sent.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/es.json

@@ -1307,8 +1307,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "Se ha enviado un correo electrónico a {email}. Siga las instrucciones del correo electrónico para restablecer su contraseña.",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "Se ha enviado un correo electrónico con el código de seguridad.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "Se ha enviado un mensaje de texto con un código de seguridad a {phone}. Ingresa el código a continuación.",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "Se ha enviado un mensaje de texto con un código de seguridad.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/ex/base-en.json

@@ -689,11 +689,11 @@
     "description": "Placeholder/prompt for entering password"
   },
   "password_reset_email_sent": {
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent"
   },
   "password_reset_sms_sent": {
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent"
   },
   "password_unchanged_prompt": {

src/i18n/fr.json

@@ -1314,8 +1314,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "Un email a été envoyé à {email}. Suivez les instructions du mail pour remettre à zéro votre mot de passe.",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "Un e-mail avec code de sécurité a été envoyé.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "Un SMS avec un code de sécurité a été envoyé à {phone}. Saisissez le code ci-dessous.",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "Un message texte avec un code de sécurité a été envoyé.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/ko.json

@@ -1307,8 +1307,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "이메일이 {email}(으)로 전송되었습니다. 이메일의 지침에 따라 비밀번호를 재설정하세요.",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "보안 코드가 포함된 이메일이 전송되었습니다.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "보안 코드가 포함된 문자 메시지가 {phone}로 전송되었습니다. 아래 코드를 입력하세요.",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "보안 코드가 포함된 문자 메시지가 전송되었습니다.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/ro.json

@@ -1307,8 +1307,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "Un e-mail a fost trimis către {email}. Urmați instrucțiunile din e-mail pentru a vă reseta parola.",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "A fost trimis un e-mail cu cod de securitate.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "Un mesaj text cu cod de securitate a fost trimis la {phone}. Introduceți codul de mai jos.",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "A fost trimis un mesaj text cu cod de securitate.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/ru.json

@@ -1307,8 +1307,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "Сообщение было отправлено на адрес {email}. Следуйте инструкциям в сообщении, чтобы изменить пароль.",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "Сообщение было отправлено на указанный email.",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "SMS с защитным кодом отправлено на {phone}. Введите код ниже.",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "SMS с защитным кодом отправлен.",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/zh-TW.json

@@ -1307,8 +1307,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "一封電子郵件已發送至 {email}。按照電子郵件中的說明重置密碼。",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "已發送一封帶有安全代碼的電子郵件。",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "帶有安全碼的短信已發送至{phone}。請在下方輸入密碼。",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "已發送帶有安全代碼的短信。",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/i18n/zh.json

@@ -1307,8 +1307,8 @@
     "obsolete": false
   },
   "password_reset_email_sent": {
-    "translation": "一封电子邮件已发送至 {email}。按照电子邮件中的说明重置密码。",
-    "defaultMessage": "An email with security code has been sent to {email}. Enter the code below.",
+    "translation": "已发送一封带有安全代码的电子邮件。",
+    "defaultMessage": "An email with security code has been sent.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1586,8 +1586,8 @@
     "obsolete": false
   },
   "password_reset_sms_sent": {
-    "translation": "带有安全码的短信已发送至{phone}。请在下方输入密码。",
-    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "translation": "已发送带有安全代码的短信。",
+    "defaultMessage": "A text message with security code has been sent.",
     "description": "Notification that the SMS with password reset instructions has been sent",
     "missing": false,
     "obsolete": false

src/views/account-settings-view.jsx

@@ -36,8 +36,9 @@ export default class AccountSettingsView extends React.Component {
           val={this.state.credEdit.val}
           done={this.state.credEdit.done}
           onShowCountrySelector={this.props.onShowCountrySelector}
-          onSubmit={cred => {this.setState({credEdit: undefined}); console.log("Credential editing done", cred)}}
-          onCancel={_ => this.setState({credEdit: undefined})} />
+          onSubmit={this.props.onCredAdd}
+          onCancel={_ => this.setState({credEdit: undefined})}
+          onError={this.props.onError} />
       );
     }
 

src/views/create-account-view.jsx

@@ -187,7 +187,7 @@ export default class CreateAccountView extends React.PureComponent {
               value={this.state.fn} onChange={this.handleFnChange} required/>
           }</FormattedMessage>
         </div>
-        {props.reqCredMethod == 'email' ?
+        {this.props.reqCredMethod == 'email' ?
           <div className="panel-form-row">
             <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
               description="Input placeholder for email entry">{
@@ -195,7 +195,7 @@ export default class CreateAccountView extends React.PureComponent {
                 value={this.state.email} onChange={this.handleEmailChange} required/>
             }</FormattedMessage>
           </div>
-          : props.reqCredMethod == 'tel' ?
+          : this.props.reqCredMethod == 'tel' ?
           <><div className="panel-form-row">
             <label className="small gray"><FormattedMessage id="mobile_phone_number" defaultMessage="Mobile phone number"
               description="Prompt for entering a mobile phone number" /></label>

src/views/password-reset-view.jsx

@@ -1,13 +1,26 @@
 // A password reset form.
 import React, { Suspense } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 const PhoneEdit = React.lazy(_ => import('../widgets/phone-edit.jsx'));
 import VisiblePassword from '../widgets/visible-password.jsx';
 
 import HashNavigation from '../lib/navigation.js';
 
-export default class PasswordResetView extends React.PureComponent {
+const messages = defineMessages({
+  password_reset_email_sent: {
+    id: 'password_reset_email_sent',
+    defaultMessage: 'An email with security code has been sent.',
+    description: 'Notification that the email with password reset instructions has been sent'
+  },
+  password_reset_sms_sent: {
+    id: 'password_reset_sms_sent',
+    defaultMessage: 'A text message with security code has been sent.',
+    description: 'Notification that the SMS with password reset instructions has been sent'
+  }
+});
+
+class PasswordResetView extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -52,13 +65,22 @@ export default class PasswordResetView extends React.PureComponent {
       const cred = this.state.email.trim() || this.state.tel.trim();
       this.props.onReset(this.state.password.trim(), {
         scheme: 'code',
-        secret: `${this.state.code}:${this.props.reqCredMethod}:${cred}`
+        secret: btoa(`${this.state.code}:${this.props.reqCredMethod}:${cred}`)
       });
     } else {
+      // Send email or SMS with the secret code.
       const email = this.state.email.trim();
       const tel = this.state.tel.trim();
       this.setState({email: email, tel: tel});
-      this.props.onRequest(this.props.reqCredMethod, email || tel).then(_ => this.setState({sent: true}));
+      this.props.onRequest(this.props.reqCredMethod, email || tel)
+        .then(_ => {
+          this.setState({sent: true});
+          const msg = this.props.reqCredMethod == 'email' ? messages.password_reset_email_sent :
+            this.props.reqCredMethod == 'tel' ? messages.password_reset_sms_sent : null;
+          if (msg) {
+            this.props.onError(this.props.intl.formatMessage(msg), 'info');
+          }
+        });
     }
   }
 
@@ -147,21 +169,6 @@ export default class PasswordResetView extends React.PureComponent {
         </div>
       </>);
 
-    const sentNotification = (<>{
-        this.props.reqCredMethod == 'email' ?
-          <FormattedMessage id="password_reset_email_sent"
-            defaultMessage="An email with security code has been sent to {email}. Enter the code below."
-            values={{email: <tt>{this.state.email}</tt>}}
-            description="Notification that the email with password reset instructions has been sent" />
-        : this.props.reqCredMethod == 'tel' ?
-          <FormattedMessage id="password_reset_sms_sent"
-            defaultMessage="A text message with security code has been sent to {phone}. Enter the code below."
-            values={{phone: <tt>{this.state.tel}</tt>}}
-            description="Notification that the SMS with password reset instructions has been sent" />
-        :
-        null
-      }</>);
-
     const codeInput = (<>
         <div>
           <label className="small gray" htmlFor="enter-confirmation-code">
@@ -185,7 +192,7 @@ export default class PasswordResetView extends React.PureComponent {
 
     return (
       <form id="password-reset-form" onSubmit={this.handleSubmit}>
-        {this.state.sent ? sentNotification : showCredentialInput ? credentialInput : null}
+        {!this.state.sent && showCredentialInput ? credentialInput : null}
         {this.state.haveCode || this.state.sent ? codeInput : null}
         {showPasswordInput ? passwordInput : null}
         <div className="dialog-buttons">
@@ -207,3 +214,5 @@ export default class PasswordResetView extends React.PureComponent {
     );
   }
 }
+
+export default injectIntl(PasswordResetView);

src/views/sidepanel-view.jsx

@@ -177,7 +177,11 @@ class SidepanelView extends React.PureComponent {
             myUserId={this.props.myUserId}
             trustedBadges={this.props.trustedBadges}
             onShowCountrySelector={this.props.onShowCountrySelector}
-            onNavigate={this.props.onNavigate} /> :
+            onNavigate={this.props.onNavigate}
+            onCredAdd={this.props.onCredAdd}
+            onCredDelete={this.props.onCredDelete}
+            onCredConfirm={this.props.onCredConfirm}
+            onError={this.props.onError} /> :
 
           (view === 'general' || view === 'crop') ?
           <TopicCommonView
@@ -187,9 +191,6 @@ class SidepanelView extends React.PureComponent {
             reqCredMethod={this.props.reqCredMethod}
             onUpdateTopicDesc={this.props.onUpdateAccountDesc}
             onUpdateTagsRequest={this.props.onUpdateAccountTags}
-            onCredAdd={this.props.onCredAdd}
-            onCredDelete={this.props.onCredDelete}
-            onCredConfirm={this.props.onCredConfirm}
             onError={this.props.onError} /> :
 
           view === 'notif' ?
@@ -254,7 +255,8 @@ class SidepanelView extends React.PureComponent {
             onShowCountrySelector={this.props.onShowCountrySelector}
             onRequest={this.props.onPasswordResetRequest}
             onReset={this.props.onResetPassword}
-            onCancel={this.props.onCancel} /> :
+            onCancel={this.props.onCancel}
+            onError={this.props.onError} /> :
           null}
       </div>
     );

src/views/validation-view.jsx

@@ -24,7 +24,7 @@ class ValidationView extends React.PureComponent {
       codeReceived: props.credCode
     };
 
-    this.handleChange = this.handleChange.bind(this);
+    this.handleCodeChange = this.handleCodeChange.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
@@ -56,8 +56,8 @@ class ValidationView extends React.PureComponent {
   }
 
 
-  handleChange(e) {
-    this.setState({code: e.target.value.trim()});
+  handleCodeChange(e) {
+    this.setState({code: e.target.value.replace(/[^\d]/g, '')});
   }
 
   handleKeyPress(e) {
@@ -99,7 +99,7 @@ class ValidationView extends React.PureComponent {
             defaultMessage="Numbers only" description="Prompt for numeric conformation code">{
             (numbers_only) => <input type="text" id="enter-confirmation-code"
               placeholder={numbers_only}
-              value={this.state.code} onChange={this.handleChange}
+              value={this.state.code} onChange={this.handleCodeChange}
               onKeyPress={this.handleKeyPress} required />
           }</FormattedMessage>
         </div>

src/widgets/credential-edit.jsx

@@ -1,26 +1,45 @@
 // Enter one credential at a time.
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import PhoneEdit from './phone-edit.jsx';
 import { parsePhoneNumber } from 'libphonenumber-js/mobile';
 
-export default class CredentialEdit extends React.PureComponent {
+const messages = defineMessages({
+  password_reset_email_sent: {
+    id: 'password_reset_email_sent',
+    defaultMessage: 'An email with security code has been sent.',
+    description: 'Notification that the email with password reset instructions has been sent'
+  },
+  password_reset_sms_sent: {
+    id: 'password_reset_sms_sent',
+    defaultMessage: 'A text message with security code has been sent.',
+    description: 'Notification that the SMS with password reset instructions has been sent'
+  },
+});
+
+class CredentialEdit extends React.PureComponent {
   constructor(props) {
     super(props);
 
     this.state = {
+      code: '',
       tel: '',
-      email: ''
+      email: '',
+      sent: false
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
     this.handlePhoneChange = this.handlePhoneChange.bind(this);
+    this.handleCodeChange = this.handleCodeChange.bind(this);
   }
 
-  formatPhoneNumber(raw) {
-    const number = parsePhoneNumber(raw);
+  static formatPhoneNumber(raw) {
+    let number;
+    try {
+      number = parsePhoneNumber(raw);
+    } catch (err) {}
     return number ? number.formatInternational() : raw;
   }
 
@@ -29,69 +48,110 @@ export default class CredentialEdit extends React.PureComponent {
   }
 
   handlePhoneChange(number) {
-    console.log("handlePhoneChange", number);
     this.setState({tel: number});
   }
 
+  handleCodeChange(e) {
+    this.setState({code: e.target.value.replace(/[^\d]/g, '')});
+  }
+
   handleSubmit(e) {
     e.preventDefault();
     const value = this.props.method == 'email' ? this.state.email : this.state.tel;
-    console.log("handleSubmit", value);
     if (value) {
-      this.props.onSubmit(value);
+      this.props.onSubmit(this.props.method, value);
+      this.setState({sent: true});
+      const msg = this.props.method == 'email' ? messages.password_reset_email_sent : messages.password_reset_sms_sent;
+      this.props.onError(this.props.intl.formatMessage(msg), 'info');
     }
   }
 
   render() {
-    return (<form className="panel-form-column" onSubmit={this.handleSubmit}>
-      {this.props.method == 'email' ?
-        <><div className="panel-form-row">
-          <label className="large"><FormattedMessage id="change_email" defaultMessage="Change email"
-            description="Prompt to change current email" /></label>
-        </div>
-        <div className="group">
-          <label className="small gray">
-            <FormattedMessage id="current_email" defaultMessage="Current email" description="Label for old email" />
-          </label>
-        </div></>
-      : this.props.method == 'tel' ?
+    const readyForCode = this.state.sent || !this.props.done;
+    const currentValue = CredentialEdit.formatPhoneNumber(readyForCode ?
+      (this.state.tel || this.state.email) : this.props.val);
+
+    const currentEmail = (
       <><div className="panel-form-row">
-        <label className="large"><FormattedMessage id="change_phonel" defaultMessage="Change phone number"
-          description="Prompt to change current phone number"/></label>
-        </div>
-        <div className="group">
-          <label className="small gray">
-            <FormattedMessage id="current_phone" defaultMessage="Current phone number" description="Label for old phone" />
-          </label>
-        </div></>
+        <label className="large"><FormattedMessage id="change_email" defaultMessage="Change email"
+          description="Prompt to change current email" /></label>
+      </div>
+      <div className="group">
+        <label className="small gray">
+          <FormattedMessage id="current_email" defaultMessage="Current email" description="Label for old email" />
+        </label>
+      </div></>);
+
+    const currentPhone = (
+      <><div className="panel-form-row">
+      <label className="large"><FormattedMessage id="change_phonel" defaultMessage="Change phone number"
+        description="Prompt to change current phone number"/></label>
+      </div>
+      <div className="group">
+        <label className="small gray">
+          <FormattedMessage id="current_phone" defaultMessage="Current phone number" description="Label for old phone" />
+        </label>
+      </div></>
+    );
+
+    const newEmailInput = (
+      <><div className="group">
+        <label className="small gray"><FormattedMessage id="new_email" defaultMessage="New email"
+          description="Prompt for entering a new email" /></label>
+      </div>
+      <div className="group">
+        <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
+          description="Input placeholder for email entry">{
+          (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
+            value={this.state.email} onChange={this.handleEmailChange} required/>
+        }</FormattedMessage>
+      </div></>
+    );
+
+    const newPhoneInput = (
+      <><div className="group">
+        <label className="small gray"><FormattedMessage id="new_phone_number" defaultMessage="New phone number"
+          description="Prompt for entering a new telephone number" /></label>
+      </div>
+      <div className="panel-form-row">
+        <PhoneEdit
+          autoFocus={true}
+          onShowCountrySelector={this.props.onShowCountrySelector}
+          onSubmit={this.handlePhoneChange} />
+      </div></>
+    );
+
+    const codeInput = (
+      <><div className="group">
+        <label className="small gray"><FormattedMessage id="enter_confirmation_code_prompt" defaultMessage="Confirmation code"
+            description="Request to enter confirmation code" /></label>
+      </div>
+      <div className="group">
+        <FormattedMessage id="numeric_confirmation_code_prompt" defaultMessage="Numbers only"
+          description="Prompt for numeric conformation code">{
+          (numbers_only) => <input type="text" placeholder={numbers_only} maxLength={10}
+          value={this.state.code} onChange={this.handleCodeChange} required/>
+        }</FormattedMessage>
+      </div></>
+    );
+
+    return (<form className="panel-form-column" onSubmit={this.handleSubmit}>
+      {readyForCode ? null :
+      this.props.method == 'email' ?
+        currentEmail
+      : this.props.method == 'tel' ?
+        currentPhone
       : null}
       <div className="panel-form-row">
-        <tt className="quoted">{this.formatPhoneNumber(this.props.val)}</tt>
+        <tt className="quoted">{currentValue}</tt>
       </div>
-      {this.props.method == 'email' ?
-        <><div className="group">
-          <label className="small gray"><FormattedMessage id="new_email" defaultMessage="New email"
-            description="Prompt for entering a new email" /></label>
-        </div>
-        <div className="group">
-          <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
-            description="Input placeholder for email entry">{
-            (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
-              value={this.state.email} onChange={this.handleEmailChange} required/>
-          }</FormattedMessage>
-        </div></>
-        : this.props.method == 'tel' ?
-        <><div className="group">
-          <label className="small gray"><FormattedMessage id="new_phone_number" defaultMessage="New phone number"
-            description="Prompt for entering a new telephone number" /></label>
-        </div>
-        <div className="panel-form-row">
-          <PhoneEdit
-            autoFocus={true}
-            onShowCountrySelector={this.props.onShowCountrySelector}
-            onSubmit={this.handlePhoneChange} />
-        </div></>
+      {readyForCode ? null :
+      this.props.method == 'email' ?
+        newEmailInput
+      : this.props.method == 'tel' ?
+        newPhoneInput
       : null}
+      {readyForCode ? codeInput : null}
       <div className="dialog-buttons">
         <button className="secondary" onClick={this.props.onCancel}>
           <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
@@ -103,3 +163,5 @@ export default class CredentialEdit extends React.PureComponent {
     </form>);
   }
 }
+
+export default injectIntl(CredentialEdit);

src/widgets/phone-edit.jsx

@@ -55,6 +55,8 @@ class PhoneEdit extends React.PureComponent {
       this.inputField.setCustomValidity(this.props.intl.formatMessage(messages.mobile_number_required));
       return;
     }
+
+    this.inputField.setCustomValidity('');
     this.props.onSubmit(number.format('E.164'));
   }