diff --git a/apps/mail/app/(auth)/login/login-client.tsx b/apps/mail/app/(auth)/login/login-client.tsx index 17fb9be38b..3a7cbb6899 100644 --- a/apps/mail/app/(auth)/login/login-client.tsx +++ b/apps/mail/app/(auth)/login/login-client.tsx @@ -2,12 +2,12 @@ import { GitHub, Google } from "@/components/icons/icons"; import { signIn, useSession } from "@/lib/auth-client"; +import { useEffect, ReactNode, useState } from "react"; +import { EnvVarInfo } from "@/lib/auth-providers"; import { Button } from "@/components/ui/button"; import { useRouter } from "next/navigation"; -import { useEffect, ReactNode, useState } from "react"; import Image from "next/image"; import { toast } from "sonner"; -import { EnvVarInfo } from "@/lib/auth-providers"; import Link from "next/link"; interface EnvVarStatus { @@ -48,7 +48,7 @@ const getProviderIcon = (providerId: string, className?: string): ReactNode => { alt="Zero" width={15} height={15} - className="invert dark:invert-0 mr-2" + className="mr-2 invert dark:invert-0" /> ); default: @@ -62,8 +62,7 @@ export function LoginClient({ providers, isProd }: LoginClientProps) { const [expandedProviders, setExpandedProviders] = useState>({}); useEffect(() => { - const missingProviders = providers - .filter(p => p.required && !p.enabled); + const missingProviders = providers.filter((p) => p.required && !p.enabled); if (missingProviders.length > 0 && missingProviders[0]?.id) { setExpandedProviders({ [missingProviders[0].id]: true }); @@ -71,22 +70,22 @@ export function LoginClient({ providers, isProd }: LoginClientProps) { }, [providers]); const missingRequiredProviders = providers - .filter(p => p.required && !p.enabled) - .map(p => p.name); + .filter((p) => p.required && !p.enabled) + .map((p) => p.name); const missingProviders = providers - .filter(p => p.required && !p.enabled && p.envVarInfo) - .map(p => ({ + .filter((p) => p.required && !p.enabled && p.envVarInfo) + .map((p) => ({ id: p.id, name: p.name, envVarInfo: p.envVarInfo || [], - envVarStatus: p.envVarStatus + envVarStatus: p.envVarStatus, })); const toggleProvider = (providerId: string) => { - setExpandedProviders(prev => ({ + setExpandedProviders((prev) => ({ ...prev, - [providerId]: !prev[providerId] + [providerId]: !prev[providerId], })); }; @@ -98,14 +97,12 @@ export function LoginClient({ providers, isProd }: LoginClientProps) { if (isPending || (session && session.connectionId)) return null; - const displayProviders = isProd - ? providers.filter(p => p.enabled || p.isCustom) - : providers; + const displayProviders = isProd ? providers.filter((p) => p.enabled || p.isCustom) : providers; const hasMissingRequiredProviders = missingRequiredProviders.length > 0; const shouldShowDetailedConfig = !isProd && hasMissingRequiredProviders; - + const shouldShowSimplifiedMessage = isProd && hasMissingRequiredProviders; const handleProviderClick = (provider: Provider) => { @@ -129,15 +126,15 @@ export function LoginClient({ providers, isProd }: LoginClientProps) { const sortedProviders = [...displayProviders].sort((a, b) => { if (a.id === "zero") return -1; if (b.id === "zero") return 1; - + if (a.required && !b.required) return -1; if (!a.required && b.required) return 1; return 0; }); return ( -
-
+
+
- -
-
-

Login to Zero

+ +
+
+

Login to Zero

{shouldShowDetailedConfig && ( -
+

- To enable login with {missingRequiredProviders.join(', ')}, - add these variables to your .env file: + To enable login with{" "} + {missingRequiredProviders.join(", ")}, add + these variables to your{" "} + + .env + {" "} + file:

{missingProviders.map((provider) => ( -
+
-
-
+
{provider.envVarStatus.map((envVar) => ( -
-
+
- {envVar.name} - - {!envVar.set ? 'Missing' : 'Set'} + + {envVar.name} + + + {!envVar.set ? "Missing" : "Set"}
{!envVar.set && (
- {envVar.name}={envVar.defaultValue || `# from ${envVar.source}`} + {envVar.name}= + {envVar.defaultValue || `# from ${envVar.source}`}
)} @@ -252,17 +267,22 @@ export function LoginClient({ providers, isProd }: LoginClientProps) { href="https://github.com/Mail-0/Mail-0/blob/main/README.md" target="_blank" rel="noopener noreferrer" - className="text-sm inline-flex items-center text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white underline underline-offset-2" + className="inline-flex items-center text-sm text-black/60 underline underline-offset-2 hover:text-black dark:text-white/60 dark:hover:text-white" > Setup instructions in documentation - - +
@@ -270,7 +290,7 @@ export function LoginClient({ providers, isProd }: LoginClientProps) { )} {shouldShowSimplifiedMessage && ( -
+
- {sortedProviders.map(provider => - (provider.enabled || provider.isCustom) && ( - - ) + {sortedProviders.map( + (provider) => + (provider.enabled || provider.isCustom) && ( + + ), )}
)}
- -
); -} \ No newline at end of file +} diff --git a/apps/mail/app/(auth)/login/page.tsx b/apps/mail/app/(auth)/login/page.tsx index cce4dccf55..b7f866ad82 100644 --- a/apps/mail/app/(auth)/login/page.tsx +++ b/apps/mail/app/(auth)/login/page.tsx @@ -1,18 +1,18 @@ -import { LoginClient } from "./login-client"; import { authProviders, customProviders, isProviderEnabled } from "@/lib/auth-providers"; +import { LoginClient } from "./login-client"; export default function LoginPage() { const envNodeEnv = process.env.NODE_ENV; - const isProd = envNodeEnv === 'production'; - - const authProviderStatus = authProviders.map(provider => { - - const envVarStatus = provider.envVarInfo?.map(envVar => ({ - name: envVar.name, - set: !!process.env[envVar.name], - source: envVar.source, - defaultValue: envVar.defaultValue - })) || []; + const isProd = envNodeEnv === "production"; + + const authProviderStatus = authProviders.map((provider) => { + const envVarStatus = + provider.envVarInfo?.map((envVar) => ({ + name: envVar.name, + set: !!process.env[envVar.name], + source: envVar.source, + defaultValue: envVar.defaultValue, + })) || []; return { id: provider.id, @@ -20,25 +20,25 @@ export default function LoginPage() { enabled: isProviderEnabled(provider), required: provider.required, envVarInfo: provider.envVarInfo, - envVarStatus + envVarStatus, }; }); - const customProviderStatus = customProviders.map(provider => { + const customProviderStatus = customProviders.map((provider) => { return { id: provider.id, name: provider.name, enabled: true, isCustom: provider.isCustom, customRedirectPath: provider.customRedirectPath, - envVarStatus: [] + envVarStatus: [], }; }); const allProviders = [...customProviderStatus, ...authProviderStatus]; return ( -
+
); diff --git a/apps/mail/app/(auth)/zero/login/page.tsx b/apps/mail/app/(auth)/zero/login/page.tsx index f7303de10c..8c5e9c11bd 100644 --- a/apps/mail/app/(auth)/zero/login/page.tsx +++ b/apps/mail/app/(auth)/zero/login/page.tsx @@ -34,10 +34,12 @@ export default function LoginZero() { return (
-
+

Login with Zero

-

Enter your Zero email below to login to your account

+

+ Enter your Zero email below to login to your account +

@@ -100,18 +102,18 @@ export default function LoginZero() {
- -