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,19 +40,83 @@ export class SessionSeedModal extends React.Component<Props, State> {
     window.addEventListener('keyup', this.onEnter);
   }
 
-  public render() {
+  private renderPasswordView() {
+    const maxPasswordLen = 64;
+    const error = this.state.error;
     const i18n = window.i18n;
     const { onClose } = this.props;
 
-    const maxPasswordLen = 64;
+    return (
+      <>
+        <p>{i18n('showSeedPasswordRequest')}</p>
+        <input
+          type="password"
+          id="seed-input-password"
+          placeholder={i18n('password')}
+          maxLength={maxPasswordLen}
+        />
+
+        {error && (
+          <>
+            <div className="spacer-xs" />
+            <div className="session-label danger">{error}</div>
+          </>
+        )}
+
+        <div className="spacer-lg" />
+
+        <div className="session-modal__button-group">
+          <SessionButton
+            text={i18n('confirm')}
+            onClick={this.confirmPassword}
+          />
+
+          <SessionButton text={i18n('cancel')} onClick={onClose} />
+        </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">{i18n('seedSavePromptAlt')}</span>
+          </p>
+          <div className="spacer-xs" />
+
+          <i className="session-modal__text-highlight">{this.state.seed}</i>
+        </div>
+        <div className="spacer-lg" />
+
+        <div className="session-modal__button-group">
+          <SessionButton text={i18n('ok')} onClick={onClose} />
+
+          <SessionButton
+            text={i18n('copySeed')}
+            onClick={() => {
+              this.copySeed(this.state.seed);
+            }}
+          />
+        </div>
+      </>
+    );
+  }
+
+  public render() {
+    const i18n = window.i18n;
 
     this.checkHasPassword();
     void this.getSeed();
 
-    const error = this.state.error;
+    const { onClose } = this.props;
-    const hasPassword = this.state.hasPassword;
+    const { hasPassword, passwordValid } = this.state;
-    const passwordValid = this.state.passwordValid;
-
     const loading = this.state.loadingPassword || this.state.loadingSeed;
 
     return (
@@ -66,62 +130,9 @@ export class SessionSeedModal extends React.Component<Props, State> {
             <div className="spacer-sm" />
 
             {hasPassword && !passwordValid ? (
-              <div>
+              <>{this.renderPasswordView()}</>
-                <p>{i18n('showSeedPasswordRequest')}</p>
-                <input
-                  type="password"
-                  id="seed-input-password"
-                  placeholder={i18n('password')}
-                  maxLength={maxPasswordLen}
-                />
-
-                {error && (
-                  <>
-                    <div className="spacer-xs" />
-                    <div className="session-label danger">{error}</div>
-                  </>
-                )}
-
-                <div className="spacer-lg" />
-
-                <div className="session-modal__button-group">
-                  <SessionButton
-                    text={i18n('confirm')}
-                    onClick={this.confirmPassword}
-                  />
-
-                  <SessionButton text={i18n('cancel')} onClick={onClose} />
-                </div>
-              </div>
             ) : (
-              <>
+              <>{this.renderSeedView()}</>
-                <div className="session-modal__centered text-center">
-                  <p className="session-modal__description">
-                    {i18n('seedSavePromptMain')}
-                    <br />
-                    <span className="text-subtle">
-                      {i18n('seedSavePromptAlt')}
-                    </span>
-                  </p>
-                  <div className="spacer-xs" />
-
-                  <i className="session-modal__text-highlight">
-                    {this.state.seed}
-                  </i>
-                </div>
-                <div className="spacer-lg" />
-
-                <div className="session-modal__button-group">
-                  <SessionButton text={i18n('ok')} onClick={onClose} />
-
-                  <SessionButton
-                    text={i18n('copySeed')}
-                    onClick={() => {
-                      this.copySeed(this.state.seed);
-                    }}
-                  />
-                </div>
-              </>
             )}
           </SessionModal>
         )}