Login autofill 2 (#1496)

* adding checkInputsLabels as on load func * move window onload function into js file #1481 fix #1460
luyadev · Sep 13, 2017 · 56631a0 · 56631a0
1 parent 9c0e449
commit 56631a0
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 17 deletions.
diff --git a/modules/admin/src/resources/dist/css/admin.css b/modules/admin/src/resources/dist/css/admin.css
diff --git a/modules/admin/src/resources/dist/js/login.js b/modules/admin/src/resources/dist/js/login.js
@@ -88,17 +88,13 @@ var observeLogin = function (form, url, secureUrl) {
  });
 };
 
-$(window).load(function () {
- $('.login-logo').addClass('login-logo-loaded');
- $('.login-form').addClass('login-form-loaded');
-});
 
 var checkInputLabels = function () {
  var $loginInput = $('.login-input');
 
  var check = function($element) {
  var val = $element.val() ? $element.val() : '';
- 
+
  var autofillBg = window.getComputedStyle($element[0], null).getPropertyValue("background-color") === 'rgb(250, 255, 189)' ? true : false;
 
  if(val.length >= 1 || autofillBg === true) {
@@ -115,4 +111,12 @@ var checkInputLabels = function () {
  $loginInput.each( function() {
  check($(this));
  });
-};
+};
+
+$(window).load(function () {
+ $('.login-logo').addClass('login-logo-loaded');
+ $('.login-form').addClass('login-form-loaded');
+ checkInputLabels();
+});
+
+
diff --git a/modules/admin/src/resources/js/login.js b/modules/admin/src/resources/js/login.js
@@ -88,17 +88,13 @@ var observeLogin = function (form, url, secureUrl) {
  });
 };
 
-$(window).load(function () {
- $('.login-logo').addClass('login-logo-loaded');
- $('.login-form').addClass('login-form-loaded');
-});
 
 var checkInputLabels = function () {
  var $loginInput = $('.login-input');
 
  var check = function($element) {
  var val = $element.val() ? $element.val() : '';
- 
+
  var autofillBg = window.getComputedStyle($element[0], null).getPropertyValue("background-color") === 'rgb(250, 255, 189)' ? true : false;
 
  if(val.length >= 1 || autofillBg === true) {
@@ -115,4 +111,12 @@ var checkInputLabels = function () {
  $loginInput.each( function() {
  check($(this));
  });
-};
+};
+
+$(window).load(function () {
+ $('.login-logo').addClass('login-logo-loaded');
+ $('.login-form').addClass('login-form-loaded');
+ checkInputLabels();
+});
+
+
diff --git a/modules/admin/src/resources/scss/components/_login.scss b/modules/admin/src/resources/scss/components/_login.scss
@@ -186,6 +186,10 @@
 
  &:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset;
+
+ + .login-input-label {
+ @include login-input-not-empty;
+ }
  }
  /* -webkit-text-fill-color: yellow !important; */
 

diff --git a/modules/admin/src/views/login/index.php b/modules/admin/src/views/login/index.php
@@ -9,7 +9,6 @@
  y="0px"
  viewBox="0 0 120 120" 
  xml:space="preserve">
- 
  <path
  id="spinner" 
  fill="#fff" 
@@ -18,7 +17,7 @@
  s-2-0.9-2-2c0-15.4-12.6-28-28-28S12,24.6,12,40s12.6,
  28,28,28c1.1,0,2,0.9,2,2S41.1,72,40,72z"
  >
-  <animateTransform
+ <animateTransform
  attributeType="xml"
  attributeName="transform"
  type="rotate"
@@ -30,6 +29,7 @@
  </path>
  </svg>';
 ?>
+
 <div class="login-frame">
  <div class="login-logo">
  <img src="<?= $this->getAssetUrl("luya\admin\assets\Login") .'/images/luyalogo_destructed.png' ?>" alt="<?= Module::t('login_pre_title', ['title' => Yii::$app->siteTitle]); ?>" />
@@ -39,7 +39,7 @@
  <input type="hidden" name="_csrf" value="<?= Yii::$app->request->csrfToken; ?>" />
  <div class="login-inputs">
  <div class="login-form-field form-group">
- <input class="login-input" id="login-user-email" id="email" name="login[email]" type="email" tabindex="1" required />
+ <input class="login-input" id="email" name="login[email]" type="email" tabindex="1" required />
  <label for="email" class="login-input-label"><?= Module::t('login_mail'); ?></label>
  </div>
  <div class="login-form-field form-group">
@@ -91,4 +91,4 @@
  <a href="https://twitter.com/luyadev" target="_blank" class="login-link">@luyadev</a>
  </li>
  </ul>
-</div>
+</div>