diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl index ceafc257e..8d9375de7 100644 --- a/templates/user/auth/signin_inner.tmpl +++ b/templates/user/auth/signin_inner.tmpl @@ -54,33 +54,30 @@ {{if and .OrderedOAuth2Names .OAuth2Providers}}
-
-
-
-
- {{.locale.Tr "sign_in_with"}} - + diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index 689898da2..0151f1e00 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -46,6 +46,11 @@ code.language-math.is-loading::after { height: 1.25rem; } +#oauth2-login-navigator.is-loading::after { + width: 40px; + height: 40px; +} + @keyframes fadein { 0% { opacity: 0; diff --git a/web_src/js/features/user-auth.js b/web_src/js/features/user-auth.js index 60ea14dfa..e3ce4e56e 100644 --- a/web_src/js/features/user-auth.js +++ b/web_src/js/features/user-auth.js @@ -1,24 +1,22 @@ import $ from 'jquery'; -import {hideElem, showElem} from '../utils/dom.js'; export function initUserAuthOauth2() { - const $oauth2LoginNav = $('#oauth2-login-navigator'); - if ($oauth2LoginNav.length === 0) return; + const outer = document.getElementById('oauth2-login-navigator'); + if (!outer) return; + const inner = document.getElementById('oauth2-login-navigator-inner'); - $oauth2LoginNav.find('.oauth-login-image').on('click', () => { - const oauthLoader = $('#oauth2-login-loader'); - const oauthNav = $('#oauth2-login-navigator'); - - hideElem(oauthNav); - oauthLoader.removeClass('disabled'); - - setTimeout(() => { - // recover previous content to let user try again - // usually redirection will be performed before this action - oauthLoader.addClass('disabled'); - showElem(oauthNav); - }, 5000); - }); + for (const link of outer.querySelectorAll('.oauth-login-link')) { + link.addEventListener('click', () => { + inner.classList.add('gt-invisible'); + outer.classList.add('is-loading'); + setTimeout(() => { + // recover previous content to let user try again + // usually redirection will be performed before this action + outer.classList.remove('is-loading'); + inner.classList.remove('gt-invisible'); + }, 5000); + }); + } } export function initUserAuthLinkAccountView() {