fix oidc icon display issue (#990)

beszel/site/src/components/login/auth-form.tsx

@@ -1,5 +1,5 @@
-import { t } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 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({
 	className,
 	isFirstRun,
@@ -165,8 +173,8 @@ export function UserAuthForm({
 	}, [])
 
 	return (
-        <div className={cn("grid gap-6", className)} {...props}>
-            {passwordEnabled && (
+		<div className={cn("grid gap-6", className)} {...props}>
+			{passwordEnabled && (
 				<>
 					<form onSubmit={handleSubmit} onChange={() => setErrors({})}>
 						<div className="grid gap-2.5">
@@ -242,20 +250,20 @@ export function UserAuthForm({
 					</form>
 					{(isFirstRun || oauthEnabled) && (
 						// only show 'continue with' during onboarding or if we have auth providers
-						(<div className="relative">
-                            <div className="absolute inset-0 flex items-center">
+						<div className="relative">
+							<div className="absolute inset-0 flex items-center">
 								<span className="w-full border-t" />
 							</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">
 									<Trans>Or continue with</Trans>
 								</span>
 							</div>
-                        </div>)
+						</div>
 					)}
 				</>
 			)}
-            {oauthEnabled && (
+			{oauthEnabled && (
 				<div className="grid gap-2 -mt-1">
 					{authMethods.oauth2.providers.map((provider) => (
 						<button
@@ -273,7 +281,7 @@ export function UserAuthForm({
 							) : (
 								<img
 									className="me-2 h-4 w-4 dark:brightness-0 dark:invert"
-									src={prependBasePath(`/_/images/oauth2/${provider.name}.svg`)}
+									src={getAuthProviderIcon(provider)}
 									alt=""
 									// onError={(e) => {
 									// 	e.currentTarget.src = "/static/lock.svg"
@@ -285,16 +293,16 @@ export function UserAuthForm({
 					))}
 				</div>
 			)}
-            {!oauthEnabled && isFirstRun && (
+			{!oauthEnabled && isFirstRun && (
 				// only show GitHub button / dialog during onboarding
-				(<Dialog>
-                    <DialogTrigger asChild>
+				<Dialog>
+					<DialogTrigger asChild>
 						<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="" />
 							<span className="translate-y-[1px]">GitHub</span>
 						</button>
 					</DialogTrigger>
-                    <DialogContent style={{ maxWidth: 440, width: "90%" }}>
+					<DialogContent style={{ maxWidth: 440, width: "90%" }}>
 						<DialogHeader>
 							<DialogTitle>
 								<Trans>OAuth 2 / OIDC support</Trans>
@@ -318,9 +326,9 @@ export function UserAuthForm({
 							</p>
 						</div>
 					</DialogContent>
-                </Dialog>)
+				</Dialog>
 			)}
-            {passwordEnabled && !isFirstRun && (
+			{passwordEnabled && !isFirstRun && (
 				<Link
 					href={getPagePath($router, "forgot_password")}
 					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>
 				</Link>
 			)}
-        </div>
-    );
+		</div>
+	)
 }