Autofocus first form field

src/module.js

@@ -1209,4 +1209,64 @@ angular.module('stormpath', [
       });
     }
   };
+}])
+
+/**
+ * @ngdoc directive
+ * @restrict A
+ * @name stormpath.spAutoFocusForm:spAutoFocusForm
+ *
+ * @description
+ * This directive, when placed on a container element, automatically focuses
+ * on the first descendant <input> element inside the form.
+ *
+ * If the form is rendered synchronously, the directive can be placed on a form
+ * without any parameters and will focus immediately. However, if the form is
+ * instead loaded asynchronously, it needs to be passed a parameter that indicates
+ * when the form has loaded. As soon as the parameter evaluates to a truthy value,
+ * the autofocus will occur. When evaluation this value, the current scope is used.
+ *
+ * When there are no inputs inside the container, nothing happens.
+ *
+ * @example
+ * <pre><code>
+ * <form id="form-1" sp-auto-focus-form>
+ *  <input id="will-be-focused" type="text" />
+ * </form>
+ *
+ * <form id="form-2" sp-auto-focus="viewModel">
+ *  <div ng-repeat="field in viewModel.fields">
+ *    <!-- First one will be focused once it is rendered -->
+ *    <input name="{{field.name}}" type="{{field.type}}" />
+ *  </div>
+ * </form>
+ * </pre></code>
+ */
+.directive('spAutoFocusForm', ['$timeout', function($timeout) {
+  return {
+    restrict: 'A',
+    link: function link(scope, elem, attrs) {
+      function focusFirstInput() {
+        var firstInput = angular.element(elem).find('input')[0];
+
+        if (firstInput) {
+          $timeout(function() {
+            firstInput.focus();
+          });
+        }
+      }
+
+      if (attrs.spAutoFocusForm.length) {
+        scope.$watch(function() {
+          return scope.$eval(attrs.spAutoFocusForm);
+        }, function(curr, prev) {
+          if (curr && !prev) {
+            focusFirstInput();
+          }
+        });
+      } else {
+        focusFirstInput();
+      }
+    }
+  };
 }]);

src/spEmailVerification.tpl.html

@@ -20,7 +20,7 @@
 </div>
 <div class="row">
   <div class="col-xs-12">
-    <form class="form-horizontal" ng-show="needsReVerification && !reVerificationSent" ng-submit="submit()">
+    <form sp-auto-focus-form class="form-horizontal" ng-show="needsReVerification && !reVerificationSent" ng-submit="submit()">
 
       <div class="form-group">
         <label for="spEmail" class="col-xs-12 col-sm-4 control-label">Email or Username</label>

src/spLoginForm.tpl.html

@@ -38,7 +38,7 @@
     <div ng-show="!viewModel" class="sp-loading">
       Loading...
     </div>
-    <form class="form-horizontal" ng-hide="accepted || !viewModel" ng-submit="submit()">
+    <form sp-auto-focus-form="viewModel" class="form-horizontal" ng-hide="accepted || !viewModel" ng-submit="submit()">
       <div class="form-group" ng-repeat="field in viewModel.form.fields">
         <label for="sp-{{field.name}}" class="col-xs-12 col-sm-4 control-label">{{field.label}}</label>
         <div class="col-xs-12 col-sm-4">

src/spPasswordResetForm.tpl.html

@@ -10,7 +10,7 @@
 </div>
 <div class="row">
   <div class="col-xs-12">
-    <form class="form-horizontal" ng-show="verified && !reset" ng-submit="submit()">
+    <form sp-auto-focus-form class="form-horizontal" ng-show="verified && !reset" ng-submit="submit()">
 
       <div class="form-group">
         <label for="spEmail" class="col-xs-12 col-sm-4 control-label">New Password</label>

src/spPasswordResetRequestForm.tpl.html

@@ -12,7 +12,7 @@
 </div>
 <div class="row">
   <div class="col-xs-12">
-    <form class="form-horizontal" ng-hide="sent" ng-submit="submit()">
+    <form sp-auto-focus-form class="form-horizontal" ng-hide="sent" ng-submit="submit()">
 
       <div class="form-group">
         <label for="spEmail" class="col-xs-12 col-sm-4 control-label">Email or Username</label>

src/spRegistrationForm.tpl.html

@@ -47,7 +47,7 @@
     <div ng-show="!viewModel" class="sp-loading">
       Loading...
     </div>
-    <form class="form-horizontal" ng-hide="!viewModel || (created && !authenticating)" ng-submit="submit()">
+    <form sp-auto-focus-form="viewModel" class="form-horizontal" ng-hide="!viewModel || (created && !authenticating)" ng-submit="submit()">
       <div class="form-group" ng-repeat="field in viewModel.form.fields">
         <label for="sp-{{field.name}}" class="col-xs-12 col-sm-4 control-label">{{field.label}}</label>
         <div class="col-xs-12 col-sm-4">
@@ -70,4 +70,4 @@
       </div>
     </form>
   </div>
-</div>
+</div>