oauth

frontend/components/auth/login-form.tsx

@@ -1,182 +1,268 @@
 "use client"
 
-import { useState, useEffect } from "react"
-import { toast } from "sonner"
-import { Spinner } from "@/components/ui/spinner"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { motion, useAnimation } from "motion/react"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-import { SquareArrowUpRight } from 'lucide-react';
+import {useMemo, useState} from "react"
+import {useMutation, useQuery} from "@tanstack/react-query"
+import {useRouter, useSearchParams} from "next/navigation"
+import {KeyRound, ShieldCheck, UserPlus} from "lucide-react"
+import {toast} from "sonner"
 
-import { cn } from "@/lib/utils"
+import {useAuth} from "@/components/providers/auth-provider"
+import {Button} from "@/components/ui/button"
+import {Input} from "@/components/ui/input"
+import {Separator} from "@/components/ui/separator"
+import {Spinner} from "@/components/ui/spinner"
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
+import {Card, CardContent} from "@/components/ui/card"
 import services from "@/lib/services"
-import { termsSections } from "@/components/common/docs/terms"
-import { privacySections } from "@/components/common/docs/privacy"
 
+function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
+  const callbackUrl = searchParams.get("callbackUrl")
+  const storedRedirect = sessionStorage.getItem("redirect_after_login")
+  const target = callbackUrl || storedRedirect || "/home"
 
-/**
- * 登录表单组件
- * 显示登录表单和登录按钮
- * 
- * @example
- * ```tsx
- * <LoginForm />
- * ```
- * @param {React.ComponentProps<"div">} props - 组件属性
- * @param {string} className - 组件类名
- * @returns {React.ReactNode} 登录表单组件
- */
-export function LoginForm({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  const [isLoading, setIsLoading] = useState(false)
-  const [hasAgreed, setHasAgreed] = useState(false)
-  const controls = useAnimation()
-
-
-  useEffect(() => {
-    const agreed = localStorage.getItem("loginPromptAgreed") === "true"
-    if (agreed) {
-      setHasAgreed(true)
-    }
-  }, [])
-
-  const handleAgreementChange = (checked: boolean | string) => {
-    const isChecked = checked === true
-    setHasAgreed(isChecked)
-    if (isChecked) {
-      localStorage.setItem("loginPromptAgreed", "true")
-    } else {
-      localStorage.removeItem("loginPromptAgreed")
-    }
+  if (storedRedirect) {
+    sessionStorage.removeItem("redirect_after_login")
   }
 
-  /* 处理登录 */
-  const handleLogin = async () => {
-    if (!hasAgreed) {
-      toast.error("请先阅读并勾选服务条款和隐私政策")
-      controls.start({
-        x: [0, -4, 4, -4, 4, 0],
-        color: ["#ef4444", "inherit"],
-        transition: { duration: 0.5 }
-      })
-      return
-    }
+  return target
+}
 
-    setIsLoading(true)
+function persistRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
+  const callbackUrl = searchParams.get("callbackUrl")
+  if (callbackUrl) {
+    sessionStorage.setItem("redirect_after_login", callbackUrl)
+  }
+}
+
+export function LoginForm() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { setUser } = useAuth()
+  const [mode, setMode] = useState<"login" | "register">("login")
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [nickname, setNickname] = useState("")
+  const [errorMessage, setErrorMessage] = useState("")
+
+  const publicConfigQuery = useQuery({
+    queryKey: ["public-config"],
+    queryFn: services.config.getPublicConfig,
+  })
+
+  const authSourcesQuery = useQuery({
+    queryKey: ["auth-sources"],
+    queryFn: services.auth.getAuthSources,
+    enabled: publicConfigQuery.data?.oidc_login_enabled ?? true,
+  })
+
+  const redirectTarget = useMemo(
+    () => getRedirectTarget(searchParams),
+    [searchParams],
+  )
+
+  const loginMutation = useMutation({
+    mutationFn: services.auth.login,
+    onSuccess: (user) => {
+      setUser(user)
+      router.replace(redirectTarget)
+    },
+    onError: (error: Error) => {
+      setErrorMessage(error.message || "登录失败，请重试")
+    },
+  })
+
+  const registerMutation = useMutation({
+    mutationFn: services.auth.register,
+    onSuccess: (user) => {
+      setUser(user)
+      router.replace(redirectTarget)
+    },
+    onError: (error: Error) => {
+      setErrorMessage(error.message || "注册失败，请重试")
+    },
+  })
+
+  const handlePasswordLogin = () => {
+    setErrorMessage("")
+    loginMutation.mutate({
+      username: username.trim(),
+      password,
+    })
+  }
+
+  const handleRegister = () => {
+    setErrorMessage("")
+    registerMutation.mutate({
+      username: username.trim(),
+      password,
+      nickname: nickname.trim() || undefined,
+    })
+  }
+
+  const handleOAuthLogin = async (sourceName: string) => {
     try {
-      await services.auth.initiateLogin()
+      setErrorMessage("")
+      persistRedirectTarget(searchParams)
+      const { authorize_url } = await services.auth.getAuthorizeUrl(sourceName)
+      window.location.href = authorize_url
     } catch (error) {
-      setIsLoading(false)
-      console.error('Login error:', error)
-      const message = error instanceof Error ? error.message : "登录失败，请重试"
-      toast.error(message, {
-        duration: 5000,
-        description: error instanceof Error && error.name === 'NetworkError'
-          ? '请确认后端服务已启动'
-          : undefined
-      })
+      toast.error(error instanceof Error ? error.message : "第三方登录失败")
     }
   }
 
+  const registrationEnabled =
+    (publicConfigQuery.data?.registration_enabled ?? true) &&
+    (publicConfigQuery.data?.password_register_enabled ?? true)
+
+  const passwordLoginEnabled = publicConfigQuery.data?.password_login_enabled ?? true
+
+  const authSources = authSourcesQuery.data ?? []
+
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <div className="grid gap-4 mx-4">
-        <Button
-          variant="default"
-          type="button"
-          className="w-full h-9 rounded-full tracking-wide bg-primary hover:bg-primary/90 text-primary-foreground text-sm font-bold shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all active:scale-95"
-          onClick={handleLogin}
-          disabled={isLoading}
-        >
-          {isLoading ? <Spinner className="mr-2" /> : <SquareArrowUpRight className="mr-2 h-4 w-4" />}
-          {isLoading ? "正在跳转..." : "使用 LINUX DO 登录"}
-        </Button>
-      </div>
+    <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
+      <CardContent className="space-y-5 p-5 sm:p-6">
+        <div className="space-y-2 text-center">
+          <h2 className="text-xl font-semibold tracking-tight text-foreground">
+            账号登录
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            使用账号密码或第三方 OIDC 认证源登录
+          </p>
+        </div>
 
-      <motion.div
-        animate={controls}
-        className="flex items-center justify-center space-x-2 px-4"
-      >
-        <Checkbox
-          id="terms"
-          checked={hasAgreed}
-          onCheckedChange={handleAgreementChange}
-        />
-        <label
-          htmlFor="terms"
-          className="text-muted-foreground text-xs text-balance opacity-75 hover:opacity-100 transition-opacity cursor-pointer leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          我已阅读并同意
-          {" "}
-          <Dialog>
-            <DialogTrigger asChild>
-              <button
+        <Tabs value={mode} onValueChange={(value) => setMode(value as "login" | "register")}>
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="login">登录</TabsTrigger>
+            <TabsTrigger value="register" disabled={!registrationEnabled}>
+              注册
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="login" className="space-y-4 pt-4">
+            <div className="space-y-3">
+              <div className="space-y-2">
+                <Input
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="用户名"
+                  autoComplete="username"
+                />
+                <Input
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  type="password"
+                  placeholder="密码"
+                  autoComplete="current-password"
+                />
+              </div>
+
+              {errorMessage ? (
+                <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+                  {errorMessage}
+                </div>
+              ) : null}
+
+              <Button
                 type="button"
-                className="underline underline-offset-4 hover:text-foreground"
-                onClick={(e) => e.stopPropagation()}
+                className="w-full"
+                onClick={handlePasswordLogin}
+                disabled={!passwordLoginEnabled || loginMutation.isPending}
               >
-                服务条款
-              </button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>服务条款</DialogTitle>
-                <DialogDescription>请仔细阅读以下条款，使用本服务即表示您接受。</DialogDescription>
-              </DialogHeader>
-              <Accordion type="single" collapsible className="w-full">
-                {termsSections.map((section) => (
-                  <AccordionItem key={section.value} value={section.value}>
-                    <AccordionTrigger>{section.title}</AccordionTrigger>
-                    <AccordionContent>{section.content}</AccordionContent>
-                  </AccordionItem>
-                ))}
-              </Accordion>
-            </DialogContent>
-          </Dialog>
-          {" "}及{" "}
-          <Dialog>
-            <DialogTrigger asChild>
-              <button
+                {loginMutation.isPending ? (
+                  <>
+                    <Spinner className="mr-2" />
+                    登录中...
+                  </>
+                ) : (
+                  <>
+                    <KeyRound className="mr-2 size-4" />
+                    账号密码登录
+                  </>
+                )}
+              </Button>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="register" className="space-y-4 pt-4">
+            <div className="space-y-3">
+              <div className="space-y-2">
+                <Input
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="用户名"
+                  autoComplete="username"
+                />
+                <Input
+                  value={nickname}
+                  onChange={(e) => setNickname(e.target.value)}
+                  placeholder="昵称（可选）"
+                  autoComplete="nickname"
+                />
+                <Input
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  type="password"
+                  placeholder="密码（至少 8 位）"
+                  autoComplete="new-password"
+                />
+              </div>
+
+              {errorMessage ? (
+                <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+                  {errorMessage}
+                </div>
+              ) : null}
+
+              <Button
                 type="button"
-                className="underline underline-offset-4 hover:text-foreground"
-                onClick={(e) => e.stopPropagation()}
+                className="w-full"
+                onClick={handleRegister}
+                disabled={!registrationEnabled || registerMutation.isPending}
               >
-                隐私政策
-              </button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>隐私政策</DialogTitle>
-                <DialogDescription>我们重视您的隐私，以下说明信息如何收集与使用。</DialogDescription>
-              </DialogHeader>
-              <Accordion type="single" collapsible className="w-full">
-                {privacySections.map((section) => (
-                  <AccordionItem key={section.value} value={section.value}>
-                    <AccordionTrigger>{section.title}</AccordionTrigger>
-                    <AccordionContent>{section.content}</AccordionContent>
-                  </AccordionItem>
-                ))}
-              </Accordion>
-            </DialogContent>
-          </Dialog>
-        </label>
-      </motion.div>
-    </div>
+                {registerMutation.isPending ? (
+                  <>
+                    <Spinner className="mr-2" />
+                    注册中...
+                  </>
+                ) : (
+                  <>
+                    <UserPlus className="mr-2 size-4" />
+                    创建账号
+                  </>
+                )}
+              </Button>
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        <Separator />
+
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <ShieldCheck className="size-4" />
+            第三方认证源
+          </div>
+          <div className="grid gap-2">
+            {authSources.length > 0 ? (
+              authSources.map((source) => (
+                <Button
+                  key={source.id}
+                  type="button"
+                  variant="outline"
+                  className="justify-start"
+                  onClick={() => void handleOAuthLogin(source.name)}
+                >
+                  {source.display_name || source.name} 登录
+                </Button>
+              ))
+            ) : (
+              <div className="rounded-lg border border-dashed border-border/60 px-3 py-4 text-sm text-muted-foreground">
+                暂无可用认证源
+              </div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   )
 }

frontend/components/auth/login-page.tsx

@@ -1,23 +1,22 @@
 "use client"
 
-import { useCallback, useEffect, useState } from "react"
-import { motion, AnimatePresence } from "motion/react"
-import { useRouter, useSearchParams } from "next/navigation"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
-import { Spinner } from "@/components/ui/spinner"
-import { LoginForm } from "@/components/auth/login-form"
-import { Check } from "lucide-react"
+import {useCallback, useEffect, useState} from "react"
+import {AnimatePresence, motion} from "motion/react"
+import {useRouter, useSearchParams} from "next/navigation"
+import {toast} from "sonner"
+import {Spinner} from "@/components/ui/spinner"
+import {LoginForm} from "@/components/auth/login-form"
+import {Check} from "lucide-react"
 
-import { AuroraBackground } from "@/components/ui/aurora-background"
+import {AuroraBackground} from "@/components/ui/aurora-background"
 import services from "@/lib/services"
-import type { ApiResponse } from "@/lib/services/core/types"
+import {useAuth} from "@/components/providers/auth-provider"
 
 
 /**
  * 登录页面组件
  * 显示登录表单和登录按钮
- * 
+ *
  * @example
  * ```tsx
  * <LoginPage />
@@ -27,6 +26,7 @@ import type { ApiResponse } from "@/lib/services/core/types"
 export function LoginPage() {
   const router = useRouter()
   const searchParams = useSearchParams()
+  const { setUser } = useAuth()
 
   /* 处理OAuth回调 */
   const [isProcessingCallback, setIsProcessingCallback] = useState(() => {
@@ -74,14 +74,13 @@ export function LoginPage() {
         if (cancelled) return
 
         if (response.ok) {
-          await response.json() as ApiResponse
+          const payload = await response.json()
+          if (payload?.data) {
+            setUser(payload.data)
+          }
           router.replace(resolveRedirectTarget())
           return
         }
-
-        if (response.status !== 401) {
-          console.error('Session probe failed:', response.status)
-        }
       } catch (error) {
         if (!cancelled) {
           console.error('Session probe error:', error)
@@ -98,7 +97,7 @@ export function LoginPage() {
     return () => {
       cancelled = true
     }
-  }, [router, searchParams, resolveRedirectTarget])
+  }, [router, searchParams, resolveRedirectTarget, setUser])
 
   /* 回调逻辑 */
   useEffect(() => {
@@ -109,9 +108,12 @@ export function LoginPage() {
       if (state && code) {
         setIsProcessingCallback(true)
         try {
-          await services.auth.handleCallback({ state, code })
+          const result = await services.auth.handleCallback({ state, code })
+          if (result.user) {
+            setUser(result.user)
+          }
           setLoginSuccess(true)
-          toast.success("登录成功")
+          toast.success(result.status === "bound" ? "绑定成功" : "登录成功")
 
           setTimeout(() => {
             router.replace(resolveRedirectTarget())
@@ -125,7 +127,7 @@ export function LoginPage() {
       }
     }
     handleOAuthCallback()
-  }, [searchParams, router, resolveRedirectTarget])
+  }, [searchParams, router, resolveRedirectTarget, setUser])
 
   return (
     <AuroraBackground>

frontend/components/common/settings/auth-source-modal.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import {useEffect, useState} from "react"
+import {toast} from "sonner"
+import {Button} from "@/components/ui/button"
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog"
+import {Input} from "@/components/ui/input"
+import {Label} from "@/components/ui/label"
+import {Switch} from "@/components/ui/switch"
+import {AdminService} from "@/lib/services"
+import type {AuthSource, AuthSourceRequest} from "@/lib/services/admin"
+
+const emptyForm: AuthSourceRequest = {
+  name: "",
+  type: "oidc",
+  display_name: "",
+  is_active: false,
+  client_id: "",
+  client_secret: "",
+  openid_discovery_url: "",
+  scopes: "openid profile email",
+  icon_url: "",
+}
+
+export function AuthSourceModal({
+  isOpen,
+  source,
+  onClose,
+  onChanged,
+}: {
+  isOpen: boolean
+  source: AuthSource | null
+  onClose: () => void
+  onChanged: () => Promise<void>
+}) {
+  const [form, setForm] = useState<AuthSourceRequest>(emptyForm)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      if (source) {
+        setForm({
+          name: source.name,
+          type: source.type,
+          display_name: source.display_name,
+          is_active: source.is_active,
+          client_id: source.client_id,
+          client_secret: "",
+          openid_discovery_url: source.openid_discovery_url,
+          scopes: source.scopes || "openid profile email",
+          icon_url: source.icon_url,
+        })
+      } else {
+        setForm(emptyForm)
+      }
+    } else {
+      setForm(emptyForm)
+      setSaving(false)
+    }
+  }, [isOpen, source])
+
+  const saveSource = async () => {
+    setSaving(true)
+    try {
+      if (source) {
+        await AdminService.updateAuthSource(source.id, form)
+      } else {
+        await AdminService.createAuthSource(form)
+      }
+      await onChanged()
+      toast.success("认证源已保存")
+      onClose()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "保存认证源失败")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{source ? "编辑认证源" : "新增认证源"}</DialogTitle>
+          <DialogDescription>
+            {source ? "修改系统自定义的 OIDC 认证源参数。" : "配置新的自定义 OIDC 认证源。"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 md:grid-cols-2 pt-2">
+          <div className="space-y-2">
+            <Label>标识符 (英文名称)</Label>
+            <Input 
+              value={form.name} 
+              disabled={!!source}
+              onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))} 
+              placeholder="例如: github"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>展示名称</Label>
+            <Input 
+              value={form.display_name} 
+              onChange={(e) => setForm((prev) => ({ ...prev, display_name: e.target.value }))} 
+              placeholder="例如: GitHub 登录"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Client ID</Label>
+            <Input 
+              value={form.client_id} 
+              onChange={(e) => setForm((prev) => ({ ...prev, client_id: e.target.value }))} 
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Client Secret</Label>
+            <Input 
+              value={form.client_secret} 
+              onChange={(e) => setForm((prev) => ({ ...prev, client_secret: e.target.value }))} 
+              placeholder={source ? "留空则保留原值" : ""} 
+            />
+          </div>
+          <div className="space-y-2 md:col-span-2">
+            <Label>Discovery URL (OIDC 发行方 URL)</Label>
+            <Input 
+              value={form.openid_discovery_url} 
+              onChange={(e) => setForm((prev) => ({ ...prev, openid_discovery_url: e.target.value }))} 
+              placeholder="https://..."
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Scopes</Label>
+            <Input 
+              value={form.scopes} 
+              onChange={(e) => setForm((prev) => ({ ...prev, scopes: e.target.value }))} 
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>图标 URL (可选)</Label>
+            <Input 
+              value={form.icon_url} 
+              onChange={(e) => setForm((prev) => ({ ...prev, icon_url: e.target.value }))} 
+              placeholder="https://... 或留空"
+            />
+          </div>
+          <div className="flex items-center justify-between rounded-xl border border-dashed p-3 md:col-span-2 bg-muted/10">
+            <div>
+              <div className="font-medium text-sm">启用认证源</div>
+              <div className="text-xs text-muted-foreground">启用后会立即显示在登录页和账号绑定中。</div>
+            </div>
+            <Switch checked={form.is_active} onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: checked }))} />
+          </div>
+          <div className="md:col-span-2 flex justify-end gap-2 pt-2 border-t mt-2">
+            <Button variant="outline" type="button" onClick={onClose}>
+              取消
+            </Button>
+            <Button type="button" onClick={saveSource} disabled={saving} className="bg-indigo-600 hover:bg-indigo-700 text-white shadow-md shadow-indigo-600/10">
+              {saving ? "保存中..." : "保存"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+

frontend/components/common/settings/profile.tsx

@@ -2,26 +2,60 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { motion, useAnimation } from "motion/react"
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
-import { useUser } from "@/contexts/user-context"
-import { Shield } from "lucide-react"
+import {motion, useAnimation} from "motion/react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@/components/ui/breadcrumb"
+import {useUser} from "@/contexts/user-context"
+import {ArrowRight, Link2, Loader2, Shield, Unlink} from "lucide-react"
+import {Button} from "@/components/ui/button"
+import {Separator} from "@/components/ui/separator"
+import {AuthService} from "@/lib/services"
+import {toast} from "sonner"
 
 export function ProfileMain() {
   const { user, loading, getTrustLevelLabel } = useUser()
   const controls = useAnimation()
   const isAnimatingRef = React.useRef(false)
+  const queryClient = useQueryClient()
+
+  const externalAccountBindingsQuery = useQuery({
+    queryKey: ["auth", "external-accounts"],
+    queryFn: () => AuthService.getExternalAccountBindings(),
+  })
+
+  const publicAuthSourcesQuery = useQuery({
+    queryKey: ["auth", "public-sources"],
+    queryFn: () => AuthService.getAuthSources(),
+  })
+
+  const bindSourceMutation = useMutation({
+    mutationFn: async (sourceName: string) => {
+      const { authorize_url } = await AuthService.getAuthorizeUrl(sourceName, "bind")
+      sessionStorage.setItem("redirect_after_login", `${window.location.pathname}${window.location.search}`)
+      window.location.href = authorize_url
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "绑定认证源失败")
+    },
+  })
 
   const handleAvatarClick = () => {
     if (isAnimatingRef.current) return
-    
+
     isAnimatingRef.current = true
     controls.start({
       rotate: [0, -20, 20, -20, 20, 0],
       transition: { duration: 0.5, ease: "easeInOut" }
     })
-    
+
     setTimeout(() => {
       isAnimatingRef.current = false
     }, 650)
@@ -123,6 +157,100 @@ export function ProfileMain() {
           </div>
         </div>
       </div>
+
+      {/* 账号绑定面板 */}
+      <div className="space-y-6 bg-card border border-dashed rounded-lg p-6">
+        <div className="border-b pb-4 flex items-center gap-2">
+          <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+            <Link2 className="size-4" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold tracking-tight">第三方账号绑定</h2>
+            <p className="text-xs text-muted-foreground">管理并关联您的第三方授权账户，便于快捷登录与验证</p>
+          </div>
+        </div>
+
+        {/* 已绑定账号列表 */}
+        <div className="space-y-3 pt-2">
+          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">已绑定账号</h3>
+          {externalAccountBindingsQuery.isPending ? (
+            <div className="flex items-center justify-center py-6">
+              <Loader2 className="size-5 animate-spin text-indigo-500" />
+            </div>
+          ) : (externalAccountBindingsQuery.data ?? []).length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {(externalAccountBindingsQuery.data ?? []).map((binding) => (
+                <div
+                  key={binding.id}
+                  className="flex items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 transition-all duration-300"
+                >
+                  <div className="space-y-1">
+                    <span className="font-semibold text-xs text-foreground block">{binding.auth_source_label}</span>
+                    <span className="text-xs text-muted-foreground font-mono block truncate max-w-[180px]">
+                      {binding.external_username || binding.email || "未提供账号标识"}
+                    </span>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="text-xs text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg h-8 px-2.5 transition-colors"
+                    onClick={async () => {
+                      await AuthService.deleteExternalAccountBinding(binding.id)
+                      await queryClient.invalidateQueries({ queryKey: ["auth", "external-accounts"] })
+                      toast.success("绑定已移除")
+                    }}
+                  >
+                    <Unlink className="size-3.5 mr-1" />
+                    解除绑定
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center">
+              <Link2 className="size-6 text-muted-foreground/30 mb-2" />
+              暂无绑定的第三方账号
+            </div>
+          )}
+        </div>
+
+        <Separator className="border-dashed" />
+
+        {/* 绑定新账号列表 */}
+        <div className="space-y-3">
+          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">绑定新账号</h3>
+          {publicAuthSourcesQuery.isPending ? (
+            <div className="flex items-center justify-center py-6">
+              <Loader2 className="size-5 animate-spin text-indigo-500" />
+            </div>
+          ) : (publicAuthSourcesQuery.data ?? []).length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {(publicAuthSourcesQuery.data ?? []).map((source) => (
+                <Button
+                  key={source.id}
+                  type="button"
+                  variant="outline"
+                  className="flex items-center justify-between w-full border border-dashed rounded-xl px-4 py-3.5 text-left font-normal text-xs hover:bg-indigo-500/5 hover:text-indigo-500 hover:border-indigo-500/30 transition-all duration-300 group h-auto"
+                  onClick={() => {
+                    void bindSourceMutation.mutateAsync(source.name)
+                  }}
+                >
+                  <div className="flex items-center gap-2">
+                    <Link2 className="size-3.5 text-muted-foreground group-hover:text-indigo-500" />
+                    <span>绑定 {source.display_name || source.name}</span>
+                  </div>
+                  <ArrowRight className="size-3.5 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-indigo-500" />
+                </Button>
+              ))}
+            </div>
+          ) : (
+            <div className="text-xs text-muted-foreground text-center py-4">
+              暂无可用第三方认证源
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   )
 }

frontend/components/common/settings/security.tsx

@@ -1,14 +1,168 @@
 "use client"
 
-import * as React from "react"
+import {useEffect, useMemo, useState} from "react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {Fingerprint, Globe, Loader2, Lock, Pencil, Plus, Settings, ShieldCheck, Trash2, UserPlus} from "lucide-react"
 import Link from "next/link"
-import { ShieldCheck } from "lucide-react"
+import {useRouter} from "next/navigation"
+import {motion} from "motion/react"
 
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
+import {Button} from "@/components/ui/button"
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
+import {Switch} from "@/components/ui/switch"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@/components/ui/breadcrumb"
+import {useAuth} from "@/components/providers/auth-provider"
+import {AuthSourceModal} from "@/components/common/settings/auth-source-modal"
+import {AdminService} from "@/lib/services"
+import type {AuthSource, SystemConfig} from "@/lib/services/admin"
+import {toast} from "sonner"
+
+const SECURITY_KEYS = [
+  {
+    key: "password_login_enabled",
+    title: "允许密码登录",
+    description: "关闭后仅保留第三方 OIDC 认证源进行系统登录。",
+    icon: Lock,
+  },
+  {
+    key: "registration_enabled",
+    title: "允许注册",
+    description: "关闭后系统将禁止新用户进行自主账号注册。",
+    icon: UserPlus,
+  },
+  {
+    key: "password_register_enabled",
+    title: "允许密码注册",
+    description: "关闭后只能通过管理员创建或第三方认证关联建号。",
+    icon: Fingerprint,
+  },
+  {
+    key: "oidc_login_enabled",
+    title: "允许 OIDC 登录",
+    description: "关闭后所有的第三方 OIDC 认证登录入口都会被隐藏。",
+    icon: Globe,
+  },
+] as const
+
+type SecurityKey = (typeof SECURITY_KEYS)[number]["key"]
+
+function systemConfigMap(configs: SystemConfig[]) {
+  return configs.reduce<Record<string, SystemConfig>>((accumulator, config) => {
+    accumulator[config.key] = config
+    return accumulator
+  }, {})
+}
 
 export function SecurityMain() {
+  const queryClient = useQueryClient()
+  const { user, loading } = useAuth()
+  const router = useRouter()
+  const [authSourceModalOpen, setAuthSourceModalOpen] = useState(false)
+  const [selectedSource, setSelectedSource] = useState<AuthSource | null>(null)
+
+  const systemConfigsQuery = useQuery({
+    queryKey: ["admin", "system-configs"],
+    queryFn: () => AdminService.listSystemConfigs("system"),
+    enabled: !!user?.is_admin,
+  })
+
+  const authSourcesQuery = useQuery({
+    queryKey: ["auth", "sources"],
+    queryFn: () => AdminService.listAuthSources(),
+    enabled: !!user?.is_admin,
+  })
+
+  const configs = useMemo(
+    () => systemConfigMap(systemConfigsQuery.data ?? []),
+    [systemConfigsQuery.data],
+  )
+
+  useEffect(() => {
+    if (!loading && (!user || !user.is_admin)) {
+      router.replace("/settings/profile")
+    }
+  }, [user, loading, router])
+
+  useEffect(() => {
+    if (user?.is_admin) {
+      void systemConfigsQuery.refetch()
+    }
+  }, [systemConfigsQuery, user])
+
+  const updateConfigMutation = useMutation({
+    mutationFn: async ({ key, value }: { key: SecurityKey; value: boolean }) => {
+      const config = configs[key]
+      if (!config) {
+        throw new Error(`缺少配置项: ${key}`)
+      }
+      await AdminService.updateSystemConfig(key, {
+        value: value ? "true" : "false",
+        description: config.description,
+      })
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["admin", "system-configs"] })
+      toast.success("系统安全配置已更新")
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "更新配置失败")
+    },
+  })
+
+  const toggleSourceMutation = useMutation({
+    mutationFn: async (source: AuthSource) => {
+      await AdminService.toggleAuthSource(source.id, { is_active: !source.is_active })
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
+      await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
+      toast.success("认证源状态已更新")
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "切换状态失败")
+    },
+  })
+
+  const deleteSourceMutation = useMutation({
+    mutationFn: async (sourceId: string) => {
+      await AdminService.deleteAuthSource(sourceId)
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
+      await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
+      toast.success("认证源已删除")
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "删除认证源失败")
+    },
+  })
+
+  const handleToggle = (key: SecurityKey, checked: boolean) => {
+    updateConfigMutation.mutate({ key, value: checked })
+  }
+
+  if (loading || !user || !user.is_admin) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Loader2 className="size-6 animate-spin text-indigo-500" />
+      </div>
+    )
+  }
+
   return (
-    <div className="py-6 space-y-6">
+    <motion.div
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, ease: "easeOut" }}
+      className="py-6 space-y-6 max-w-4xl mx-auto px-4"
+    >
       <div className="font-semibold">
         <Breadcrumb>
           <BreadcrumbList>
@@ -25,16 +179,192 @@ export function SecurityMain() {
         </Breadcrumb>
       </div>
 
-      <div className="space-y-6">
-        <div className="font-medium text-sm text-muted-foreground flex items-center gap-2">
-          <ShieldCheck className="w-4 h-4" />
-          安全设置
-        </div>
-
-        <div className="text-sm text-muted-foreground">
-          当前暂无安全配置选项
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b pb-5">
+        <div className="flex items-center gap-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-lg shadow-indigo-500/20">
+            <ShieldCheck className="size-6 animate-pulse" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent">系统安全设置</h1>
+            <p className="text-sm text-muted-foreground">管理系统安全控制及身份验证源</p>
+          </div>
         </div>
       </div>
-    </div>
+
+      <div className="space-y-6">
+        {/* 系统登录与注册控制 */}
+        <Card className="border border-dashed shadow-sm">
+          <CardHeader className="border-b border-dashed pb-4">
+            <div className="flex items-center gap-2">
+              <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+                <Settings className="size-4" />
+              </div>
+              <div>
+                <CardTitle className="text-base font-semibold">系统安全与注册控制</CardTitle>
+                <CardDescription className="text-xs">配置系统的登录限制与用户自主注册权限</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {SECURITY_KEYS.map((item) => {
+                const config = configs[item.key]
+                const checked = config ? config.value === "true" : false
+                const Icon = item.icon
+                return (
+                  <div
+                    key={item.key}
+                    className="flex items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 hover:border-indigo-500/30 transition-all duration-300 shadow-sm"
+                  >
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2">
+                        {Icon && <Icon className="size-4 text-indigo-500" />}
+                        <span className="font-medium text-sm text-foreground">{item.title}</span>
+                      </div>
+                      <p className="text-xs text-muted-foreground leading-relaxed pr-2">{item.description}</p>
+                    </div>
+                    <Switch
+                      checked={checked}
+                      disabled={updateConfigMutation.isPending}
+                      onCheckedChange={(value) => handleToggle(item.key, value)}
+                    />
+                  </div>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 认证源配置管理 */}
+        <Card className="border border-dashed shadow-sm">
+          <CardHeader className="border-b border-dashed pb-4 flex flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+                <Globe className="size-4" />
+              </div>
+              <div>
+                <CardTitle className="text-base font-semibold">认证源管理</CardTitle>
+                <CardDescription className="text-xs">添加、修改并启用系统自定义的 OIDC 认证源</CardDescription>
+              </div>
+            </div>
+            <Button
+              type="button"
+              size="sm"
+              onClick={() => {
+                setSelectedSource(null)
+                setAuthSourceModalOpen(true)
+              }}
+              className="bg-indigo-600 hover:bg-indigo-700 text-white shadow-md shadow-indigo-600/10 transition-colors"
+            >
+              <Plus className="mr-1.5 size-3.5" />
+              新增认证源
+            </Button>
+          </CardHeader>
+          <CardContent className="pt-6 space-y-3">
+            {authSourcesQuery.isPending ? (
+              <div className="flex items-center justify-center p-8">
+                <Loader2 className="size-6 animate-spin text-muted-foreground/50" />
+              </div>
+            ) : (authSourcesQuery.data ?? []).length > 0 ? (
+              (authSourcesQuery.data ?? []).map((source) => (
+                <div
+                  key={source.id}
+                  className="flex items-center justify-between rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 transition-all duration-300 shadow-sm"
+                >
+                  <div className="space-y-1.5">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-sm text-foreground">{source.display_name || source.name}</span>
+                      <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${
+                        source.is_active
+                          ? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
+                          : "bg-amber-500/10 text-amber-500 border-amber-500/20"
+                      }`}>
+                        {source.is_active ? "已启用" : "已禁用"}
+                      </span>
+                    </div>
+                    <div className="text-xs text-muted-foreground font-mono">
+                      标识符: {source.name} · 类型: {source.type.toUpperCase()}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <span className={`text-xs px-2.5 py-1 rounded-lg border font-medium hidden sm:inline-block ${
+                      source.client_secret_configured
+                        ? "bg-indigo-500/5 text-indigo-500 border-indigo-500/10"
+                        : "bg-rose-500/5 text-rose-500 border-rose-500/10"
+                    }`}>
+                      {source.client_secret_configured ? "Secret 已配置" : "Secret 未配置"}
+                    </span>
+
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        checked={source.is_active}
+                        disabled={toggleSourceMutation.isPending}
+                        className="scale-90 mr-2"
+                        onCheckedChange={() => toggleSourceMutation.mutate(source)}
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 text-muted-foreground hover:text-indigo-500 hover:bg-indigo-500/10 rounded-lg transition-colors"
+                        onClick={() => {
+                          setSelectedSource(source)
+                          setAuthSourceModalOpen(true)
+                        }}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg transition-colors"
+                        disabled={deleteSourceMutation.isPending}
+                        onClick={() => {
+                          if (window.confirm(`确定删除认证源「${source.display_name || source.name}」吗？`)) {
+                            deleteSourceMutation.mutate(source.id)
+                          }
+                        }}
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center gap-3">
+                <span>暂无配置的认证源，点击上方按钮新增</span>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    setSelectedSource(null)
+                    setAuthSourceModalOpen(true)
+                  }}
+                  className="border-dashed"
+                >
+                  <Plus className="mr-1.5 size-3.5" />
+                  新增认证源
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <AuthSourceModal
+        isOpen={authSourceModalOpen}
+        source={selectedSource}
+        onClose={() => setAuthSourceModalOpen(false)}
+        onChanged={async () => {
+          await queryClient.invalidateQueries({ queryKey: ["auth", "sources"] })
+          await queryClient.invalidateQueries({ queryKey: ["auth", "public-sources"] })
+          await authSourcesQuery.refetch()
+        }}
+      />
+    </motion.div>
   )
 }
+

frontend/components/layout/sidebar.tsx

@@ -2,24 +2,24 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { usePathname, useRouter } from "next/navigation"
+import {usePathname, useRouter} from "next/navigation"
 import packageJson from "../../package.json"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
-import { Spinner } from "@/components/ui/spinner"
-import { AnimateIcon } from "@/components/animate-ui/icons/icon"
-import { ChevronLeft } from "@/components/animate-ui/icons/chevron-left"
-import { ChevronRight } from "@/components/animate-ui/icons/chevron-right"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {toast} from "sonner"
+import {Button} from "@/components/ui/button"
+import {Spinner} from "@/components/ui/spinner"
+import {AnimateIcon} from "@/components/animate-ui/icons/icon"
+import {ChevronLeft} from "@/components/animate-ui/icons/chevron-left"
+import {ChevronRight} from "@/components/animate-ui/icons/chevron-right"
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
 import {
   DropdownMenu,
-  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { getCurrentTheme } from "@/components/layout/avater-style/registry"
+import {getCurrentTheme} from "@/components/layout/avater-style/registry"
 import {
   Sidebar,
   SidebarContent,
@@ -44,28 +44,30 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog"
 import {
-  Home,
-  CreditCard,
-  Settings,
-  FileText,
-  LogOut,
-  ChevronDown,
-  UserRound,
-  FileQuestionMark,
-  ShieldCheck,
-  Layers,
-  Key,
-  Palette,
   ArrowUpRight,
+  ChevronDown,
+  CreditCard,
+  FileQuestionMark,
+  FileText,
+  Home,
+  Layers,
+  LogOut,
+  Palette,
+  Settings,
+  ShieldCheck,
+  UserRound,
 } from "lucide-react"
 
-import { useUser } from "@/contexts/user-context"
+import {useUser} from "@/contexts/user-context"
 
 /* 导航数据 */
 const data = {
   navMain: [
     { title: "首页", url: "/home", icon: Home },
   ],
+  systemSettings: [
+    { title: "系统设置", url: "/settings/security", icon: Settings },
+  ],
   admin: [
     { title: "系统配置", url: "/admin/system", icon: ShieldCheck },
     { title: "用户管理", url: "/admin/users", icon: UserRound },
@@ -279,6 +281,32 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             </SidebarGroupContent>
           </SidebarGroup>
 
+          {user?.is_admin && (
+            <SidebarGroup className="py-0 pt-4">
+              <SidebarGroupLabel className="text-xs font-normal text-muted-foreground">
+                设置
+              </SidebarGroupLabel>
+              <SidebarGroupContent className="py-1">
+                <SidebarMenu className="gap-1">
+                  {data.systemSettings.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton
+                        tooltip={item.title}
+                        isActive={pathname.startsWith(item.url)}
+                        asChild
+                      >
+                        <Link href={item.url} onClick={handleCloseSidebar}>
+                          {item.icon && <item.icon />}
+                          <span>{item.title}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )}
+
           {user?.is_admin && (
             <SidebarGroup className="py-0 pt-4">
               <SidebarGroupLabel className="text-xs font-normal text-muted-foreground">

frontend/components/providers/auth-provider.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { useUser } from "@/contexts/user-context"
+
+/**
+ * Auth provider bridge hook
+ *
+ * Provides a stable interface for components that use the useAuth() pattern.
+ * Delegates to the canonical UserContext under the hood.
+ */
+export function useAuth() {
+  return useUser()
+}

frontend/components/providers/query-provider.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query"
+import {useState} from "react"
+
+export function AppQueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30_000,
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}