From 3d55b9bb8b38d537ed1d2da1b79ec138d6e03608 Mon Sep 17 00:00:00 2001 From: Mrugesh Mohapatra Date: Fri, 22 Apr 2016 02:17:59 +0530 Subject: [PATCH] Add Update Email View This commit: - Displays the user's email that we have on records - Adds a button in the settings to update email - Adds a form view to update the email - Fixes CSS for the Email icons and the email form ~ Credits to @hallaathrad - Linting fixes and updated with Berkeley's Comments - Streamline checks and fix scope - Add AJAX Calls - Add flash messages - Update the views & add XHR value --- client/less/main.less | 16 +++++ common/models/user.js | 44 +++++++++++++ common/models/user.json | 7 ++ server/boot/user.js | 11 ++++ server/views/account/email-update.jade | 58 +++++++++++++++++ server/views/account/settings.jade | 88 ++++++++++++++++---------- 6 files changed, 189 insertions(+), 35 deletions(-) create mode 100644 server/views/account/email-update.jade diff --git a/client/less/main.less b/client/less/main.less index 672eccc002..192581626a 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -499,6 +499,22 @@ thead { } } +a[href="/email-signup"], a[href="/email-signin"] { + &.btn-social.btn-lg > :first-child { + line-height:43px; + font-size:26px; + } +} + +form.email-update .btn{ + margin:0; + width:40%; + display:inline-block; + &:last-child { + float:right; + } +} + .public-profile-img { height: 200px; width: 200px; diff --git a/common/models/user.js b/common/models/user.js index 3f99fbba51..bc1bf8a61a 100644 --- a/common/models/user.js +++ b/common/models/user.js @@ -306,6 +306,50 @@ module.exports = function(User) { } ); + User.prototype.updateEmail = function updateEmail(email) { + if (this.email && this.email === email) { + debug('same email as current User', email); + return Promise.reject(new Error( + `${email} is already associated with this account.` + )); + } + return User.doesExist(null, email) + .then(exists => { + if (!exists) { + return this.update$({ email }).toPromise(); + } + debug('same email as another User', email); + return Promise.reject(new Error( + `${email} is already associated with an account.` + )); + }); + }; + + User.remoteMethod( + 'updateEmail', + { + isStatic: false, + description: 'updates the email of the user object', + accepts: [ + { + arg: 'email', + type: 'string', + required: true + } + ], + returns: [ + { + arg: 'status', + type: 'object' + } + ], + http: { + path: '/email-update', + verb: 'POST' + } + } + ); + User.giveBrowniePoints = function giveBrowniePoints(receiver, giver, data = {}, dev = false, cb) { const findUser = observeMethod(User, 'findOne'); diff --git a/common/models/user.json b/common/models/user.json index 3bdfb8be7d..ad7294688d 100644 --- a/common/models/user.json +++ b/common/models/user.json @@ -235,6 +235,13 @@ "principalId": "$everyone", "permission": "ALLOW", "property": "giveBrowniePoints" + }, + { + "accessType": "EXECUTE", + "principalType": "ROLE", + "principalId": "$owner", + "permission": "ALLOW", + "property": "updateEmail" } ], "methods": [] diff --git a/server/boot/user.js b/server/boot/user.js index 3f3e57b049..b5de00975d 100644 --- a/server/boot/user.js +++ b/server/boot/user.js @@ -149,6 +149,7 @@ module.exports = function(app) { router.get('/email-signup', getEmailSignup); router.get('/email-signin', getEmailSignin); router.get('/deprecated-signin', getDepSignin); + router.get('/email-update', getUpdateEmail); router.get( '/toggle-lockdown-mode', sendNonUserToMap, @@ -226,6 +227,7 @@ module.exports = function(app) { res.redirect('/'); } + function getDepSignin(req, res) { if (req.user) { return res.redirect('/'); @@ -235,6 +237,15 @@ module.exports = function(app) { }); } + function getUpdateEmail(req, res) { + if (!req.user) { + return res.redirect('/'); + } + return res.render('account/email-update', { + title: 'Update your Email' + }); + } + function getEmailSignin(req, res) { if (req.user) { return res.redirect('/'); diff --git a/server/views/account/email-update.jade b/server/views/account/email-update.jade new file mode 100644 index 0000000000..c2f8bae6d5 --- /dev/null +++ b/server/views/account/email-update.jade @@ -0,0 +1,58 @@ +extends ../layout +block content + .container + .row.flashMessage.negative-30 + .col-xs-12 + #flash-board.alert.fade.in(style='display: none;') + button.close(type='button', data-dismiss='alert') + span.ion-close-circled#flash-close + #flash-content + h2.text-center Update your email address here: + form.form-horizontal.email-update(method='POST', action='/api/users/#{user.id}/email-update', name="updateEmailForm") + .row + .col-sm-6.col-sm-offset-3 + input(type='hidden', name='_csrf', value=_csrf) + .form-group + input.input-lg.form-control(type='email', name='email', id='email', placeholder='Enter your new email', autofocus, required, autocomplete="off") + .form-group + button.btn.btn-lg.btn-primary.btn-block(type='submit') + | Update my Email + a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/settings') + | Go back to Settings + + script. + $(document).ready(function() { + $('form').submit(function(event){ + event.preventDefault(); + $('#flash-board').hide(); + var $form = $(event.target); + $.ajax({ + type : 'POST', + url : $form.attr('action'), + data : $form.serialize(), + dataType : 'json', + encode : true, + xhrFields : { withCredentials: true } + }) + .fail(error => { + if (error.responseText){ + var data = JSON.parse(error.responseText); + if(data.error && data.error.message) + $('#flash-content').html(data.error.message); + $('#flash-board') + .removeClass('alert-success') + .addClass('alert-danger') + .fadeIn(); + } + }) + .done(data =>{ + if(data.status && data.status.count){ + $('#flash-content').html("Your email has been updated successfully!"); + $('#flash-board') + .removeClass('alert-danger') + .addClass('alert-success') + .fadeIn(); + } + }); + }); + }); diff --git a/server/views/account/settings.jade b/server/views/account/settings.jade index b45a364013..fa5df4841d 100644 --- a/server/views/account/settings.jade +++ b/server/views/account/settings.jade @@ -48,43 +48,61 @@ block content .spacer h2.text-center Email settings - .row - .col-xs-12.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3 - .row - .col-xs-9 - p.large-p Send me announcement emails - br - | (we'll send you these every Thursday) - if (user.sendMonthlyEmail) - .col-xs-3 - a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-announcement-email-mode') On - else - .col-xs-3 - a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-announcement-email-mode') Off + if(user.email) + .row + .col-xs-12 + p.large-p.text-center + em #{user.email} + .col-xs-12 + a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/email-update') + i.fa.fa-envelope + | Update my Email + .row + .col-xs-12.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3 + .row + .col-xs-9 + p.large-p Send me announcement emails + br + | (we'll send you these every Thursday) + if (user.sendMonthlyEmail) + .col-xs-3 + a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-announcement-email-mode') On + else + .col-xs-3 + a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-announcement-email-mode') Off - .row - .col-xs-9 - p.large-p Send me notification emails - br - | (these will pertain to your account) - if (user.sendNotificationEmail) - .col-xs-3 - a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-notification-email-mode') On - else - .col-xs-3 - a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-notification-email-mode') Off + .row + .col-xs-9 + p.large-p Send me notification emails + br + | (these will pertain to your account) + if (user.sendNotificationEmail) + .col-xs-3 + a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-notification-email-mode') On + else + .col-xs-3 + a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-notification-email-mode') Off - .row - .col-xs-9 - p.large-p Send me Quincy's weekly email - br - | (with new articles every Tuesday) - if (user.sendQuincyEmail) - .col-xs-3 - a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-quincy-email-mode') On - else - .col-xs-3 - a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-quincy-email-mode') Off + .row + .col-xs-9 + p.large-p Send me Quincy's weekly email + br + | (with new articles every Tuesday) + if (user.sendQuincyEmail) + .col-xs-3 + a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-quincy-email-mode') On + else + .col-xs-3 + a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-quincy-email-mode') Off + else + .row + .col-xs-12 + p.large-p.text-center + | You don't have an email id associated to this account. + .col-xs-12 + a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/email-update') + i.fa.fa-envelope + | Update my Email .spacer h2.text-center Danger Zone