WordPress.org

Make WordPress Core

Changeset 47226


Ignore:
Timestamp:
02/10/2020 01:50:33 AM (11 months ago)
Author:
SergeyBiryukov
Message:

Login and Registration: Use CSS animation instead of old JavaScript code for "shake" animation on login failure.

Props markjaquith, valentinbora.
Fixes #48490.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/login.css

    r46425 r47226  
    140140}
    141141
     142.login form.shake {
     143    animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
     144    animation-iteration-count: 3;
     145    transform: translateX(0);
     146}
     147
     148@keyframes shake {
     149    25% {
     150        transform: translateX(-20px);
     151    }
     152    75% {
     153        transform: translateX(20px);
     154    }
     155    100% {
     156        transform: translateX(0);
     157    }
     158}
     159
    142160.login-action-confirm_admin_email #login {
    143161    width: 60vw;
  • trunk/src/wp-login.php

    r47219 r47226  
    6363
    6464    if ( $shake_error_codes && $wp_error->has_errors() && in_array( $wp_error->get_error_code(), $shake_error_codes, true ) ) {
    65         add_action( 'login_head', 'wp_shake_js', 12 );
     65        add_action( 'login_footer', 'wp_shake_js', 12 );
    6666    }
    6767
     
    336336    ?>
    337337    <script type="text/javascript">
    338     addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
    339     function s(id,pos){g(id).left=pos+'px';}
    340     function g(id){return document.getElementById(id).style;}
    341     function shake(id,a,d){c=a.shift();s(id,c);if(a.length>0){setTimeout(function(){shake(id,a,d);},d);}else{try{g(id).position='static';wp_attempt_focus();}catch(e){}}}
    342     addLoadEvent(function(){ var p=new Array(15,30,15,0,-15,-30,-15,0);p=p.concat(p.concat(p));var i=document.forms[0].id;g(i).position='relative';shake(i,p,20);});
     338    document.querySelector('form').classList.add('shake');
    343339    </script>
    344340    <?php
Note: See TracChangeset for help on using the changeset viewer.