Changed registration to be a 2 step process.

pull/259/head
Mikunj 6 years ago
parent 338f4e3682
commit ae8b3899ad

@ -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;
}

@ -655,49 +655,63 @@
<div class='step-body'>
<div class='header'>Create your Loki Messenger Account</div>
<div class='display-name-input'>
<div class='input-header'>Enter a name that will be shown to all your contacts</div>
<input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
</div>
<div class='password-inputs'>
<div class='input-header'>Type an optional password for added security</div>
<input class='form-control' type='password' id='password' placeholder='Password (optional)' autocomplete='off' spellcheck='false'>
<input class='form-control' type='password' id='password-confirmation' placeholder='Retype your password' autocomplete='off' spellcheck='false'>
<div class='error'></div>
</div>
<h4 class='section-toggle'>Restore using seed</h4>
<div class='standalone-mnemonic section-content'>
<div class='standalone-mnemonic-inputs'>
<input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic Seed' autocomplete='off' spellcheck='false' />
<div class='select-container'>
<select id='mnemonic-language'></select>
<!-- Registration -->
<div class='page'>
<h4 class='section-toggle'>Restore using seed</h4>
<div class='standalone-mnemonic section-content'>
<div class='standalone-mnemonic-inputs'>
<input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic Seed' autocomplete='off' spellcheck='false' />
</div>
<div class='restore standalone-register-language'>
<span>Language:</span>
<div class='select-container'>
<select id='mnemonic-language'></select>
</div>
</div>
<a class='button' id='register-mnemonic'>Restore</a>
<div id='error' class='collapse'></div>
<div id=status></div>
</div>
<h4 class='section-toggle section-toggle-visible'>Register a new account</h4>
<div class='standalone-register section-content'>
<div class='standalone-register-warning'>
Please save the seed below in a safe location.
</br>
They can be used to restore your account if you lose access or migrate to a new device.
</div>
<div class='standalone-register-language'>
<span>Language:</span>
<div class='select-container'>
<select id='mnemonic-display-language'></select>
</div>
</div>
<div id='mnemonic-display' />
<div class='standalone-register-buttons'>
<a class='button grey' id='generate-mnemonic'>Generate Seed</a>
<a class='button grey' id='copy-mnemonic'>Copy Seed</a>
<a class='button' id='register' data-loading-text='Please wait...'>Register</a>
</div>
</div>
<a class='button' id='register-mnemonic'>Restore</a>
<div id='error' class='collapse'></div>
<div id=status></div>
</div>
<h4 class='section-toggle section-toggle-visible'>Register a new account</h4>
<div class='standalone-register section-content'>
<div class='standalone-register-warning'>
Please save the seed below in a safe location.
</br>
They can be used to restore your account if you lose access or migrate to a new device.
<!-- Profile -->
<div class='page'>
<div class='display-name-input'>
<div class='input-header'>Enter a name that will be shown to all your contacts</div>
<input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
</div>
<div class='standalone-register-language'>
<span>Language:</span>
<div class='select-container'>
<select id='mnemonic-display-language'></select>
</div>
<div class='password-inputs'>
<div class='input-header'>Type an optional password for added security</div>
<input class='form-control' type='password' id='password' placeholder='Password (optional)' autocomplete='off' spellcheck='false'>
<input class='form-control' type='password' id='password-confirmation' placeholder='Retype your password' autocomplete='off' spellcheck='false'>
<div class='error'></div>
</div>
<div id='mnemonic-display' />
<div class='standalone-register-buttons'>
<a class='button' id='generate-mnemonic'>Generate Seed</a>
<a class='button' id='copy-mnemonic'>Copy Seed</a>
<a class='button' id='register' data-loading-text='Please wait...'>Register</a>
<div class='buttons'>
<a class='button grey' id='back-button'>Back</a>
<a class='button' id='save-button' data-loading-text='Please wait...'>Save</a>
</div>
</div>
</div>
</div>
</div>

@ -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(

@ -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;
}

Loading…
Cancel
Save