🎨

handlers/consent/consent_check.go

@@ -93,12 +93,21 @@ func ConsentCheck(ctx *gin.Context) {
 
 		// Show the consent UI
 		global.Logger.Debugf("Rendering consent UI...")
-		ctx.HTML(http.StatusOK, "consent.tmpl", gin.H{
-			"client":    consentReq.Client,
+		templateFields := gin.H{
 			"user":      acceptCtx.User,
 			"challenge": oauth2challenge,
 			"csrf":      csrf,
-		})
+		}
+
+		if consentReq.Client.LogoUri != nil && *consentReq.Client.LogoUri != "" {
+			templateFields["logo"] = *consentReq.Client.LogoUri
+		}
+		if consentReq.Client.ClientName != nil && *consentReq.Client.ClientName != "" {
+			templateFields["clientName"] = *consentReq.Client.ClientName
+		} else {
+			templateFields["clientName"] = *consentReq.Client.ClientId
+		}
+		ctx.HTML(http.StatusOK, "consent.tmpl", templateFields)
 
 		global.Logger.Debugf("User should now see Consent UI.")
 	}

templates/consent.tmpl

@@ -4,6 +4,9 @@
         <title>授权确认</title>
         {{ template "head.tmpl" }}
         <style>
+            p.remember {
+                display: flex;
+            }
             p.remember, p.remember > * {
                 cursor: pointer;
             }
@@ -18,8 +21,15 @@
             p.buttons {
                 width: 100%;
                 display: flex;
-                flex-direction: row;
-                gap: 2rem;
+                flex-direction: column;
+                gap: .5rem
+            }
+
+            @media (min-width: 640px) {
+                p.buttons {
+                    flex-direction: row;
+                    gap: 2rem;
+                }
             }
 
             button {
@@ -58,15 +68,15 @@
         <form id="main" action="/consent" method="POST">
             <input type="hidden" name="_csrf" value="{{ .csrf }}" />
 
-            {{ if .client.LogoUri }}
-                <img src="{{ .client.LogoUri }}" alt="{{ .client.ClientId }}" width="120" height="120" />
+            {{ if .logo }}
+                <img src="{{ .logo }}" alt="{{ .clientName }}" width="120" height="120" />
             {{ else }}
                 <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 48 48"><title>c-warning</title><g><path fill="#EFD358" d="M24,1C11.31787,1,1,11.31787,1,24s10.31787,23,23,23s23-10.31787,23-23S36.68213,1,24,1z"></path> <path fill="#FFFFFF" d="M24,28c0.55225,0,1-0.44775,1-1V14c0-0.55225-0.44775-1-1-1s-1,0.44775-1,1v13 C23,27.55225,23.44775,28,24,28z"></path> <circle fill="#FFFFFF" cx="24" cy="33" r="2"></circle></g></svg>
             {{ end }}
 
             <p>
                 应用程序
-                <span id="app-name">{{ .client.ClientName }}</span>
+                <span id="app-name">{{ .clientName }}</span>
                 正请求读取
                 <span id="user-name">{{ .user.Name }}</span>
                 的信息