From 476c970903c4f3d29a8da3fa7c6f6f237745a8b7 Mon Sep 17 00:00:00 2001 From: Chip Black Date: Thu, 26 Feb 2015 03:55:59 -0600 Subject: [PATCH] Add new account center and account recovery frontends --- www/css/blerg.css | 28 ++++++++- www/jssrc/blerg/AccountCenter.js | 51 +++++++++++++++++ www/jssrc/blerg/Blerg.js | 2 +- www/jssrc/blerg/Controls.js | 2 +- .../blerg/{PasswdDialog.js => PasswdForm.js} | 17 +----- www/jssrc/blerg/Recovery.js | 57 +++++++++++++++++++ www/jssrc/blerg/Title.js | 3 +- www/jssrc/blerg/package.js | 4 +- 8 files changed, 144 insertions(+), 20 deletions(-) create mode 100644 www/jssrc/blerg/AccountCenter.js rename www/jssrc/blerg/{PasswdDialog.js => PasswdForm.js} (85%) create mode 100644 www/jssrc/blerg/Recovery.js diff --git a/www/css/blerg.css b/www/css/blerg.css index ae67fcb..14dc591 100644 --- a/www/css/blerg.css +++ b/www/css/blerg.css @@ -167,7 +167,11 @@ h1, h2, h3 { } .blerg-main h2 { - margin: 8pt 0; + margin: 40px 0 10px 0; +} + +.blerg-main h2:first-child { + margin: 0 0 10px 0; } .blerg-post { @@ -490,7 +494,8 @@ h1, h2, h3 { margin: 0; } -.blerg-dialog .onyx-groupbox { +.blerg-dialog .onyx-groupbox, +.blerg-form .onyx-groupbox { margin: 8px 0; } @@ -514,6 +519,25 @@ h1, h2, h3 { font-weight: bold; } +.onyx-input-decorator.recovery { + min-height: 22px; + vertical-align: top; + margin-right: 1em; +} + +.onyx-button.recovery { + background-color: orange; + font-size: 16px; + font-weight: bold; + min-height: 40px; +} + +p.recovery { + background-color: orange; + font-size: 20px; + padding: 6px; +} + table.help td { padding: 2pt 8pt; } diff --git a/www/jssrc/blerg/AccountCenter.js b/www/jssrc/blerg/AccountCenter.js new file mode 100644 index 0000000..80db769 --- /dev/null +++ b/www/jssrc/blerg/AccountCenter.js @@ -0,0 +1,51 @@ +enyo.kind({ + name: "blerg.AccountCenter", + components: [ + {tag: 'h2', content: "Change Password"}, + {kind: "blerg.PasswdForm"}, + {tag: 'h2', content: "Generate recovery link"}, + {content: "A recovery link is a URL that will allow you to reset the password on your account. 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: 'p', components: [ + {kind: 'onyx.InputDecorator', classes: "recovery", components: [ + {kind: 'onyx.Input', name: "recoveryVerifier"} + ]}, + {kind: 'onyx.Button', content: "Generate", classes: "recovery", onclick: "generateRecoveryLink"} + ]}, + {tag: 'p', name: 'recoveryLinkOutput', classes: 'recovery'} + ], + statics: { + locationDetect: function(l) { + var m = l.hash.match(/^#\/account$/); + if (m) { + return { + kind: 'blerg.AccountCenter' + }; + } + } + }, + create: function() { + this.inherited(arguments); + this.bubble('onSetTitle', {section: 'Account Center'}); + }, + generateRecoveryLink: function(inSender, inEvent) { + if (this.$.recoveryVerifier.getValue() != 'blërg') { + this.$.recoveryLinkOutput.setContent('Please read the text above'); + return; + } + + var req = new enyo.Ajax({ + url: '/aux/recovery/new', + handleAs: 'text' + }); + + req.response(this, function(inSender, inResponse) { + this.$.recoveryLinkOutput.setContent(inResponse); + }); + + req.error(this, function(inSender, inResponse) { + this.$.recoveryLinkOutput.setContent('Failed: ' + req.xhrResponse.status); + }); + + req.go(); + } +}); diff --git a/www/jssrc/blerg/Blerg.js b/www/jssrc/blerg/Blerg.js index 80037c4..4a95114 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 ], + pathHandlers: [ blerg.User, blerg.Tag, blerg.Feed, blerg.ExternalURLPost, blerg.Welcome, blerg.AccountCenter, blerg.Recovery ], handlers: { onStartSignup: "showSignupDialog", onTryLogin: "tryLogin", diff --git a/www/jssrc/blerg/Controls.js b/www/jssrc/blerg/Controls.js index eb3275c..abd43ea 100644 --- a/www/jssrc/blerg/Controls.js +++ b/www/jssrc/blerg/Controls.js @@ -34,7 +34,7 @@ enyo.kind({ {kind: "blerg.Link", content: "Logout", onNavigate: "logoutClicked"}, {tag: null, content: "."}, {tag: "br"}, - {kind: "blerg.Link", content: "Change Password", onNavigate: "changePasswordClicked"}, + {kind: "blerg.Link", content: "Account Center", href: '/#/account'}, {tag: null, content: "."} ]}, {classes: "blerg-controls-toolbar", components: [ diff --git a/www/jssrc/blerg/PasswdDialog.js b/www/jssrc/blerg/PasswdForm.js similarity index 85% rename from www/jssrc/blerg/PasswdDialog.js rename to www/jssrc/blerg/PasswdForm.js index 449ef37..39ec889 100644 --- a/www/jssrc/blerg/PasswdDialog.js +++ b/www/jssrc/blerg/PasswdForm.js @@ -1,14 +1,7 @@ enyo.kind({ - name: "blerg.PasswdDialog", - kind: "onyx.Popup", - classes: "blerg-dialog", - autoDismiss: true, - centered: true, - floating: true, - modal: true, + name: "blerg.PasswdForm", + classes: "blerg-form", components: [ - {tag: "h2", content: "Change Password"}, - {name: "spinner", kind: "OldSchoolSpinner", showing: false, style: "position: absolute; top: 8px; right: 8px;"}, {kind: "onyx.Groupbox", components: [ {kind: "onyx.InputDecorator", components: [ {name: "oldpassword", kind: "onyx.Input", placeholder: "Old Password", type: "password"} @@ -25,7 +18,7 @@ enyo.kind({ {name: "changePasswordError", tag: "p", showing: false, classes: "blerg-error", content: "I couldn't change your password. Are you sure you have the right old password?"}, {name: "passwordMatchError", tag: "p", showing: false, classes: "blerg-error", content: "Your new passwords don't match."}, {name: "changeButton", kind: "onyx.Button", content: "Change", onclick: "changeClick", classes: "onyx.affirmative"}, - {kind: "onyx.Button", content: "Cancel", onclick: "cancelClick", classes: "onyx-negative"}, + {name: "spinner", kind: "OldSchoolSpinner", showing: false}, {name: "api", kind: "blerg.API", onPasswordChangeSuccessful: "passwordChangeSuccessful", onPasswordChangeFailed: "passwordChangeFailed"} @@ -49,9 +42,6 @@ enyo.kind({ this.$.spinner.start(); this.$.api.changePassword(this.$.oldpassword.getValue(), this.$.password1.getValue()); }, - cancelClick: function() { - this.hide(); - }, passwordChangeSuccessful: function(inSender, inEvent) { this.$.oldpassword.setValue(''); this.$.password1.setValue(''); @@ -59,7 +49,6 @@ enyo.kind({ this.$.changeButton.setDisabled(false); this.$.spinner.hide(); this.$.spinner.stop(); - this.cancelClick(); alert("Password Changed Successfully"); }, passwordChangeFailed: function(inSender, inEvent) { diff --git a/www/jssrc/blerg/Recovery.js b/www/jssrc/blerg/Recovery.js new file mode 100644 index 0000000..c3efbad --- /dev/null +++ b/www/jssrc/blerg/Recovery.js @@ -0,0 +1,57 @@ +enyo.kind({ + name: "blerg.Recovery", + components: [ + {tag: 'h2', content: "Reset Your Password"}, + {tag: 'p', components: [ + {kind: 'onyx.InputDecorator', classes: "recovery", components: [ + {kind: 'onyx.Input', name: "newPassword"} + ]}, + {kind: 'onyx.Button', content: "Set", onclick: "submitRecovery", classes: "recovery"} + ]} + ], + statics: { + locationDetect: function(l) { + var m = l.hash.match(/^#\/recovery\//); + if (m) { + return { + kind: 'blerg.Recovery' + }; + } + } + }, + create: function() { + this.inherited(arguments); + this.bubble('onSetTitle', {section: 'Reset Password'}); + }, + submitRecovery: function(inSender, inEvent) { + var m = location.hash.match(new RegExp('^#/recovery/(.*)$')); + if (!m) { + alert('Validation failed'); + return; + } + + var req = new enyo.Ajax({ + url: '/aux/recovery/validate', + method: 'POST', + postBody: { + data: m[1], + password: this.$.newPassword.getValue() + } + }); + + req.response(this, function(inSender, inResponse) { + if (inResponse.status == 'success') { + alert('Password changed successfully'); + location = '/'; + } else { + alert('Password change failed'); + } + }); + + req.error(this, function(inSender, inResponse) { + alert('Password change failed'); + }); + + req.go(); + } +}); diff --git a/www/jssrc/blerg/Title.js b/www/jssrc/blerg/Title.js index 17d62a2..27356d8 100644 --- a/www/jssrc/blerg/Title.js +++ b/www/jssrc/blerg/Title.js @@ -9,7 +9,7 @@ enyo.kind({ onSetTitle: "setTitle" }, components: [ - {kind: "Image", classes: "logo", src: "images/blerglogo.png", attributes: {width: 125, height: 122}}, + {kind: "Image", classes: "logo", src: "/images/blerglogo.png", attributes: {width: 125, height: 122}}, {tag: "h1", components: [ {kind: "blerg.Link", href: "/#/", content: "Blërg!"} ]}, @@ -19,6 +19,7 @@ enyo.kind({ ], create: function() { this.inherited(arguments); + this.sectionChanged(); }, sectionChanged: function() { this.$.section.setContent(this.section); diff --git a/www/jssrc/blerg/package.js b/www/jssrc/blerg/package.js index 3192d42..8ebe123 100644 --- a/www/jssrc/blerg/package.js +++ b/www/jssrc/blerg/package.js @@ -9,12 +9,14 @@ enyo.depends( 'Help.js', 'Main.js', 'SignupDialog.js', - 'PasswdDialog.js', + 'PasswdForm.js', 'Welcome.js', 'Pager.js', 'User.js', 'Tag.js', 'Feed.js', + 'AccountCenter.js', + 'Recovery.js', 'ExternalURLPost.js', 'Blerg.js' ); -- 2.25.1