feat: add authentik password changing, split into different sections, create initial api
This commit is contained in:
parent
e41e2a9a80
commit
664bf42446
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
62
app/api/auth/password/route.ts
Normal file
62
app/api/auth/password/route.ts
Normal file
@ -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 })
|
||||
}
|
||||
}
|
||||
122
components/cards/dashboard/Settings/ChangeAuthentikPassword.tsx
Normal file
122
components/cards/dashboard/Settings/ChangeAuthentikPassword.tsx
Normal file
@ -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'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
|
||||
114
components/cards/dashboard/Settings/ChangeEmailPassword.tsx
Normal file
114
components/cards/dashboard/Settings/ChangeEmailPassword.tsx
Normal file
@ -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'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
|
||||
@ -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'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;
|
||||
24
components/cards/dashboard/Settings/MyAccount.tsx
Normal file
24
components/cards/dashboard/Settings/MyAccount.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user