password reset seems to work correctly

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>