work in progress

src/i18n/de.json

@@ -1308,7 +1308,7 @@
   },
   "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 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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1315,7 +1315,7 @@
   },
   "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 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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": false,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "I have code",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": false,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "Mobile phone number",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": false,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "Send a password reset SMS:",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": false,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "Mobile phone number",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": false,
+    "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.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1308,7 +1308,7 @@
   },
   "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 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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -418,6 +418,10 @@
     "defaultMessage": "Send a password reset email:",
     "description": "Label for password reset field"
   },
+  "label_reset_password_tel": {
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone"
+  },
   "label_sdk": {
     "defaultMessage": "SDK:"
   },
@@ -600,6 +604,10 @@
     "defaultMessage": "Messaging disabled",
     "description": "Prompt in SendMessage in read-only topic"
   },
+  "mobile_phone_number": {
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number"
+  },
   "more_online_members": {
     "defaultMessage": "+{overflow} more",
     "description": "Shown in MessagesView title bar when the number of online subscribers exceeds MAX_ONLINE_IN_TOPIC"
@@ -648,14 +656,22 @@
     "defaultMessage": "Security",
     "description": "Title for TopicSecirity and AccSecurity."
   },
+  "password_i_have_code": {
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code"
+  },
   "password_prompt": {
     "defaultMessage": "Password",
     "description": "Placeholder/prompt for entering password"
   },
   "password_reset_email_sent": {
-    "defaultMessage": "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.",
     "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.",
+    "description": "Notification that the SMS with password reset instructions has been sent"
+  },
   "password_unchanged_prompt": {
     "defaultMessage": "Unchanged",
     "description": "Message in editor while password is unchanged"

src/i18n/fr.json

@@ -1315,7 +1315,7 @@
   },
   "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 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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1308,7 +1308,7 @@
   },
   "password_reset_email_sent": {
     "translation": "이메일이 {email}(으)로 전송되었습니다. 이메일의 지침에 따라 비밀번호를 재설정하세요.",
-    "defaultMessage": "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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1308,7 +1308,7 @@
   },
   "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 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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1308,7 +1308,7 @@
   },
   "password_reset_email_sent": {
     "translation": "Сообщение было отправлено на адрес {email}. Следуйте инструкциям в сообщении, чтобы изменить пароль.",
-    "defaultMessage": "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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1308,7 +1308,7 @@
   },
   "password_reset_email_sent": {
     "translation": "一封電子郵件已發送至 {email}。按照電子郵件中的說明重置密碼。",
-    "defaultMessage": "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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1308,7 +1308,7 @@
   },
   "password_reset_email_sent": {
     "translation": "一封电子邮件已发送至 {email}。按照电子邮件中的说明重置密码。",
-    "defaultMessage": "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.",
     "description": "Notification that the email with password reset instructions has been sent",
     "missing": false,
     "obsolete": false
@@ -1563,5 +1563,40 @@
     "description": "Message shown when component is loading",
     "missing": true,
     "obsolete": false
+  },
+  "password_i_have_code": {
+    "translation": "",
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code",
+    "missing": true,
+    "obsolete": false
+  },
+  "uG7N1B": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": true
+  },
+  "label_reset_password_tel": {
+    "translation": "",
+    "defaultMessage": "Send a password reset SMS:",
+    "description": "Label for password reset field by phone",
+    "missing": true,
+    "obsolete": false
+  },
+  "mobile_phone_number": {
+    "translation": "",
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number",
+    "missing": true,
+    "obsolete": false
+  },
+  "password_reset_sms_sent": {
+    "translation": "",
+    "defaultMessage": "A text message with security code has been sent to {phone}. Enter the code below.",
+    "description": "Notification that the SMS with password reset instructions has been sent",
+    "missing": true,
+    "obsolete": false
   }
 }

src/views/create-account-view.jsx

@@ -49,7 +49,7 @@ export default class CreateAccountView extends React.PureComponent {
     this.handleSubmit = this.handleSubmit.bind(this);
 
     props.tinode.connect()
-      .catch(err => {;
+      .catch(err => {
         this.props.onError(err.message, 'err');
       })
       // "reqCred":{"auth":["email"]}
@@ -201,7 +201,8 @@ export default class CreateAccountView extends React.PureComponent {
           </div>
           : this.state.method == 'tel' ?
           <><div className="panel-form-row">
-            <label className="small gray">Mobile phone number:</label>
+            <label className="small gray"><FormattedMessage id="mobile_phone_number" defaultMessage="Mobile phone number"
+              description="Prompt for entering a mobile phone number" /></label>
           </div>
           <div className="panel-form-row">
             <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."

src/views/login-view.jsx

@@ -93,4 +93,3 @@ export default class LoginView extends React.Component {
     );
   }
 };
-/* END Login */

src/views/password-reset-view.jsx

@@ -1,7 +1,8 @@
 // A password reset form.
-import React from 'react';
+import React, { Suspense } from 'react';
 import { FormattedMessage } 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';
@@ -11,14 +12,25 @@ export default class PasswordResetView extends React.PureComponent {
     super(props);
 
     this.state = {
+      tel: '',
       email: '',
       password: '',
-      sent: false
+      sent: false,
+      method: '',
+      haveCode: false
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleShowCodeField = this.handleShowCodeField.bind(this);
+
+    props.tinode.connect()
+      .catch(err => {
+        this.props.onError(err.message, 'err');
+      })
+      // "reqCred":{"auth":["email"]}
+      .finally(_ => this.setState({method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'}));
   }
 
   componentDidMount() {
@@ -47,52 +59,98 @@ export default class PasswordResetView extends React.PureComponent {
     this.setState({password: e.target.value});
   }
 
+  handleShowCodeField(e) {
+    e.preventDefault();
+    this.setState({haveCode: true});
+  }
+
   render() {
+    const showPasswordInput = (this.state.token && this.state.scheme) || this.state.haveCode;
+    const passwordInput = (<>
+        <label htmlFor="new-password">
+          <FormattedMessage id="label_new_password"
+            defaultMessage="New password"
+            description="Label for entering a new password" />
+        </label>
+        <FormattedMessage id="new_password_placeholder" defaultMessage="Enter new password"
+          description="Placeholder for entering new password">{
+          (placeholder) => <VisiblePassword
+            id="new-password"
+            placeholder={placeholder}
+            autoComplete="new-password"
+            value={this.state.password}
+            required={true} autoFocus={true}
+            onChange={this.handlePasswordChange} />
+        }</FormattedMessage>
+      </>);
+
+    const emailInput = (<>
+        {this.state.haveCode ?
+          null :
+          <label htmlFor="inputEmail">
+            <FormattedMessage id="label_reset_password"
+              defaultMessage="Send a password reset email:"
+              description="Label for password reset field" />
+          </label>
+        }
+        <FormattedMessage id="credential_email_prompt" defaultMessage="Your registration email"
+          description="Placeholder for entering email">{
+          (placeholder) => <input type="email" id="inputEmail"
+            placeholder={placeholder}
+            autoComplete="email"
+            value={this.state.email}
+            onChange={this.handleEmailChange}
+            required autoFocus />
+        }</FormattedMessage>
+      </>);
+
+    const phoneInput = (<>
+        {this.state.haveCode ?
+          null :
+          <label>
+            <FormattedMessage id="label_reset_password_tel"
+              defaultMessage="Send a password reset SMS:"
+              description="Label for password reset field by phone" />
+          </label>
+        }
+        <label className="small gray">
+          <FormattedMessage id="mobile_phone_number" defaultMessage="Mobile phone number"
+            description="Prompt for entering a mobile phone number" />
+        </label>
+        <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
+          description="Message shown when component is loading"/></div>}>
+          <PhoneEdit
+            autoFocus={false}
+            onShowCountrySelector={(code, dial) => console.log('onShowCountrySelector', code, dial)}
+            onSubmit={(code, dial) => console.log('onSubmit', code, dial)} />
+        </Suspense>
+      </>);
+
     return (
       <form id="password-reset-form" onSubmit={this.handleSubmit}>
-        {(this.state.token && this.state.scheme) ?
+        {showPasswordInput ?
-          <><label htmlFor="new-password">
+          passwordInput
-            <FormattedMessage id="label_new_password"
-              defaultMessage="New password"
-              description="Label for entering a new password" />
-          </label>
-          <FormattedMessage id="new_password_placeholder" defaultMessage="Enter new password"
-            description="Placeholder for entering new password">{
-            (placeholder) => <VisiblePassword
-              id="new-password"
-              placeholder={placeholder}
-              autoComplete="new-password"
-              value={this.state.password}
-              required={true} autoFocus={true}
-              onChange={this.handlePasswordChange} />
-          }</FormattedMessage></>
         : this.state.sent ?
           <>
             <br/>
             <center><i className="material-icons huge green">task_alt</i></center>
             <br/>
-            <center><FormattedMessage id="password_reset_email_sent"
+            <center>{
-              defaultMessage="An email has been sent to {email}. Follow the directions in the email to reset your password."
+              this.state.method == 'email' ?
-              values={{ email: <tt>{this.state.email}</tt> }}
+                <FormattedMessage id="password_reset_email_sent"
-              description="Notification that the email with password reset instructions has been sent" /></center>
+                  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.state.method == 'tel' ?
-            <label htmlFor="inputEmail">
+                <FormattedMessage id="password_reset_sms_sent"
-              <FormattedMessage id="label_reset_password"
+                  defaultMessage="A text message with security code has been sent to {phone}. Enter the code below."
-                defaultMessage="Send a password reset email:"
+                  values={{ email: <tt>{this.state.tel}</tt> }}
-                description="Label for password reset field" />
+                  description="Notification that the SMS with password reset instructions has been sent" />
-            </label>
+              :
-            <FormattedMessage id="credential_email_prompt" defaultMessage="Your registration email"
+              null
-              description="Placeholder for entering email">{
+            }</center>
-              (placeholder) => <input type="email" id="inputEmail"
-                placeholder={placeholder}
-                autoComplete="email"
-                value={this.state.email}
-                onChange={this.handleEmailChange}
-                required autoFocus />
-            }</FormattedMessage>
           </>
+        : this.state.method == 'email' ? emailInput : this.state.method == 'tel' ? phoneInput : null
         }
         <div className="dialog-buttons">
           <button className="primary" type="submit">{
@@ -106,6 +164,14 @@ export default class PasswordResetView extends React.PureComponent {
               description="Button [Send request]" />
           }</button>
         </div>
+        {this.state.haveCode ? null :
+          <div className="panel-form-row">
+            <a href="#" onClick={this.handleShowCodeField}>
+              <FormattedMessage id="password_i_have_code" defaultMessage="I have code"
+                description="Call to open field to enter password reset code" />
+            </a>
+          </div>
+        }
       </form>
     );
   }

src/views/sidepanel-view.jsx

@@ -245,6 +245,7 @@ class SidepanelView extends React.PureComponent {
 
           view === 'reset' ?
           <PasswordResetView
+            tinode={this.props.tinode}
             onRequest={this.props.onPasswordResetRequest}
             onReset={this.props.onResetPassword}
             onCancel={this.props.onCancel} /> :

umd/index.dev.js

@@ -4345,7 +4345,6 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
     this.uploadAvatar = this.uploadAvatar.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     props.tinode.connect().catch(err => {
-      ;
       this.props.onError(err.message, 'err');
     }).finally(_ => this.setState({
       method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'
@@ -4542,7 +4541,13 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       className: "panel-form-row"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
       className: "small gray"
-    }, "Mobile phone number:")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "mobile_phone_number",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Mobile phone number"
+      }]
+    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "panel-form-row"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
       fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
@@ -7165,19 +7170,29 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib_navigation_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/navigation.js */ "./src/lib/navigation.js");
 
 
+const PhoneEdit = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => __webpack_require__.e(/*! import() */ "src_widgets_phone-edit_jsx").then(__webpack_require__.bind(__webpack_require__, /*! ../widgets/phone-edit.jsx */ "./src/widgets/phone-edit.jsx")));
 
 
 class PasswordResetView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
   constructor(props) {
     super(props);
     this.state = {
+      tel: '',
       email: '',
       password: '',
-      sent: false
+      sent: false,
+      method: '',
+      haveCode: false
     };
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleShowCodeField = this.handleShowCodeField.bind(this);
+    props.tinode.connect().catch(err => {
+      this.props.onError(err.message, 'err');
+    }).finally(_ => this.setState({
+      method: (props.tinode.getServerParam('reqCred', {}).auth || [])[0] || 'email'
+    }));
   }
   componentDidMount() {
     const parsed = _lib_navigation_js__WEBPACK_IMPORTED_MODULE_3__["default"].parseUrlHash(window.location.hash);
@@ -7212,11 +7227,15 @@ class PasswordResetView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       password: e.target.value
     });
   }
+  handleShowCodeField(e) {
+    e.preventDefault();
+    this.setState({
+      haveCode: true
+    });
+  }
   render() {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
+    const showPasswordInput = this.state.token && this.state.scheme || this.state.haveCode;
-      id: "password-reset-form",
+    const passwordInput = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
-      onSubmit: this.handleSubmit
-    }, this.state.token && this.state.scheme ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
       htmlFor: "new-password"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
       id: "label_new_password",
@@ -7238,24 +7257,8 @@ class PasswordResetView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       required: true,
       autoFocus: true,
       onChange: this.handlePasswordChange
-    }))) : this.state.sent ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("center", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+    })));
-      className: "material-icons huge green"
+    const emailInput = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, this.state.haveCode ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
-    }, "task_alt")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("center", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
-      id: "password_reset_email_sent",
-      defaultMessage: [{
-        "type": 0,
-        "value": "An email has been sent to "
-      }, {
-        "type": 1,
-        "value": "email"
-      }, {
-        "type": 0,
-        "value": ". Follow the directions in the email to reset your password."
-      }],
-      values: {
-        email: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tt", null, this.state.email)
-      }
-    }))) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
       htmlFor: "inputEmail"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
       id: "label_reset_password",
@@ -7278,7 +7281,70 @@ class PasswordResetView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       onChange: this.handleEmailChange,
       required: true,
       autoFocus: true
-    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    })));
+    const phoneInput = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, this.state.haveCode ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "label_reset_password_tel",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Send a password reset SMS:"
+      }]
+    })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+      className: "small gray"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "mobile_phone_number",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Mobile phone number"
+      }]
+    })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
+      fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+        id: "loading_note",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Loading..."
+        }]
+      }))
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PhoneEdit, {
+      autoFocus: false,
+      onShowCountrySelector: (code, dial) => console.log('onShowCountrySelector', code, dial),
+      onSubmit: (code, dial) => console.log('onSubmit', code, dial)
+    })));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
+      id: "password-reset-form",
+      onSubmit: this.handleSubmit
+    }, showPasswordInput ? passwordInput : this.state.sent ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("center", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons huge green"
+    }, "task_alt")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("center", null, this.state.method == 'email' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "password_reset_email_sent",
+      defaultMessage: [{
+        "type": 0,
+        "value": "An email with security code has been sent to "
+      }, {
+        "type": 1,
+        "value": "email"
+      }, {
+        "type": 0,
+        "value": ". Enter the code below."
+      }],
+      values: {
+        email: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tt", null, this.state.email)
+      }
+    }) : this.state.method == 'tel' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "password_reset_sms_sent",
+      defaultMessage: [{
+        "type": 0,
+        "value": "A text message with security code has been sent to "
+      }, {
+        "type": 1,
+        "value": "phone"
+      }, {
+        "type": 0,
+        "value": ". Enter the code below."
+      }],
+      values: {
+        email: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tt", null, this.state.tel)
+      }
+    }) : null)) : this.state.method == 'email' ? emailInput : this.state.method == 'tel' ? phoneInput : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "dialog-buttons"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
       className: "primary",
@@ -7301,6 +7367,17 @@ class PasswordResetView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
         "type": 0,
         "value": "Send request"
       }]
+    }))), this.state.haveCode ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-row"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+      href: "#",
+      onClick: this.handleShowCodeField
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "password_i_have_code",
+      defaultMessage: [{
+        "type": 0,
+        "value": "I have code"
+      }]
     }))));
   }
 }
@@ -7722,6 +7799,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       onSubmit: this.props.onValidateCredentials,
       onCancel: this.props.onCancel
     }) : view === 'reset' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_password_reset_view_jsx__WEBPACK_IMPORTED_MODULE_14__["default"], {
+      tinode: this.props.tinode,
       onRequest: this.props.onPasswordResetRequest,
       onReset: this.props.onResetPassword,
       onCancel: this.props.onCancel