Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix OAuth loading state (#24788)

Browse source 
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:
silverwind 2023-05-18 13:50:11 +02:00 committed by GitHub
parent 09ab64dfad
commit 1e1e8b5d43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
templates/user/auth/signin_inner.tmpl
View file

@ -54,33 +54,30 @@
{{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> <span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
<div id="oauth2-login-navigator" class="gt-df gt-jc"> <div class="gt-df gt-fw gt-gap-4">
<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span> {{range $key := .OrderedOAuth2Names}}
<div class="gt-df gt-fw gt-gap-4"> {{$provider := index $.OAuth2Providers $key}}
{{range $key := .OrderedOAuth2Names}} <a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}">
{{$provider := index $.OAuth2Providers $key}} {{if eq $provider.Name "github"}}
<a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"> {{svg "octicon-mark-github" 40}}
{{if eq $provider.Name "github"}} {{else if eq $provider.Name "gitlab"}}
{{svg "octicon-mark-github" 40}} {{svg "gitea-gitlab" 40}}
{{else if eq $provider.Name "gitlab"}} {{else if eq $provider.Name "openidConnect"}}
{{svg "gitea-gitlab" 40}} {{svg "gitea-openid" 40}}
{{else if eq $provider.Name "openidConnect"}} {{else}}
{{svg "gitea-openid" 40}} <img
{{else}} class="gt-object-contain"
<img width="40"
class="gt-object-contain" height="40"
width="40" alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
height="40" src="{{AppSubUrl}}{{$provider.Image}}"
alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}" >
src="{{AppSubUrl}}{{$provider.Image}}" {{end}}
> </a>
{{end}} {{end}}
</a>
{{end}}
</div>
</div> </div>
</div> </div>
</div> </div>

5
web_src/css/modules/animations.css
View file

@ -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;

32
web_src/js/features/user-auth.js
View file

@ -1,24 +1,22 @@
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', () => { for (const link of outer.querySelectorAll('.oauth-login-link')) {
const oauthLoader = $('#oauth2-login-loader'); link.addEventListener('click', () => {
const oauthNav = $('#oauth2-login-navigator'); inner.classList.add('gt-invisible');
outer.classList.add('is-loading');
hideElem(oauthNav); setTimeout(() => {
oauthLoader.removeClass('disabled'); // recover previous content to let user try again
// usually redirection will be performed before this action
setTimeout(() => { outer.classList.remove('is-loading');
// recover previous content to let user try again inner.classList.remove('gt-invisible');
// usually redirection will be performed before this action }, 5000);
oauthLoader.addClass('disabled'); });
showElem(oauthNav); }
}, 5000);
});
} }
export function initUserAuthLinkAccountView() { export function initUserAuthLinkAccountView() {