feat: add authentik password changing, split into different sections, create initial api

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/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 })
+  }
+}

components/cards/dashboard/Settings/ChangeAuthentikPassword.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import React, { useState } 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 Link from "next/link"
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogDescription, 
+  DialogFooter, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogTrigger 
+} from "@/components/ui/dialog"
+
+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 handlePasswordChange = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setMessage(null)
+    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) {
+        setMessage("Password Updated")
+        setLoading(false)
+        // Close dialog after change
+        setTimeout(() => {
+          setOpen(false)
+          setNewPassword("")
+        }, 1500)
+        // TODO: Show a toast that password was changed
+      } 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 (
+    <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 
+            <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={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" /> Changing...</> : <><Key /> Change Password</>}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ChangeAuthentikPassword

components/cards/dashboard/Settings/ChangeEmailPassword.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import React, { useState } 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 Link from "next/link"
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogDescription, 
+  DialogFooter, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogTrigger 
+} from "@/components/ui/dialog"
+
+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 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 (
+    <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 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={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" /> Changing...</> : <><Key /> Change Password</>}
+            </Button>
+          </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>
+  )
+}