Password change UI

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;

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.<br>" +
+                                      "<b>We can't reset your password if you forget it so be very careful!</b>"; // 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 <em>{0}</em> added automatically)";

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 {

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 = $('<div>', { 'class': 'cp-settings-change-password cp-sidebarlayout-element'});
 
-        $('<span>', {'class': 'label'}).text("TODO Change your password").appendTo($div); // XXX
+        $('<span>', {'class': 'label'}).text(Messages.settings_changePasswordTitle).appendTo($div);
 
         $('<span>', {'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;
     };