feat(auth): 新增 auth 可配置项 (#808)

新增 auth 登录界面可配置项 1. 左下角Powered by SCOW中，SCOW增加跳转github链接：[https://github.com/PKUHPC/SCOW；](https://github.com/PKUHPC/SCOW%EF%BC%9B) 2. 左上角scow logo图片和跳转链接可配置，链接为空时不跳转； 3. 登录按钮颜色跟随主题色； 4. 页面的默认底色调整为#8C8C8C； 5. 缩放浏览器页面时，如果窗口过小导致无法显示全部内容时，将右侧的文字信息隐藏掉； 6. 登陆页面的所有可配置操作整理成文档添加到文档网站中配置章节https://icode.pku.edu.cn/SCOW/
PKUHPC · Aug 18, 2023 · 72875e7 · 72875e7
1 parent b76c4a1
commit 72875e7
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 48 deletions.
diff --git a/.changeset/sharp-yaks-rest.md b/.changeset/sharp-yaks-rest.md
@@ -0,0 +1,6 @@
+---
+"@scow/auth": patch
+"@scow/docs": patch
+---
+
+新增 auth 登录界面可配置项
diff --git a/apps/auth/config/auth.yml b/apps/auth/config/auth.yml
@@ -87,9 +87,16 @@ ui:
   # 登录界面背景图
   backgroundImagePath: "./assets/background.png"
   # 登录界面背景色，当背景图无法加载时，背景色起效
-  backgroundFallbackColor: "#9a0000"
-  # 登录界面 logo 图, light: 亮色模式下的 logo, dark: 黑暗模式下的 logo
-  logoType: "dark"
+  backgroundFallbackColor: "#8c8c8c"
+  # 登录界面 logo 图,
+  logo:
+    # 如果没有配置自定义 logo, 则使用 type 选择 SCOW Logo
+    # light: 亮色模式下的 logo, dark: 黑暗模式下的 logo
+    scowLogoType: "dark"
+    # 自定义 logo, 默认为空
+    customLogoPath: ""
+    # 自定义点击 logo 跳转地址
+    customLogoLink: "https://icode.pku.edu.cn/SCOW/"
 
   # 登录界面 slogan 配置
   slogan:
@@ -104,3 +111,6 @@ ui:
       - "一体化部署，开箱即用"
       - "标准化平台，支持算力融合"
       - "开源中立，独立自主"
+
+  # 登陆界面底部 Power By 字体颜色配置
+  footerTextColor: "white"
diff --git a/apps/auth/public/background.png b/apps/auth/public/background.png
diff --git a/apps/auth/src/auth/loginHtml.ts b/apps/auth/src/auth/loginHtml.ts
@@ -10,38 +10,24 @@
  * See the Mulan PSL v2 for more details.
  */
 
+import { DEFAULT_PRIMARY_COLOR } from "@scow/config/build/ui";
 import { FastifyReply, FastifyRequest } from "fastify";
 import { join } from "path";
 import { createCaptcha } from "src/auth/captcha";
-import { authConfig, OtpStatusOptions } from "src/config/auth";
+import { authConfig, OtpStatusOptions, ScowLogoType } from "src/config/auth";
 import { config, FAVICON_URL, LOGO_URL } from "src/config/env";
 import { uiConfig } from "src/config/ui";
 
-function parseHostname(req: FastifyRequest): string | undefined {
-
-  if (!req.headers.referer) {
-    return undefined;
-  }
-
-  try {
-    const url = new URL(req.headers.referer);
-    return url.hostname;
-  } catch {
-    return undefined;
-  }
-}
-
 
 export async function serveLoginHtml(
   err: boolean, callbackUrl: string, req: FastifyRequest, rep: FastifyReply,
   verifyCaptchaFail?: boolean,
   verifyOtpFail?: boolean,
 ) {
 
-  const hostname = parseHostname(req);
   const enableCaptcha = authConfig.captcha.enabled;
   const enableTotp = authConfig.otp?.enabled;
-  const logoPreferDarkParam = authConfig.ui?.logoType === "light" ? "false" : "true";
+  const logoPreferDarkParam = authConfig.ui?.logo.scowLogoType === ScowLogoType.light ? "false" : "true";
 
   // 显示绑定otp按钮：otp.enabled为true && (密钥存于ldap时 || (otp.type===remote && 配置了otp.remote.redirectUrl))
   const showBindOtpButton = authConfig.otp?.enabled && (authConfig.otp?.type === OtpStatusOptions.ldap
@@ -57,14 +43,17 @@ export async function serveLoginHtml(
     eyeCloseImagePath: join(config.BASE_PATH, config.AUTH_BASE_PATH, "/public/assets/icons/eye-close.png"),
     backgroundImagePath: join(config.BASE_PATH, config.PUBLIC_PATH,
       authConfig.ui?.backgroundImagePath ?? "./assets/background.png"),
-    backgroundFallbackColor: authConfig.ui?.backgroundFallbackColor || "#9a0000",
+    backgroundFallbackColor: authConfig.ui?.backgroundFallbackColor || "#8c8c8c",
     faviconUrl: join(config.BASE_PATH, FAVICON_URL),
-    logoUrl: join(config.BASE_PATH, LOGO_URL + logoPreferDarkParam),
+    logoUrl: !!authConfig.ui?.logo.customLogoPath === false ? join(config.BASE_PATH, LOGO_URL + logoPreferDarkParam)
+      : join(config.BASE_PATH, config.PUBLIC_PATH, authConfig.ui?.logo.customLogoPath ?? ""),
+    logoLink: authConfig.ui?.logo.customLogoLink ?? "",
     callbackUrl,
-    sloganColor:  authConfig.ui?.slogan.color || "white",
-    sloganTitle:  authConfig.ui?.slogan.title || "",
+    sloganColor: authConfig.ui?.slogan.color || "white",
+    sloganTitle: authConfig.ui?.slogan.title || "",
     sloganTextArr: authConfig.ui?.slogan.texts || [],
-    footerText: (hostname && uiConfig?.footer?.hostnameTextMap?.[hostname]) ?? uiConfig?.footer?.defaultText ?? "",
+    footerTextColor: authConfig.ui?.footerTextColor || "white",
+    themeColor: uiConfig.primaryColor?.defaultColor ?? DEFAULT_PRIMARY_COLOR,
     err,
     ...captchaInfo,
     verifyCaptchaFail,

diff --git a/apps/auth/src/config/auth.ts b/apps/auth/src/config/auth.ts
@@ -26,6 +26,11 @@ export enum OtpStatusOptions {
   "remote" = "remote",
 }
 
+export enum ScowLogoType {
+  "dark" = "dark",
+  "light" = "light",
+}
+
 export const LdapConfigSchema = Type.Object({
   url: Type.String({ description: "LDAP地址" }),
   searchBase: Type.String({ description: "从哪个节点搜索登录用户对应的LDAP节点" }),
@@ -153,13 +158,18 @@ export const OtpLdapSchema = Type.Object({
 
 export const UiConfigSchema = Type.Object({
   backgroundImagePath: Type.String({ description: "默认背景图片", default: "./assets/background.png" }),
-  backgroundFallbackColor: Type.String({ description: "默认背景颜色", default: "#9a0000" }),
-  logoType: Type.String({ description: "默认图标类型", default: "dark" }),
+  backgroundFallbackColor: Type.String({ description: "默认背景颜色", default: "#8c8c8c" }),
+  logo: Type.Object({
+    scowLogoType: Type.Enum(ScowLogoType, { description: "scow logo 类型", default: ScowLogoType.dark }),
+    customLogoPath: Type.Optional(Type.String({ description: "用户自定义 logo 图片" })),
+    customLogoLink: Type.Optional(Type.String({ description: "用户自定义点击 logo 跳转链接" })),
+  }, { default: {} }),
   slogan: Type.Object({
     color: Type.String({ description: "默认标语文字颜色", default: "white" }),
     title: Type.String({ description: "默认标语标题", default: "" }),
     texts: Type.Array(Type.String(), { description: "默认 slogan 正文数组", default: []}),
   }, { default: {} }),
+  footerTextColor: Type.String({ description: "默认 footer 文字颜色", default: "white" }),
 });
 
 export const OtpConfigSchema = Type.Object({

diff --git a/apps/auth/views/login.liquid b/apps/auth/views/login.liquid
@@ -7,31 +7,36 @@
   <link rel="icon" type="image/x-icon" href="{{ faviconUrl }}"></link>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
-    html {
-        min-width: max-content;
-        overflow-x: auto;
-        overflow-y: hidden;
-    }
     body {
       background-image: url("{{ backgroundImagePath }}");
       background-repeat: no-repeat;
       background-color: {{ backgroundFallbackColor }};
       background-size: cover;
     }
     .button-primary {
-        background-color: #9a0000;
+        background-color: {{ themeColor }};
+    }
     svg {
       height: 100%;
       width: 100%;
     }
+    @media screen and (max-width: 1200px) {
+      .hidden-xs{
+          display: none;
+      }
+    }
   </style>
 </head>
 
 <body style="font-family:Roboto">
     <div class="fixed top-6 left-24">
-      <a href="https://icode.pku.edu.cn/SCOW/">
+      {% if logoLink == "" %}
+      <img class="w-40" src="{{ logoUrl }}" alt="logo">
+      {% else %}
+      <a href="{{ logoLink }}" target="_blank">
         <img class="w-40" src="{{ logoUrl }}" alt="logo">
       </a>
+      {% endif %}
     </div>
     <div class="w-full h-screen flex">
       <div class="w-1/2 h-screen ml-20 flex items-center justify-center">
@@ -117,15 +122,15 @@
           {% endif %}
         </div>
       </div>
-      <div class="w-1/2 h-screen pl-48 pb-28 flex justify-center flex-col">
+      <div class="w-1/2 h-screen pl-48 pb-28 flex justify-center flex-col hidden-xs">
           <div class="text-4xl font-semibold mb-12"  style="color: {{ sloganColor }}">{{ sloganTitle }}</div>
           {% for sloganText in sloganTextArr %}
             <div class="text-2xl mb-8"  style="color: {{ sloganColor }}">{{ sloganText }}</div>
           {% endfor %}
       </div>
     </div>
-    <p class="absolute bottom-0 w-full pl-24 my-4 text-white text-xs">
-      Powered by SCOW
+    <p class="absolute bottom-0 w-full pl-24 my-4 text-white text-xs" style="color: {{ footerTextColor }}">
+      Powered by <a href="https://github.com/PKUHPC/SCOW" target="_blank">SCOW</a>
     </p>
     <script>
       // 图片预加载

diff --git a/dev/vagrant/config/auth.yml b/dev/vagrant/config/auth.yml
@@ -150,9 +150,16 @@ ui:
   # 登录界面背景图
   backgroundImagePath: "./assets/background.png"
   # 登录界面背景色，当背景图无法加载时，背景色起效
-  backgroundFallbackColor: "#9a0000"
-  # 登录界面 logo 图, light: 亮色模式下的 logo, dark: 黑暗模式下的 logo
-  logoType: "dark"
+  backgroundFallbackColor: "#8c8c8c"
+  # 登录界面 logo 图,
+  logo:
+    # 如果没有配置自定义 logo, 则使用 type 选择 SCOW Logo
+    # light: 亮色模式下的 logo, dark: 黑暗模式下的 logo
+    scowLogoType: "dark"
+    # 自定义 logo, 默认为空
+    customLogoPath: ""
+    # 自定义点击 logo 跳转地址
+    customLogoLink: "https://icode.pku.edu.cn/SCOW/"
 
   # 登录界面 slogan 配置
   slogan:
@@ -167,3 +174,6 @@ ui:
       - "一体化部署，开箱即用"
       - "标准化平台，支持算力融合"
       - "开源中立，独立自主"
+
+  # 登陆界面底部 Power By 字体颜色配置
+  footerTextColor: "white"
diff --git a/docs/docs/deploy/config/auth/config.md b/docs/docs/deploy/config/auth/config.md
@@ -10,27 +10,34 @@ title: 内置认证系统配置
 
 在`auth.yaml`配置中，可以配置关于登录界面 UI 的部分内容。
 
-其中关于背景图片路径的设置可以参考[公共文件](https://pkuhpc.github.io/SCOW/docs/deploy/config/customization/public-files)进行配置。需要强调的是该路径是相对于公共文件的路径。
+其中关于背景图片路径和自定义 logo 图片路径的设置可以参考[公共文件](https://pkuhpc.github.io/SCOW/docs/deploy/config/customization/public-files)进行配置。需要强调的是该路径是相对于公共文件的路径。
 ```yaml
 # auth 界面 ui 配置
 ui:
   # 登录界面背景图，设置为""(空字符串)则无背景图
   # 可选配置，默认加载 install.yml 同级的 /public/assets 目录下的 background.png 作为背景图
   backgroundImagePath: "./assets/background.png"
-  # 登录界面背景色，当背景图无法加载或者没有时，背景色起效
-  # 可选配置，默认为 #9a0000
-  backgroundFallbackColor: "#9a0000"
-  # 登录界面 logo 图, light: 亮色模式下的 logo, dark: 黑暗模式下的 logo
-  # 可选配置，默认为黑暗模式 logo
-  logoType: "dark"
+  # 登录界面背景色，当背景图无法加载时，背景色起效
+  # 可选配置，默认为 #8c8c8c
+  backgroundFallbackColor: "#8c8c8c"
+  # 登录界面 logo，可选配置
+  logo:
+    # 未配置自定义 logo（customLogoPath） 时，默认使用 SCOW Logo
+    # light: 亮色模式下的 logo, dark: 黑暗模式下的 logo
+    # 可选配置，默认为黑暗模式 logo
+    scowLogoType: "dark"
+    # 可选配置，自定义 logo 的图片路径。与背景图一致，路径时相对于公共文件的路径
+    customLogoPath: ""
+    # 可选配置，自定义点击 logo 跳转地址
+    customLogoLink: "https://icode.pku.edu.cn/SCOW/"
 
   # 登录界面 slogan 配置
   # 可选配置，默认右侧无 slogan
   slogan:
     # 登录界面 slogan 文字颜色
     # 可选配置，默认为白色字体
     color: "white"
-    # 登录界面 slogan 标题
+    # 登录界面 slogan title
     # 可选配置，默认无 slogan 标题
     title: "开源算力中心门户和管理平台"
     # 多条 slogan 文本
@@ -41,6 +48,10 @@ ui:
       - "一体化部署，开箱即用"
       - "标准化平台，支持算力融合"
       - "开源中立，独立自主"
+
+  # 登陆界面底部 Power By 字体颜色配置
+  # 可选配置，默认为白色字体
+  footerTextColor: "white"
 ```
 
 ## 允许回调主机名