fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 09:49:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix oidc icon display issue (#990)

Browse Source
This commit is contained in:
henrygd
2025-07-25 13:55:02 -04:00
parent 1e675cabb5
commit 3ac0b185d1
1 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
beszel/site/src/components/login/auth-form.tsx
View File

@@ -1,5 +1,5 @@
import { t } from "@lingui/core/macro"; import { t } from "@lingui/core/macro"
import { Trans } from "@lingui/react/macro"; import { Trans } from "@lingui/react/macro"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button" import { buttonVariants } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
@@ -43,6 +43,14 @@ const showLoginFaliedToast = () => {
}) })
} }
const getAuthProviderIcon = (provider: AuthProviderInfo) => {
let { name } = provider
if (name.startsWith("oidc")) {
name = "oidc"
}
return prependBasePath(`/_/images/oauth2/${name}.svg`)
}
export function UserAuthForm({ export function UserAuthForm({
className, className,
isFirstRun, isFirstRun,
@@ -165,8 +173,8 @@ export function UserAuthForm({
}, []) }, [])
return ( return (
<div className={cn("grid gap-6", className)} {...props}> <div className={cn("grid gap-6", className)} {...props}>
{passwordEnabled && ( {passwordEnabled && (
<> <>
<form onSubmit={handleSubmit} onChange={() => setErrors({})}> <form onSubmit={handleSubmit} onChange={() => setErrors({})}>
<div className="grid gap-2.5"> <div className="grid gap-2.5">
@@ -242,20 +250,20 @@ export function UserAuthForm({
</form> </form>
{(isFirstRun || oauthEnabled) && ( {(isFirstRun || oauthEnabled) && (
// only show 'continue with' during onboarding or if we have auth providers // only show 'continue with' during onboarding or if we have auth providers
(<div className="relative"> <div className="relative">
<div className="absolute inset-0 flex items-center"> <div className="absolute inset-0 flex items-center">
<span className="w-full border-t" /> <span className="w-full border-t" />
</div> </div>
<div className="relative flex justify-center text-xs uppercase"> <div className="relative flex justify-center text-xs uppercase">
<span className="bg-background px-2 text-muted-foreground"> <span className="bg-background px-2 text-muted-foreground">
<Trans>Or continue with</Trans> <Trans>Or continue with</Trans>
</span> </span>
</div> </div>
</div>) </div>
)} )}
</> </>
)} )}
{oauthEnabled && ( {oauthEnabled && (
<div className="grid gap-2 -mt-1"> <div className="grid gap-2 -mt-1">
{authMethods.oauth2.providers.map((provider) => ( {authMethods.oauth2.providers.map((provider) => (
<button <button
@@ -273,7 +281,7 @@ export function UserAuthForm({
) : ( ) : (
<img <img
className="me-2 h-4 w-4 dark:brightness-0 dark:invert" className="me-2 h-4 w-4 dark:brightness-0 dark:invert"
src={prependBasePath(`/_/images/oauth2/${provider.name}.svg`)} src={getAuthProviderIcon(provider)}
alt="" alt=""
// onError={(e) => { // onError={(e) => {
// e.currentTarget.src = "/static/lock.svg" // e.currentTarget.src = "/static/lock.svg"
@@ -285,16 +293,16 @@ export function UserAuthForm({
))} ))}
</div> </div>
)} )}
{!oauthEnabled && isFirstRun && ( {!oauthEnabled && isFirstRun && (
// only show GitHub button / dialog during onboarding // only show GitHub button / dialog during onboarding
(<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<button type="button" className={cn(buttonVariants({ variant: "outline" }))}> <button type="button" className={cn(buttonVariants({ variant: "outline" }))}>
<img className="me-2 h-4 w-4 dark:invert" src={prependBasePath("/_/images/oauth2/github.svg")} alt="" /> <img className="me-2 h-4 w-4 dark:invert" src={prependBasePath("/_/images/oauth2/github.svg")} alt="" />
<span className="translate-y-[1px]">GitHub</span> <span className="translate-y-[1px]">GitHub</span>
</button> </button>
</DialogTrigger> </DialogTrigger>
<DialogContent style={{ maxWidth: 440, width: "90%" }}> <DialogContent style={{ maxWidth: 440, width: "90%" }}>
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
<Trans>OAuth 2 / OIDC support</Trans> <Trans>OAuth 2 / OIDC support</Trans>
@@ -318,9 +326,9 @@ export function UserAuthForm({
</p> </p>
</div> </div>
</DialogContent> </DialogContent>
</Dialog>) </Dialog>
)} )}
{passwordEnabled && !isFirstRun && ( {passwordEnabled && !isFirstRun && (
<Link <Link
href={getPagePath($router, "forgot_password")} href={getPagePath($router, "forgot_password")}
className="text-sm mx-auto hover:text-brand underline underline-offset-4 opacity-70 hover:opacity-100 transition-opacity" className="text-sm mx-auto hover:text-brand underline underline-offset-4 opacity-70 hover:opacity-100 transition-opacity"
@@ -328,6 +336,6 @@ export function UserAuthForm({
<Trans>Forgot password?</Trans> <Trans>Forgot password?</Trans>
</Link> </Link>
)} )}
</div> </div>
); )
} }