Added confirmation dialog.

6 years ago · e544cd4c88
parent dcfc97713b
commit e544cd4c88
3 changed files with 70 additions and 0 deletions
--- a/js/views/password_view.js
+++ b/js/views/password_view.js
@ -9,19 +9,25 @@

  window.Whisper = window.Whisper || {};

+  const MIN_LOGIN_TRIES = 3;
+
  Whisper.PasswordView = Whisper.View.extend({
    className: 'password full-screen-flow standalone-fullscreen',
    templateName: 'password',
    events: {
      'click #unlock-button': 'onLogin',
+      'click #reset-button': 'onReset',
    },
    initialize() {
+      this.errorCount = 0;
      this.render();
    },
    render_attributes() {
      return {
        title: i18n('passwordViewTitle'),
        buttonText: i18n('unlock'),
+        resetText: 'Reset Database',
+        showReset: this.errorCount >= MIN_LOGIN_TRIES,
      };
    },
    async onLogin() {
@ -31,11 +37,25 @@
      try {
        await window.onLogin(trimmed);
      } catch (e) {
+        // Increment the error counter and show the button if necessary
+        this.errorCount += 1;
+        if (this.errorCount >= MIN_LOGIN_TRIES) {
+          this.render();
+        }
+
        this.setError(`Error: ${e}`);
      }
    },
    setError(string) {
      this.$('.error').text(string);
    },
+    onReset() {
+      const dialog = new Whisper.ConfirmationDialogView({
+        title: 'Are you sure you want to reset the database?',
+        message: 'Warning! You will lose all of your messages and contacts when you reset the database.',
+        okText: 'Reset',
+      });
+      this.$el.append(dialog.el);
+    },
  });
 })();
--- a/password.html
+++ b/password.html
@ -24,14 +24,35 @@
          <input class='form-control' type='password' id='passPhrase' placeholder='Password' autocomplete='off' spellcheck='false' />
          <a class='button' id='unlock-button'>{{ buttonText }}</a>
          <div class='error'></div>
+          {{ #showReset }}
+            <div class='reset'>
+              <a id='reset-button'>{{ resetText }}</a>
+            </div>
+          {{ /showReset }}
        </div>
      </div>
    </div>
  </script>

+  <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
+    <div class="content">
+      {{ #title }}
+        <h4>{{ title }}</h4>
+      {{ /title }}
+      <div class='message'>{{ message }}</div>
+      <div class='buttons'>
+        {{ #showCancel }}
+          <button class='cancel' tabindex='2'>{{ cancel }}</button>
+        {{ /showCancel }}
+        <button class='ok' tabindex='1'>{{ ok }}</button>
+      </div>
+    </div>
+  </script>
+
  <script type='text/javascript' src='js/components.js'></script>
  <script type='text/javascript' src='js/views/whisper_view.js'></script>
  <script type='text/javascript' src='js/views/password_view.js'></script>
+  <script type='text/javascript' src='js/views/confirmation_dialog_view.js'></script>
 </head>
 <body>
  <div class='app-loading-screen'>
--- a/stylesheets/_password.scss
+++ b/stylesheets/_password.scss
@ -26,4 +26,33 @@
    font-size: 16px;
    margin-top: 1em;
  }
+
+  .reset {
+    font-size: 15px;
+    margin-top: 1em;
+    cursor: pointer;
+    user-select: none;
+
+    a {
+      color: #78be20;
+      font-weight: bold;
+    }
+  }
+
+  .confirmation-dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .ok {
+      background-color: $color-core-red !important;
+      color: white;
+    }
+
+    .message {
+      color: $color-core-red;
+      font-weight: bolder;
+      font-style: italic;
+    }
+  }
 }