#591 - profile, users and projects

resources/js/pages/profile/components/delete-user.tsx

@@ -1,105 +0,0 @@
-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>
-  );
-}

resources/js/pages/profile/components/update-password.tsx

@@ -6,7 +6,9 @@ import { FormEventHandler, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { CheckIcon, LoaderCircleIcon } from 'lucide-react';
 
 export default function UpdatePassword() {
   const passwordInput = useRef<HTMLInputElement>(null);
@@ -44,73 +46,62 @@ export default function UpdatePassword() {
         <CardTitle>Update password</CardTitle>
         <CardDescription>Ensure your account is using a long, random password to stay secure.</CardDescription>
       </CardHeader>
-      <CardContent>
-        <form onSubmit={updatePassword} className="space-y-6">
-          <div className="grid gap-2">
-            <Label htmlFor="current_password">Current password</Label>
-
-            <Input
-              id="current_password"
-              ref={currentPasswordInput}
-              value={data.current_password}
-              onChange={(e) => setData('current_password', e.target.value)}
-              type="password"
-              className="mt-1 block w-full"
-              autoComplete="current-password"
-              placeholder="Current password"
-            />
-
-            <InputError message={errors.current_password} />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="password">New password</Label>
-
-            <Input
-              id="password"
-              ref={passwordInput}
-              value={data.password}
-              onChange={(e) => setData('password', e.target.value)}
-              type="password"
-              className="mt-1 block w-full"
-              autoComplete="new-password"
-              placeholder="New password"
-            />
-
-            <InputError message={errors.password} />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="password_confirmation">Confirm password</Label>
-
-            <Input
-              id="password_confirmation"
-              value={data.password_confirmation}
-              onChange={(e) => setData('password_confirmation', e.target.value)}
-              type="password"
-              className="mt-1 block w-full"
-              autoComplete="new-password"
-              placeholder="Confirm password"
-            />
-
-            <InputError message={errors.password_confirmation} />
-          </div>
-
-          <div className="flex items-center gap-4">
-            <Button disabled={processing}>Save password</Button>
-
-            <Transition
-              show={recentlySuccessful}
-              enter="transition ease-in-out"
-              enterFrom="opacity-0"
-              leave="transition ease-in-out"
-              leaveTo="opacity-0"
-            >
-              <p className="text-sm text-neutral-600">Saved</p>
-            </Transition>
-          </div>
-        </form>
+      <CardContent className="p-4">
+        <Form id="update-password-form" onSubmit={updatePassword}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="current_password">Current password</Label>
+              <Input
+                id="current_password"
+                ref={currentPasswordInput}
+                value={data.current_password}
+                onChange={(e) => setData('current_password', e.target.value)}
+                type="password"
+                className="mt-1 block w-full"
+                autoComplete="current-password"
+                placeholder="Current password"
+              />
+              <InputError message={errors.current_password} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="password">New password</Label>
+              <Input
+                id="password"
+                ref={passwordInput}
+                value={data.password}
+                onChange={(e) => setData('password', e.target.value)}
+                type="password"
+                className="mt-1 block w-full"
+                autoComplete="new-password"
+                placeholder="New password"
+              />
+              <InputError message={errors.password} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="password_confirmation">Confirm password</Label>
+              <Input
+                id="password_confirmation"
+                value={data.password_confirmation}
+                onChange={(e) => setData('password_confirmation', e.target.value)}
+                type="password"
+                className="mt-1 block w-full"
+                autoComplete="new-password"
+                placeholder="Confirm password"
+              />
+              <InputError message={errors.password_confirmation} />
+            </FormField>
+          </FormFields>
+        </Form>
       </CardContent>
+      <CardFooter className="gap-2">
+        <Button form="update-password-form" disabled={processing}>
+          {processing && <LoaderCircleIcon className="animate-spin" />}
+          Save password
+        </Button>
+        <Transition show={recentlySuccessful} enter="transition ease-in-out" enterFrom="opacity-0" leave="transition ease-in-out" leaveTo="opacity-0">
+          <CheckIcon className="text-success" />
+        </Transition>
+      </CardFooter>
     </Card>
   );
 }

resources/js/pages/profile/components/update-user.tsx

@@ -1,19 +1,21 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import InputError from '@/components/ui/input-error';
-import { Link, useForm, usePage } from '@inertiajs/react';
+import { useForm, usePage } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
 import { Transition } from '@headlessui/react';
 import type { SharedData } from '@/types';
 import { FormEventHandler } from 'react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { CheckIcon, LoaderCircleIcon } from 'lucide-react';
 
 type ProfileForm = {
   name: string;
   email: string;
 };
 
-export default function UpdateUser({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
+export default function UpdateUser() {
   const { auth } = usePage<SharedData>().props;
 
   const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
@@ -35,76 +37,46 @@ export default function UpdateUser({ mustVerifyEmail, status }: { mustVerifyEmai
         <CardTitle>Profile information</CardTitle>
         <CardDescription>Update your profile information and email address.</CardDescription>
       </CardHeader>
-      <CardContent>
-        <form onSubmit={submit} className="space-y-6">
-          <div className="grid gap-2">
-            <Label htmlFor="name">Name</Label>
-
-            <Input
-              id="name"
-              className="mt-1 block w-full"
-              value={data.name}
-              onChange={(e) => setData('name', e.target.value)}
-              required
-              autoComplete="name"
-              placeholder="Full name"
-            />
-
-            <InputError className="mt-2" message={errors.name} />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email address</Label>
-
-            <Input
-              id="email"
-              type="email"
-              className="mt-1 block w-full"
-              value={data.email}
-              onChange={(e) => setData('email', e.target.value)}
-              required
-              autoComplete="username"
-              placeholder="Email address"
-            />
-
-            <InputError className="mt-2" message={errors.email} />
-          </div>
-
-          {mustVerifyEmail && auth.user.email_verified_at === null && (
-            <div>
-              <p className="text-muted-foreground -mt-4 text-sm">
-                Your email address is unverified.{' '}
-                <Link
-                  href={route('verification.send')}
-                  method="post"
-                  as="button"
-                  className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                >
-                  Click here to resend the verification email.
-                </Link>
-              </p>
-
-              {status === 'verification-link-sent' && (
-                <div className="mt-2 text-sm font-medium text-green-600">A new verification link has been sent to your email address.</div>
-              )}
-            </div>
-          )}
-
-          <div className="flex items-center gap-4">
-            <Button disabled={processing}>Save</Button>
-
-            <Transition
-              show={recentlySuccessful}
-              enter="transition ease-in-out"
-              enterFrom="opacity-0"
-              leave="transition ease-in-out"
-              leaveTo="opacity-0"
-            >
-              <p className="text-sm text-neutral-600">Saved</p>
-            </Transition>
-          </div>
-        </form>
+      <CardContent className="p-4">
+        <Form id="update-profile-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={data.name}
+                onChange={(e) => setData('name', e.target.value)}
+                required
+                autoComplete="name"
+                placeholder="Full name"
+              />
+              <InputError message={errors.name} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="email">Email address</Label>
+              <Input
+                id="email"
+                type="email"
+                value={data.email}
+                onChange={(e) => setData('email', e.target.value)}
+                required
+                autoComplete="username"
+                placeholder="Email address"
+              />
+              <InputError message={errors.email} />
+            </FormField>
+          </FormFields>
+        </Form>
       </CardContent>
+      <CardFooter className="gap-2">
+        <Button form="update-profile-form" disabled={processing}>
+          {processing && <LoaderCircleIcon className="animate-spin" />}
+          Save
+        </Button>
+        <Transition show={recentlySuccessful} enter="transition ease-in-out" enterFrom="opacity-0" leave="transition ease-in-out" leaveTo="opacity-0">
+          <CheckIcon className="text-success" />
+        </Transition>
+      </CardFooter>
     </Card>
   );
 }