feat(desktop): improve login page and add auth toasts

- Add tagline and animation to login page
- Add toast notification on login success
- Add toast notification on logout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing 2026-02-13 14:19:53 +08:00
parent 31c8b1babc
commit 2a6e10496a
2 changed files with 19 additions and 13 deletions

View file

@ -30,24 +30,27 @@ export default function LoginPage() {
}
return (
<div className="flex h-screen flex-col items-center justify-center bg-background p-8">
<div className="w-full max-w-xs space-y-6">
{/* Logo */}
<div className="flex items-center justify-center gap-2">
<MulticaIcon bordered noSpin size="md" />
<span className="text-base font-brand">Multica</span>
<div className="flex h-screen flex-col items-center justify-center bg-background p-8 animate-in fade-in duration-300">
<div className="w-full max-w-sm flex flex-col items-center text-center space-y-6">
{/* Brand */}
<div className="flex items-center gap-2.5">
<MulticaIcon animate className="size-5 text-muted-foreground/70" />
<h1 className="text-2xl tracking-wide font-brand">Multica</h1>
</div>
{/* Tagline */}
<p className="text-sm text-muted-foreground leading-relaxed">
An AI assistant that gets things done pulling data, running analysis,
and taking action. Talk to it like a team member.
</p>
{/* Sign In */}
<div className="space-y-4 text-center">
<p className="text-base text-muted-foreground">Sign in to continue</p>
<Button onClick={startLogin} className="w-full" size="lg">
Sign In
</Button>
</div>
<Button onClick={startLogin} size="lg" className="px-8">
Sign In to Continue
</Button>
{/* Helper */}
<p className="text-center text-xs text-muted-foreground/60">
<p className="text-xs text-muted-foreground/60">
Opens browser for authentication
</p>
</div>

View file

@ -3,6 +3,7 @@
*/
import { create } from 'zustand'
import { toast } from '@multica/ui/components/ui/sonner'
import type { AuthUser } from '@multica/types'
export type { AuthUser }
@ -87,6 +88,7 @@ export const useAuthStore = create<AuthState>((set) => ({
user: null,
isAuthenticated: false,
})
toast('Signed out')
console.log('[AuthStore] Auth cleared')
} catch (error) {
console.error('[AuthStore] Failed to clear auth:', error)
@ -113,6 +115,7 @@ export function setupAuthCallbackListener(): () => void {
user: data.user,
isAuthenticated: true,
})
toast.success(`Welcome back, ${data.user.name}`)
}
})