From 40104fc72cf62cf93d5dde1cab5dd87e44068cc2 Mon Sep 17 00:00:00 2001 From: Chip Black Date: Sun, 1 Mar 2015 12:16:25 -0600 Subject: [PATCH] Add email verification UI --- www/css/blerg.css | 4 ++ www/jssrc/blerg/AccountCenter.js | 2 + www/jssrc/blerg/Blerg.js | 2 +- www/jssrc/blerg/EmailForm.js | 95 ++++++++++++++++++++++++++++++++ www/jssrc/blerg/EmailVerify.js | 49 ++++++++++++++++ www/jssrc/blerg/package.js | 2 + 6 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 www/jssrc/blerg/EmailForm.js create mode 100644 www/jssrc/blerg/EmailVerify.js diff --git a/www/css/blerg.css b/www/css/blerg.css index 66add67..4aeca0f 100644 --- a/www/css/blerg.css +++ b/www/css/blerg.css @@ -554,3 +554,7 @@ footer a { color: #333; margin-left: 1em; } + +.email-address { + font-weight: bold; +} diff --git a/www/jssrc/blerg/AccountCenter.js b/www/jssrc/blerg/AccountCenter.js index c3d4667..b32caec 100644 --- a/www/jssrc/blerg/AccountCenter.js +++ b/www/jssrc/blerg/AccountCenter.js @@ -3,6 +3,8 @@ enyo.kind({ components: [ {tag: 'h2', content: "Change Password"}, {kind: "blerg.PasswdForm"}, + {tag: 'h2', content: "Email Notifications"}, + {kind: 'blerg.EmailForm'}, {tag: 'h2', content: "Generate recovery link"}, {content: "A recovery link is a URL that will allow you to reset the password on your account at a later time. Whoever has this link will be able to gain control of your account. This link should be kept in a safe place like an encrypted password manager or a physical piece of paper locked in a safe. The link will expire after one year or the next password change (either via a recovery link or by changing it manually above). To indicate that you understand this, please copy blërg into the textbox below.", tag: 'p', allowHtml: true}, {tag: 'form', onsubmit: 'generateRecoveryLink', components: [ diff --git a/www/jssrc/blerg/Blerg.js b/www/jssrc/blerg/Blerg.js index 755067f..747c0da 100644 --- a/www/jssrc/blerg/Blerg.js +++ b/www/jssrc/blerg/Blerg.js @@ -5,7 +5,7 @@ enyo.kind({ name: "blerg.Blerg", kind: "Control", lastHash: null, - pathHandlers: [ blerg.User, blerg.Tag, blerg.Feed, blerg.ExternalURLPost, blerg.Welcome, blerg.AccountCenter, blerg.Recovery ], + pathHandlers: [ blerg.User, blerg.Tag, blerg.Feed, blerg.ExternalURLPost, blerg.Welcome, blerg.AccountCenter, blerg.Recovery, blerg.EmailVerify ], handlers: { onStartSignup: "showSignupDialog", onTryLogin: "tryLogin", diff --git a/www/jssrc/blerg/EmailForm.js b/www/jssrc/blerg/EmailForm.js new file mode 100644 index 0000000..4ee731d --- /dev/null +++ b/www/jssrc/blerg/EmailForm.js @@ -0,0 +1,95 @@ +enyo.kind({ + name: 'blerg.EmailForm', + components: [ + {name: 'emailRegisterForm', components: [ + {content: "Enter your email address to get daily digest updates of your feed.", tag: 'p'}, + {tag: 'form', onsubmit: 'registerEmail', components: [ + {kind: 'onyx.InputDecorator', classes: 'recovery', components: [ + {kind: 'onyx.Input', name: 'email'} + ]}, + {kind: 'onyx.Button', content: 'Register', onclick: 'registerEmail'} + ]} + ]}, + {name: 'emailStatus', showing: false, components: [ + {tag: 'p', components: [ + {content: 'Registered email: ', tag: null}, + {name: 'emailOutput', tag: 'span', classes: 'email-address'}, + ]}, + {kind: 'onyx.Button', content: 'Deregister', onclick: 'deregisterEmail'} + ]}, + {name: 'emailSent', showing: false, components: [ + {content: 'An email has been sent to ', tag: null}, + {name: 'emailSentAddress', tag: 'span', classes: 'email-address'}, + {content: '.', tag: null} + ]} + + ], + create: function() { + this.inherited(arguments); + + this.fetchEmailStatus(); + }, + registerEmail: function(inSender, inEvent) { + var email = this.$.email.getValue(); + this.$.email.setValue(''); + this.$.email.node.blur(); + + var req = new enyo.Ajax({ + url: '/aux/email/register', + method: 'POST', + postBody: { + email: email + } + }); + + req.response(this, function(inSender, inResponse) { + this.$.emailSentAddress.setContent(email); + this.$.emailRegisterForm.hide(); + this.$.emailSent.show(); + }); + + req.error(this, function(inSender, inResponse) { + alert('Failed to register email.'); + }); + + req.go(); + }, + fetchEmailStatus: function() { + var req = new enyo.Ajax({ + url: '/aux/email/status' + }); + + req.response(this, function(inSender, inResponse) { + if (inResponse.email) { + this.$.emailRegisterForm.hide(); + this.$.emailStatus.show(); + this.$.emailOutput.setContent(inResponse.email); + } else { + this.$.emailRegisterForm.show(); + } + }); + + req.go(); + }, + deregisterEmail: function(inSender, inEvent) { + var req = new enyo.Ajax({ + url: '/aux/email/cancel' + }); + + req.response(this, function(inSender, inResponse) { + if (inResponse.status == 'success') { + this.$.emailStatus.hide(); + this.$.emailRegisterForm.show(); + alert('Email notifications deregistered'); + } else { + alert('Failed to deregister'); + } + }); + + req.error(this, function(inSender, inResponse) { + alert('Failed to deregister'); + }); + + req.go(); + } +}); diff --git a/www/jssrc/blerg/EmailVerify.js b/www/jssrc/blerg/EmailVerify.js new file mode 100644 index 0000000..c65a0ff --- /dev/null +++ b/www/jssrc/blerg/EmailVerify.js @@ -0,0 +1,49 @@ +enyo.kind({ + name: 'blerg.EmailVerify', + statics: { + locationDetect: function(l) { + if (l.hash.match(/^#\/email-verify\//)) + return {kind: "blerg.EmailVerify"}; + else + return false; + } + }, + components: [ + {name: 'verificationInProgress', content: 'Verifying...'}, + {name: 'verificationFinished', content: 'Email address registered.', showing: false}, + {name: 'verificationFailed', content: "Failed to verify your email address. If you copy/pasted the URL, please be sure you copied the entire URL, without line breaks. If it has been more than 15 minutes since you attempted to register, the link has expired. Please try again.", showing: false}, + {name: 'invalidURL', content: "The URL seems malformed. If you copy/pasted the URL, please be sure you copied the entire URL, without line breaks.", showing: false} + ], + create: function() { + this.inherited(arguments); + + var m = location.hash.match(new RegExp('^#/email-verify/(.*)$')); + if (m) { + var req = new enyo.Ajax({ + url: '/aux/email/verify', + method: 'POST', + postBody: { + data: m[1] + } + }); + + req.response(this, function(inSender, inResponse) { + this.$.verificationInProgress.hide(); + if (inResponse.status == 'success') { + this.$.verificationFinished.show(); + } else { + this.$.verificationFailed.show(); + } + }); + + req.error(this, function(inSender, inResponse) { + this.$.verificationFailed.show(); + }); + + req.go(); + } else { + this.$.verificationInProgress.hide(); + this.$.invalidURL.show(); + } + } +}); diff --git a/www/jssrc/blerg/package.js b/www/jssrc/blerg/package.js index 8ebe123..3c6b5b6 100644 --- a/www/jssrc/blerg/package.js +++ b/www/jssrc/blerg/package.js @@ -10,6 +10,8 @@ enyo.depends( 'Main.js', 'SignupDialog.js', 'PasswdForm.js', + 'EmailForm.js', + 'EmailVerify.js', 'Welcome.js', 'Pager.js', 'User.js', -- 2.25.1