[ZEPPELIN-3047] Let Firefox remember login and password

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

Hide file tree

Showing 2 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
@@ -19,6 +19,7 @@ function LoginCtrl ($scope, $rootScope, $http, $httpParamSerializer, baseUrlSrv,
 
   $scope.SigningIn = false
   $scope.loginParams = {}
+  $scope.loginFormActionCounter = 0
   $scope.login = function () {
     $scope.SigningIn = true
     $http({
@@ -46,6 +47,13 @@ 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
+        $scope.loginFormActionCounter++
+        $scope.loginFormAction = '#loginForm' + $scope.loginFormActionCounter
+      }, 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,39 +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-enter="login()"
-                   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="{{ loginFormAction }}" onsubmit="return false;" ng-submit="login()">
+        <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>