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

2025-04-15 16:55:35 -04:00 · 2025-04-15 16:55:35 -04:00 · 4bd35c52f4
commit 4bd35c52f4
parent 0691da2724
6 changed files with 372 additions and 58 deletions
--- a/app/account/layout.tsx
+++ b/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 />
+    </>
  )
 }

--- a/app/globals.css
+++ b/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;
--- a/components/cards/dashboard/Settings/ChangeAuthentikPassword.tsx
+++ b/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>) => {
-    e.preventDefault()
+  const submitPasswordChange = async () => {
    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")
-        setLoading(false)
-        // Close dialog after change
+        toast("Password updated successfully!", {
+          icon: <CheckCircleIcon className="w-4 h-4" />,
+          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)
-        setLoading(false)
+        toast("An error occurred", {
+          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")
-        setLoading(false)
+        toast("Failed to Update", {
+          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}>
-              {loading ? <><Loader2 className="animate-spin" /> Changing...</> : <><Key /> Change Password</>}
-            </Button>
+            <motion.div
+              className="relative inline-flex w-full"
+              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>
--- a/components/cards/dashboard/Settings/ChangeEmailPassword.tsx
+++ b/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, 
-  DialogDescription, 
-  DialogFooter, 
-  DialogHeader, 
-  DialogTitle, 
-  DialogTrigger 
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  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>) => {
-    e.preventDefault()
+  const submitPasswordChange = async () => {
    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")
-        setLoading(false)
-        // Close dialog after change
+        toast("Password updated successfully!", {
+          icon: <CheckCircleIcon className="w-4 h-4" />,
+          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)
-        setLoading(false)
+        toast("An error occurred", {
+          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")
-        setLoading(false)
+        toast("Failed to Update", {
+          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}>
-              {loading ? <><Loader2 className="animate-spin" /> Changing...</> : <><Key /> Change Password</>}
-            </Button>
+            <motion.div
+              className="relative inline-flex w-full"
+              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>
--- a/components/ui/sonner.tsx
+++ b/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 }
--- a/package.json
+++ b/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",