diff --git a/app/password_util.js b/app/password_util.js index 49a774f55..944769c60 100644 --- a/app/password_util.js +++ b/app/password_util.js @@ -11,7 +11,7 @@ const matchesHash = (phrase, hash) => phrase && sha512(phrase.trim()) === hash.trim(); const validatePassword = (phrase, i18n) => { - if (!phrase || typeof phrase !== 'string') { + if (typeof phrase !== 'string') { return i18n ? i18n('passwordTypeError') : ERRORS.TYPE; } diff --git a/background.html b/background.html index 6dfaf898b..b153ca8ca 100644 --- a/background.html +++ b/background.html @@ -655,49 +655,63 @@
Create your Loki Messenger Account
-
-
Enter a name that will be shown to all your contacts
- -
-
-
Type an optional password for added security
- - -
-
- -

Restore using seed

-
-
- -
- + +
+

Restore using seed

+
+
+ +
+
+ Language: +
+ +
+
+ Restore +
+
+
+

Register a new account

+
+
+ Please save the seed below in a safe location. +
+ They can be used to restore your account if you lose access or migrate to a new device. +
+
+ Language: +
+ +
+
+ - Restore -
-
-

Register a new account

-
-
- Please save the seed below in a safe location. -
- They can be used to restore your account if you lose access or migrate to a new device. + + +
+
+
Enter a name that will be shown to all your contacts
+
-
- Language: -
- -
+
+
Type an optional password for added security
+ + +
-
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js index e82306c1d..54d5706a4 100644 --- a/js/views/standalone_registration_view.js +++ b/js/views/standalone_registration_view.js @@ -1,4 +1,4 @@ -/* global Whisper, $, getAccountManager, textsecure, i18n, passwordUtil */ +/* global Whisper, $, getAccountManager, textsecure, i18n, passwordUtil, _ */ /* eslint-disable more/no-then */ @@ -38,9 +38,12 @@ this.$passwordInput = this.$('#password'); this.$passwordConfirmationInput = this.$('#password-confirmation'); - this.$passwordConfirmationInput.hide(); this.$passwordInputError = this.$('.password-inputs .error'); + this.registrationParams = {}; + this.$pages = this.$('.page'); + this.showRegisterPage(); + this.onValidatePassword(); }, events: { @@ -50,14 +53,40 @@ 'change #code': 'onChangeCode', 'click #register': 'registerWithoutMnemonic', 'click #register-mnemonic': 'registerWithMnemonic', + 'click #back-button': 'onBack', + 'click #save-button': 'onSaveProfile', 'change #mnemonic': 'onChangeMnemonic', 'click #generate-mnemonic': 'onGenerateMnemonic', 'change #mnemonic-display-language': 'onGenerateMnemonic', 'click #copy-mnemonic': 'onCopyMnemonic', 'click .section-toggle': 'toggleSection', - 'keyup #password': 'onPasswordChange', + 'keyup #password': 'onValidatePassword', 'keyup #password-confirmation': 'onValidatePassword', }, + async showPage(pageIndex) { + // eslint-disable-next-line func-names + this.$pages.each(function(index) { + if (index !== pageIndex) { + $(this).hide(); + } else { + $(this).show(); + } + }); + }, + async showRegisterPage() { + this.registrationParams = {}; + this.showPage(0); + }, + async showProfilePage(mnemonic, language) { + this.registrationParams = { + mnemonic, + language, + }; + this.$passwordInput.val(''); + this.$passwordConfirmationInput.val(''); + this.onValidatePassword(); + this.showPage(1); + }, async register(mnemonic, language) { // Make sure the password is valid if (this.validatePassword()) { @@ -85,7 +114,7 @@ registerWithoutMnemonic() { const mnemonic = this.$('#mnemonic-display').text(); const language = this.$('#mnemonic-display-language').val(); - this.register(mnemonic, language); + this.showProfilePage(mnemonic, language); }, registerWithMnemonic() { const mnemonic = this.$('#mnemonic').val(); @@ -93,9 +122,21 @@ if (!mnemonic) { this.log('Please provide a mnemonic word list'); } else { - this.register(mnemonic, language); + this.showProfilePage(mnemonic, language); } }, + onSaveProfile() { + if (_.isEmpty(this.registrationParams)) { + this.onBack(); + return; + } + + const { mnemonic, language } = this.registrationParams; + this.register(mnemonic, language); + }, + onBack() { + this.showRegisterPage(); + }, onChangeMnemonic() { this.$('#status').html(''); }, @@ -185,16 +226,6 @@ .not($next) .slideUp('fast'); }, - onPasswordChange() { - const input = this.$passwordInput.val(); - if (!input || input.length === 0) { - this.$passwordConfirmationInput.val(''); - this.$passwordConfirmationInput.hide(); - } else { - this.$passwordConfirmationInput.show(); - } - this.onValidatePassword(); - }, validatePassword() { const input = this.trim(this.$passwordInput.val()); const confirmationInput = this.trim( diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 64502db04..9ce93c6d1 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -872,8 +872,7 @@ $loading-height: 16px; display: flex; flex-direction: row; align-items: center; - margin: 1em 8px; - margin-top: 0; + margin: 0 8px; input { flex: 1; @@ -914,6 +913,10 @@ $loading-height: 16px; justify-content: center; margin-top: 2em; + &.restore { + margin-bottom: 2em; + } + span { margin-right: 8px; } @@ -924,15 +927,18 @@ $loading-height: 16px; font-size: 14px; } - #generate-mnemonic, - #copy-mnemonic { + .button.grey { background: $grey; } + .buttons { + margin-top: 24px; + } + .select-container { position: relative; display: block; - width: 10em; + width: 9em; line-height: 2.8; background: white; overflow: hidden; @@ -957,6 +963,7 @@ $loading-height: 16px; padding: 0 0 0 0.5em; color: black; cursor: pointer; + font-size: 14px; ::-ms-expand { display: none; @@ -979,6 +986,11 @@ $loading-height: 16px; } .password-inputs { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + input { margin-bottom: 0.5em; }