complete web device auth flow

src/app/auth/login/device/page.tsx

@@ -0,0 +1,17 @@
+import { verifySession } from "@app/lib/auth/verifySession";
+import { redirect } from "next/navigation";
+import DeviceLoginForm from "@/components/DeviceLoginForm";
+import { cache } from "react";
+
+export const dynamic = "force-dynamic";
+
+export default async function DeviceLoginPage() {
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
+    if (!user) {
+        redirect("/auth/login?redirect=/auth/login/device");
+    }
+
+    return <DeviceLoginForm userEmail={user?.email || ""} />;
+}

src/app/auth/login/device/success/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import BrandingLogo from "@app/components/BrandingLogo";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { CheckCircle2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+export default function DeviceAuthSuccessPage() {
+    const { env } = useEnvContext();
+    const { isUnlocked } = useLicenseStatusContext();
+    const t = useTranslations();
+
+    const logoWidth = isUnlocked()
+        ? env.branding.logo?.authPage?.width || 175
+        : 175;
+    const logoHeight = isUnlocked()
+        ? env.branding.logo?.authPage?.height || 58
+        : 58;
+
+    return (
+        <Card>
+            <CardHeader className="border-b">
+                <div className="flex flex-row items-center justify-center">
+                    <BrandingLogo height={logoHeight} width={logoWidth} />
+                </div>
+                <div className="text-center space-y-1 pt-3">
+                    <p className="text-muted-foreground">{t("deviceActivation")}</p>
+                </div>
+            </CardHeader>
+            <CardContent className="p-6">
+                <div className="flex flex-col items-center space-y-4">
+                    <CheckCircle2 className="h-16 w-16 text-green-600" />
+                    <div className="space-y-2">
+                        <h2 className="text-2xl font-bold text-center">
+                            {t("deviceConnected")}
+                        </h2>
+                        <p className="text-center text-sm text-muted-foreground">
+                            {t("deviceAuthorizedMessage")}
+                        </p>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}