Merge pull request #2880 from hypothesis/move-login-form-to-directive

Extract the login form into its own directive

h/static/scripts/app.coffee

@@ -101,7 +101,6 @@ module.exports = angular.module('h', [
 .controller('AppController', require('./app-controller'))
 .controller('AnnotationUIController', require('./annotation-ui-controller'))
 .controller('AnnotationViewerController', require('./annotation-viewer-controller'))
-.controller('AuthController', require('./auth-controller'))
 .controller('StreamController', require('./stream-controller'))
 .controller('WidgetController', require('./widget-controller'))
 
@@ -112,6 +111,7 @@ module.exports = angular.module('h', [
 .directive('formValidate', require('./directive/form-validate'))
 .directive('groupList', require('./directive/group-list').directive)
 .directive('hAutofocus', require('./directive/h-autofocus'))
+.directive('loginForm', require('./directive/login-form').directive)
 .directive('markdown', require('./directive/markdown'))
 .directive('simpleSearch', require('./directive/simple-search'))
 .directive('statusButton', require('./directive/status-button'))

h/static/scripts/auth-controller.js → h/static/scripts/directive/login-form.js

+'use strict';
+
 // @ngInject
-function AuthController($scope, $timeout, flash, session, formRespond) {
+function Controller($scope, $timeout, flash, session, formRespond) {
   var pendingTimeout = null;
 
   function success(data) {
@@ -87,4 +89,18 @@ function AuthController($scope, $timeout, flash, session, formRespond) {
   });
 }
 
-module.exports = AuthController;
+module.exports = {
+  directive: function () {
+    return {
+      bindToController: true,
+      controller: Controller,
+      controllerAs: 'vm',
+      restrict: 'E',
+      scope: {
+        onClose: '&',
+      },
+      templateUrl: 'login_form.html',
+    };
+  },
+  Controller: Controller,
+};

h/static/scripts/test/auth-controller-test.coffee → h/static/scripts/test/login-form-test.coffee

@@ -18,7 +18,7 @@ class MockSession
 mockFlash = info: sandbox.spy()
 mockFormRespond = sandbox.spy()
 
-describe 'h:AuthController', ->
+describe 'loginForm.Controller', ->
   $scope = null
   $timeout = null
   auth = null
@@ -27,7 +27,7 @@ describe 'h:AuthController', ->
 
   before ->
     angular.module('h', [])
-    .controller('AuthController', require('../auth-controller'))
+    .controller('loginFormController', require('../directive/login-form').Controller)
 
   beforeEach module('h')
   beforeEach module('h.templates')
@@ -43,7 +43,7 @@ describe 'h:AuthController', ->
     $scope = $rootScope.$new()
     $timeout = _$timeout_
     $controller = _$controller_
-    auth = $controller 'AuthController', {$scope}
+    auth = $controller 'loginFormController', {$scope}
     session = _session_
     sandbox.spy session, 'login'
 
@@ -95,7 +95,7 @@ describe 'h:AuthController', ->
 
       # Get an AuthController object with our mock session.
       authCtrl = $controller(
-        'AuthController', {$scope:$scope, session:myMockSession})
+        'loginFormController', {$scope:$scope, session:myMockSession})
 
       form = {$name: 'register', $valid: true}
 
@@ -113,7 +113,7 @@ describe 'h:AuthController', ->
         $promise: {finally: sandbox.stub()}
 
       authCtrl = $controller(
-        'AuthController', {$scope:$scope, session:myMockSession})
+        'loginFormController', {$scope:$scope, session:myMockSession})
 
       form = {$name: 'register', $valid: true}
 

h/templates/client/auth.html

-<div class="form-vertical"
-     ng-controller="AuthController as vm"
-     ng-form="form"
-     ng-submit="vm.submit(form['login'])">
-  <div class="tab-content">
-    <form data-value="login"
-          class="form"
-          name="login"
-          form-validate
-          novalidate>
-
-      <p class="form-description form-error"
-         ng-show="login.responseErrorMessage">
-        {{login.responseErrorMessage}}
-      </p>
-
-      <div class="form-field">
-        <label class="form-label" for="field-login-username">Username or email address:</label>
-        <input class="form-input" type="text" id="field-login-username"
-               name="username" value=""
-               ng-model="model.username"
-               required autocapitalize="false" h-autofocus />
-        <ul class="form-error-list">
-          <li class="form-error"
-              ng-show="login.username.$error.required"
-              >Please enter your username or email address.</li>
-          <li class="form-error"
-              ng-show="login.username.$error.response"
-              >{{login.username.responseErrorMessage}}</li>
-        </ul>
-      </div>
-
-      <div class="form-field">
-        <label class="form-label" for="field-login-password">Password:</label>
-        <input class="form-input" id="field-login-password"
-               type="password" name="password" value=""
-               ng-model="model.password"
-               required autocapitalize="false" autocorrect="false" />
-        <ul class="form-error-list">
-          <li class="form-error"
-              ng-show="login.password.$error.required"
-              >Please enter your password.</li>
-          <li class="form-error"
-              ng-show="login.password.$error.response"
-              >{{login.password.responseErrorMessage}}</li>
-        </ul>
-      </div>
-
-      <div class="form-actions">
-        <div class="form-actions-message">
-          <a href="/forgot_password" target="_blank">Forgot your password?</a>
-        </div>
-        <div class="form-actions-buttons">
-          <button class="btn btn-primary" type="submit" name="login"
-                  status-button="login">Sign in</button>
-        </div>
-      </div>
-    </form>
-  </div><!-- /.tab-content -->
-</div>

h/templates/client/login_form.html

+<div class="sheet">
+  <i class="close h-icon-close"
+     role="button"
+     title="Close"
+     ng-click="vm.onClose()"></i>
+  <div class="form-vertical"
+       ng-form="form"
+       ng-submit="vm.submit(form['login'])">
+    <div class="tab-content">
+      <form data-value="login"
+            class="form"
+            name="login"
+            form-validate
+            novalidate>
+
+        <p class="form-description form-error"
+           ng-show="login.responseErrorMessage">
+          {{login.responseErrorMessage}}
+        </p>
+
+        <div class="form-field">
+          <label class="form-label" for="field-login-username">Username or email address:</label>
+          <input class="form-input" type="text" id="field-login-username"
+                 name="username" value=""
+                 ng-model="model.username"
+                 required autocapitalize="false" h-autofocus />
+          <ul class="form-error-list">
+            <li class="form-error"
+                ng-show="login.username.$error.required"
+                >Please enter your username or email address.</li>
+            <li class="form-error"
+                ng-show="login.username.$error.response"
+                >{{login.username.responseErrorMessage}}</li>
+          </ul>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label" for="field-login-password">Password:</label>
+          <input class="form-input" id="field-login-password"
+                 type="password" name="password" value=""
+                 ng-model="model.password"
+                 required autocapitalize="false" autocorrect="false" />
+          <ul class="form-error-list">
+            <li class="form-error"
+                ng-show="login.password.$error.required"
+                >Please enter your password.</li>
+            <li class="form-error"
+                ng-show="login.password.$error.response"
+                >{{login.password.responseErrorMessage}}</li>
+          </ul>
+        </div>
+
+        <div class="form-actions">
+          <div class="form-actions-message">
+            <a href="/forgot_password" target="_blank">Forgot your password?</a>
+          </div>
+          <div class="form-actions-buttons">
+            <button class="btn btn-primary" type="submit" name="login"
+                    status-button="login">Sign in</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>