Added confirmation dialog.

winter0019 · Jan 29, 2019 · e544cd4 · e544cd4
1 parent dcfc977
commit e544cd4
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 0 deletions.
diff --git 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);
+    },
   });
 })();
diff --git a/password.html b/password.html
@@ -24,14 +24,35 @@ <h2>{{ title }}</h2>
           <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'>

diff --git 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;
+    }
+  }
 }