Get standalone registration working in development
Whisper.events.trigger('openStandalone') to open the standalone
registration view.
// FREEBIE
This commit is contained in:
lilia
Scott Nonnenberg
parent
e60111f34d
commit
de3816b094
7 changed files with 185 additions and 126 deletions
|
|
@ -719,6 +719,45 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='standalone'>
|
||||
<header>
|
||||
<div class='container'>
|
||||
<div class='row'>
|
||||
<div class='col-xs-2 col-md-1'>
|
||||
<img id='textsecure-icon' src='images/icon_250.png'/>
|
||||
</div>
|
||||
<div class='col-xs-10 col-md-11'>
|
||||
<h1>Create your Signal Account</h1>
|
||||
<h4 class='tagline'>Private messaging from your web browser.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class='container'>
|
||||
<div class='col-xs-offset-1 col-md-6'>
|
||||
<div class='narrow'>
|
||||
<div id="phone-number-input">
|
||||
<div class="phone-input-form">
|
||||
<div id="number-container" class="number-container">
|
||||
<input type="tel" class="number" placeholder="Phone Number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearfix'>
|
||||
<button id="request-sms" class="btn btn-info">Send SMS</button>
|
||||
<button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
|
||||
</div>
|
||||
<form id='form'>
|
||||
<h2></h2>
|
||||
<input class='form-control' type="text" pattern="\s*[0-9]{3}-?[0-9]{3}\s*" 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 id=status></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type='text/javascript' src='js/components.js'></script>
|
||||
<script type='text/javascript' src='js/reliable_trigger.js'></script>
|
||||
<script type='text/javascript' src='js/database.js'></script>
|
||||
|
|
@ -779,6 +818,7 @@
|
|||
<script type='text/javascript' src='js/views/identity_key_send_error_view.js'></script>
|
||||
<script type='text/javascript' src='js/views/migration_view.js'></script>
|
||||
<script type="text/javascript" src="js/views/phone-input-view.js"></script>
|
||||
<script type='text/javascript' src='js/views/standalone_registration_view.js'></script>
|
||||
<script type='text/javascript' src='js/views/app_view.js'></script>
|
||||
|
||||
<script type='text/javascript' src='js/wall_clock_listener.js'></script>
|
||||
|
|
|
|||
|
|
@ -3,84 +3,9 @@
|
|||
*/
|
||||
;(function() {
|
||||
'use strict';
|
||||
|
||||
extension.windows.getBackground(function(bg) {
|
||||
var accountManager = new bg.getAccountManager();
|
||||
|
||||
function log(s) {
|
||||
console.log(s);
|
||||
$('#status').text(s);
|
||||
}
|
||||
|
||||
function validateCode() {
|
||||
var verificationCode = $('#code').val().replace(/\D/g, '');
|
||||
if (verificationCode.length == 6) {
|
||||
return verificationCode;
|
||||
}
|
||||
}
|
||||
|
||||
function displayError(error) {
|
||||
$('#error').hide().text(error).addClass('in').fadeIn();
|
||||
}
|
||||
|
||||
var phoneView = new Whisper.PhoneInputView({el: $('#phone-number-input')});
|
||||
phoneView.$el.find('input.number').intlTelInput();
|
||||
|
||||
var number = bg.textsecure.storage.user.getNumber();
|
||||
if (number) {
|
||||
$('input.number').val(number);
|
||||
}
|
||||
|
||||
$('input.number').on('validation', function() {
|
||||
if ($('#number-container').hasClass('valid')) {
|
||||
$('#request-sms, #request-voice').removeAttr('disabled');
|
||||
} else {
|
||||
$('#request-sms, #request-voice').prop('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
|
||||
$('#code').on('change', function() {
|
||||
if (!validateCode()) {
|
||||
$('#code').addClass('invalid');
|
||||
} else {
|
||||
$('#code').removeClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#request-voice').click(function() {
|
||||
$('#error').hide();
|
||||
var number = phoneView.validateNumber();
|
||||
if (number) {
|
||||
accountManager.requestVoiceVerification(number).catch(displayError);
|
||||
$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#request-sms').click(function() {
|
||||
$('#error').hide();
|
||||
var number = phoneView.validateNumber();
|
||||
if (number) {
|
||||
accountManager.requestSMSVerification(number).catch(displayError);
|
||||
$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
var number = phoneView.validateNumber();
|
||||
var verificationCode = $('#code').val().replace(/\D+/g, "");
|
||||
|
||||
bg.storage.put('first_install_ran', 1);
|
||||
accountManager.registerSingleDevice(number, verificationCode).then(function() {
|
||||
bg.openInbox();
|
||||
window.close();
|
||||
}).catch(function(e) {
|
||||
log(e);
|
||||
});
|
||||
});
|
||||
var view = new bg.StandaloneRegistrationView({el: $('body')});
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -8,28 +8,41 @@
|
|||
this.inboxView = null;
|
||||
this.installView = null;
|
||||
this.events = options.events;
|
||||
this.events.on('openStandalone', this.openStandaloneInstaller, this);
|
||||
this.events.on('openConversation', this.openConversation, this);
|
||||
this.events.on('openInstaller', this.openInstaller, this);
|
||||
this.events.on('openInbox', this.openInbox, this);
|
||||
},
|
||||
openView: function(view) {
|
||||
this.el.innerHTML = "";
|
||||
this.el.append(view.el);
|
||||
},
|
||||
openInstaller: function() {
|
||||
this.closeInstaller();
|
||||
this.installView = new Whisper.InstallView();
|
||||
if (Whisper.Registration.everDone()) {
|
||||
this.installView.selectStep(3);
|
||||
this.installView.hideDots();
|
||||
}
|
||||
this.el.innerHTML = "";
|
||||
this.el.append(this.installView.el);
|
||||
this.openView(this.installView);
|
||||
},
|
||||
openStandaloneInstaller: function() {
|
||||
this.closeInstaller();
|
||||
this.installView = new Whisper.StandaloneRegistrationView();
|
||||
this.openView(this.installView);
|
||||
},
|
||||
closeInstaller: function() {
|
||||
if (this.installView) {
|
||||
this.installView.remove();
|
||||
this.installView = null;
|
||||
}
|
||||
},
|
||||
openInbox: function(options) {
|
||||
options = options || {};
|
||||
_.defaults(options, {initialLoadComplete: false});
|
||||
|
||||
console.log('open inbox');
|
||||
if (this.installView) {
|
||||
this.installView.remove();
|
||||
this.installView = null;
|
||||
}
|
||||
this.closeInstaller();
|
||||
|
||||
if (!this.inboxView) {
|
||||
return ConversationController.loadPromise().then(function() {
|
||||
|
|
@ -38,13 +51,11 @@
|
|||
window: window,
|
||||
initialLoadComplete: initialLoadComplete
|
||||
});
|
||||
this.el.innerHTML = "";
|
||||
this.el.append(this.inboxView.el);
|
||||
this.openView(this.inboxView);
|
||||
}.bind(this));
|
||||
} else {
|
||||
if (!$.contains(this.$el, this.inboxView.$el)) {
|
||||
this.el.innerHTML = "";
|
||||
this.el.append(this.inboxView.el);
|
||||
this.openView(this.inboxView);
|
||||
}
|
||||
window.focus(); // FIXME
|
||||
return Promise.resolve();
|
||||
|
|
|
|||
|
|
@ -9,17 +9,13 @@
|
|||
tagName: 'div',
|
||||
className: 'phone-input',
|
||||
templateName: 'phone-number',
|
||||
render: function() {
|
||||
this.$el.html($(Mustache.render(this.template)));
|
||||
initialize: function() {
|
||||
this.$('input.number').intlTelInput();
|
||||
return this;
|
||||
},
|
||||
|
||||
events: {
|
||||
'change': 'validateNumber',
|
||||
'keyup': 'validateNumber'
|
||||
},
|
||||
|
||||
validateNumber: function() {
|
||||
var input = this.$('input.number');
|
||||
var regionCode = this.$('li.active').attr('data-country-code').toUpperCase();
|
||||
|
|
|
|||
86
js/views/standalone_registration_view.js
Normal file
86
js/views/standalone_registration_view.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
/*
|
||||
* vim: ts=4:sw=4:expandtab
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.StandaloneRegistrationView = Whisper.View.extend({
|
||||
templateName: 'standalone',
|
||||
id: 'install',
|
||||
className: 'main',
|
||||
initialize: function() {
|
||||
this.accountManager = getAccountManager();
|
||||
|
||||
var number = textsecure.storage.user.getNumber();
|
||||
if (number) {
|
||||
$('input.number').val(number);
|
||||
}
|
||||
this.render();
|
||||
this.phoneView = new Whisper.PhoneInputView({el: this.$('#phone-number-input')});
|
||||
},
|
||||
events: {
|
||||
'submit #form': 'submit',
|
||||
'validation input.number': 'onValidation',
|
||||
'change #code': 'onChangeCode',
|
||||
'click #request-voice': 'requestVoice',
|
||||
'click #request-sms': 'requestSMSVerification',
|
||||
},
|
||||
submit: function(e) {
|
||||
e.preventDefault();
|
||||
var number = this.phoneView.validateNumber();
|
||||
var verificationCode = $('#code').val().replace(/\D+/g, "");
|
||||
|
||||
this.accountManager.registerSingleDevice(number, verificationCode).then(function() {
|
||||
Whisper.events.trigger('openInbox');
|
||||
}).catch(this.log.bind(this));
|
||||
},
|
||||
log: function (s) {
|
||||
console.log(s);
|
||||
this.$('#status').text(s);
|
||||
},
|
||||
validateCode: function() {
|
||||
var verificationCode = $('#code').val().replace(/\D/g, '');
|
||||
if (verificationCode.length == 6) {
|
||||
return verificationCode;
|
||||
}
|
||||
},
|
||||
displayError: function(error) {
|
||||
this.$('#error').hide().text(error).addClass('in').fadeIn();
|
||||
},
|
||||
onValidation: function() {
|
||||
if (this.$('#number-container').hasClass('valid')) {
|
||||
this.$('#request-sms, #request-voice').removeAttr('disabled');
|
||||
} else {
|
||||
this.$('#request-sms, #request-voice').prop('disabled', 'disabled');
|
||||
}
|
||||
},
|
||||
onChangeCode: function() {
|
||||
if (!this.validateCode()) {
|
||||
this.$('#code').addClass('invalid');
|
||||
} else {
|
||||
this.$('#code').removeClass('invalid');
|
||||
}
|
||||
},
|
||||
requestVoice: function() {
|
||||
this.$('#error').hide();
|
||||
var number = this.phoneView.validateNumber();
|
||||
if (number) {
|
||||
this.accountManager.requestVoiceVerification(number).catch(this.displayError.bind(this));
|
||||
this.$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
this.$('#number-container').addClass('invalid');
|
||||
}
|
||||
},
|
||||
requestSMSVerification: function() {
|
||||
$('#error').hide();
|
||||
var number = this.phoneView.validateNumber();
|
||||
if (number) {
|
||||
this.accountManager.requestSMSVerification(number).catch(this.displayError.bind(this));
|
||||
this.$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
this.$('#number-container').addClass('invalid');
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
"js/**",
|
||||
"stylesheets/*.css",
|
||||
"!js/register.js",
|
||||
"!js/views/standalone_registration_view.js",
|
||||
"preload.js",
|
||||
"main.js",
|
||||
"menu.js",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="stylesheet" href="stylesheets/options.css">
|
||||
</head>
|
||||
<body>
|
||||
<script type='text/x-tmpl-mustache' id='standalone'>
|
||||
<header>
|
||||
<div class='container'>
|
||||
<div class='row'>
|
||||
|
|
@ -42,10 +43,9 @@
|
|||
<div id=status></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/x-tmpl-mustache" id="phone-number">
|
||||
</script>
|
||||
<script type="text/x-tmpl-mustache" id="phone-number"></script>
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
<script type="text/javascript" src="js/database.js"></script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue