dashboard layout (#597)

resources/js/pages/settings/profile/partials/delete-user.tsx

@@ -0,0 +1,105 @@
+import { useForm } from '@inertiajs/react';
+import { FormEventHandler, useRef } from 'react';
+
+import InputError from '@/components/ui/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function DeleteUser() {
+  const passwordInput = useRef<HTMLInputElement>(null);
+  const {
+    data,
+    setData,
+    delete: destroy,
+    processing,
+    reset,
+    errors,
+    clearErrors,
+  } = useForm<
+    Required<{
+      password: string;
+    }>
+  >({ password: '' });
+
+  const deleteUser: FormEventHandler = (e) => {
+    e.preventDefault();
+
+    destroy(route('profile.destroy'), {
+      preserveScroll: true,
+      onSuccess: () => closeModal(),
+      onError: () => passwordInput.current?.focus(),
+      onFinish: () => reset(),
+    });
+  };
+
+  const closeModal = () => {
+    clearErrors();
+    reset();
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Delete account</CardTitle>
+        <CardDescription>Delete your account and all of its resources</CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+          <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
+            <p className="font-medium">Warning</p>
+            <p className="text-sm">Please proceed with caution, this cannot be undone.</p>
+          </div>
+        </div>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="destructive">Delete account</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+            <DialogDescription>
+              Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you
+              would like to permanently delete your account.
+            </DialogDescription>
+            <form className="space-y-6" onSubmit={deleteUser}>
+              <div className="grid gap-2">
+                <Label htmlFor="password" className="sr-only">
+                  Password
+                </Label>
+
+                <Input
+                  id="password"
+                  type="password"
+                  name="password"
+                  ref={passwordInput}
+                  value={data.password}
+                  onChange={(e) => setData('password', e.target.value)}
+                  placeholder="Password"
+                  autoComplete="current-password"
+                />
+
+                <InputError message={errors.password} />
+              </div>
+
+              <DialogFooter className="gap-2">
+                <DialogClose asChild>
+                  <Button variant="secondary" onClick={closeModal}>
+                    Cancel
+                  </Button>
+                </DialogClose>
+
+                <Button variant="destructive" disabled={processing} asChild>
+                  <button type="submit">Delete account</button>
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}