Merge pull request #14920 from grafana/12133-autofill-event-hack

iOS login button should be enabled when using browser autofill

public/app/core/core.ts

 import './directives/dash_class';
 import './directives/dash_class';
 import './directives/dropdown_typeahead';
 import './directives/dropdown_typeahead';
+import './directives/autofill_event_fix';
 import './directives/metric_segment';
 import './directives/metric_segment';
 import './directives/misc';
 import './directives/misc';
 import './directives/ng_model_on_blur';
 import './directives/ng_model_on_blur';

public/app/core/directives/autofill_event_fix.ts

+import coreModule from '../core_module';
+
+/** @ngInject */
+export function autofillEventFix($compile) {
+  return {
+    link: ($scope: any, elem: any) => {
+      const input = elem[0];
+      const dispatchChangeEvent = () => {
+        const event = new Event('change');
+        return input.dispatchEvent(event);
+      };
+      const onAnimationStart = ({ animationName }: AnimationEvent) => {
+        switch (animationName) {
+          case 'onAutoFillStart':
+            return dispatchChangeEvent();
+          case 'onAutoFillCancel':
+            return dispatchChangeEvent();
+        }
+        return null;
+      };
+
+      // const onChange = (evt: Event) => console.log(evt);
+
+      input.addEventListener('animationstart', onAnimationStart);
+      // input.addEventListener('change', onChange);
+
+      $scope.$on('$destroy', () => {
+        input.removeEventListener('animationstart', onAnimationStart);
+        // input.removeEventListener('change', onChange);
+      });
+    }
+  };
+}
+
+coreModule.directive('autofillEventFix', autofillEventFix);

public/app/partials/login.html

@@ -9,7 +9,7 @@
         <form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
         <form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
           <div class="login-form">
           <div class="login-form">
             <input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
             <input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
-              autofocus>
+              autofocus autofill-event-fix>
           </div>
           </div>
           <div class="login-form">
           <div class="login-form">
             <input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"
             <input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"

public/sass/_grafana.scss

@@ -32,6 +32,7 @@
 @import 'utils/angular';
 @import 'utils/angular';
 @import 'utils/spacings';
 @import 'utils/spacings';
 @import 'utils/widths';
 @import 'utils/widths';
+@import 'utils/hacks';
 
 
 // LAYOUTS
 // LAYOUTS
 @import 'layout/lists';
 @import 'layout/lists';

public/sass/utils/_hacks.scss

+// <3: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
+// sass-lint:disable no-empty-rulesets
+@keyframes onAutoFillStart {  from {/**/}  to {/**/}}
+@keyframes onAutoFillCancel {  from {/**/}  to {/**/}}
+input:-webkit-autofill {
+  animation-name: onAutoFillStart;
+  transition: transform 1ms;
+}
+input:not(:-webkit-autofill) {
+  animation-name: onAutoFillCancel;
+}
\ No newline at end of file