#591 - profile, users and projects

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>
   );
 }