Stylistic icing

js/views/qr_dialog_view_old.js

@@ -1,47 +0,0 @@
-/* global Whisper, i18n, QRCode */
-
-// eslint-disable-next-line func-names
-(function() {
-  'use strict';
-
-  window.Whisper = window.Whisper || {};
-
-  Whisper.QRDialogView = Whisper.View.extend({
-    templateName: 'qr-code-template',
-    className: 'loki-dialog qr-dialog modal',
-    initialize(options = {}) {
-      this.okText = options.okText || i18n('ok');
-      this.render();
-      this.$('.qr-dialog').bind('keyup', event => this.onKeyup(event));
-
-      if (options.string) {
-        this.qr = new QRCode(this.$('#qr')[0], {
-          correctLevel: QRCode.CorrectLevel.L,
-        }).makeCode(options.string);
-        this.$('#qr').addClass('ready');
-      }
-    },
-    events: {
-      'click .ok': 'close',
-    },
-    render_attributes() {
-      return {
-        ok: this.okText,
-      };
-    },
-    close() {
-      this.remove();
-    },
-    onKeyup(event) {
-      switch (event.key) {
-        case 'Enter':
-        case 'Escape':
-        case 'Esc':
-          this.close();
-          break;
-        default:
-          break;
-      }
-    },
-  });
-})();

ts/components/session/SessionSeedModal.tsx

@@ -40,33 +40,14 @@ export class SessionSeedModal extends React.Component<Props, State> {
     window.addEventListener('keyup', this.onEnter);
   }
 
-  public render() {
+  private renderPasswordView() {
-    const i18n = window.i18n;
-    const { onClose } = this.props;
-
     const maxPasswordLen = 64;
-
-    this.checkHasPassword();
-    void this.getSeed();
-
     const error = this.state.error;
-    const hasPassword = this.state.hasPassword;
+    const i18n = window.i18n;
-    const passwordValid = this.state.passwordValid;
+    const { onClose } = this.props;
-
-    const loading = this.state.loadingPassword || this.state.loadingSeed;
 
     return (
       <>
-        {!loading && (
-          <SessionModal
-            title={i18n('showSeed')}
-            onOk={() => null}
-            onClose={onClose}
-          >
-            <div className="spacer-sm" />
-
-            {hasPassword && !passwordValid ? (
-              <div>
         <p>{i18n('showSeedPasswordRequest')}</p>
         <input
           type="password"
@@ -92,22 +73,25 @@ export class SessionSeedModal extends React.Component<Props, State> {
 
           <SessionButton text={i18n('cancel')} onClick={onClose} />
         </div>
-              </div>
+      </>
-            ) : (
+    );
+  }
+
+  private renderSeedView() {
+    const i18n = window.i18n;
+    const { onClose } = this.props;
+
+    return (
       <>
         <div className="session-modal__centered text-center">
           <p className="session-modal__description">
             {i18n('seedSavePromptMain')}
             <br />
-                    <span className="text-subtle">
+            <span className="text-subtle">{i18n('seedSavePromptAlt')}</span>
-                      {i18n('seedSavePromptAlt')}
-                    </span>
           </p>
           <div className="spacer-xs" />
 
-                  <i className="session-modal__text-highlight">
+          <i className="session-modal__text-highlight">{this.state.seed}</i>
-                    {this.state.seed}
-                  </i>
         </div>
         <div className="spacer-lg" />
 
@@ -122,6 +106,33 @@ export class SessionSeedModal extends React.Component<Props, State> {
           />
         </div>
       </>
+    );
+  }
+
+  public render() {
+    const i18n = window.i18n;
+
+    this.checkHasPassword();
+    void this.getSeed();
+
+    const { onClose } = this.props;
+    const { hasPassword, passwordValid } = this.state;
+    const loading = this.state.loadingPassword || this.state.loadingSeed;
+
+    return (
+      <>
+        {!loading && (
+          <SessionModal
+            title={i18n('showSeed')}
+            onOk={() => null}
+            onClose={onClose}
+          >
+            <div className="spacer-sm" />
+
+            {hasPassword && !passwordValid ? (
+              <>{this.renderPasswordView()}</>
+            ) : (
+              <>{this.renderSeedView()}</>
             )}
           </SessionModal>
         )}