fixed multiple issues with the /signin page. #935 #936 #937

This commit is contained in:
Danny Coates 2018-09-24 12:01:39 -07:00
parent d34ff79fd7
commit c8bf3101aa
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
7 changed files with 35 additions and 24 deletions

View File

@ -45,8 +45,8 @@ export default function(state, emitter) {
lastRender = Date.now(); lastRender = Date.now();
}); });
emitter.on('login', () => { emitter.on('login', email => {
state.user.login(); state.user.login(email);
}); });
emitter.on('logout', () => { emitter.on('logout', () => {

View File

@ -1,6 +1,8 @@
/* globals LIMITS */
const html = require('choo/html'); const html = require('choo/html');
const assets = require('../../../common/assets'); const assets = require('../../../common/assets');
const title = require('../../templates/title'); const title = require('../../templates/title');
const bytes = require('../../utils').bytes;
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
@ -12,12 +14,11 @@ module.exports = function(state, emit) {
<div class="signIn__info flexible"> <div class="signIn__info flexible">
${state.translate('accountBenefitTitle')} ${state.translate('accountBenefitTitle')}
<ul> <ul>
<li>${state.translate('accountBenefitMultiFile')}</li> <li>${state.translate('accountBenefitLargeFiles', {
<li>${state.translate('accountBenefitLargeFiles')}</li> size: bytes(LIMITS.MAX_FILE_SIZE)
})}</li>
<li>${state.translate('accountBenefitExpiry')}</li> <li>${state.translate('accountBenefitExpiry')}</li>
<li>${state.translate('accountBenefitSync')}</li> <li>${state.translate('accountBenefitSync')}</li>
<li>${state.translate('accountBenefitNotify')}</li>
<li>${state.translate('accountBenefitMore')}</li>
</ul> </ul>
</div> </div>
<div class="signIn__form flexible"> <div class="signIn__form flexible">
@ -33,16 +34,17 @@ module.exports = function(state, emit) {
onsubmit=${submitEmail} onsubmit=${submitEmail}
data-no-csrf> data-no-csrf>
<input <input
id="email-input"
type="text" type="text"
class="signIn__emailInput" class="signIn__emailInput"
placeholder=${state.translate('emailEntryPlaceholder')}/> placeholder=${state.translate('emailEntryPlaceholder')}/>
<input <input
class='noDisplay' class='noDisplay'
id="emailSubmit" id="email-submit"
type="submit"/> type="submit"/>
</form> </form>
</div> </div>
<label class="btn" for="emailSubmit"> <label class="btn" for="email-submit">
${state.translate('signInContinueButton')} ${state.translate('signInContinueButton')}
</label> </label>
</div> </div>
@ -50,6 +52,15 @@ module.exports = function(state, emit) {
function submitEmail(event) { function submitEmail(event) {
event.preventDefault(); event.preventDefault();
emit('login'); const el = document.getElementById('email-input');
const email = el.value;
if (email) {
// just check if it's the right shape
const a = email.split('@');
if (a.length === 2 && a.every(s => s.length > 0)) {
return emit('login', email);
}
}
el.value = '';
} }
}; };

View File

@ -5,14 +5,12 @@ module.exports = function(state) {
return null; return null;
} }
return html` return html`
<div class="signupPromo"> <a href="/signin" class="signupPromo">
<div class="signupPromo__title">${state.translate('signInPromoText')}</div> <div class="signupPromo__title">${state.translate('signInPromoText')}</div>
<div class="signupPromo__info">${state.translate('signInExplanation')}</div> <div class="signupPromo__info">${state.translate('signInExplanation')}</div>
<a href="/signin" <div class="link signupPromo__link">${state.translate(
class="link signupPromo__link" 'signInLearnMore'
> )}</div>
${state.translate('signInLearnMore')}
</a> </a>
</div>
`; `;
}; };

View File

@ -54,12 +54,12 @@ export default class User {
return this.loggedIn ? LIMITS.MAX_DOWNLOADS : LIMITS.ANON.MAX_DOWNLOADS; return this.loggedIn ? LIMITS.MAX_DOWNLOADS : LIMITS.ANON.MAX_DOWNLOADS;
} }
async login() { async login(email) {
const state = arrayToB64(crypto.getRandomValues(new Uint8Array(16))); const state = arrayToB64(crypto.getRandomValues(new Uint8Array(16)));
storage.set('oauthState', state); storage.set('oauthState', state);
const keys_jwk = await prepareScopedBundleKey(this.storage); const keys_jwk = await prepareScopedBundleKey(this.storage);
const code_challenge = await preparePkce(this.storage); const code_challenge = await preparePkce(this.storage);
const params = new URLSearchParams({ const options = {
client_id: AUTH_CONFIG.client_id, client_id: AUTH_CONFIG.client_id,
code_challenge, code_challenge,
code_challenge_method: 'S256', code_challenge_method: 'S256',
@ -67,7 +67,11 @@ export default class User {
scope: 'profile https://identity.mozilla.com/apps/send', //TODO param scope: 'profile https://identity.mozilla.com/apps/send', //TODO param
state, state,
keys_jwk keys_jwk
}); };
if (email) {
options.email = email;
}
const params = new URLSearchParams(options);
location.assign( location.assign(
`${AUTH_CONFIG.authorization_endpoint}?${params.toString()}` `${AUTH_CONFIG.authorization_endpoint}?${params.toString()}`
); );

View File

@ -60,7 +60,7 @@ function bytes(num) {
return '0B'; return '0B';
} }
const exponent = Math.min(Math.floor(Math.log10(num) / 3), UNITS.length - 1); const exponent = Math.min(Math.floor(Math.log10(num) / 3), UNITS.length - 1);
const n = Number(num / Math.pow(1000, exponent)); const n = Number(num / Math.pow(1024, exponent));
let nStr = n.toFixed(1); let nStr = n.toFixed(1);
if (LOCALIZE_NUMBERS) { if (LOCALIZE_NUMBERS) {
try { try {

View File

@ -164,12 +164,9 @@ signInContinueButton = Continue
signInMenuOption = Sign in/up signInMenuOption = Sign in/up
accountMenuOption = Firefox Account accountMenuOption = Firefox Account
accountBenefitTitle = With a free Firefox Account with Send you can: accountBenefitTitle = With a free Firefox Account with Send you can:
accountBenefitMultiFile = Send multiple files at once accountBenefitLargeFiles = Upload larger files (up to { $size })
accountBenefitLargeFiles = Upload larger files (up to { $size } GB)
accountBenefitExpiry = Have more expiry options accountBenefitExpiry = Have more expiry options
accountBenefitSync = Manage your uploads across devices accountBenefitSync = Manage your uploads across devices
accountBenefitNotify = Be notified when your files are downloaded
accountBenefitMore = Do a lot more!
manageAccount = Manage Account manageAccount = Manage Account
logOut = Sign Out logOut = Sign Out
okButton = Ok okButton = Ok

View File

@ -67,6 +67,7 @@ module.exports = function(app) {
}); });
app.use(express.json()); app.use(express.json());
app.get('/', language, pages.index); app.get('/', language, pages.index);
app.get('/signin', pages.blank);
app.get('/legal', language, pages.legal); app.get('/legal', language, pages.legal);
app.get('/jsconfig.js', require('./jsconfig')); app.get('/jsconfig.js', require('./jsconfig'));
app.get(`/share/:id${ID_REGEX}`, language, pages.blank); app.get(`/share/:id${ID_REGEX}`, language, pages.blank);