✨ Add new UserSettings profile and card components

Author: AchuAshwath

frontend/src/components/UserSettings/AccountSecurityCard.tsx

@@ -0,0 +1,93 @@
+import { Key } from "lucide-react"
+import { useState } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import useAuth from "@/hooks/useAuth"
+import ChangePassword from "./ChangePassword"
+
+export function AccountSecurityCard() {
+  const { user } = useAuth()
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Account</CardTitle>
+        <CardDescription>
+          Manage your account status and password.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-1">
+            <Label className="text-base font-medium">Account status</Label>
+            <p className="text-muted-foreground text-sm">
+              Your account is currently active.
+            </p>
+          </div>
+          <Badge
+            variant="outline"
+            className={
+              user?.is_active
+                ? "shrink-0 border-green-200 bg-green-50 text-green-700 dark:border-green-900 dark:bg-green-950 dark:text-green-400"
+                : "shrink-0 border-muted text-muted-foreground"
+            }
+          >
+            {user?.is_active ? "Active" : "Inactive"}
+          </Badge>
+        </div>
+
+        <Separator />
+
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-1">
+            <Label className="text-base font-medium">Password</Label>
+            <p className="text-muted-foreground text-sm">
+              Update your password.
+            </p>
+          </div>
+          <Dialog
+            open={changePasswordOpen}
+            onOpenChange={setChangePasswordOpen}
+          >
+            <DialogTrigger asChild>
+              <Button type="button" variant="outline" className="shrink-0">
+                <Key className="mr-2 h-4 w-4" aria-hidden />
+                Change password
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Change password</DialogTitle>
+                <DialogDescription>
+                  Enter your current password and choose a new one.
+                </DialogDescription>
+              </DialogHeader>
+              <ChangePassword
+                onSuccess={() => setChangePasswordOpen(false)}
+                embedded
+              />
+            </DialogContent>
+          </Dialog>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/components/UserSettings/DangerZoneCard.tsx

@@ -0,0 +1,54 @@
+import { Trash2 } from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { DeleteAccountDialog } from "./DeleteAccountDialog"
+
+export function DangerZoneCard() {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+
+  return (
+    <>
+      <Card className="border-destructive/50">
+        <CardHeader>
+          <CardTitle className="text-destructive">Danger zone</CardTitle>
+          <CardDescription>
+            Irreversible and destructive actions
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="space-y-1">
+              <Label className="text-base font-medium">Delete account</Label>
+              <p className="text-muted-foreground text-sm">
+                Permanently delete your account and all data.
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => setDeleteDialogOpen(true)}
+              className="shrink-0"
+            >
+              <Trash2 className="mr-2 h-4 w-4" aria-hidden />
+              Delete account
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <DeleteAccountDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+      />
+    </>
+  )
+}

frontend/src/components/UserSettings/DeleteAccountDialog.tsx

@@ -0,0 +1,87 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { useForm } from "react-hook-form"
+
+import { UsersService } from "@/client"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { LoadingButton } from "@/components/ui/loading-button"
+import useAuth from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
+
+export type DeleteAccountDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function DeleteAccountDialog({
+  open,
+  onOpenChange,
+}: DeleteAccountDialogProps) {
+  const queryClient = useQueryClient()
+  const { showSuccessToast, showErrorToast } = useCustomToast()
+  const { handleSubmit } = useForm()
+  const { logout } = useAuth()
+
+  const mutation = useMutation({
+    mutationFn: () => UsersService.deleteUserMe(),
+    onSuccess: () => {
+      showSuccessToast("Your account has been successfully deleted")
+      onOpenChange(false)
+      logout()
+    },
+    onError: handleError.bind(showErrorToast),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["currentUser"] })
+    },
+  })
+
+  const onSubmit = () => {
+    mutation.mutate()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <form onSubmit={handleSubmit(onSubmit)} noValidate>
+          <DialogHeader>
+            <DialogTitle>Delete account</DialogTitle>
+            <DialogDescription>
+              All your account data will be{" "}
+              <strong>permanently deleted.</strong> If you are sure, click{" "}
+              <strong>Delete</strong> to proceed. This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter className="mt-4 gap-2 sm:gap-0">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={mutation.isPending}
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+            <LoadingButton
+              type="submit"
+              variant="destructive"
+              loading={mutation.isPending}
+              disabled={mutation.isPending}
+            >
+              Delete
+            </LoadingButton>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}