Added confirmation dialog.

pull/155/head
Mikunj 7 years ago
parent dcfc97713b
commit e544cd4c88

@ -9,19 +9,25 @@
window.Whisper = window.Whisper || {}; window.Whisper = window.Whisper || {};
const MIN_LOGIN_TRIES = 3;
Whisper.PasswordView = Whisper.View.extend({ Whisper.PasswordView = Whisper.View.extend({
className: 'password full-screen-flow standalone-fullscreen', className: 'password full-screen-flow standalone-fullscreen',
templateName: 'password', templateName: 'password',
events: { events: {
'click #unlock-button': 'onLogin', 'click #unlock-button': 'onLogin',
'click #reset-button': 'onReset',
}, },
initialize() { initialize() {
this.errorCount = 0;
this.render(); this.render();
}, },
render_attributes() { render_attributes() {
return { return {
title: i18n('passwordViewTitle'), title: i18n('passwordViewTitle'),
buttonText: i18n('unlock'), buttonText: i18n('unlock'),
resetText: 'Reset Database',
showReset: this.errorCount >= MIN_LOGIN_TRIES,
}; };
}, },
async onLogin() { async onLogin() {
@ -31,11 +37,25 @@
try { try {
await window.onLogin(trimmed); await window.onLogin(trimmed);
} catch (e) { } 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}`); this.setError(`Error: ${e}`);
} }
}, },
setError(string) { setError(string) {
this.$('.error').text(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);
},
}); });
})(); })();

@ -24,7 +24,27 @@
<input class='form-control' type='password' id='passPhrase' placeholder='Password' autocomplete='off' spellcheck='false' /> <input class='form-control' type='password' id='passPhrase' placeholder='Password' autocomplete='off' spellcheck='false' />
<a class='button' id='unlock-button'>{{ buttonText }}</a> <a class='button' id='unlock-button'>{{ buttonText }}</a>
<div class='error'></div> <div class='error'></div>
{{ #showReset }}
<div class='reset'>
<a id='reset-button'>{{ resetText }}</a>
</div> </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>
</div> </div>
</script> </script>
@ -32,6 +52,7 @@
<script type='text/javascript' src='js/components.js'></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/whisper_view.js'></script>
<script type='text/javascript' src='js/views/password_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> </head>
<body> <body>
<div class='app-loading-screen'> <div class='app-loading-screen'>

@ -26,4 +26,33 @@
font-size: 16px; font-size: 16px;
margin-top: 1em; 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;
}
}
} }

Loading…
Cancel
Save