mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Registration UX improvements

Browse source 
Add some nice modal dialogs instead of confirmation alerts.
This commit is contained in:
lilia 2015-03-26 15:19:46 -07:00
parent 6d9c7182c4
commit 13ce354ab8
8 changed files with 163 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
js/options.js
View file

@ -35,6 +35,10 @@
}
}
$('.modal-container .cancel').click(function() {
$('.modal-container').hide();
});
$(function() {
if (textsecure.registration.isDone()) {
$('#complete-number').text(textsecure.storage.user.getNumber());
@ -55,14 +59,19 @@
qrCode.makeCode(url);
request.respond(200, 'OK');
} else if (request.path == "/v1/message" && request.verb == "PUT") {
$('#qr').hide();
var envelope = textsecure.protobuf.ProvisionEnvelope.decode(request.body, 'binary');
cryptoInfo.decryptAndHandleDeviceInit(envelope).then(function(provisionMessage) {
if (confirm(provisionMessage.number)) {
$('#status').text('Registering new device...');
$('.confirmation-dialog .number').text(provisionMessage.number);
$('.confirmation-dialog .cancel').click(function(e) {
localStorage.clear();
});
$('.confirmation-dialog .ok').click(function(e) {
e.stopPropagation();
$('.confirmation-dialog').hide();
$('.progress-dialog').show();
$('.progress-dialog .status').text('Registering new device...');
window.textsecure.registerSecondDevice(provisionMessage).then(function() {
$('#status').text('Generating keys...');
$('.progress-dialog .status').text('Generating keys...');
var counter = 0;
var myWorker = new Worker('/js/generate_keys.js');
myWorker.postMessage({
@ -75,16 +84,16 @@
case 'set':
textsecure.storage.put(e.data.key, e.data.value);
counter = counter + 1;
$('#status').text('Generating keys...' + counter);
$('.progress-dialog .bar').css('width', (counter * 100 / 105) + '%');
break;
case 'remove':
textsecure.storage.remove(e.data.key);
break;
case 'done':
$('#status').text('Uploading keys...');
$('.progress-dialog .status').text('Uploading keys...');
textsecure.api.registerKeys(e.data.keys).then(function() {
$('#status').text('All done!');
textsecure.registration.done();
$('.modal-container').hide();
$('#init-setup').hide();
$('#setup-complete').show().addClass('in');
initOptions();
@ -92,7 +101,8 @@
}
};
});
}
});
$('.modal-container').show();
});
} else
console.log(request.path);

15
options.html
View file

@ -99,6 +99,21 @@
</div>
</div>
</div>
<div class='modal-container'>
<div class='modal-main'>
<h4>Pairing...</h4>
<div class='confirmation-dialog clearfix'>
Please confirm your phone number:
<h3 class='number'></h3>
<button class='ok'>Continue</span>
<button class='cancel'>Cancel</span>
</div>
<div class='progress-dialog'>
<div class='status'></div>
<div class='bar-container'><div class='bar'></div></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>

2
stylesheets/_variables.scss
View file

@ -1,6 +1,6 @@
// colors
$blue_l: #a2d2f4;
$blue: #2a92e7;
$blue: #2090ea;
$grey_l: #f3f3f3;
$grey: #616161;
$grey_d: #454545;

28
stylesheets/manifest.css
View file

@ -46,7 +46,7 @@ body {
line-height: 24px;
background: #f2f2f2;
box-shadow: 0 -4px 3px 4px rgba(165, 165, 165, 0.8);
color: #2a92e7; }
color: #2090ea; }
.title-text {
display: block;
@ -87,9 +87,9 @@ button.back {
right: 0;
margin: 0;
padding: 0;
border: solid 1px #2a92e7;
border: solid 1px #2090ea;
background-color: white;
box-shadow: 0 4px 3px 0px rgba(12, 65, 108, 0.8); }
box-shadow: 0 4px 3px 0px rgba(10, 62, 103, 0.8); }
.menu .menu-list li {
display: block;
white-space: nowrap; }
@ -186,7 +186,7 @@ img.emoji {
.title-bar .check {
float: right;
background: #2a92e7 url("/images/check.png") no-repeat center center; }
background: #2090ea url("/images/check.png") no-repeat center center; }
.contact {
position: relative;
@ -229,7 +229,7 @@ img.emoji {
margin: 0 2px 2px 0;
padding: 0 5px;
border-radius: 10px;
background-color: #2a92e7;
background-color: #2090ea;
color: white; }
.recipients-input .recipient.error {
background-color: #f00; }
@ -270,9 +270,9 @@ img.emoji {
border-radius: 36px;
min-height: 20px; }
.socket-status *:hover {
background: #2a92e7 url("/images/refresh.png") center; }
background: #2090ea url("/images/refresh.png") center; }
.socket-status .connecting .icon {
background-color: #2a92e7; }
background-color: #2090ea; }
.socket-status .closing {
background-color: #a2d2f4; }
.socket-status .closed {
@ -299,12 +299,12 @@ input.search {
outline: 0;
font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
color: white;
background: #2a92e7 url("/images/pencil.png") no-repeat center center;
box-shadow: 0 8px 8px -8px rgba(2, 10, 16, 0.8);
background: #2090ea url("/images/pencil.png") no-repeat center center;
box-shadow: 0 8px 8px -8px rgba(1, 6, 10, 0.8);
transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
.fab:hover {
background-color: #1c8be5;
box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9);
background-color: #1689e5;
box-shadow: 0 8px 18px -8px rgba(1, 6, 10, 0.9);
transform: translate3d(0, -1px, 0); }
.last-timestamp {
@ -505,7 +505,7 @@ input.search {
.message-list .outgoing .bubble {
clear: left;
color: white;
background: #2a92e7; }
background: #2090ea; }
.message-detail .outgoing .bubble .meta,
.message-list .outgoing .bubble .meta {
color: #a2d2f4; }
@ -516,7 +516,7 @@ input.search {
.message-detail .outgoing .bubble::after,
.message-list .outgoing .bubble::after {
right: -8px;
border-left: 8px solid #2a92e7; }
border-left: 8px solid #2090ea; }
.message-detail .control .bubble .content,
.message-list .control .bubble .content {
font-style: italic; }
@ -571,7 +571,7 @@ input.search {
color: black;
box-shadow: 0 0 5px 0 black; }
.key-conflict-dialogue .verify {
color: #2a92e7;
color: #2090ea;
text-decoration: underline;
cursor: pointer; }

2
stylesheets/manifest.css.map
View file

File diff suppressed because one or more lines are too long

53
stylesheets/options.css
View file

@ -27,11 +27,15 @@
font-family: 'Roboto';
src: url("/fonts/Roboto-Bold.ttf") format("truetype");
font-weight: bold; }
html, body {
height: 100%; }
body {
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; }
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
position: relative; }
header {
background: #2a92e7;
background: #2090ea;
color: white;
padding-bottom: 2em;
margin-bottom: 2em; }
@ -53,7 +57,7 @@ h1 {
max-width: 100%; }
#step1, #step2 {
color: #2a92e7;
color: #2090ea;
font-weight: bold;
font-size: small;
text-transform: uppercase; }
@ -158,4 +162,47 @@ h3.step {
ul.country-list {
min-width: 197px !important; }
.modal-container {
display: none;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
top: 0;
padding-top: 10em;
text-align: center; }
.modal-container .modal-main {
display: inline-block;
width: 80%;
max-width: 500px;
border: solid 2px #2090ea;
background: white;
margin: 10% auto;
box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); }
.modal-container .modal-main h4 {
background-color: #2090ea;
color: white;
padding: 1em;
margin: 0;
text-align: left; }
.modal-container .modal-main .confirmation-dialog, .modal-container .modal-main .progress-dialog {
padding: 1em;
text-align: left; }
.modal-container .modal-main .confirmation-dialog .number {
text-align: center; }
.modal-container .modal-main .confirmation-dialog button {
float: right;
margin-left: 10px; }
.modal-container .modal-main .progress-dialog {
display: none;
text-align: center;
padding: 1em; }
.modal-container .modal-main .progress-dialog .bar-container {
height: 1em;
background-color: #f3f3f3; }
.modal-container .modal-main .progress-dialog .bar {
width: 0;
height: 100%;
background-color: #2090ea; }
/*# sourceMappingURL=options.css.map */

2
stylesheets/options.css.map
View file

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": ["_variables.scss","options.scss"],
"names": [],
"file": "options.css"

62
stylesheets/options.scss
View file

@ -15,8 +15,12 @@
@import 'variables';
html,body {
height: 100%;
}
body {
font-family: $roboto;
position: relative;
}
header {
@ -162,3 +166,61 @@ h3.step {
ul.country-list {
min-width: 197px !important;
}
.modal-container {
display: none;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
top: 0;
padding-top: 10em;
text-align: center;
.modal-main {
display: inline-block;
width: 80%;
max-width: 500px;
border: solid 2px $blue;
background: white;
margin: 10% auto;
box-shadow: 0 0 5px 3px rgba(darken($blue, 30%), 0.2);
h4 {
background-color: $blue;
color: white;
padding: 1em;
margin: 0;
text-align: left;
}
.confirmation-dialog, .progress-dialog {
padding: 1em;
text-align: left;
}
.confirmation-dialog {
.number { text-align: center; }
button {
float: right;
margin-left: 10px;
}
}
.progress-dialog {
display: none;
text-align: center;
padding: 1em;
.status { padding: 1em; }
.bar-container {
height: 1em;
background-color: $grey_l;
}
.bar {
width: 0;
height: 100%;
background-color: $blue;
}
}
}
}