mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-10 20:22:14 +02:00
Fix OAuth loading state (#24788)
Fix regression from https://github.com/go-gitea/gitea/pull/24740 where the loading state was not showing because the `oauth-login-image` class was removed. Replaced the Fomantic loader with a pure CSS loader and cleaned up the HTML. Diff: https://github.com/go-gitea/gitea/pull/24788/files?diff=unified&w=1 ![](https://github.com/go-gitea/gitea/assets/115237/b5b4137f-9821-464b-9777-858fe85d9e03) Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
parent
09ab64dfad
commit
1e1e8b5d43
3 changed files with 44 additions and 44 deletions
|
@ -54,10 +54,8 @@
|
||||||
|
|
||||||
{{if and .OrderedOAuth2Names .OAuth2Providers}}
|
{{if and .OrderedOAuth2Names .OAuth2Providers}}
|
||||||
<hr class="ui divider"/>
|
<hr class="ui divider"/>
|
||||||
<div class="oauth2 center">
|
<div id="oauth2-login-navigator">
|
||||||
<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
|
<div id="oauth2-login-navigator-inner" class="gt-df gt-jc">
|
||||||
<div>
|
|
||||||
<div id="oauth2-login-navigator" class="gt-df gt-jc">
|
|
||||||
<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
|
<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
|
||||||
<div class="gt-df gt-fw gt-gap-4">
|
<div class="gt-df gt-fw gt-gap-4">
|
||||||
{{range $key := .OrderedOAuth2Names}}
|
{{range $key := .OrderedOAuth2Names}}
|
||||||
|
@ -83,7 +81,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{{end}}
|
{{end}}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -46,6 +46,11 @@ code.language-math.is-loading::after {
|
||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#oauth2-login-navigator.is-loading::after {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes fadein {
|
@keyframes fadein {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
@ -1,25 +1,23 @@
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {hideElem, showElem} from '../utils/dom.js';
|
|
||||||
|
|
||||||
export function initUserAuthOauth2() {
|
export function initUserAuthOauth2() {
|
||||||
const $oauth2LoginNav = $('#oauth2-login-navigator');
|
const outer = document.getElementById('oauth2-login-navigator');
|
||||||
if ($oauth2LoginNav.length === 0) return;
|
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');
|
|
||||||
|
|
||||||
|
for (const link of outer.querySelectorAll('.oauth-login-link')) {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
inner.classList.add('gt-invisible');
|
||||||
|
outer.classList.add('is-loading');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// recover previous content to let user try again
|
// recover previous content to let user try again
|
||||||
// usually redirection will be performed before this action
|
// usually redirection will be performed before this action
|
||||||
oauthLoader.addClass('disabled');
|
outer.classList.remove('is-loading');
|
||||||
showElem(oauthNav);
|
inner.classList.remove('gt-invisible');
|
||||||
}, 5000);
|
}, 5000);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export function initUserAuthLinkAccountView() {
|
export function initUserAuthLinkAccountView() {
|
||||||
const $lnkUserPage = $('.page-content.user.link-account');
|
const $lnkUserPage = $('.page-content.user.link-account');
|
||||||
|
|
Loading…
Reference in a new issue