Merge pull request 'Improve password change process' (#8) from password-change-fixes into main

Reviewed-on: #8

README.md

@@ -1,6 +1,5 @@
 # web
 
-![Last Update](https://img.shields.io/badge/last_update-8_Apr_2025-purple)
 [![License: CC0-1.0](https://img.shields.io/badge/License-CC0_1.0-lightgrey.svg)](http://creativecommons.org/publicdomain/zero/1.0/)
 [![Build and Push Docker Image](https://github.com/ihatenodejs/librecloud-web/actions/workflows/docker.yml/badge.svg)](https://github.com/ihatenodejs/librecloud-web/actions/workflows/docker.yml)
 

app/account/dashboard/settings/page.tsx

@@ -1,19 +1,12 @@
 "use client"
 
-import { motion } from "motion/react"
 import { Switch } from "@/components/ui/switch"
 import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
-import { ChangePassword } from "@/components/cards/dashboard/Settings/ChangePassword"
+import MyAccount from "@/components/cards/dashboard/Settings/MyAccount"
 import { useState, useEffect } from "react"
 import { LayoutDashboard } from "lucide-react"
 
-const fadeIn = {
-  initial: { opacity: 0, y: 20 },
-  animate: { opacity: 1, y: 0 },
-  transition: { duration: 0.4 },
-}
-
 export default function Settings() {
   const [settings, setSettings] = useState({
     hideGenAI: false,
@@ -85,10 +78,10 @@ export default function Settings() {
   };
 
   return (
-    <motion.div {...fadeIn}>
-      <h1 className="text-3xl font-bold mb-6 text-foreground">Settings</h1>
+    <>
+      <h1 className="text-2xl xl:text-3xl font-bold mb-6 text-foreground">Settings</h1>
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <ChangePassword />
+        <MyAccount />
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center">
@@ -130,7 +123,7 @@ export default function Settings() {
           </CardContent>
         </Card>
       </div>
-    </motion.div>
+    </>
   )
 }
 

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/api/auth/password/route.ts

@@ -0,0 +1,62 @@
+import { auth } from "@/auth"
+import axios from "axios"
+import { NextResponse } from "next/server"
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth()
+    const body = await request.json()
+    const { password } = body
+
+    if (!session || !session.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    } else if (!password || typeof password !== "string") {
+      return NextResponse.json({ error: "Invalid password" }, { status: 400 })
+    }
+
+    // Get user ID from email
+    const user = await axios.request({
+      method: "get",
+      url: `${process.env.AUTHENTIK_API_URL}/core/users/?email=${session.user.email}`,
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.AUTHENTIK_API_KEY}`,
+      },
+      validateStatus: () => true,
+    })
+
+    const userId = user.data.results[0].pk
+
+    if (!userId) {
+      console.error(`[!] User ID not found in response: ${session.user.email}`)
+      return NextResponse.json({ error: "User not found" }, { status: 404 })
+    }
+
+    const updCfg = await axios.request({
+      method: "post",
+      maxBodyLength: Number.POSITIVE_INFINITY,
+      url: `${process.env.AUTHENTIK_API_URL}/core/users/${userId}/set_password/`,
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.AUTHENTIK_API_KEY}`,
+      },
+      data: { password },
+      validateStatus: () => true,
+    })
+
+    if (updCfg.data?.detail) {
+      console.error("[!] Password setting issue:", updCfg.data.detail)
+      return NextResponse.json({ error: "Failed to change password" }, { status: 400 })
+    }
+
+    if (updCfg.status === 204) {
+      return NextResponse.json({ success: true })
+    } else {
+      return NextResponse.json({ error: "Failed to change password" }, { status: 400 })
+    }
+
+  } catch (error) {
+    console.error("[!]", error)
+    return NextResponse.json({ error: "Server error" }, { status: 500 })
+  }
+}

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

@@ -0,0 +1,253 @@
+"use client"
+
+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, CheckCircleIcon, XCircleIcon } from "lucide-react"
+import Link from "next/link"
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogDescription, 
+  DialogFooter, 
+  DialogHeader, 
+  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 [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 submitPasswordChange = async () => {
+    setLoading(true)
+    try {
+      const response = await fetch("/api/auth/password", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ password: newPassword }),
+      })
+      const resData = await response.json()
+
+      if (response.ok && resData.success) {
+        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) {
+        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 {
+        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)
+      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 cursor-pointer">
+          <Key />
+          Change Password
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change Your Password</DialogTitle>
+          <DialogDescription>
+            <span className="font-bold mr-1">This only applies to your 
+            <Link
+              href="https://auth.librecloud.cc"
+              target="_blank"
+              className="underline hover:text-primary transition-all ml-0.5"
+            >
+              Authentik
+            </Link> account.</span>
+            Make sure it&apos;s secure, and consider using
+            <Link
+              href="https://pass.librecloud.cc"
+              target="_blank"
+              className="ml-1 underline hover:text-primary transition-all"
+            >
+              LibreCloud Pass
+            </Link> to keep it safe!
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleFormSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="new-password">New Password</Label>
+            <Input
+              id="new-password"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              className="mt-1.5"
+            />
+            <p className="text-xs text-muted-foreground">
+              Password must be at least 8 characters long.
+            </p>
+          </div>
+          <DialogFooter>
+            <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>
+    </Dialog>
+  )
+}
+
+export default ChangeAuthentikPassword

components/cards/dashboard/Settings/ChangeEmailPassword.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+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 { CheckCircleIcon, Key, Loader2, XCircleIcon } from "lucide-react"
+import Link from "next/link"
+import { 
+  Dialog, 
+  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 [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 submitPasswordChange = async () => {
+    setLoading(true)
+    try {
+      const response = await fetch("/api/mail/password", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ password: newPassword }),
+      })
+      const resData = await response.json()
+
+      if (response.ok && resData.success) {
+        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) {
+        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 {
+        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)
+      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 cursor-pointer">
+          <Key />
+          Change Password
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change Your Password</DialogTitle>
+          <DialogDescription>
+            <span className="font-bold mr-1">This only applies to your email account.</span>
+            Make sure it&apos;s secure, and consider using
+            <Link
+              href="https://pass.librecloud.cc"
+              target="_blank"
+              className="ml-1 underline hover:text-primary transition-all"
+            >
+              LibreCloud Pass
+            </Link> to keep it safe!
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleFormSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="new-password">New Password</Label>
+            <Input
+              id="new-password"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              className="mt-1.5"
+            />
+            <p className="text-xs text-muted-foreground">
+              Password must be at least 8 characters long.
+            </p>
+          </div>
+          <DialogFooter>
+            <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>
+    </Dialog>
+  )
+}
+
+export default ChangeEmailPassword

components/cards/dashboard/Settings/ChangePassword.tsx

@@ -1,127 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Label } from "@/components/ui/label"
-import { Key, Loader2, User } from "lucide-react"
-import Link from "next/link"
-import { 
-  Dialog, 
-  DialogContent, 
-  DialogDescription, 
-  DialogFooter, 
-  DialogHeader, 
-  DialogTitle, 
-  DialogTrigger 
-} from "@/components/ui/dialog"
-
-export function ChangePassword() {
-  const [newPassword, setNewPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
-  const [open, setOpen] = useState(false);
-
-  const handlePasswordChange = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setLoading(true);
-    setMessage(null);
-    try {
-      const response = await fetch("/api/mail/password", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ password: newPassword }),
-      });
-      const resData = await response.json();
-
-      if (response.ok && resData.success) {
-        setMessage("Password Updated");
-        setLoading(false);
-        // Close dialog after change
-        setTimeout(() => {
-          setOpen(false);
-          setNewPassword("");
-        }, 1500);
-      } else if (resData.error) {
-        setMessage(resData.error);
-        setLoading(false);
-      } else {
-        setMessage("[1] Failed to Update");
-        setLoading(false);
-      }
-    } catch (error) {
-      console.log(error)
-      setMessage("[2] Failed to Update");
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center text-2xl">
-          <User className="mr-1" />
-          My Account
-        </CardTitle>
-        <CardDescription>LibreCloud makes it easy to manage your account</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <h2 className="text-lg font-bold">Actions</h2>
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger asChild>
-            <Button className="mt-2">
-              <Key />
-              Change Password
-            </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Change Your Password</DialogTitle>
-              <DialogDescription>
-                <span className="font-bold mr-1">This only applies to your Authentik account.</span>
-                Make sure it&apos;s secure, and consider using
-                <Link
-                  href="https://pass.librecloud.cc"
-                  target="_blank"
-                  className="ml-1 underline hover:text-primary transition-all"
-                >
-                  LibreCloud Pass
-                </Link> to keep it safe.
-              </DialogDescription>
-            </DialogHeader>
-            <form onSubmit={handlePasswordChange} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="new-password">New Password</Label>
-                <Input
-                  id="new-password"
-                  type="password"
-                  value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
-                  className="mt-1.5"
-                />
-                <p className="text-xs text-muted-foreground">
-                  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 mr-2" /> Changing...</> : <><Key className="mr-2" /> Change Password</>}
-                </Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default ChangePassword;

components/cards/dashboard/Settings/MyAccount.tsx

@@ -0,0 +1,24 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
+import ChangeAuthentikPassword from "@/components/cards/dashboard/Settings/ChangeAuthentikPassword"
+import ChangeEmailPassword from "@/components/cards/dashboard/Settings/ChangeEmailPassword"
+import { User } from "lucide-react"
+
+export default function MyAccount() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center text-2xl">
+          <User className="mr-1" />
+          My Account
+        </CardTitle>
+        <CardDescription>LibreCloud makes it easy to manage your account</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <h2 className="text-lg font-bold">Email</h2>
+        <ChangeEmailPassword />
+        <h2 className="text-lg font-bold mt-4">Authentik</h2>
+        <ChangeAuthentikPassword />
+      </CardContent>
+    </Card>
+  )
+}

components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 transition-opacity duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg transition-all duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

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",