Registration ux tweaks

This commit is contained in:
lilia 2014-11-10 13:34:10 -08:00
parent 3eb98ddc3b
commit 4119c13ba2
3 changed files with 31 additions and 22 deletions

View file

@ -67,6 +67,7 @@
});
$('#request-voice').click(function() {
$('#error').hide();
var number = validateNumber();
if (number) {
textsecure.api.requestVerificationVoice(number).catch(displayError);
@ -77,6 +78,7 @@
});
$('#request-sms').click(function() {
$('#error').hide();
var number = validateNumber();
if (number) {
textsecure.api.requestVerificationSMS(number).catch(displayError);
@ -104,29 +106,29 @@
var number = validateNumber();
var verificationCode = validateCode();
if (number && verificationCode) {
$('#verify1').hide();
$('#verify2done').text('');
$('#verify3done').text('');
$('#verify4done').text('');
$('#verify5').hide();
$('#verifyCode').prop('disabled', 'disabled');
$('#verify *').hide();
$('#verify').show().addClass('in');
$('#verify2').show();
textsecure.registerSingleDevice(number, verificationCode, function(step) {
switch(step) {
case 1:
$('#verify2done').text('done');
$('#verify3').show();
break;
case 2:
$('#verify3done').text('done');
$('#verify4').show();
break;
case 3:
$('#complete-number').text(number);
$('#verify').hide();
$('#init-setup').hide().removeClass('in');
$('#setup-complete').show().addClass('in');
registrationDone();
}
}).catch(function(error) {
//TODO: No alerts...
$('#verify *').hide();
$('#verifyCode').removeAttr('disabled');
if (error.humanError)
displayError(error.humanError);
else

View file

@ -54,37 +54,41 @@
</div>
<div id='single-device' class='row collapse'>
<div class='col-xs-offset-1 col-md-6'>
<button class='back btn btn-link'>Back</button>
<div class='narrow'>
<div id='step1'>
<div id='number-container'>
<input type="text" id="number" placeholder="Phone Number">
<input class='form-control' type="text" id="number" placeholder="Phone Number" tabindex=0>
</div>
<div>
<select id="regionCode">
<select class='form-control' id="regionCode">
<option value="ZZ" selected>Country</option>
</select>
</div>
<div class='clearfix'>
<button id="request-sms" class="btn btn-default">Send SMS</button>
<button id="request-voice" class="btn btn-default">Call</button>
<button id="request-sms" class="btn btn-info">Send SMS</button>
<button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
</div>
</div>
<form id="step2" class="collapse">
<input type="text" pattern="[0-9]{3}-?[0-9]{3}" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
<button id="verifyCode" class="btn btn-info">Submit</button>
<input class='form-control' type="text" pattern="[0-9]{3}-?[0-9]{3}" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
<button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
<div id='error' class='collapse'></div>
</form>
</div>
<button class='back btn btn-link'>Back</button>
</div>
</div>
</div>
<div id="verify" class="hidden">
<div id="verify1">Receiving identity key...<span id="verify1done"></span></div>
<div id="verify2">Verifying number and setup code...<span id="verify2done"></span></div>
<div id="verify3">Generating keys...<span id="verify3done"></span></div>
<div id="verify4">Registering...<span id="verify4done"></span></div>
<div id="verify5">Syncing with existing devices...<span id="verify5done"></span></div>
<div class='row'>
<div class='col-xs-offset-1 col-md-6'>
<div id="verify" class="collapse narrow">
<div id="verify1">Receiving identity key...<span class="done"></span></div>
<div id="verify2">Verifying number and setup code...<span class="done" id="verify2done"></span></div>
<div id="verify3">Generating keys...<span class="done" id="verify3done"></span></div>
<div id="verify4">Registering...<span class="done" id="verify4done"></span></div>
<div id="verify5">Syncing with existing devices...<span class="done" id="verify5done"></span></div>
</div>
</div>
</div>
<div id="setup-complete" class="collapse">
<h3>You are registered on TextSecure with number <span id="complete-number"></span></h3>

View file

@ -64,7 +64,6 @@ h2 {
box-sizing: border-box;
width: 100%;
display: block;
text-align: center;
margin-bottom: 0.5em;
}
@ -140,3 +139,7 @@ h2 {
margin: 2em 0;
}
#log, #listener { height: 0; }
input.form-control, select.form-control {
border-radius: 0;
}