show real callback URL for auth source

Author: wxiaoguang

options/locale/locale_en-US.ini

@@ -2901,7 +2901,7 @@ auths.sspi_default_language = Default user language
 auths.sspi_default_language_helper = Default language for users automatically created by SSPI auth method. Leave empty if you prefer language to be automatically detected.
 auths.tips = Tips
 auths.tips.oauth2.general = OAuth2 Authentication
-auths.tips.oauth2.general.tip = When registering a new OAuth2 authentication, the callback/redirect URL should be: <host>/user/oauth2/<Authentication Name>/callback
+auths.tips.oauth2.general.tip = When registering a new OAuth2 authentication, the callback/redirect URL should be:
 auths.tip.oauth2_provider = OAuth2 Provider
 auths.tip.bitbucket = Register a new OAuth consumer on https://bitbucket.org/account/user/<your username>/oauth-consumers/new and add the permission 'Account' - 'Read'
 auths.tip.nextcloud = Register a new OAuth consumer on your instance using the following menu "Settings -> Security -> OAuth 2.0 client"

templates/admin/auth/edit.tmpl

@@ -14,8 +14,8 @@
 					<span>{{.Source.TypeName}}</span>
 				</div>
 				<div class="required inline field {{if .Err_Name}}error{{end}}">
-					<label for="name">{{.locale.Tr "admin.auths.auth_name"}}</label>
-					<input id="name" name="name" value="{{.Source.Name}}" autofocus required>
+					<label for="auth_name">{{.locale.Tr "admin.auths.auth_name"}}</label>
+					<input id="auth_name" name="name" value="{{.Source.Name}}" autofocus required>
 				</div>
 
 				<!-- LDAP and DLDAP -->
@@ -442,8 +442,8 @@
 			<h5>GMail Settings:</h5>
 			<p>Host: smtp.gmail.com, Port: 587, Enable TLS Encryption: true</p>
 
-			<h5>{{.locale.Tr "admin.auths.tips.oauth2.general"}}:</h5>
-			<p>{{.locale.Tr "admin.auths.tips.oauth2.general.tip"}}</p>
+			<h5 class="oauth2">{{.locale.Tr "admin.auths.tips.oauth2.general"}}:</h5>
+			<p class="oauth2">{{.locale.Tr "admin.auths.tips.oauth2.general.tip"}} <b id="oauth2-callback-url"></b></p>
 		</div>
 	</div>
 

templates/admin/auth/new.tmpl

@@ -22,8 +22,8 @@
 					</div>
 				</div>
 				<div class="required inline field {{if .Err_Name}}error{{end}}">
-					<label for="name">{{.locale.Tr "admin.auths.auth_name"}}</label>
-					<input id="name" name="name" value="{{.name}}" autofocus required>
+					<label for="auth_name">{{.locale.Tr "admin.auths.auth_name"}}</label>
+					<input id="auth_name" name="name" value="{{.name}}" autofocus required>
 				</div>
 
 				<!-- LDAP and DLDAP -->
@@ -85,8 +85,8 @@
 			<h5>GMail Settings:</h5>
 			<p>Host: smtp.gmail.com, Port: 587, Enable TLS Encryption: true</p>
 
-			<h5>{{.locale.Tr "admin.auths.tips.oauth2.general"}}:</h5>
-			<p>{{.locale.Tr "admin.auths.tips.oauth2.general.tip"}}</p>
+			<h5 class="oauth2">{{.locale.Tr "admin.auths.tips.oauth2.general"}}:</h5>
+			<p class="oauth2">{{.locale.Tr "admin.auths.tips.oauth2.general.tip"}} <b id="oauth2-callback-url"></b></p>
 
 			<h5 class="ui top attached header">{{.locale.Tr "admin.auths.tip.oauth2_provider"}}</h5>
 			<div class="ui attached segment">

web_src/js/features/admin/common.js

@@ -171,6 +171,12 @@ export function initAdminCommon() {
     }
   }
 
+  if ($('.admin.authentication').length > 0) {
+    $('#auth_name').on('input', function () {
+      $('#oauth2-callback-url').text(`${window.location.origin}/user/oauth2/${encodeURIComponent($(this).val())}/callback`);
+    }).trigger('input');
+  }
+
   // Notice
   if ($('.admin.notice')) {
     const $detailModal = $('#detail-modal');