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

@@ -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;

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');

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": []

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('/');

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();
+            }
+          });
+        });
+       });

server/views/account/settings.jade

@@ -48,43 +48,61 @@ block content
 
         .spacer
         h2.text-center Email settings
-        .row
+        if(user.email)
-          .col-xs-12.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3
+          .row
-            .row
+            .col-xs-12
-              .col-xs-9
+              p.large-p.text-center
-                p.large-p Send me announcement emails
+                em #{user.email}
-                  br
+            .col-xs-12
-                  | (we'll send you these every Thursday)
+              a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/email-update')
-              if (user.sendMonthlyEmail)
+                i.fa.fa-envelope
-                .col-xs-3
+                | Update my Email
-                  a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-announcement-email-mode') On
+          .row
-              else
+            .col-xs-12.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3
-                .col-xs-3
+              .row
-                  a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-announcement-email-mode') Off
+                .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
+              .row
-              .col-xs-9
+                .col-xs-9
-                p.large-p Send me notification emails
+                  p.large-p Send me notification emails
-                  br
+                    br
-                  | (these will pertain to your account)
+                    | (these will pertain to your account)
-              if (user.sendNotificationEmail)
+                if (user.sendNotificationEmail)
-                .col-xs-3
+                  .col-xs-3
-                  a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-notification-email-mode') On
+                    a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-notification-email-mode') On
-              else
+                else
-                .col-xs-3
+                  .col-xs-3
-                  a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-notification-email-mode') Off
+                    a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-notification-email-mode') Off
 
-            .row
+              .row
-              .col-xs-9
+                .col-xs-9
-                p.large-p Send me Quincy's weekly email
+                  p.large-p Send me Quincy's weekly email
-                  br
+                    br
-                  | (with new articles every Tuesday)
+                    | (with new articles every Tuesday)
-              if (user.sendQuincyEmail)
+                if (user.sendQuincyEmail)
-                .col-xs-3
+                  .col-xs-3
-                  a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-quincy-email-mode') On
+                    a.btn.btn-lg.btn-primary.btn-block.active.positive-20(href='/toggle-quincy-email-mode') On
-              else
+                else
-                .col-xs-3
+                  .col-xs-3
-                  a.btn.btn-lg.btn-primary.btn-block.positive-20(href='/toggle-quincy-email-mode') Off
+                    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