From a5b207d57b19141e1eafd16b45254f4a7fb0ca0f Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 20 Jun 2018 10:02:56 +0200 Subject: [PATCH] Password change UI --- .../src/less2/include/sidebar-layout.less | 4 +- customize.dist/translations/messages.js | 9 +++ www/settings/app-settings.less | 9 +++ www/settings/inner.js | 73 ++++++++++++++++++- 4 files changed, 90 insertions(+), 5 deletions(-) diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 5640e014b..ef6e1189a 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -10,7 +10,7 @@ .sidebar-layout_main() { - input[type="text"] { + input[type="text"], input[type="password"] { padding-left: 10px; } #cp-sidebarlayout-container { @@ -60,7 +60,7 @@ } margin-bottom: 20px; } - [type="text"], button { + [type="text"], [type="password"], button { vertical-align: middle; height: 40px; box-sizing: border-box; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 65ade7f7f..008d53217 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -600,6 +600,15 @@ define(function () { out.settings_templateSkip = "Skip the template selection modal"; out.settings_templateSkipHint = "When you create a new empty pad, if you have stored templates for this type of pad, a modal appears to ask if you want to use a template. Here you can choose to never show this modal and so to never use a template."; + out.settings_changePasswordTitle = "Change your password"; // XXX + out.settings_changePasswordHint = "Change your account's password without losing its data. You have to enter your existing password once, and the new password you want twice.
" + + "We can't reset your password if you forget it so be very careful!"; // XXX + out.settings_changePasswordButton = "Change password"; // XXX + out.settings_changePasswordCurrent = "Existing password"; // XXX + out.settings_changePasswordNew = "New password"; // XXX + out.settings_changePasswordNewConfirm = "Confirm new password"; // XXX + out.settings_changePasswordConfirm = "Are you sure?"; // XXX + out.upload_title = "File upload"; out.upload_modal_title = "File upload options"; out.upload_modal_filename = "File name (extension {0} added automatically)"; diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index a47dd88f6..2cfd48a65 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -55,6 +55,15 @@ width: @sidebar_button-width; } } + .cp-settings-change-password { + [type="password"], [type="text"] { + width: @sidebar_button-width; + flex: unset; + } + button { + margin-top: 5px; + } + } .cp-settings-drive-backup { button { span.fa { diff --git a/www/settings/inner.js b/www/settings/inner.js index acfa8bafd..07bb4f390 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -9,6 +9,7 @@ define([ '/common/common-hash.js', '/customize/messages.js', '/common/hyperscript.js', + '/customize/credential.js', '/customize/application_config.js', '/api/config', @@ -27,6 +28,7 @@ define([ Hash, Messages, h, + Cred, AppConfig, ApiConfig ) @@ -375,22 +377,87 @@ define([ var $div = $('
', { 'class': 'cp-settings-change-password cp-sidebarlayout-element'}); - $('', {'class': 'label'}).text("TODO Change your password").appendTo($div); // XXX + $('', {'class': 'label'}).text(Messages.settings_changePasswordTitle).appendTo($div); $('', {'class': 'cp-sidebarlayout-description'}) - .append("TODO").appendTo($div); // XXX + .append(Messages.settings_changePasswordHint).appendTo($div); // var publicKey = privateData.edPublic; + var form = h('div', [ + UI.passwordInput({ + id: 'cp-settings-change-password-current', + placeholder: Messages.settings_changePasswordCurrent + }, true), + h('br'), + UI.passwordInput({ + id: 'cp-settings-change-password-new', + placeholder: Messages.settings_changePasswordNew + }, true), + UI.passwordInput({ + id: 'cp-settings-change-password-new2', + placeholder: Messages.settings_changePasswordNewConfirm + }, true), + h('button.btn.btn-primary', Messages.settings_changePasswordButton) + ]); + + $(form).appendTo($div); + var updateBlock = function (data, cb) { sframeChan.query('Q_WRITE_LOGIN_BLOCK', data, function (err, obj) { if (err || obj.error) { return void cb ({error: err || obj.error}); } cb (obj); }); }; - updateBlock = updateBlock; // jshint.. + var todo = function () { + var oldPassword = $(form).find('#cp-settings-change-password-current').val(); + var newPassword = $(form).find('#cp-settings-change-password-new').val(); + var newPasswordConfirm = $(form).find('#cp-settings-change-password-new2').val(); + + /* basic validation */ + if (!Cred.isLongEnoughPassword(newPassword)) { + var warning = Messages._getKey('register_passwordTooShort', [ + Cred.MINIMUM_PASSWORD_LENGTH + ]); + return void UI.alert(warning); + } + + if (newPassword !== newPasswordConfirm) { + UI.alert(Messages.register_passwordsDontMatch); + return; + } + + UI.confirm(Messages.settings_changePasswordConfirm, + function (yes) { + if (!yes) { return; } + // TODO + console.log(oldPassword, newPassword, newPasswordConfirm); + }, { + ok: Messages.register_writtenPassword, + cancel: Messages.register_cancel, + cancelClass: 'safe', + okClass: 'danger', + reverseOrder: true, + done: function ($dialog) { + $dialog.find('> div').addClass('half'); + }, + }, true); + }; + + $(form).find('button').click(function () { + todo(); + }); + $(form).find('input').keydown(function (e) { + // Save on Enter + if (e.which === 13) { + e.preventDefault(); + e.stopPropagation(); + todo(); + } + }); + return $div; };