feat: add Sonner Toaster and client-side login flow with MFA toast

- add Toaster component (components/ui/sonner.tsx) and render it in RootLayout
- convert LoginForm to client-side submit using fetch; add isSubmitting state, timeout-backed MFA loading toast, dismiss logic, redirect handling, and improved error toasts
- add sonner and next-themes to dependencies

Author: essinghigh

radius-proxy/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -28,6 +29,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <Toaster />
       </body>
     </html>
   );

radius-proxy/components/login-form.tsx

@@ -1,9 +1,13 @@
+"use client"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
+import { toast } from "sonner"
 import Image from "next/image"
+import { useState, useRef } from "react"
 
 interface LoginFormProps extends React.ComponentProps<'div'> {
   clientId: string
@@ -16,12 +20,85 @@ interface LoginFormProps extends React.ComponentProps<'div'> {
 export function LoginForm({ className, clientId, redirectUri, state, error, errorDescription, ...props }: LoginFormProps) {
   const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
   const formAction = `${basePath}/api/oauth/authorize`;
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const toastId = useRef<string | number | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    if (isSubmitting) return;
+    
+    setIsSubmitting(true);
+      timeoutRef.current = setTimeout(() => {
+          toastId.current = toast.loading("Check your phone for an MFA prompt!", {
+            duration: Infinity,
+          });
+      }, 2000);
+
+    try {
+      const formData = new FormData(e.currentTarget);
+      
+      const response = await fetch(formAction, {
+        method: 'POST',
+        body: formData
+      });
+      
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      
+      // Dismiss the MFA toast if it was shown
+      if (toastId.current) {
+        toast.dismiss(toastId.current);
+        toastId.current = null;
+      }
+      
+      if (response.redirected) {
+        // Follow the redirect
+        window.location.href = response.url;
+      } else if (!response.ok) {
+        // Handle error response
+        const responseText = await response.text();
+        const errorMatch = responseText.match(/error=([^&]+)/);
+        const descMatch = responseText.match(/error_description=([^&]+)/);
+        
+        if (errorMatch) {
+          toast.error("Authentication failed", {
+            description: descMatch ? decodeURIComponent(descMatch[1]) : "Please check your credentials"
+          });
+        } else {
+          toast.error("Authentication failed", {
+            description: "Please check your credentials and try again"
+          });
+        }
+      }
+    } catch (err) {
+      // Clear timeout on error
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      
+      if (toastId.current) {
+        toast.dismiss(toastId.current);
+        toastId.current = null;
+      }
+      
+      toast.error("Connection failed", {
+        description: "Unable to connect to the authentication server"
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
       <Card className="overflow-hidden p-0">
         <CardContent className="grid p-0 md:grid-cols-2">
-          <form className="p-6 md:p-8" method="post" action={formAction}>
+          <form className="p-6 md:p-8" onSubmit={handleSubmit}>
             <FieldGroup>
               <div className="flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-bold">Welcome back</h1>
@@ -53,7 +130,9 @@ export function LoginForm({ className, clientId, redirectUri, state, error, erro
               {redirectUri && (<input type="hidden" name="redirect_uri" value={redirectUri} />)}
               {state && (<input type="hidden" name="state" value={state} />)}
               <Field>
-                <Button type="submit">Login</Button>
+                <Button type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? "Authenticating..." : "Login"}
+                </Button>
               </Field>
             </FieldGroup>
           </form>

radius-proxy/components/ui/sonner.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+          "--width": "300px",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

radius-proxy/package.json

@@ -28,8 +28,10 @@
     "jsonwebtoken": "^9.0.0",
     "lucide-react": "^0.544.0",
     "next": "15.5.4",
+    "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {