Feature/settings styles

app/directives/busy-button/busy-button.directive.js

@@ -0,0 +1,30 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcBusyButton', tcBusyButton);
+
+  function tcBusyButton() {
+    return {
+      restrict: "A",
+      scope: {
+        tcBusyMessage: "=",
+        tcBusyWhen: "="
+      },
+      link: function(scope, element, attrs) {
+        scope.originalContent = element.html();
+        scope.busyMessage = attrs.tcBusyMessage || "Saving...";
+        scope.$watch('tcBusyWhen', function(newValue, oldValue) {
+          if (newValue !== oldValue && newValue === true) {
+
+            var busyMessageHtml = String.supplant(
+              '<i class="fa fa-spinner fa-spin"></i>&nbsp;<span style="text-transform:none;">{busyMessage}</span>',
+              scope);
+            element.attr('disabled', true).html('').append(busyMessageHtml);
+          } else {
+            element.removeAttr('disabled').html(scope.originalContent);
+          }
+        });
+      }
+    }
+  }
+})();

app/directives/external-account/external-link-data.directive.jade

@@ -1,10 +1,11 @@
 .external-link-list
   div.external-link-tile(ng-repeat="account in linkedAccounts")
-    div.logo
-      i.fa(ng-class="(account|providerData:'className') || 'fa-globe'")
-    h2 {{account|providerData:"displayName"}}
+    .top
+      div.logo
+        i.fa(ng-class="(account|providerData:'className') || 'fa-globe'")
+      h2 {{account|providerData:"displayName"}}
 
-    div(ng-switch="account.provider")
+    div.bottom(ng-switch="account.provider")
 
       div(ng-switch-when="github")
         .handle {{account.data.handle}}

app/directives/skill-tile/skill-tile.directive.jade

@@ -4,5 +4,5 @@ a(ng-click="enableHide && toggle()")
     i.colored(ng-show="icon", ng-class="icon") 
     img.default(ng-hide="icon", src="/images/ico-code-c.svg")
   .name {{skill.tagName}} [{{skill.score}}]
-  spam(ng-if="skill.hidden") Hidden
+  span.hidden(ng-if="skill.hidden") (Hidden)
 

app/filters/track.filter.js

@@ -19,7 +19,7 @@
         'FRONT_END_FLASH': 'Front-End Flash',
         'APPLICATION_FRONT_END_DESIGN': 'Application Front-End Design',
         'DESIGN_FIRST_2_FINISH': 'Design First2Finish',
-        'DEVELOP': 'DEVELOPMENT'
+        'DEVELOP': 'Development'
       };
 
       function capitalized(str) {

app/index.jade

@@ -143,6 +143,7 @@ html
     script(src="directives/account/validate-email.directive.js")
     script(src="directives/account/validate-register.directive.js")
     script(src="directives/badges/badge-tooltip.directive.js")
+    script(src="directives/busy-button/busy-button.directive.js")
     script(src="directives/challenge-tile/challenge-tile.directive.js")
     script(src="directives/distribution-graph/distribution-graph.directive.js")
     script(src="directives/external-account/external-account.directive.js")

app/profile/profile.controller.js

@@ -61,6 +61,8 @@
     // externalLinks
     vm.externalLinksPromise = ExternalAccountService.getLinkedExternalLinksData(vm.userHandle).then(function(data) {
       vm.linkedExternalAccountsData = data.plain();
+      console.log('EXT')
+      console.log(vm.linkedExternalAccountsData)
       vm.status.externalLinks = CONSTANTS.STATE_READY;
     }).catch(function(err) {
       vm.status.externalLinks = CONSTANTS.STATE_ERROR;

app/settings/account-info/account-info.controller.js

@@ -3,18 +3,31 @@
 
   angular.module('tc.settings').controller('AccountInfoController', AccountInfoController);
 
-  AccountInfoController.$inject = ['userData', 'UserService', 'ProfileService', '$log', 'ISO3166'];
+  AccountInfoController.$inject = ['userData', 'UserService', 'ProfileService', '$log', 'ISO3166', 'toaster'];
 
-  function AccountInfoController(userData, UserService, ProfileService, $log, ISO3166) {
+  function AccountInfoController(userData, UserService, ProfileService, $log, ISO3166, toaster) {
     var vm = this;
     vm.saveAccountInfo = saveAccountInfo;
     vm.updateCountry   = updateCountry;
+    vm.isSocialRegistrant = false;
+    vm.formProcessing = {
+      accountInfoForm: false,
+      newPasswordForm: false
+    };
 
     activate();
 
     function activate() {
       processData();
-      vm.userData = userData;
+      vm.userData = _.clone(userData, true);
+      UserService.getUserProfile({fields: 'credential'})
+      .then(function(res) {
+        vm.isSocialRegistrant = !res.credential.hasPassword;
+      })
+      .catch(function(err) {
+        $log.error("Error fetching user profile. Redirecting to edit profile.");
+        $state.go('settings.profile');
+      });
 
       vm.countries = ISO3166.getAllCountryObjects();
       vm.countryObj = ISO3166.getCountryObjFromAlpha3(userData.homeCountryCode);
@@ -24,15 +37,45 @@
       var countryCode = _.get(angucompleteCountryObj, 'originalObject.alpha3', undefined);
 
       var isValidCountry = _.isUndefined(countryCode) ? false : true;
-      vm.updateAccountInfo.country.$setValidity('required', isValidCountry);
+      vm.accountInfoForm.country.$setValidity('required', isValidCountry);
     }
 
     function saveAccountInfo() {
-      ProfileService.updateUserProfile(userData);
+      vm.formProcessing.accountInfoForm = true;
+      ProfileService.updateUserProfile(userData)
+      .then(function(data) {
+        vm.formProcessing.accountInfoForm = false;
+        toaster.pop('success', "Success!", "Your account information was updated.");
+      })
+      .catch(function() {
+        vm.formProcessing.accountInfoForm = false;
+        toaster.pop('error', "Whoops!", "Something went wrong. Please try again later.");
+      })
     }
 
     function processData() {
       vm.homeAddress = _.find(userData.addresses, {type: 'HOME'}) || {};
     }
+
+    function submitNewPassword() {
+      vm.formProcessing.newPasswordForm = true;
+      UserService.updatePassword(vm.newPassword, vm.currentPassword)
+      .then(function() {
+        vm.formProcessing.newPasswordForm = false;
+        vm.newPassword = '';
+        vm.currentPassword = '';
+        toaster.pop('success', "Success", "Password successfully updated");
+        vm.newPasswordForm.$setPristine();
+        vm.currentPasswordFocus = false;
+        // vm.placeholder = vm.defaultPlaceholder;
+        // vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
+
+        $log.info('Your password has been updated.');
+      })
+      .catch(function(err) {
+        vm.formProcessing.newPasswordForm = false;
+        $log.error(err);
+      });
+    }
   }
 })();

app/settings/account-info/account-info.jade

@@ -1,59 +1,159 @@
 .account-info-container
-  h1.tab-title Account Info
-
-  .fields
-    .field-section
-      h4.field-title Username
-
-      p {{vm.userData.handle}}
-
-    .field-section
-      h4.field-title Email
-
-      p {{vm.userData.email}}
-
-    .field-section.update-account-info
-      form(name="vm.updateAccountInfo", role="form", ng-submit="vm.updateAccountInfo.$valid && vm.saveAccountInfo()", novalidate, autocomplete="off")
-        // Stops Chrome from autofilling and autocompleting (along with autocomplete="off" on the form)
-        input(autocomplete="false", name="hidden", type="text", style="display:none;")
-
-        .address-fields
-          label *First name (Given name)
-            input(name="firstname", type="text", value="{{vm.userData.firstName}}", ng-model="vm.userData.firstName", maxlength="64", required)
-
-          label *Last name (Surname)
-            input(name="lastname", type="text", value="{{vm.userData.lastName}}", ng-model="vm.userData.lastName", maxlength="64", required)
-
-          label Address
-            input(name="address", type="text", value="{{vm.homeAddress.streetAddr1}}", ng-model="vm.homeAddress.streetAddr1")
-
-          label Address 2 (apartment, suite, etc.)
-            input(name="address2", type="text", value="{{vm.homeAddress.streetAddr2}}", ng-model="vm.homeAddress.streetAddr2")
-
-          label City
-            input(name="city", type="text", value="{{vm.homeAddress.city}}", ng-model="vm.homeAddress.city")
-
-          label State/Province
-            input(name="state", type="text", value="{{vm.homeAddress.stateCode}}", ng-model="vm.homeAddress.stateCode")
-
-          label Zip code/Post code
-            input(name="zipcode", type="text", value="{{vm.homeAddress.zip}}", ng-model="vm.homeAddress.zip")
-
-          label *Country
-            angucomplete-alt(
-              input-name="country",
-              pause="100",
-              selected-object="vm.updateCountry",
-              local-data="vm.countries",
-              initial-value="vm.countryObj",
-              search-fields="name",
-              title-field="name",
-              match-class="angucomplete-highlight",
-              minlength="1"
+  .settings-section.credentials
+    .section-info
+      h2 credentials
+      .description Used to log in to your account and cannot be edited. Please contact [email protected] if you need to make changes.
+
+    .section-fields
+      .form-label.username Username
+      input.form-field(name="username", value="{{vm.userData.handle}}", disabled=true)
+
+      .form-label email
+      input.form-field(name="email", value="{{vm.userData.email}}", disabled=true)
+
+      div(ng-hide="vm.isSocialRegistration")
+        form(name="vm.newPasswordForm", role="form", ng-submit="vm.newPasswordForm.$valid && vm.submitNewPassword()", novalidate)
+          .form-label Current password
+          .validation-bar(ng-class="{ 'success-bar': (vm.newPasswordForm.newPassword.$valid) }")
+            toggle-password.form-field(ng-model="vm.currentPassword")
+          //- input.form-field(
+          //-   name="currentPassword", type="text", 
+          //-   placeholder="First",
+          //-   ng-model="vm.currentPassword", 
+          //-   maxlength="64", required, 
+          //-   ng-class="{'form-field-focused': hasFocus==true}"
+          //- )
+
+          .form-label New Password
+          .validation-bar(ng-class="{ 'success-bar': (vm.newPasswordForm.newPassword.$valid) }")
+            toggle-password-with-tips.form-field(placeholder="Pick a new password")
+            .tips.password-tips(ng-show="vm.passwordFocus")
+              h3 Password Tips:
+
+              p Your password must have:
+
+              p(ng-class="{ 'has-length-between-range': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.minlength && !vm.newPasswordForm.password.$error.maxlength && !vm.newPasswordForm.password.$error.required) }") At least 8 characters
+
+              p(ng-class="{ 'has-letter': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasLetter) }") At least one letter
+
+              p(ng-class="{ 'has-symbol-or-number': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
+
+          .button-container
+            button.button-l.save(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.newPasswordForm", ng-disabled="vm.newPasswordForm.$invalid") Save
+
+
+      div(ng-show="vm.isSocialRegistration")
+        p You joined Topcoder by using an external account, so we don't have a password for you.
+
+
+  form(name="vm.accountInfoForm", role="form", ng-submit="vm.accountInfoForm.$valid && vm.saveAccountInfo()", novalidate, autocomplete="off")
+
+    .settings-section.name
+      .section-info
+        h2  Name
+        .description Required for legal purposes; will be kept private and not shared with anyone.
+
+      .section-fields
+
+          // Stops Chrome from autofilling and autocompleting (along with autocomplete="off" on the form)
+          input(autocomplete="false", name="hidden", type="text", style="display:none;")
+          .form-label.first First name 
+            span(style="text-transform: none;")  (Given name)
+          .validation-bar(ng-class="{ 'error-bar': (vm.accountInfoForm.$dirty && vm.accountInfoForm.firstname.$invalid), 'success-bar': (vm.accountInfoForm.$dirty && vm.accountInfoForm.firstname.$valid)}")
+            input.form-field(
+              name="firstname", type="text",
+              placeholder="First",
+              ng-model="vm.userData.firstName", 
+              maxlength="64", required, 
+              ng-class="{'form-field-focused': hasFocus==true}"
             )
-
-            .account-info-error
-              p.form-error(ng-show="vm.updateAccountInfo.country.$error.required") Please choose a country from the list.
-
-
-        button(type="submit", ng-disabled="vm.updateAccountInfo.$invalid", ng-class="{'enabled-button': vm.updateAccountInfo.$valid}") Save
+            .form-input-error(ng-show="vm.accountInfoForm.firstname.$invalid")
+              p(ng-show="vm.accountInfoForm.firstname.$error.required") This is a required field.
+
+          .form-label Last name
+            span(style="text-transform: none;")  (Surname)
+          .validation-bar(ng-class="{ 'error-bar': (vm.accountInfoForm.$dirty && vm.accountInfoForm.lastname.$invalid), 'success-bar': (vm.accountInfoForm.$dirty && vm.accountInfoForm.lastname.$valid)}")
+            input.form-field(
+              name="lastname", type="text", 
+              placeholder="Last",
+              ng-model="vm.userData.lastName", 
+              maxlength="64", required,
+              ng-class="{'form-field-focused': hasFocus==true}"
+            )
+            .form-input-error(ng-show="vm.accountInfoForm.lastname.$invalid")
+              p(ng-show="vm.accountInfoForm.lastname.$error.required") This is a required field.
+
+
+    .settings-section.address
+      .section-info
+        h2  address
+        .description Required for payments and in case we need to mail you something. Will be kept private and not shared with anyone.
+
+      .section-fields          
+          .form-label.address Address
+          input.form-field(
+            name="address", type="text",
+            placeholder="123 Topcoder Ave.",
+            value="{{vm.homeAddress.streetAddr1}}",
+            ng-model="vm.homeAddress.streetAddr1",
+            ng-class="{'form-field-focused': hasFocus==true}"
+          )
+
+          .form-label Address 2 
+            span(style="text-transform: none;")  (opt., suite, etc.)
+          input.form-field(
+            name="address2",
+            type="text",
+            placeholder="Suite 42",
+            value="{{vm.homeAddress.streetAddr2}}",
+            ng-model="vm.homeAddress.streetAddr2",
+            ng-class="{'form-field-focused': hasFocus==true}"
+          )
+
+          .form-label City
+          input.form-field(
+            name="city", type="text",
+            value="{{vm.homeAddress.city}}",
+            placeholder="Best City in the World",
+            ng-model="vm.homeAddress.city",
+            ng-class="{'form-field-focused': hasFocus==true}"
+          )
+
+          .form-label State/Province
+          input.form-field(
+            name="state", type="text",
+            value="{{vm.homeAddress.stateCode}}",
+            placeholder="California",
+            ng-model="vm.homeAddress.stateCode",
+            ng-class="{'form-field-focused': hasFocus==true}"
+          )
+
+          .form-label Zip
+          input.form-field(
+            name="zipcode", type="text",
+            placeholder="Zip"
+            value="{{vm.homeAddress.zip}}",
+            ng-model="vm.homeAddress.zip",
+            ng-class="{'form-field-focused': hasFocus==true}"
+          )
+
+          .form-label Country
+          angucomplete-alt(
+            input-name="country",
+            input-class="form-field",
+            pause="100",
+            selected-object="vm.updateCountry",
+            local-data="vm.countries",
+            initial-value="vm.countryObj",
+            search-fields="name",
+            title-field="name",
+            match-class="angucomplete-highlight",
+            minlength="1",
+            ng-class="{'form-field-focused': hasFocus==true}"
+          )
+          .account-info-error(ng-show="vm.accountInfoForm.country.$invalid")
+            p(ng-show="vm.accountInfoForm.country.$error.required") Please choose a country from the list.
+
+
+          .button-container
+            button.button-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid}") Save