From f1c5b259b364aa5480bfd3939a46cf301fce3c8b Mon Sep 17 00:00:00 2001 From: Chip Black Date: Sun, 1 Mar 2015 17:04:48 -0600 Subject: [PATCH] Add forgot password UI --- www/jssrc/blerg/Blerg.js | 1 + www/jssrc/blerg/Controls.js | 17 +++++- www/jssrc/blerg/ForgotPasswordDialog.js | 75 +++++++++++++++++++++++++ www/jssrc/blerg/package.js | 1 + 4 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 www/jssrc/blerg/ForgotPasswordDialog.js diff --git a/www/jssrc/blerg/Blerg.js b/www/jssrc/blerg/Blerg.js index 747c0da..944c0c1 100644 --- a/www/jssrc/blerg/Blerg.js +++ b/www/jssrc/blerg/Blerg.js @@ -84,6 +84,7 @@ enyo.kind({ }, loginFailed: function(inSender, inEvent) { alert('Login failed'); + this.waterfall('onShowForgotPasswordLink'); this.logout(); }, logout: function(inSender, inEvent) { diff --git a/www/jssrc/blerg/Controls.js b/www/jssrc/blerg/Controls.js index abd43ea..cc8ae8d 100644 --- a/www/jssrc/blerg/Controls.js +++ b/www/jssrc/blerg/Controls.js @@ -10,7 +10,8 @@ enyo.kind({ handlers: { onLogin: "login", onLogout: "logout", - onPostVisibility: "postVisibilityUpdate" + onPostVisibility: "postVisibilityUpdate", + onShowForgotPasswordLink: "showForgotPasswordLink" }, components: [ {name: "loggedOutControls", components: [ @@ -23,7 +24,10 @@ enyo.kind({ {name: "password", kind: "onyx.Input", placeholder: "Password", type: "password", attributes: {tabindex: 2}} ]}, ]}, - {kind: "onyx.Button", content: "Login", onclick: "loginClicked", attributes: {tabindex: 3}} + {kind: "onyx.Button", content: "Login", onclick: "loginClicked", attributes: {tabindex: 3}}, + {name: "forgotPassword", showing: false, style: "margin-top: 10px; text-align: left", components: [ + {kind: "blerg.Link", content: "Forgot your password?", onNavigate: "popupForgotPasswordDialog"} + ]} ]} ]}, {name: "loggedInControls", showing: false, components: [ @@ -43,6 +47,7 @@ enyo.kind({ {name: "spewButton", kind: "onyx.Button", classes: "spew-button", content: "Spew It!", onclick: "spewToggle"} ]}, ]}, + {name: "forgotPasswordDialog", kind: "blerg.ForgotPasswordDialog"}, {name: "api", kind: "blerg.API", onStatus: "gotStatus"}, {kind: "Signals", @@ -89,6 +94,7 @@ enyo.kind({ }, login: function(inSender, inEvent) { this.$.password.setValue(''); + this.$.forgotPassword.hide(); // TODO: Replace with regular blur() call in future enyo this.$.password.node.blur(); this.setLoggedIn(true); @@ -146,5 +152,12 @@ enyo.kind({ } else if (inEvent.type == 'mentioned') { this.gotStatus(this, {mentioned: false}); } + }, + showForgotPasswordLink: function(inSender, inevent) { + this.$.forgotPassword.show(); + }, + popupForgotPasswordDialog: function() { + this.$.forgotPasswordDialog.setUsername(this.$.username.getValue()); + this.$.forgotPasswordDialog.show(); } }); diff --git a/www/jssrc/blerg/ForgotPasswordDialog.js b/www/jssrc/blerg/ForgotPasswordDialog.js new file mode 100644 index 0000000..20c7251 --- /dev/null +++ b/www/jssrc/blerg/ForgotPasswordDialog.js @@ -0,0 +1,75 @@ +enyo.kind({ + name: "blerg.ForgotPasswordDialog", + kind: "onyx.Popup", + classes: "blerg-dialog", + autoDismiss: true, + centered: true, + floating: true, + modal: true, + components: [ + {tag: "h2", content: "Forgot Password"}, + {name: "spinner", kind: "OldSchoolSpinner", showing: false, style: "position: absolute; top: 8px; right: 8px;"}, + {kind: "onyx.Groupbox", components: [ + {kind: "onyx.InputDecorator", components: [ + {name: "username", kind: "onyx.Input", placeholder: "Username"} + ]}, + {kind: "onyx.InputDecorator", components: [ + {name: "email", kind: "onyx.Input", placeholder: "Email Address"} + ]} + ]}, + {name: "recoverError", tag: "p", showing: false, classes: 'blerg-error', content: "Please enter both username and email."}, + {name: "recoverButton", kind: "onyx.Button", content: "Send Recovery Email", onclick: "recoverClick", classes: "onyx-affirmative"}, + {kind: "onyx.Button", content: "Cancel", onclick: "cancelClick", classes: "onyx-negative"} + ], + recoverClick: function() { + var username = this.$.username.getValue(); + var email = this.$.email.getValue(); + + if (!(username != '' && email != '')) { + this.$.recoverError.show(); + return; + } + + this.$.recoverButton.setDisabled(true); + this.$.spinner.show(); + this.$.spinner.start(); + + var req = new enyo.Ajax({ + url: '/aux/recovery/mail', + method: 'POST', + postBody: { + username: username, + email: email + } + }); + + req.response(this, function(inSender, inResponse) { + this.$.spinner.stop(); + this.$.spinner.hide(); + this.$.recoverButton.setDisabled(false); + + if (inResponse.status == 'success') { + alert("Recovery email sent"); + this.cancelClick(); + } + }); + + req.error(this, function(inSender, inResponse) { + this.$.spinner.stop(); + this.$.spinner.hide(); + this.$.recoverButton.setDisabled(false); + + alert("Failed due to backend error"); + }); + + req.go(); + }, + cancelClick: function() { + this.$.username.setValue(''); + this.$.email.setValue(''); + this.hide(); + }, + setUsername: function(v) { + this.$.username.setValue(v); + } +}); diff --git a/www/jssrc/blerg/package.js b/www/jssrc/blerg/package.js index 3c6b5b6..550a5a0 100644 --- a/www/jssrc/blerg/package.js +++ b/www/jssrc/blerg/package.js @@ -9,6 +9,7 @@ enyo.depends( 'Help.js', 'Main.js', 'SignupDialog.js', + 'ForgotPasswordDialog.js', 'PasswdForm.js', 'EmailForm.js', 'EmailVerify.js', -- 2.34.1