fix a bunch of problems with credential validation

src/lib/navigation.js

@@ -32,7 +32,9 @@ export default class HashNavigation {
     const args = [];
     for (const key in params) {
       if (params.hasOwnProperty(key)) {
-        args.push(key + '=' + encodeURIComponent(params[key]));
+        if (params[key] !== undefined) {
+          args.push(key + '=' + encodeURIComponent(params[key]));
+        }
       }
     }
     if (args.length > 0) {

src/views/account-settings-view.jsx

@@ -46,12 +46,21 @@ export default class AccountSettingsView extends React.Component {
           val={this.state.credEdit.val}
           done={this.state.credEdit.done}
           onShowCountrySelector={this.props.onShowCountrySelector}
-          onSubmit={this.props.onCredAdd}
+          onCredAdd={this.props.onCredAdd}
+          onCredConfirm={this.props.onCredConfirm}
           onCancel={_ => this.setState({credEdit: undefined})}
           onError={this.props.onError} />
       );
     }
 
+    // Count how many times each method is validated.
+    const validated = {};
+    this.state.credentials.forEach(cred => {
+      if (cred.done) {
+        validated[cred.meth] = (validated[cred.meth] || 0) + 1;
+      }
+    });
+
     const credentials = [];
     this.state.credentials.forEach((cred, idx) => {
       if (!['email', 'tel'].includes(cred.meth)) {
@@ -68,15 +77,14 @@ export default class AccountSettingsView extends React.Component {
       credentials.push(
         <div className="group quoted" key={idx}>
           <tt className="clickable" onClick={e => {e.preventDefault(); this.setState({credEdit: cred});}}>{val}</tt>
-          <span> {
-            cred.done ? null :
-            <>
-              <i className="material-icons">pending</i>&nbsp;
+          <span> {cred.done ? null : <i className="material-icons">pending</i>}&nbsp;
+            {!cred.done || validated[cred.meth] > 1 || this.props.reqCredMethod != cred.meth ?
               <a href="#" onClick={e => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}>
                 <i className="material-icons">delete</i>
               </a>
-            </>
-          }</span>
+            :
+            null}
+          </span>
         </div>);
     });
     if (credentials.length > 0) {

src/views/sidepanel-view.jsx

@@ -181,6 +181,7 @@ class SidepanelView extends React.PureComponent {
               tinode={this.props.tinode}
               myUserId={this.props.myUserId}
               trustedBadges={this.props.trustedBadges}
+              reqCredMethod={this.props.reqCredMethod}
               onShowCountrySelector={this.props.onShowCountrySelector}
               onNavigate={this.props.onNavigate}
               onCredAdd={this.props.onCredAdd}

src/views/tinode-web.jsx

@@ -762,6 +762,7 @@ class TinodeWeb extends React.Component {
     parsed.path[0] = 'cred';
     parsed.params['method'] = params.cred[0];
     parsed.params['token'] = params.token;
+    parsed.params['code'] = params.code;
     HashNavigation.navigateTo(HashNavigation.composeUrlHash(parsed.path, parsed.params));
   }
 
@@ -1286,7 +1287,7 @@ class TinodeWeb extends React.Component {
   }
 
   handleCredConfirm(method, response) {
-    TinodeWeb.navigateToCredentialsView({cred: [method]});
+    TinodeWeb.navigateToCredentialsView({cred: [method], code: response});
   }
 
   // User clicked Cancel button in Setting or Sign Up panel.
@@ -1705,6 +1706,7 @@ class TinodeWeb extends React.Component {
     if (this.tinode.isAuthenticated()) {
       // Adding new email or phone number in account setting.
       this.tinode.getMeTopic().setMeta({cred: {meth: cred, resp: code}})
+        .then(_ => HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'contacts')))
         .catch(err => this.handleError(err.message, 'err'));
     } else {
       // Credential validation on signup.

src/views/validation-view.jsx

@@ -100,7 +100,7 @@ class ValidationView extends React.PureComponent {
             (numbers_only) => <input type="text" id="enter-confirmation-code"
               placeholder={numbers_only}
               value={this.state.code} onChange={this.handleCodeChange}
-              onKeyPress={this.handleKeyPress} required />
+              onKeyDown={this.handleKeyPress} required />
           }</FormattedMessage>
         </div>
         <div className="dialog-buttons">

src/widgets/credential-edit.jsx

@@ -58,8 +58,11 @@ class CredentialEdit extends React.PureComponent {
   handleSubmit(e) {
     e.preventDefault();
     const value = this.props.method == 'email' ? this.state.email : this.state.tel;
-    if (value) {
-      this.props.onSubmit(this.props.method, value);
+    if (this.state.code) {
+      this.props.onError(null);
+      this.props.onCredConfirm(this.props.method, this.state.code);
+    } else if (value) {
+      this.props.onCredAdd(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');
@@ -68,8 +71,8 @@ class CredentialEdit extends React.PureComponent {
 
   render() {
     const readyForCode = this.state.sent || !this.props.done;
-    const currentValue = CredentialEdit.formatPhoneNumber(readyForCode ?
-      (this.state.tel || this.state.email) : this.props.val);
+    const rawValue = readyForCode ? (this.state.tel || this.state.email) : this.props.val;
+    const formattedValue = this.props.method == 'tel' ? CredentialEdit.formatPhoneNumber(rawValue) : rawValue;
 
     const changeEmail = (
       <><div className="panel-form-row">
@@ -140,21 +143,19 @@ class CredentialEdit extends React.PureComponent {
     );
 
     return (<form className="panel-form-column" onSubmit={this.handleSubmit}>
-      {readyForCode ? null :
-      this.props.method == 'email' ?
-        changeEmail
-      : this.props.method == 'tel' ?
-        changePhone
-      : null}
+      {readyForCode ?
+        (this.props.method == 'email' ? newEmailLabel : this.props.method == 'tel' ? newPhoneLabel : null)
+        :
+        (this.props.method == 'email' ? changeEmail : this.props.method == 'tel' ? changePhone : null)
+      }
       <div className="panel-form-row">
-        <tt className="quoted">{currentValue}</tt>
+        <tt className="quoted">{formattedValue}</tt>
       </div>
-      {readyForCode ? null :
-      this.props.method == 'email' ?
-        newEmailInput
-      : this.props.method == 'tel' ?
-        newPhoneInput
-      : null}
+      {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}>