Change password tips to require one number or symbol

Author: Nick Litwin

app/account/login/login.controller.js

@@ -101,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

@@ -87,7 +87,7 @@
           userId: vm.socialUserId,
           name: vm.firstname + " " + vm.lastname,
           email: vm.socialProfile.email,
-          emailVerified: vm.socialProfile.emailVerified,
+          emailVerified: vm.socialProfile.email_verified,
           providerType: vm.socialProvider
         }
       }
@@ -120,5 +120,7 @@
           callbackURL: callbackUrl
         });
     }
+
+    vm.$stateParams = $stateParams;
   }
 })();

app/account/register/register.jade

@@ -63,7 +63,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:
@@ -72,7 +72,7 @@
 
         p(ng-class="{ 'has-letter': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasLetter) }") At least one letter
 
-        p(ng-class="{ 'has-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasNumber && !vm.registerForm.password.$error.hasSymbol) }") At least one number or symbol
+        p(ng-class="{ 'has-number': (vm.registerForm.password.$dirty && (!vm.registerForm.password.$error.hasNumber || !vm.registerForm.password.$error.hasSymbol)) }") At least one number or symbol
 
     button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join
 
@@ -90,4 +90,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

@@ -45,9 +45,7 @@
 
         p(ng-class="{ 'has-letter': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasLetter) }") At least one letter
 
-        p(ng-class="{ 'has-symbol': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasSymbol) }") At least one symbol
-
-        p(ng-class="{ 'has-number': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasNumber) }") At least one number
+        p(ng-class="{ 'has-number': (vm.resetPasswordForm.password.$dirty && (!vm.resetPasswordForm.password.$error.hasNumber || !vm.resetPasswordForm.password.$error.hasSymbol) }") At least one number or symbol
 
     .form-errors
       p.form-error(ng-show="vm.resetFailed") We were unable to reset your password. Please request another reset link. If you continue to have trouble, please contact 

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

@@ -20,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/distribution-graph/distribution-graph.directive.jade

@@ -1,4 +1,4 @@
-.graph-viewer
+.graph-viewer(ng-show="graphState.show == 'distribution'")
   .distribution-graph
 
   .info-port
@@ -8,3 +8,6 @@
     .rating(ng-if="!displayCoders")
       .num {{rating}}
       .label RATING
+
+    .compare
+      button(ng-click="graphState.show = 'history'") COMPARE

app/directives/distribution-graph/distribution-graph.directive.js

@@ -11,7 +11,8 @@
       },
       scope: {
         promise: '=',
-        rating: '='
+        rating: '=',
+        graphState: '='
       },
       controller: ['$scope', DistributionGraphController]
     };
@@ -55,9 +56,11 @@
         'end': Infinity
       }
     ];
-    var w       = 700,
+    var w       = 600,
         h       = 400,
-        padding = 100;
+        padding = { top: 20, left: 100, bottom: 100, right: 0 };
+    var totalW = w + padding.left + padding.right;
+    var totalH = h + padding.top + padding.bottom;
 
     activate();
 
@@ -71,45 +74,48 @@
         removeTrailingZeroes(ranges);
         var xScale = d3.scale.ordinal()
                        .domain(d3.range(ranges.length))
-                       .rangeRoundBands([padding, w], 0.05);
+                       .rangeRoundBands([padding.left, padding.left + w], 0.05);
         var yScale = d3.scale.linear()
                        .domain([0, d3.max(ranges, function(range) { return range.number }) + 1])
-                       .range([h - padding, 0]);
+                       .range([totalH - padding.bottom, padding.top]);
         var xScale2 = d3.scale.linear()
                         .domain([ranges[0].start,
                                 d3.max(ranges, function(range) { return range.end })])
-                        .range([padding, w]);
+                        .range([padding.left, totalW - padding.right]);
         var svg = d3.select('div.distribution-graph')
                     .append('svg')
-                    .attr('width', w)
-                    .attr('height', h);
+                    .attr('width', totalW)
+                    .attr('height', totalH);
 
         svg.append('rect')
-           .attr('x', padding)
-           .attr('y', 0)
+           .attr('x', padding.left)
+           .attr('y', padding.top)
            .attr('width', w)
-           .attr('height', h - padding)
-           .attr('fill', '#eeeeee')
+           .attr('height', h)
+           .attr('fill', '#f6f6f6')
 
         svg.append('g')
            .attr('class', 'grid')
-           .attr('transform', 'translate(' + padding + ',0)')
+           .attr('transform', 'translate(' + padding.left + ',0)')
            .call(
-             yAxis(5).tickSize(-w, 0, 0)
+             yAxis(5).tickSize(-totalW, 0, 0)
                     .tickFormat('')
            )
 
         svg.append('g')
            .attr('class', 'axis')
-           .attr('transform', 'translate(' + padding + ',0)')
+           .attr('transform', 'translate(' + padding.left + ', 0)')
            .call(yAxis(5))
 
 
+        function logr(x) {
+          console.log(x); return x;
+        }
         svg.append('line')
            .attr('x1', xScale2($scope.rating))
-           .attr('y1', h - padding)
+           .attr('y1', totalH - padding.bottom)
            .attr('x2', xScale2($scope.rating))
-           .attr('y2', 0)
+           .attr('y2', padding.top)
            .attr('class', 'my-rating')
            .attr('stroke-width', 2)
            .attr('stroke', ratingToColor($scope.colors, $scope.rating));
@@ -127,7 +133,7 @@
            })
            .attr('width', xScale.rangeBand())
            .attr('height', function(d) {
-             return h - padding - yScale(d.number);
+             return totalH - padding.bottom - yScale(d.number);
            })
            .attr('fill', function(d) {
              return ratingToColor($scope.colors, d.start);
@@ -153,20 +159,20 @@
            .attr('class', 'xaxis')
            .attr('x1', function(d, i) {
              if (i === 0) {
-               return padding;
+               return padding.left;
              } else {
                return xScale(i) - .5;
              }
            })
            .attr('x2', function(d, i) {
              if (i === ranges.length - 1) {
-               return w;
+               return totalW - padding.right;
              } else {
                return xScale(i) + xScale.rangeBand() + .5;
              }
            })
-           .attr('y1', h - padding + .5)
-           .attr('y2', h - padding + .5)
+           .attr('y1', h + padding.top + .5)
+           .attr('y2', h + padding.top + .5)
            .attr('stroke', function(d) {
              return ratingToColor($scope.colors, d.start);
            })
@@ -185,7 +191,7 @@
 
         svg.append('g')
            .attr('class', 'axis')
-           .attr('transform', 'translate(0,' + (h - padding) + ')')
+           .attr('transform', 'translate(0,' + (h + padding.top) + ')')
            .call(xAxis)
            .selectAll('text')
            .attr('x', 9)

app/directives/history-graph/history-graph.directive.jade

@@ -0,0 +1,11 @@
+.history-graph-container(ng-show="graphState.show == 'history'")
+  .history-graph
+
+  .info-port
+    .rating
+      .num {{historyRating || rating}}
+      .label RATING
+    .history-info(ng-if="historyRating")
+      | Attained on {{historyDate}} in challenge "{{historyChallenge}}"
+    .lower
+      button(ng-click="graphState.show = 'distribution'") COMPARE