Merge branch 'dev' into tom-add-design-thumbnails

Author: tladendo

.project

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>topcoder-app</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>

README.md

@@ -1,7 +1,7 @@
 # Topcoder-App
 This repository houses any new topcoder pages or refactored Angular apps/pages from the tc-site repository.
 
-The technologies used are Jade, SCSS, ES6, Angular, and Gulp.
+The technologies used are Jade, SCSS, Angular, and Gulp.
 
 ## Installation
 
@@ -13,6 +13,8 @@ Install dependencies by running the following in the root of the project:
  - npm install
  - bower install
 
+In order to test a logged in user, you must make an entry in your /etc/hosts file, pointing local.topcoder-dev.com to localhost. For example, open your /etc/hosts file with something like `vim /etc/hosts` and add `127.0.0.1 local.topcoder-dev.com`. After you run `gulp serve`, which launches a new window or tab, change `http://localhost:3000/sample/` to `http://local.topcoder-dev.com:3000/sample/`. You will then be able to login and pick up information from the cookies with `.topcoder-dev.com` as the domain.
+
 ## Gulpfile Commands
 - Run `gulp` to get the full list of commands
 - To run locally without minification: `gulp serve`
@@ -89,7 +91,7 @@ SCSS Files
   - Store new variables and mixins in the appropriate file in `assets/css/partials`
   - Since a class with the current state name is added to the ui-view (see the Creating New Views/Pages section), wrap your .scss file with this class, in order to write specific SCSS in its own file for that page.
 
-JS/ES6
+JavaScript
   - See this section on [naming conventions and style guide](https://github.com/appirio-tech/topcoder-app/blob/dev/README.md#style-guide-and-naming-conventions)
 
 Creating New Views/Pages

app/account/account.routes.js

@@ -103,7 +103,10 @@
         url: '/logout/',
         controller: ['TcAuthService', function(TcAuthService) {
           TcAuthService.logout();
-        }]
+        }],
+        data: {
+          authRequired: false
+        }
       }
     };
 

app/account/login/login.controller.js

@@ -14,7 +14,6 @@
     if ($stateParams.userJWTToken) {
       // user logged in
       AuthTokenService.setV3Token($stateParams.userJWTToken);
-      UserService.setUserIdentity($stateParams.userJWTToken);
       Helpers.redirectPostLogin($stateParams.next);
     }
 
@@ -34,7 +33,7 @@
       AuthTokenService.getTokenFromAuth0Code($stateParams.code).then(
         function(v3Token) {
           $log.debug('logged in using social');
-          Helpers.redirectPostLogin($stateParams.next);
+          return Helpers.redirectPostLogin($stateParams.next);
         }
       );
     }
@@ -44,11 +43,11 @@
     }
 
     function _doLogin(usernameOrEmail, password) {
-     TcAuthService.login(usernameOrEmail, password).then(
+     return TcAuthService.login(usernameOrEmail, password).then(
       function(data) {
         // success
         $log.debug('logged in');
-        Helpers.redirectPostLogin($stateParams.next);
+        return Helpers.redirectPostLogin($stateParams.next);
       },
       function(err) {
         // handle error
@@ -102,6 +101,7 @@
       TcAuthService.socialLogin(backend, callbackUrl);
     };
 
+    vm.$stateParams = $stateParams;
   }
 
 })();

app/account/login/login.jade

@@ -32,5 +32,5 @@
   a.forgot-password(ui-sref="resetPassword") Forgot Password?
 
   p.redirect Don't have an account? 
-    a(ui-sref="register") Join Now.
+    a(ui-sref="register(vm.$stateParams)") Join Now.
 

app/account/register/register.controller.js

@@ -56,10 +56,14 @@
       .then(function(obj) {
         vm.countryObj = obj;
       });
+
     vm.countries = ISO3166.getAllCountryObjects();
-    vm.countryUpdated = function ($item) {
-      // update country
-      vm.country = _.get($item, "originalObject.name", undefined);
+
+    vm.updateCountry = function (angucompleteCountryObj) {
+      var countryCode = _.get(angucompleteCountryObj, 'originalObject.alpha3', undefined);
+
+      var isValidCountry = _.isUndefined(countryCode) ? false : true;
+      vm.registerForm.country.$setValidity('required', isValidCountry);
     };
 
     vm.register = function() {
@@ -83,12 +87,19 @@
           userId: vm.socialUserId,
           name: vm.firstname + " " + vm.lastname,
           email: vm.socialProfile.email,
-          emailVerified: vm.socialProfile.emailVerified,
+          emailVerified: vm.socialProfile.email_verified,
           providerType: vm.socialProvider
         }
       }
 
-      TcAuthService.register({param: userInfo})
+      var body = {
+        param: userInfo,
+        options: {
+          afterActivationURL: CONSTANTS.MAIN_URL + '/my-dashboard/'
+        }
+      }
+
+      TcAuthService.register(body)
       .then(function(data) {
         $log.debug('registered successfully');
 
@@ -104,8 +115,12 @@
       auth0Register.login({
           scope: "openid profile offline_access",
           state: callbackUrl,
-          response_type: 'token'
+          connection: backend,
+          response_type: 'token',
+          callbackURL: callbackUrl
         });
     }
+
+    vm.$stateParams = $stateParams;
   }
 })();

app/account/register/register.jade

@@ -1,10 +1,12 @@
 .register-container
   h1 Join Topcoder
 
-  form(name="vm.registerForm", role="form", ng-submit="vm.registerForm.$valid && vm.register()", novalidate)
+  form(name="vm.registerForm", role="form", ng-submit="vm.registerForm.$valid && vm.register()", 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;")
 
     p.form-error(ng-show="vm.errMsg") {{vm.errMsg}}
-    br
 
     .first-last-names
       input(right-placeholder, focused-placeholder="First", ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
@@ -15,23 +17,23 @@
     //- .form-errors
     //-   p.form-error(ng-show="vm.registerForm.firstname.$dirty && vm.registerForm.firstname.$error.pattern") Names must not contain symbols or numbers.
 
-    //- input(ng-model="vm.country", name="country", placeholder="Country", type="text", required)
     .country-dropdown
       angucomplete-alt(
-        id="countryId",
+        input-name="country",
         placeholder="Country",
         pause="100",
-        selected-object="vm.countryUpdated",
+        selected-object="vm.updateCountry",
         local-data="vm.countries",
+        initial-value="vm.countryObj",
         search-fields="name",
         title-field="name",
-        match-class="highlight",
-        initial-value="vm.countryObj",
-        minlength="1",
-        auto-match=true,
-        field-required=true,
+        match-class="angucomplete-highlight",
+        minlength="1"
       )
 
+      .form-errors
+        p.form-error(ng-show="vm.registerForm.country.$error.required") Please enter a valid country.
+
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.username.$error.usernameIsFree || vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength), 'success-bar': (vm.registerForm.username.$valid && !vm.registerForm.username.$error.usernameIsFree) }")
       input(right-placeholder, focused-placeholder="Username", ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
 
@@ -52,7 +54,7 @@
       p.form-error(ng-show="vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength") Username must be between 2 and 15 characters.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.email.$dirty && vm.registerForm.email.$invalid), 'success-bar': (vm.registerForm.email.$valid) }")
-      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", email-is-available, required)
+      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
         h3 Email Tips:
@@ -65,7 +67,7 @@
       p.form-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$invalid") Please enter a valid email address.
 
     .validation-bar(ng-class="{ 'success-bar': (vm.registerForm.password.$valid) }")
-      toggle-password
+      toggle-password(ng-if="!vm.isSocialRegistration")
 
       .tips.password-tips(ng-show="vm.passwordFocus")
         h3 Password Tips:
@@ -94,4 +96,4 @@
       i.fa.fa-google-plus-square(ng-click="vm.socialRegister('google-oauth2')")
 
   p.redirect Already have an account? 
-    a(ui-sref="login") Login.
+    a(ui-sref="login(vm.$stateParams)") Login.

app/account/reset-password/reset-password.jade

@@ -5,7 +5,7 @@
   form.reset-form(name='vm.generateTokenForm', role="form", ng-submit="vm.generateTokenForm.$valid && vm.sendLink()", novalidate)
 
     .validation-bar(ng-class="{ 'error-bar': (vm.generateTokenForm.email.$dirty && vm.generateTokenForm.email.$invalid), 'success-bar': (vm.generateTokenForm.email.$valid) }")
-      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", required email)
+      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
         h3 Email Tips:

app/directives/account/toggle-password/toggle-password.directive.js

@@ -10,6 +10,7 @@
       templateUrl: 'directives/account/toggle-password/toggle-password.html',
       link: function(scope, element, attrs, formController) {
         var vm = scope.vm;
+        vm.passwordField = formController.password;
         vm.placeholder = vm.defaultPlaceholder;
         vm.password = '';
 
@@ -19,6 +20,12 @@
           passwordInput.focus();
         });
 
+        element.bind('keyup', function(event) {
+          if (event.keyCode === 13) {
+            passwordInput.blur();
+          }
+        });
+
         vm.onFocus = function(event) {
           vm.passwordFocus = true;
           vm.placeholder = '';

app/directives/account/toggle-password/toggle-password.jade

@@ -19,4 +19,4 @@ input#password-input(
   has-number,
   required)
 
-label(ng-show="vm.passwordFocus || vm.registerForm.password.$dirty") #[input(type="checkbox", ng-model="refocus", ng-change="vm.toggleInputType()")] Show
+label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", ng-model="refocus", ng-change="vm.toggleInputType()")] Show

app/directives/account/validate-email.directive.js

@@ -0,0 +1,20 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents')
+    .directive('validEmail', validEmail);
+    
+  function validEmail() {
+    return {
+      require: 'ngModel',
+      link: function(scope, element, attrs, ctrl) {
+        ctrl.$validators.validEmail = function(modelValue, viewValue) {
+          if (/.+@.+\..+/.test(viewValue)) {
+            return true;
+          }
+          return false;
+        };
+      }
+    };
+  }
+})();

app/directives/badges/badge-tooltip.directive.js

@@ -0,0 +1,59 @@
+
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('badgeTooltip', badgeTooltip);
+
+  /**
+   * Add a badge tooltip.
+   */
+  function badgeTooltip() {
+    return {
+      restrict: 'A',
+      templateUrl: 'directives/badges/badge-tooltip.html',
+      scope: {
+        badge: '='
+      },
+      link : function(scope, element, attr) {
+        scope.hide = true;
+        return new TcBadgeTooltipDirective(scope, element, attr);
+      }
+    }
+  }
+
+  /**
+   * The link function of directive tc-badge-tooltip
+   */
+  var TcBadgeTooltipDirective = function (scope, element, attr) {
+
+    var tooltipElement = element.children(0);
+    if (!tooltipElement.hasClass('tooltip')) {
+      return;
+    }
+    var tooltipHtml = tooltipElement[0];
+
+    var tooltipFn = this;
+
+    element.on('mouseenter', function() {
+      tooltipElement.css('z-index', '-2000');
+      scope.hide = false;
+      // apply scope to display the tooltip element at z-index -2000
+      // otherwise we won't get the height of the element
+      scope.$apply();
+
+      var ht = tooltipHtml.offsetHeight;
+      var wt = tooltipHtml.offsetWidth - element[0].offsetWidth;
+      var top  = element[0].offsetTop - ht - 10;
+      var lt = element[0].offsetLeft - wt / 2;
+
+      tooltipElement.css("left", lt + 'px');
+      tooltipElement.css("top", top + 'px');
+      tooltipElement.css('z-index', '2000');
+    });
+
+    element.on('mouseleave', function(){
+      scope.hide = true;
+      scope.$apply();
+    });
+  }
+})();

app/directives/badges/badge-tooltip.jade

@@ -0,0 +1,10 @@
+.tooltip(ng-hide="hide")
+  .inner
+    header(ng-bind="badge.name")
+    .data
+      p.earnedOn(ng-bind="'Earned on ' + badge.date", ng-show="badge.date")
+      p.earnedOn(ng-hide="badge.date") Not Earned Yet
+    .data(ng-show="badge.currentlyEarned > 0")
+      p.currentlyEarned
+        span(ng-bind="badge.currentlyEarned")
+    .arrow