fix: avoid multi-clicks when perform oauth2 login (#6467)

This commit is contained in:
BetaCat 2019-03-31 19:58:53 +08:00 committed by Lunny Xiao
parent 04d78b60f8
commit 2e1ead8054
2 changed files with 29 additions and 4 deletions

View file

@ -2980,3 +2980,17 @@ function cancelCodeComment(btn) {
form.closest('.comment-code-cloud').remove() form.closest('.comment-code-cloud').remove()
} }
} }
function onOAuthLoginClick() {
var oauthLoader = $('#oauth2-login-loader');
var oauthNav = $('#oauth2-login-navigator');
oauthNav.hide();
oauthLoader.removeClass('disabled');
setTimeout(function(){
// recover previous content to let user try again
// usually redirection will be performed before this action
oauthLoader.addClass('disabled');
oauthNav.show();
},5000);
}

View file

@ -51,11 +51,22 @@
{{if and .OrderedOAuth2Names .OAuth2Providers}} {{if and .OrderedOAuth2Names .OAuth2Providers}}
<div class="ui attached segment"> <div class="ui attached segment">
<div class="oauth2 center"> <div class="oauth2 center">
<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
<div> <div>
<p>{{.i18n.Tr "sign_in_with"}}</p>{{range $key := .OrderedOAuth2Names}} <div id="oauth2-login-navigator">
{{$provider := index $.OAuth2Providers $key}} <p>{{.i18n.Tr "sign_in_with"}}</p>
<a href="{{AppSubUrl}}/user/oauth2/{{$key}}"><img alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}" title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}" class="{{$provider.Name}}" src="{{AppSubUrl}}{{$provider.Image}}"></a> {{range $key := .OrderedOAuth2Names}}
{{end}} {{$provider := index $.OAuth2Providers $key}}
<a href="{{AppSubUrl}}/user/oauth2/{{$key}}">
<img
alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
class="{{$provider.Name}}"
src="{{AppSubUrl}}{{$provider.Image}}"
onclick="onOAuthLoginClick()"
></a>
{{end}}
</div>
</div> </div>
</div> </div>
</div> </div>