@greatapps/greatauth-ui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatauth-ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/login-form.tsx

@@ -2,15 +2,14 @@
 
 import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Loader2 } from "lucide-react";
+import { Loader2, Mail, Lock, AlertCircle } from "lucide-react";
 import type { LoginFormConfig } from "../types";
 import { authClient } from "../auth";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
-import { Alert, AlertDescription } from "./ui/alert";
 import { Badge } from "./ui/badge";
+import { cn } from "../lib/utils";
 
 interface LoginFormProps {
   config: LoginFormConfig;
@@ -46,7 +45,10 @@ export function LoginForm({ config }: LoginFormProps) {
       }
 
       if (config.onPostLoginSuccess) {
-        const gauthToken = (data as any)?.user?.gauthToken;
+        const gauthToken = (data as Record<string, unknown>)?.user
+          ? ((data as Record<string, unknown>).user as Record<string, unknown>)
+              ?.gauthToken as string | undefined
+          : undefined;
         const redirectUrl = await config.onPostLoginSuccess(data?.user, gauthToken);
         if (redirectUrl) {
           router.push(redirectUrl);
@@ -62,60 +64,97 @@ export function LoginForm({ config }: LoginFormProps) {
   };
 
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
-      <div className="w-full max-w-sm">
-        <Card>
-          <CardHeader className="text-center">
-            <div className="flex items-center justify-center gap-2 mb-2">
-              {config.icon}
-              <CardTitle className="text-xl">
-                {config.appName}
-              </CardTitle>
-              {config.appBadge && (
-                <Badge variant={config.appBadge.variant}>
-                  {config.appBadge.text}
-                </Badge>
-              )}
+    <div className="flex min-h-svh items-center justify-center bg-muted/30 p-4">
+      <div className="w-full max-w-[400px]">
+        {/* Header */}
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm">
+            {config.icon}
+          </div>
+          <div className="flex items-center justify-center gap-2">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              {config.appName}
+            </h1>
+            {config.appBadge && (
+              <Badge variant={config.appBadge.variant} className="text-xs">
+                {config.appBadge.text}
+              </Badge>
+            )}
+          </div>
+          <p className="mt-1.5 text-sm text-muted-foreground">
+            {config.description}
+          </p>
+        </div>
+
+        {/* Form Card */}
+        <div className="rounded-xl border bg-card p-6 shadow-sm">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5 text-sm text-destructive">
+                <AlertCircle className="h-4 w-4 shrink-0" />
+                {error}
+              </div>
+            )}
+
+            <div className="space-y-1.5">
+              <Label htmlFor="login-email" className="text-sm font-medium">
+                Email
+              </Label>
+              <div className="relative">
+                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="login-email"
+                  type="email"
+                  placeholder="email@exemplo.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="pl-9"
+                  autoComplete="email"
+                  required
+                />
+              </div>
             </div>
-            <CardDescription>{config.description}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit}>
-              <div className="grid gap-4">
-                {error && (
-                  <Alert variant="destructive">
-                    <AlertDescription>{error}</AlertDescription>
-                  </Alert>
-                )}
-                <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="email@exemplo.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="password">Senha</Label>
-                  <Input
-                    id="password"
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                  />
-                </div>
-                <Button type="submit" className="w-full" disabled={loading}>
-                  {loading && <Loader2 className="animate-spin" />}
-                  Entrar
-                </Button>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="login-password" className="text-sm font-medium">
+                Senha
+              </Label>
+              <div className="relative">
+                <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  id="login-password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="pl-9"
+                  autoComplete="current-password"
+                  required
+                />
               </div>
-            </form>
-          </CardContent>
-        </Card>
+            </div>
+
+            <Button
+              type="submit"
+              className={cn("w-full", loading && "cursor-wait")}
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  A entrar...
+                </>
+              ) : (
+                "Entrar"
+              )}
+            </Button>
+          </form>
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-muted-foreground">
+          {config.footerText || "Acesso restrito a utilizadores autorizados"}
+        </p>
       </div>
     </div>
   );

package/src/types/index.ts

@@ -38,5 +38,6 @@ export interface LoginFormConfig {
   appBadge?: { text: string; variant: "destructive" | "outline" };
   description: string;
   callbackUrlDefault: string;
+  footerText?: string;
   onPostLoginSuccess?: (user: unknown, token?: string) => Promise<string | null>;
 }

package/src/ui.ts

@@ -1,3 +1,5 @@
+"use client"
+
 /**
  * @greatapps/greatauth-ui/ui
  *