Let Firefox remember login and password

https://stackoverflow.com/questions/18586938/remember-password-with-angularjs-and-ng-submit
apache · Nov 25, 2017 · 2d89649 · 2d89649
1 parent 4f95555
commit 2d89649
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/zeppelin-web/src/components/login/login.controller.js b/zeppelin-web/src/components/login/login.controller.js
@@ -46,6 +46,12 @@ function LoginCtrl ($scope, $rootScope, $http, $httpParamSerializer, baseUrlSrv,
           $location.path(redirectLocation)
         }, 100)
       }
+      $timeout(function () {
+        // make chrome trigger "save password" logic
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=357696#c41
+        // https://stackoverflow.com/a/33113374/3832536
+        $rootScope.hideLoginForm = true
+      }, 1000)
     }, function errorCallback (errorResponse) {
       $scope.loginParams.errorText = 'The username and password that you entered don\'t match.'
       $scope.SigningIn = false

diff --git a/zeppelin-web/src/components/login/login.html b/zeppelin-web/src/components/login/login.html
@@ -17,38 +17,38 @@
     <div class="modal-dialog">
 
       <!-- Modal content-->
-      <div id="loginModalContent" class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal">&times;</button>
-          <h4 class="modal-title">Login</h4>
-        </div>
-        <div class="modal-body">
-          <div class="form-group" ng-show="loginParams.errorText">
-            <div class="alert alert-danger">{{loginParams.errorText}}</div>
-          </div>
-          <div class="form-group">
-            <label for="userName">User Name</label>
-            <input placeholder="User Name" type="text" class="form-control" id="userName"
-                   ng-keypress="loginParams.errorText = ''"
-                   ng-model="loginParams.userName" />
-          </div>
-          <div class="form-group">
-            <label for="password">Password</label>
-            <input placeholder="Password" type="password" class="form-control" id="password"
-                   ng-enter="login()"
-                   ng-keypress="loginParams.errorText = ''"
-                   ng-model="loginParams.password" />
+      <form id="loginForm" name="loginForm" action="#loginForm" onsubmit="return false;" ng-submit="login()" ng-hide="hideLoginForm">
+        <div id="loginModalContent" class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal">&times;</button>
+            <h4 class="modal-title">Login</h4>
           </div>
-
-        </div>
-        <div class="modal-footer" ng-switch on="SigningIn">
-          <div ng-switch-when="true">
-            <button type="button" class="btn btn-default btn-primary" disabled><i class="fa fa-circle-o-notch fa-spin"></i> Signing In</button>
+          <div class="modal-body">
+            <div class="form-group" ng-show="loginParams.errorText">
+              <div class="alert alert-danger">{{loginParams.errorText}}</div>
+            </div>
+            <div class="form-group">
+              <label for="userName">User Name</label>
+              <input placeholder="User Name" type="text" class="form-control" id="userName" name="userName" required autofocus
+                     ng-keypress="loginParams.errorText = ''"
+                     ng-model="loginParams.userName" />
+            </div>
+            <div class="form-group">
+              <label for="password">Password</label>
+              <input placeholder="Password" type="password" class="form-control" id="password" name="password" required
+                     ng-keypress="loginParams.errorText = ''"
+                     ng-model="loginParams.password" />
+            </div>
           </div>
-          <div ng-switch-default>
-            <button type="button" class="btn btn-default btn-primary" ng-click="login()">Login</button>
+          <div class="modal-footer" ng-switch on="SigningIn">
+            <div ng-switch-when="true">
+              <button type="button" class="btn btn-default btn-primary" disabled><i class="fa fa-circle-o-notch fa-spin"></i> Signing In</button>
+            </div>
+            <div ng-switch-default>
+              <button type="submit" class="btn btn-default btn-primary">Login</button>
+            </div>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   </div>
diff --git a/zeppelin-web/src/components/navbar/navbar.controller.js b/zeppelin-web/src/components/navbar/navbar.controller.js
@@ -114,7 +114,8 @@ function NavCtrl ($scope, $rootScope, $http, $routeParams, $location,
   }
 
   function showLoginWindow () {
-    setTimeout(function () {
+    $rootScope.hideLoginForm = false
+    $timeout(function () {
       angular.element('#userName').focus()
     }, 500)
   }