feat: add toasts, styling, fix design bugs and improve, add hold-to-submit button to dialogs

app/account/layout.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React from "react"
+import { Toaster } from "@/components/ui/sonner"
 
 export default function AccountLayout({
   children,
@@ -6,7 +7,12 @@ export default function AccountLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="min-h-screen bg-background">{children}</div>
+    <>
+      <div className="min-h-screen bg-background">
+        {children}
+      </div>
+      <Toaster />
+    </>
   )
 }
 

app/globals.css

@@ -20,6 +20,10 @@
   --color-accent-foreground: oklch(var(--accent-foreground));
   --color-destructive: oklch(var(--destructive));
   --color-destructive-foreground: oklch(var(--destructive-foreground));
+  --color-error: oklch(var(--error));
+  --color-error-foreground: oklch(var(--error-foreground));
+  --color-success: oklch(var(--success));
+  --color-success-foreground: oklch(var(--success-foreground));
   --color-border: oklch(var(--border));
   --color-input: oklch(var(--input));
   --color-ring: oklch(var(--ring));
@@ -105,6 +109,10 @@
     --accent-foreground: 0.208 0.042 265.755;
     --destructive: 0.577 0.245 27.325;
     --destructive-foreground: 0.984 0.003 247.858;
+    --error: 0.577 0.245 27.325;
+    --error-foreground: 0.984 0.003 247.858;
+    --success: 0.6 0.118 184.704;
+    --success-foreground: 0.984 0.003 247.858;
     --border: 0.929 0.013 255.508;
     --input: 0.929 0.013 255.508;
     --ring: 0.704 0.04 256.788;
@@ -145,6 +153,10 @@
     --accent-foreground: 0.984 0.003 247.858;
     --destructive: 0.704 0.191 22.216;
     --destructive-foreground: 0.984 0.003 247.858;
+    --error: 0.704 0.191 22.216;
+    --error-foreground: 0.984 0.003 247.858;
+    --success: 0.696 0.17 162.48;
+    --success-foreground: 0.984 0.003 247.858;
     --border: 1 0 0 / 10%;
     --input: 1 0 0 / 15%;
     --ring: 0.551 0.027 264.364;

components/cards/dashboard/Settings/ChangeAuthentikPassword.tsx

@@ -1,10 +1,10 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { useState, useRef, useEffect } from "react"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
-import { Key, Loader2 } from "lucide-react"
+import { Key, Loader2, CheckCircleIcon, XCircleIcon } from "lucide-react"
 import Link from "next/link"
 import { 
   Dialog, 
@@ -15,17 +15,22 @@ import {
   DialogTitle, 
   DialogTrigger 
 } from "@/components/ui/dialog"
+import { toast } from "sonner"
+import { motion, useAnimationControls } from "framer-motion"
 
 export function ChangeAuthentikPassword() {
   const [newPassword, setNewPassword] = useState("")
   const [loading, setLoading] = useState(false)
-  const [message, setMessage] = useState<string | null>(null)
   const [open, setOpen] = useState(false)
+  const holdTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+  const controls = useAnimationControls()
+  const [isHolding, setIsHolding] = useState(false)
+  const holdDuration = 10
+  const [remainingTime, setRemainingTime] = useState(holdDuration)
 
-  const handlePasswordChange = async (e: React.FormEvent<HTMLFormElement>) => {
+  const submitPasswordChange = async () => {
-    e.preventDefault()
     setLoading(true)
-    setMessage(null)
     try {
       const response = await fetch("/api/auth/password", {
         method: "POST",
@@ -37,32 +42,143 @@ export function ChangeAuthentikPassword() {
       const resData = await response.json()
 
       if (response.ok && resData.success) {
-        setMessage("Password Updated")
+        toast("Password updated successfully!", {
-        setLoading(false)
+          icon: <CheckCircleIcon className="w-4 h-4" />,
-        // Close dialog after change
+          style: {
+            backgroundColor: "oklch(var(--success))",
+            color: "oklch(var(--success-foreground))",
+          },
+        })
         setTimeout(() => {
           setOpen(false)
           setNewPassword("")
+          controls.set({ "--progress": "0%" })
         }, 1500)
-        // TODO: Show a toast that password was changed
       } else if (resData.error) {
-        setMessage(resData.error)
+        toast("An error occurred", {
-        setLoading(false)
+          description: resData.error,
+          icon: <XCircleIcon className="w-4 h-4" />,
+          style: {
+            backgroundColor: "oklch(var(--error))",
+            color: "oklch(var(--error-foreground))",
+          },
+        })
+        controls.set({ "--progress": "0%" })
       } else {
-        setMessage("[1] Failed to Update")
+        toast("Failed to Update", {
-        setLoading(false)
+          description: "An unknown error occurred [1]",
+          icon: <XCircleIcon className="w-4 h-4" />,
+          style: {
+            backgroundColor: "oklch(var(--error))",
+            color: "oklch(var(--error-foreground))",
+          },
+        })
+        controls.set({ "--progress": "0%" })
       }
     } catch (error) {
       console.log(error)
-      setMessage("[2] Failed to Update")
+      toast("Failed to Update", {
+        description: "An unknown error occurred [2]",
+        icon: <XCircleIcon className="w-4 h-4" />,
+        style: {
+          backgroundColor: "oklch(var(--error))",
+          color: "oklch(var(--error-foreground))",
+        },
+      })
+      controls.set({ "--progress": "0%" })
+    } finally {
       setLoading(false)
+      setIsHolding(false)
+      if (holdTimeoutRef.current) {
+        clearTimeout(holdTimeoutRef.current)
+        holdTimeoutRef.current = null
+      }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
     }
-  };
+  }
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+  }
+
+  const holdDurationMs = holdDuration * 1000
+
+  const handleHoldStart = () => {
+    if (loading || newPassword.length < 8) return
+
+    setIsHolding(true)
+    controls.set({ "--progress": "0%" })
+    controls.start(
+      { "--progress": "100%" },
+      { duration: holdDuration, ease: "linear" }
+    )
+
+    holdTimeoutRef.current = setTimeout(() => {
+      console.log("[i] Hold complete, submitting...")
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+      submitPasswordChange()
+      holdTimeoutRef.current = null
+    }, holdDurationMs)
+
+    setRemainingTime(holdDuration)
+    if (intervalRef.current) clearInterval(intervalRef.current)
+    intervalRef.current = setInterval(() => {
+      setRemainingTime((prevTime) => {
+        if (prevTime <= 1) {
+          if (intervalRef.current) clearInterval(intervalRef.current)
+          return 0
+        }
+        return prevTime - 1
+      })
+    }, 1000)
+  }
+
+  const handleHoldEnd = () => {
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current)
+      holdTimeoutRef.current = null
+    }
+    if (isHolding) {
+      console.log("[i] Hold interrupted")
+      controls.stop()
+      controls.set({ "--progress": "0%" })
+      setIsHolding(false)
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (holdTimeoutRef.current) {
+        clearTimeout(holdTimeoutRef.current)
+      }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!open) {
+      handleHoldEnd()
+      setLoading(false)
+      setNewPassword("")
+    }
+  }, [open])
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button className="mt-2">
+        <Button className="mt-2 cursor-pointer">
           <Key />
           Change Password
         </Button>
@@ -89,7 +205,7 @@ export function ChangeAuthentikPassword() {
             </Link> to keep it safe!
           </DialogDescription>
         </DialogHeader>
-        <form onSubmit={handlePasswordChange} className="space-y-4">
+        <form onSubmit={handleFormSubmit} className="space-y-4">
           <div className="space-y-2">
             <Label htmlFor="new-password">New Password</Label>
             <Input
@@ -103,15 +219,30 @@ export function ChangeAuthentikPassword() {
               Password must be at least 8 characters long.
             </p>
           </div>
-          {message && (
-            <p className={`text-sm text-center ${message.includes("Updated") ? "text-green-500" : "text-red-500"}`}>
-              {message}
-            </p>
-          )}
           <DialogFooter>
-            <Button type="submit" disabled={loading || newPassword.length < 8}>
+            <motion.div
-              {loading ? <><Loader2 className="animate-spin" /> Changing...</> : <><Key /> Change Password</>}
+              className="relative inline-flex w-full"
-            </Button>
+              style={{ "--progress": "0%", "--progress-color": "hsl(var(--primary) / 0.5)" } as React.CSSProperties}
+            >
+              <Button
+                disabled={loading || newPassword.length < 8}
+                onMouseDown={handleHoldStart}
+                onMouseUp={handleHoldEnd}
+                onMouseLeave={handleHoldEnd}
+                onTouchStart={handleHoldStart}
+                onTouchEnd={handleHoldEnd}
+                className="relative overflow-hidden w-full z-10 cursor-pointer"
+              >
+                <motion.div
+                  className="absolute inset-0 bg-[linear-gradient(to_right,var(--progress-color)_var(--progress),transparent_var(--progress))] -z-10"
+                  animate={controls}
+                  style={{ pointerEvents: 'none' }}
+                />
+                <span className="relative z-20 flex items-center justify-center gap-1">
+                  {loading ? <><Loader2 className="animate-spin" /> Changing...</> : isHolding ? <><Key /> Please wait {remainingTime}s...</> : <><Key /> Hold to Change</>}
+                </span>
+              </Button>
+            </motion.div>
           </DialogFooter>
         </form>
       </DialogContent>

components/cards/dashboard/Settings/ChangeEmailPassword.tsx

@@ -1,31 +1,36 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { useState, useRef, useEffect } from "react"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
-import { Key, Loader2 } from "lucide-react"
+import { CheckCircleIcon, Key, Loader2, XCircleIcon } from "lucide-react"
 import Link from "next/link"
 import { 
   Dialog, 
-  DialogContent, 
+  DialogContent,
-  DialogDescription, 
+  DialogDescription,
-  DialogFooter, 
+  DialogFooter,
-  DialogHeader, 
+  DialogHeader,
-  DialogTitle, 
+  DialogTitle,
-  DialogTrigger 
+  DialogTrigger
 } from "@/components/ui/dialog"
+import { toast } from "sonner"
+import { motion, useAnimationControls } from "framer-motion"
 
 export function ChangeEmailPassword() {
   const [newPassword, setNewPassword] = useState("")
   const [loading, setLoading] = useState(false)
-  const [message, setMessage] = useState<string | null>(null)
   const [open, setOpen] = useState(false)
+  const holdTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+  const controls = useAnimationControls()
+  const [isHolding, setIsHolding] = useState(false)
+  const holdDuration = 10
+  const [remainingTime, setRemainingTime] = useState(holdDuration)
 
-  const handlePasswordChange = async (e: React.FormEvent<HTMLFormElement>) => {
+  const submitPasswordChange = async () => {
-    e.preventDefault()
     setLoading(true)
-    setMessage(null)
     try {
       const response = await fetch("/api/mail/password", {
         method: "POST",
@@ -37,31 +42,143 @@ export function ChangeEmailPassword() {
       const resData = await response.json()
 
       if (response.ok && resData.success) {
-        setMessage("Password Updated")
+        toast("Password updated successfully!", {
-        setLoading(false)
+          icon: <CheckCircleIcon className="w-4 h-4" />,
-        // Close dialog after change
+          style: {
+            backgroundColor: "oklch(var(--success))",
+            color: "oklch(var(--success-foreground))",
+          },
+        })
         setTimeout(() => {
           setOpen(false)
           setNewPassword("")
+          controls.set({ "--progress": "0%" })
         }, 1500)
       } else if (resData.error) {
-        setMessage(resData.error)
+        toast("An error occurred", {
-        setLoading(false)
+          description: resData.error,
+          icon: <XCircleIcon className="w-4 h-4" />,
+          style: {
+            backgroundColor: "oklch(var(--error))",
+            color: "oklch(var(--error-foreground))",
+          },
+        })
+        controls.set({ "--progress": "0%" })
       } else {
-        setMessage("[1] Failed to Update")
+        toast("Failed to Update", {
-        setLoading(false)
+          description: "An unknown error occurred [1]",
+          icon: <XCircleIcon className="w-4 h-4" />,
+          style: {
+            backgroundColor: "oklch(var(--error))",
+            color: "oklch(var(--error-foreground))",
+          },
+        })
+        controls.set({ "--progress": "0%" })
       }
     } catch (error) {
       console.log(error)
-      setMessage("[2] Failed to Update")
+      toast("Failed to Update", {
+        description: "An unknown error occurred [2]",
+        icon: <XCircleIcon className="w-4 h-4" />,
+        style: {
+          backgroundColor: "oklch(var(--error))",
+          color: "oklch(var(--error-foreground))",
+        },
+      })
+      controls.set({ "--progress": "0%" })
+    } finally {
       setLoading(false)
+      setIsHolding(false)
+      if (holdTimeoutRef.current) {
+        clearTimeout(holdTimeoutRef.current)
+        holdTimeoutRef.current = null
+      }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
     }
   }
 
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+  }
+
+  const holdDurationMs = holdDuration * 1000
+
+  const handleHoldStart = () => {
+    if (loading || newPassword.length < 8) return
+
+    setIsHolding(true)
+    controls.set({ "--progress": "0%" })
+    controls.start(
+      { "--progress": "100%" },
+      { duration: holdDuration, ease: "linear" }
+    )
+
+    holdTimeoutRef.current = setTimeout(() => {
+      console.log("[i] Hold complete, submitting...")
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+      submitPasswordChange()
+      holdTimeoutRef.current = null
+    }, holdDurationMs)
+
+    setRemainingTime(holdDuration)
+    if (intervalRef.current) clearInterval(intervalRef.current)
+    intervalRef.current = setInterval(() => {
+      setRemainingTime((prevTime) => {
+        if (prevTime <= 1) {
+          if (intervalRef.current) clearInterval(intervalRef.current)
+          return 0
+        }
+        return prevTime - 1
+      })
+    }, 1000)
+  }
+
+  const handleHoldEnd = () => {
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current)
+      holdTimeoutRef.current = null
+    }
+    if (isHolding) {
+      console.log("[i] Hold interrupted")
+      controls.stop()
+      controls.set({ "--progress": "0%" })
+      setIsHolding(false)
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (holdTimeoutRef.current) {
+        clearTimeout(holdTimeoutRef.current)
+      }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!open) {
+      handleHoldEnd()
+      setLoading(false)
+      setNewPassword("")
+    }
+  }, [open])
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button className="mt-2">
+        <Button className="mt-2 cursor-pointer">
           <Key />
           Change Password
         </Button>
@@ -81,7 +198,7 @@ export function ChangeEmailPassword() {
             </Link> to keep it safe!
           </DialogDescription>
         </DialogHeader>
-        <form onSubmit={handlePasswordChange} className="space-y-4">
+        <form onSubmit={handleFormSubmit} className="space-y-4">
           <div className="space-y-2">
             <Label htmlFor="new-password">New Password</Label>
             <Input
@@ -95,15 +212,30 @@ export function ChangeEmailPassword() {
               Password must be at least 8 characters long.
             </p>
           </div>
-          {message && (
-            <p className={`text-sm text-center ${message.includes("Updated") ? "text-green-500" : "text-red-500"}`}>
-              {message}
-            </p>
-          )}
           <DialogFooter>
-            <Button type="submit" disabled={loading || newPassword.length < 8}>
+            <motion.div
-              {loading ? <><Loader2 className="animate-spin" /> Changing...</> : <><Key /> Change Password</>}
+              className="relative inline-flex w-full"
-            </Button>
+              style={{ "--progress": "0%", "--progress-color": "hsl(var(--primary) / 0.5)" } as React.CSSProperties}
+            >
+              <Button
+                disabled={loading || newPassword.length < 8}
+                onMouseDown={handleHoldStart}
+                onMouseUp={handleHoldEnd}
+                onMouseLeave={handleHoldEnd}
+                onTouchStart={handleHoldStart}
+                onTouchEnd={handleHoldEnd}
+                className="relative overflow-hidden w-full z-10 cursor-pointer"
+              >
+                <motion.div
+                  className="absolute inset-0 bg-[linear-gradient(to_right,var(--progress-color)_var(--progress),transparent_var(--progress))] -z-10"
+                  animate={controls}
+                  style={{ pointerEvents: 'none' }}
+                />
+                <span className="relative z-20 flex items-center justify-center gap-1">
+                  {loading ? <><Loader2 className="animate-spin" /> Changing...</> : isHolding ? <><Key /> Please wait {remainingTime}s...</> : <><Key /> Hold to Change</>}
+                </span>
+              </Button>
+            </motion.div>
           </DialogFooter>
         </form>
       </DialogContent>

components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+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"
+      style={
+        {
+          "--normal-bg": "oklch(var(--popover))",
+          "--normal-text": "oklch(var(--popover-foreground))",
+          "--normal-border": "oklch(var(--border))",
+          "--success-bg": "oklch(var(--popover))",
+          "--success-text": "oklch(var(--popover-foreground))",
+          "--success-border": "oklch(var(--border))",
+          "--error-bg": "oklch(var(--popover))",
+          "--error-text": "oklch(var(--popover-foreground))",
+          "--error-border": "oklch(var(--border))",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package.json

@@ -13,6 +13,7 @@
     "@prisma/client": "^6.6.0",
     "@radix-ui/react-avatar": "^1.1.4",
     "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-popover": "^1.1.7",
@@ -45,6 +46,7 @@
     "react-hook-form": "^7.55.0",
     "react-icons": "^5.5.0",
     "react-typed": "^2.0.12",
+    "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.5",
     "validator": "^13.15.0",