fixed + cleanup

src/views/account-settings-view.jsx

@@ -28,6 +28,16 @@ export default class AccountSettingsView extends React.Component {
     };
   }
 
+  componentDidMount() {
+    const me = this.props.tinode.getMeTopic();
+    me.onCredsUpdated = _ => this.setState({credentials: me.getCredentials()});
+  }
+
+  componentWillUnmount() {
+    const me = this.props.tinode.getMeTopic();
+    me.onCredsUpdated = null;
+  }
+
   render() {
     if (this.state.credEdit) {
       return (
@@ -58,7 +68,15 @@ 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>}</span>
+          <span> {
+            cred.done ? null :
+            <>
+              <i className="material-icons">pending</i>&nbsp;
+              <a href="#" onClick={e => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}>
+                <i className="material-icons">delete</i>
+              </a>
+            </>
+          }</span>
         </div>);
     });
     if (credentials.length > 0) {
@@ -115,15 +133,15 @@ export default class AccountSettingsView extends React.Component {
         </div>
         <div className="hr" />
         <div className="panel-form-column">
-          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('notif');}}>
+          <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('notif');}}>
             <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
               defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />
           </a>
-          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
+          <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('security');}}>
             <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
               defaultMessage="Security" description="Navigaton button for security panel." />
           </a>
-          <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('support');}}>
+          <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('support');}}>
             <i className="material-icons">contact_support</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_support"
               defaultMessage="Support" description="Sidepanel title for AccSupportView." />
           </a>

src/views/create-account-view.jsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import AvatarCrop from '../widgets/avatar-crop.jsx';
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import CheckBox from '../widgets/checkbox.jsx';
-const PhoneEdit = React.lazy(_ => import('../widgets/phone-edit.jsx'));
+import PhoneEdit from '../widgets/phone-edit.jsx';
 import VisiblePassword from '../widgets/visible-password.jsx';
 
 import LocalStorageUtil from '../lib/local-storage.js';
@@ -201,13 +201,10 @@ export default class CreateAccountView extends React.PureComponent {
               description="Prompt for entering a mobile phone number" /></label>
           </div>
           <div className="panel-form-row">
-            <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
-              description="Message shown when component is loading"/></div>}>
-              <PhoneEdit
-                autoFocus={false}
-                onShowCountrySelector={this.props.onShowCountrySelector}
-                onSubmit={this.handlePhoneChange} />
-            </Suspense>
+            <PhoneEdit
+              autoFocus={false}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onSubmit={this.handlePhoneChange} />
           </div></>
           : null
         }

src/views/password-reset-view.jsx

@@ -1,8 +1,8 @@
 // A password reset form.
-import React, { Suspense } from 'react';
+import React from 'react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-const PhoneEdit = React.lazy(_ => import('../widgets/phone-edit.jsx'));
+import PhoneEdit from '../widgets/phone-edit.jsx';
 import VisiblePassword from '../widgets/visible-password.jsx';
 
 import HashNavigation from '../lib/navigation.js';
@@ -159,13 +159,10 @@ class PasswordResetView extends React.PureComponent {
           </label>
         </div>
         <div className="panel-form-row">
-          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
-            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
-            <PhoneEdit
-              autoFocus={true}
-              onShowCountrySelector={this.props.onShowCountrySelector}
-              onSubmit={number => this.setState({tel: number})} />
-          </Suspense>
+          <PhoneEdit
+            autoFocus={true}
+            onShowCountrySelector={this.props.onShowCountrySelector}
+            onSubmit={number => this.setState({tel: number})} />
         </div>
       </>);
 

src/views/sidepanel-view.jsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import React, { Suspense } from 'react';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 
 import ErrorPanel from '../widgets/error-panel.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import SideNavbar from '../widgets/side-navbar.jsx';
 import TopicCommonView from './topic-common-view.jsx';
 
-import AccountSettingsView from './account-settings-view.jsx';
+const AccountSettingsView = React.lazy(_ => import('./account-settings-view.jsx'));
 import ContactsView from './contacts-view.jsx';
-import CreateAccountView from './create-account-view.jsx';
+const CreateAccountView = React.lazy(_ => import('./create-account-view.jsx'));
 import AccNotificationsView from './acc-notifications-view.jsx';
 import AccSecurityView from './acc-security-view.jsx';
 import AccSupportView from './acc-support-view.jsx';
 import LoginView from './login-view.jsx';
 import NewTopicView from './new-topic-view.jsx';
-import PasswordResetView from './password-reset-view.jsx';
+const PasswordResetView = React.lazy(_ => import('./password-reset-view.jsx'));
 import SettingsView from './settings-view.jsx';
 import ValidationView from './validation-view.jsx';
 
@@ -155,13 +155,16 @@ class SidepanelView extends React.PureComponent {
             onPersistenceChange={this.props.onPersistenceChange} /> :
 
           view === 'register' ?
-          <CreateAccountView
-            tinode={this.props.tinode}
-            reqCredMethod={this.props.reqCredMethod}
-            onShowCountrySelector={this.props.onShowCountrySelector}
-            onCreateAccount={this.props.onCreateAccount}
-            onCancel={this.props.onCancel}
-            onError={this.props.onError} /> :
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <CreateAccountView
+              tinode={this.props.tinode}
+              reqCredMethod={this.props.reqCredMethod}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onCreateAccount={this.props.onCreateAccount}
+              onCancel={this.props.onCancel}
+              onError={this.props.onError} />
+          </Suspense> :
 
           view === 'settings' ?
           <SettingsView
@@ -172,16 +175,19 @@ class SidepanelView extends React.PureComponent {
             onUpdate={this.props.onGlobalSettings} /> :
 
           view === 'edit' ?
-          <AccountSettingsView
-            tinode={this.props.tinode}
-            myUserId={this.props.myUserId}
-            trustedBadges={this.props.trustedBadges}
-            onShowCountrySelector={this.props.onShowCountrySelector}
-            onNavigate={this.props.onNavigate}
-            onCredAdd={this.props.onCredAdd}
-            onCredDelete={this.props.onCredDelete}
-            onCredConfirm={this.props.onCredConfirm}
-            onError={this.props.onError} /> :
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <AccountSettingsView
+              tinode={this.props.tinode}
+              myUserId={this.props.myUserId}
+              trustedBadges={this.props.trustedBadges}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onNavigate={this.props.onNavigate}
+              onCredAdd={this.props.onCredAdd}
+              onCredDelete={this.props.onCredDelete}
+              onCredConfirm={this.props.onCredConfirm}
+              onError={this.props.onError} />
+          </Suspense> :
 
           (view === 'general' || view === 'crop') ?
           <TopicCommonView
@@ -249,14 +255,17 @@ class SidepanelView extends React.PureComponent {
             onCancel={this.props.onCancel} /> :
 
           view === 'reset' ?
-          <PasswordResetView
-            tinode={this.props.tinode}
-            reqCredMethod={this.props.reqCredMethod}
-            onShowCountrySelector={this.props.onShowCountrySelector}
-            onRequest={this.props.onPasswordResetRequest}
-            onReset={this.props.onResetPassword}
-            onCancel={this.props.onCancel}
-            onError={this.props.onError} /> :
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <PasswordResetView
+              tinode={this.props.tinode}
+              reqCredMethod={this.props.reqCredMethod}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onRequest={this.props.onPasswordResetRequest}
+              onReset={this.props.onResetPassword}
+              onCancel={this.props.onCancel}
+              onError={this.props.onError} />
+          </Suspense> :
           null}
       </div>
     );

src/widgets/credential-edit.jsx

@@ -71,7 +71,7 @@ class CredentialEdit extends React.PureComponent {
     const currentValue = CredentialEdit.formatPhoneNumber(readyForCode ?
       (this.state.tel || this.state.email) : this.props.val);
 
-    const currentEmail = (
+    const changeEmail = (
       <><div className="panel-form-row">
         <label className="large"><FormattedMessage id="change_email" defaultMessage="Change email"
           description="Prompt to change current email" /></label>
@@ -82,7 +82,7 @@ class CredentialEdit extends React.PureComponent {
         </label>
       </div></>);
 
-    const currentPhone = (
+    const changePhone = (
       <><div className="panel-form-row">
       <label className="large"><FormattedMessage id="change_phonel" defaultMessage="Change phone number"
         description="Prompt to change current phone number"/></label>
@@ -94,11 +94,13 @@ class CredentialEdit extends React.PureComponent {
       </div></>
     );
 
+    const newEmailLabel = (<label className="small gray">
+        <FormattedMessage id="new_email" defaultMessage="New email"
+          description="Prompt for entering a new email" />
+      </label>);
+
     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">{newEmailLabel}</div>
       <div className="group">
         <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
           description="Input placeholder for email entry">{
@@ -108,11 +110,13 @@ class CredentialEdit extends React.PureComponent {
       </div></>
     );
 
+    const newPhoneLabel = (<label className="small gray">
+        <FormattedMessage id="new_phone_number" defaultMessage="New phone number"
+        description="Prompt for entering a new telephone number" />
+      </label>);
+
     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="group">{newPhoneLabel}</div>
       <div className="panel-form-row">
         <PhoneEdit
           autoFocus={true}
@@ -138,9 +142,9 @@ class CredentialEdit extends React.PureComponent {
     return (<form className="panel-form-column" onSubmit={this.handleSubmit}>
       {readyForCode ? null :
       this.props.method == 'email' ?
-        currentEmail
+        changeEmail
       : this.props.method == 'tel' ?
-        currentPhone
+        changePhone
       : null}
       <div className="panel-form-row">
         <tt className="quoted">{currentValue}</tt>