External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(onboarding): improve empty auth state UI with lucide icon and better layout

Browse Source
This commit is contained in:
Théo LAGACHE
2026-06-19 14:03:49 +02:00
parent a10ef50bcf
commit 06000c4e2a
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/onboarding/steps/step-login.tsx
+15 -8
View File
@@ -6,7 +6,7 @@ import { useOnboarding } from "@onboardjs/react";
import { useMutation } from "@tanstack/react-query"; import { useMutation } from "@tanstack/react-query";
import { z } from "zod"; import { z } from "zod";
import { toast } from "sonner"; import { toast } from "sonner";
import { Globe, Mail, KeyRound } from "lucide-react"; import { Globe, Mail, KeyRound, ShieldAlert } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { PasswordInput } from "@/components/ui/password-input"; import { PasswordInput } from "@/components/ui/password-input";
@@ -83,16 +83,23 @@ export const StepLogin = () => {
// No auth methods configured // No auth methods configured
if (!hasAnyAuthMethod) { if (!hasAnyAuthMethod) {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col items-center justify-center text-center py-8 gap-4">
<div className="p-4 rounded-full bg-yellow-500/10 mb-2">
<ShieldAlert className="size-8 text-yellow-500" />
</div>
<div> <div>
<h1 className="text-2xl font-semibold">No authentication configured</h1> <h1 className="text-2xl font-semibold">Configuration needed</h1>
<p className="text-sm text-muted-foreground mt-1"> <p className="text-sm text-muted-foreground mt-2 max-w-[280px] mx-auto">
Enable at least one authentication method in your environment variables to continue. Please enable an authentication method in your environment variables to continue.
</p> </p>
</div> </div>
<div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4 text-sm text-yellow-400"> <div className="text-left mt-2 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4 text-sm text-yellow-600 dark:text-yellow-400 max-w-sm w-full">
Set <code className="font-mono">AUTH_EMAIL_PASSWORD_ENABLED=true</code>,{" "} <p className="font-medium mb-2">Set at least one of these:</p>
<code className="font-mono">AUTH_PASSKEY_ENABLED=true</code>, or configure an SSO provider. <ul className="space-y-1">
<li>• <code className="font-mono text-xs">AUTH_EMAIL_PASSWORD_ENABLED=true</code></li>
<li>• <code className="font-mono text-xs">AUTH_PASSKEY_ENABLED=true</code></li>
<li>• Or configure an SSO provider</li>
</ul>
</div> </div>
</div> </div>
); );