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

public/js/index.js

@@ -2980,3 +2980,17 @@ function cancelCodeComment(btn) {
         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);
+}

templates/user/auth/signin_inner.tmpl

@@ -51,14 +51,25 @@
 			{{if and .OrderedOAuth2Names .OAuth2Providers}}
 			<div class="ui attached segment">
 				<div class="oauth2 center">
+					<div id="oauth2-login-loader" class="ui disabled centered  loader"></div>
 					<div>
-						<p>{{.i18n.Tr "sign_in_with"}}</p>{{range $key := .OrderedOAuth2Names}}
+						<div id="oauth2-login-navigator">
+							<p>{{.i18n.Tr "sign_in_with"}}</p>
+							{{range $key := .OrderedOAuth2Names}}
 								{{$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}}"></a>
+								<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>
 			{{end}}
 			</form>
 		</div>