diff --git a/js/views/password_view.js b/js/views/password_view.js index 7fcdc8278..0602d1b6d 100644 --- 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 index ab818dae3..180cf4a90 100644 --- a/password.html +++ b/password.html @@ -24,14 +24,35 @@ {{ buttonText }}
+ {{ #showReset }} +
+ {{ resetText }} +
+ {{ /showReset }} + + +
diff --git a/stylesheets/_password.scss b/stylesheets/_password.scss index 10f9b1103..cd12b8c63 100644 --- 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; + } + } }