start simplifying account page

server/boot/user.js

@@ -44,9 +44,7 @@ module.exports = function(app) {
   router.post('/reset/:token', postReset);
   router.get('/email-signup', getEmailSignup);
   router.get('/email-signin', getEmailSignin);
-
   router.get('/account/api', getAccountAngular);
-  router.post('/account/profile', postUpdateProfile);
   router.post('/account/password', postUpdatePassword);
   router.post('/account/delete', postDeleteAccount);
   router.get('/account/unlink/:provider', getOauthUnlink);
@@ -185,80 +183,6 @@ module.exports = function(app) {
     );
   }
 
-  /**
-  * POST /account/profile
-  * Update profile information.
-  */
-
-  function postUpdateProfile(req, res, next) {
-
-    User.findById(req.user.id, function(err) {
-      if (err) { return next(err); }
-      var errors = req.validationErrors();
-      if (errors) {
-        req.flash('errors', errors);
-        return res.redirect('/account');
-      }
-
-      User.findOne({
-        where: { email: req.body.email }
-      }, function(err, existingEmail) {
-        if (err) {
-          return next(err);
-        }
-        var user = req.user;
-        if (existingEmail && existingEmail.email !== user.email) {
-          req.flash('errors', {
-            msg: 'An account with that email address already exists.'
-          });
-          return res.redirect('/account');
-        }
-        User.findOne(
-          { where: { username: req.body.username } },
-          function(err, existingUsername) {
-            if (err) {
-              return next(err);
-            }
-            var user = req.user;
-            if (
-              existingUsername &&
-              existingUsername.username !== user.username
-            ) {
-              req.flash('errors', {
-                msg: 'An account with that username already exists.'
-              });
-              return res.redirect('/account');
-            }
-            var body = req.body || {};
-            user.facebookProfile = body.facebookProfile.trim() || '';
-            user.linkedinProfile = body.linkedinProfile.trim() || '';
-            user.codepenProfile = body.codepenProfile.trim() || '';
-            user.twitterHandle = body.twitterHandle.trim() || '';
-            user.bio = body.bio.trim() || '';
-
-            user.save(function(err) {
-              if (err) {
-                return next(err);
-              }
-              updateUserStoryPictures(
-                user.id.toString(),
-                user.picture,
-                user.username,
-                function(err) {
-                  if (err) { return next(err); }
-                  req.flash('success', {
-                    msg: 'Profile information updated.'
-                  });
-                  res.redirect('/account');
-                }
-              );
-            });
-          }
-        );
-      });
-    });
-  }
-
   /**
   * POST /account/password
   * Update current password.

server/views/account/account.jade

@@ -6,15 +6,11 @@ block content
         .panel-heading.text-center Update your portfolio here:
         .panel-body
             if (!user.isGithubCool)
-              .row
-                .col-xs-12
-                  .text-left.btn-info.btn.btn-block.btn-link-social(href='http://www.freecodecamp.com/challenges/waypoint-join-our-chat-room')
-                    span Link your account to GitHub to update your portfolio page. Click here if you don’t have a GitHub account yet.
               .row
                 .col-xs-12
                   a.btn.btn-lg.btn-block.btn-github.btn-link-social(href='/auth/github')
                       i.fa.fa-github
-                      | Link GitHub with my account
+                      | Link GitHub to unlock profile
             else
               .row
                 .col-xs-12
@@ -22,117 +18,59 @@ block content
                       i.fa.fa-github
                       | Update Github Info
 
+                  if (!user.twitter)
+                      .col-xs-12
+                          a.btn.btn-lg.btn-block.btn-twitter.btn-link-social.disabled(href='#')
+                              i.fa.fa-twitter
+                              | Add my Twitter to my profile
+                  if (!user.google)
+                      .col-xs-12
+                          a.btn.btn-lg.btn-block.btn-google-plus.btn-link-social.disabled(href='#')
+                              i.fa.fa-google-plus
+                              | Add my Google+ to my profile
+                  if (!user.facebook)
+                      .col-xs-12
+                          a.btn.btn-lg.btn-block.btn-facebook.btn-link-social.disabled(href='#')
+                              i.fa.fa-facebook
+                              | Add my Facebook to my profile
+                  if (!user.linkedin)
+                      .col-xs-12
+                          a.btn.btn-lg.btn-block.btn-linkedin.btn-link-social.disabled(href='#')
+                              i.fa.fa-linkedin
+                              | Add my LinkedIn to my profile
+
+            .spacer
+            .spacer
             .row
-              .col-xs-12
+                .col-xs-6.col-sm-4.col-sm-offset-2
-                form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm' ng-show="asyncComplete")
+                    a.btn.btn-warning.btn-block.btn-link-social(href='/logout')
-                  input(type='hidden', name='_csrf', value=_csrf)
+                        span.ion-android-exit
-                  .form-group
+                        | Sign me out of Free Code Camp
-                    label.col-sm-3.col-sm-offset-1.control-label(for='bio') Bio (140 characters)
+                .col-xs-6.col-sm-4
-                    .col-sm-4
+                    a.btn.btn-danger.btn-block.confirm-deletion.btn-link-social
-                      input.form-control(type='text', name='bio', autocomplete="off", ng-model='user.bio', ng-maxlength='140', id='bio')
+                        span.ion-trash-b
-                    .col-sm-4.col-sm-offset-5(ng-cloak, ng-show='profileForm.bio.$error.maxlength && !profileForm.bio.$pristine')
+                        | Delete my Free Code Camp account
-                      alert(type='danger')
+                    script.
-                        span.ion-close-circled
+                        $('.confirm-deletion').on("click", function() {
-                        | Your bio must be fewer than 140 characters.
+                          $('#modal-dialog').modal('show');
-                  .form-group
+                        });
-                    label.col-sm-3.col-sm-offset-1.control-label(for='email') Twitter
+                    #modal-dialog.modal.animated.wobble
-                    .col-sm-4
+                        .modal-dialog
-                      .input-group.twitter-input
+                            .modal-content
-                          span.input-group-addon @
+                                .modal-header
-                          input.form-control(type='text', name='twitterHandle', autocomplete="off", id='twitterHandle', ng-model='user.twitterHandle', ng-maxlength='15', ng-pattern="/^[A-z0-9_]+$/")
+                                    a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
-                    .col-sm-4.col-sm-offset-5(ng-cloak, ng-show="profileForm.twitterHandle.$error.pattern")
+                                    h3 Are you really leaving us?
-                      alert(type='danger')
+                                .modal-body
-                          span.ion-close-circled
+                                    p Pro Tip: If you tweet feedback to 
-                          | Your Twitter handle should only contain letters, numbers and underscores (az10_).
+                                        a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp
-                    .col-sm-4.col-sm-offset-5(ng-cloak, ng-show='profileForm.twitterHandle.$error.maxlength && !profileForm.twitterHandle.$pristine')
+                                        | , we'll act quickly on it!
-                      alert(type='danger')
+                                .modal-footer
-                          span.ion-close-circled
+                                    a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
-                          |  Your name must be fewer than 15 characters.
+                                        span.ion-happy
-
+                                        | Nevermind, I'll stick around
-                  .form-group
+                                    br
-                    label.col-sm-3.col-sm-offset-1.control-label(for='email') CodePen
+                                    form(action='/account/delete', method='POST')
-                    .col-sm-4
+                                        input(type='hidden', name='_csrf', value=_csrf)
-                      input.form-control(type='url', name='codepenProfile', id='codepenProfile', autocomplete="off", ng-model='user.codepenProfile', placeholder='http://')
+                                        button.btn.btn-danger.btn-block(type='submit')
-                    .col-sm-4.col-sm-offset-5(ng-cloak, ng-show="profileForm.codepenProfile.$error.url && !profileForm.codepenProfile.$pristine")
+                                            span.ion-trash-b
-                      alert(type='danger')
+                                            | Yes, Delete my account
-                        span.ion-close-circled
-                        | Please enter a valid URL format (http://www.example.com).
-
-                  .form-group
-                    label.col-sm-3.col-sm-offset-1.control-label(for='email') LinkedIn
-                    .col-sm-4
-                      input.form-control(type='url', name='linkedinProfile', id='linkedinProfile', autocomplete="off", ng-model='user.linkedinProfile', placeholder='http://')
-                    .col-sm-4.col-sm-offset-5(ng-cloak, ng-show="profileForm.linkedinProfile.$error.url && !profileForm.linkedinProfile.$pristine")
-                      alert(type='danger')
-                        span.ion-close-circled
-                        | Please enter a valid URL format (http://www.example.com).
-
-                  .form-group
-                    label.col-sm-3.col-sm-offset-1.control-label(for='email') Facebook
-                    .col-sm-4
-                      input.form-control(type='url', name='facebookProfile', id='facebookProfile', autocomplete="off", ng-model='user.facebookProfile', placeholder='http://')
-                    .col-sm-4.col-sm-offset-5(ng-cloak, ng-show="profileForm.facebookProfile.$error.url && !profileForm.facebookProfile.$pristine")
-                      alert(type='danger')
-                        span.ion-close-circled
-                        | Please enter a valid URL format (http://www.example.com).
-
-                  button.btn.btn-lg.btn-block.btn-primary.btn-link-social(type='submit', ng-disabled='!user.isGithubCool || profileForm.$invalid')
-                      span.ion-edit
-                      | Update my info
-
-    .panel.panel-info
-        .panel-heading.text-center Manage your account here:
-        .panel-body
-            if (!user.google || !user.facebook || !user.linkedin || !user.twitter)
-                if (!user.twitter)
-                    .col-xs-12
-                        a.btn.btn-lg.btn-block.btn-twitter.btn-link-social.disabled(href='#')
-                            i.fa.fa-twitter
-                            | Link Twitter with my account
-                if (!user.google)
-                    .col-xs-12
-                        a.btn.btn-lg.btn-block.btn-google-plus.btn-link-social.disabled(href='#')
-                            i.fa.fa-google-plus
-                            | Link Google with my account
-                if (!user.facebook)
-                    .col-xs-12
-                        a.btn.btn-lg.btn-block.btn-facebook.btn-link-social.disabled(href='#')
-                            i.fa.fa-facebook
-                            | Link Facebook with my account
-                if (!user.linkedin)
-                    .col-xs-12
-                        a.btn.btn-lg.btn-block.btn-linkedin.btn-link-social.disabled(href='#')
-                            i.fa.fa-linkedin
-                            | Link LinkedIn with my account
-            .col-xs-12
-                a.btn.btn-lg.btn-block.btn-warning.btn-link-social(href='/logout')
-                    span.ion-android-exit
-                    | Sign me out of Free Code Camp
-            .col-xs-12
-                a.btn.btn-lg.btn-block.btn-danger.confirm-deletion.btn-link-social
-                    span.ion-trash-b
-                    | Delete my Free Code Camp account
-                script.
-                    $('.confirm-deletion').on("click", function() {
-                      $('#modal-dialog').modal('show');
-                    });
-                #modal-dialog.modal.animated.wobble
-                    .modal-dialog
-                        .modal-content
-                            .modal-header
-                                a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
-                                h3 Are you really leaving us?
-                            .modal-body
-                                p Pro Tip: If you tweet feedback to 
-                                    a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp
-                                    | , we'll act quickly on it!
-                            .modal-footer
-                                a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
-                                    span.ion-happy
-                                    | Nevermind, I'll stick around
-                                br
-                                form(action='/account/delete', method='POST')
-                                    input(type='hidden', name='_csrf', value=_csrf)
-                                    button.btn.btn-danger.btn-block(type='submit')
-                                        span.ion-trash-b
-                                        | Yes, Delete my account

server/views/partials/navbar.jade

@@ -4,7 +4,7 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
             .col-xs-12
                 span.hamburger-text Menu
         a.navbar-brand(href='/')
-            img.img-responsive.nav-logo(src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz', alt='learn to code javascript at Free Code Camp logo')
+            img.img-responsive.nav-logo(src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt='learn to code javascript at Free Code Camp logo')
     .collapse.navbar-collapse
         ul.nav.navbar-nav.navbar-right.hamburger-dropdown
             li

server/views/resources/get-started.jade

@@ -45,20 +45,20 @@ block content
             li.large-li.gif-caption Click the pixel art in the upper right hand corner of GitHub, then choose settings. Upload a picture of yourself. A picture of your face works best. This is how people will see you in our chat rooms, so put your best foot forward. You can add your city and your name if you want.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/nHtblsq.jpg' alt='a gif showing how to install this')
             li.large-li.gif-caption
                 a(href='//github.com/freecodecamp/freecodecamp' target='_blank') Go to Free Code Camp's open-source repository
                 |  and "star" it. "Starring" is the GitHub equivalent of "liking" something.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/.jpg' alt='a gif showing how to install this')
             li.large-li.gif-caption Now that you have a GitHub account, you can 
                 a(href='https://gitter.im/FreeCodeCamp/FreeCodeCamp' target='_blank') join our main chat room by authenticating with GitHub
-                | .
+                | . Introduce yourself by saying "Hello world!". Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/AnuCW6SliIRINoxEuAxLiTplYPralqtcHLQB/image.png' alt='a gif showing how to install this')
-            li.large-li.gif-caption Introduce yourself by saying "Hello world!". Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.
+            li.large-li.gif-caption Our chat rooms are extremely active so you probably want to turn off notifications.
 
             hr
             img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
@@ -69,13 +69,13 @@ block content
             li.large-li.gif-caption Keep our chat room open while you work through our challenges. That way, you can ask for help if you get stuck. You can also socialize with other campers when you feel like taking a break.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/Ant4DdieE8tAK4kYWBxoNOL33ADbJeMBsjEB/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption
                 a(href='https://gitter.im/apps' target='_blank') You can also download the chat room app to your computer or phone
                 | .
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/AnvXOQTSV1lKoJVwGK04sExskCXqLyLmM54B/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption Click the "Map" button in your upper right hand corner. Our map shows all our coding challenges. We recommend that you complete these from top to bottom, at a sustainable pace.
 
             hr
@@ -83,7 +83,7 @@ block content
             li.large-li.gif-caption After you finish all of our challenges, you'll start building projects for nonprofits.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/Anv5CKnYXa5HGpBllbf1HRp0QgUc0rv5yTwB/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption Click the "Wiki" button in your upper right hand corner. Our community has contributed lots of useful information to this searchable wiki.
 
             hr
@@ -99,7 +99,7 @@ block content
             li.large-li.gif-caption Your portfolio page shows your progress and how many Brownie Points you have. You can get Brownie Points by completing challenges and by helping other campers in our chat rooms. If you get Brownie Points on several days in a row, you'll get a streak.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/AnspWLymUEpJBZR6LvSCoBJFkn06NLa-GygB/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption Click the "News" button in your upper right hand corner. You can browse links on Camper News and upvote ones that you enjoy.
 
             hr
@@ -107,7 +107,7 @@ block content
             li.large-li.gif-caption Our Campsites help you code with campers in your city. You can coordinate study groups or attend local coding events together.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/AnuMiYJUMhFOzqKu2bAjL88LIrCiuHr998sB/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption
                 a(href='https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites' target='_blank') Find your city on this list
                 | . Click the "Join group" button to join your city's Facebook group. If your city isn't on this list, 
@@ -115,13 +115,13 @@ block content
                 | .
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/AnuMiYJUMhFOzqKu2bAjL88LIrCiuHr998sB/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption
                 a(href='https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites' target='_blank') Go back to our list of Campsites 
                 | and click "Gitter" to join your city's chat room.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/Anv-oGsT2wpH962kQu65XdL00BOP591gia8B/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption You can 
                 a(href='https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp' target='_blank') add Free Code Camp to your LinkedIn education background
                 | . Set your graduation date as next year. For "Degree", type "Full Stack Web Development". For "Field of study", type "Computer Software Engineering". Then click "Save Changes".
@@ -135,11 +135,11 @@ block content
             li.large-li.gif-caption First, R - Read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/Anse5JAKH0VFKLL6EiCzJHFXvJpTidGLszQB/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption If that didn't help, S - Search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.
 
             hr
-            img.gif-block.img-center.img-responsive(src='http://i.imgur.com/RlEk2IF.jpg' alt='a gif showing how to install this')
+            img.gif-block.img-center.img-responsive(src='https://www.evernote.com/l/AHQRHsEhUsRNwpNHtw-nwYEj5Oj5AKTC678B/image.png' alt='a gif showing how to install this')
             li.large-li.gif-caption If that didn't help, A - Ask your friends. If you have trouble, you can ask your fellow campers in our 
                 a(href='https://gitter.im/FreeCodeCamp/Help' target='_blank') help chat room
                 | .