dashboard layout (#597)

2025-07-03 23:12:35 +00:00 · 2025-05-13 23:42:22 +03:00
parent 38bafd7654
commit a81e9b18b7
57 changed files with 1011 additions and 843 deletions
--- a/resources/js/pages/settings/profile/partials/update-password.tsx
+++ b/resources/js/pages/settings/profile/partials/update-password.tsx
@ -0,0 +1,116 @@
+import InputError from '@/components/ui/input-error';
+import { Transition } from '@headlessui/react';
+import { useForm } from '@inertiajs/react';
+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';
+
+export default function UpdatePassword() {
+  const passwordInput = useRef<HTMLInputElement>(null);
+  const currentPasswordInput = useRef<HTMLInputElement>(null);
+
+  const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+  });
+
+  const updatePassword: FormEventHandler = (e) => {
+    e.preventDefault();
+
+    put(route('profile.password'), {
+      preserveScroll: true,
+      onSuccess: () => reset(),
+      onError: (errors) => {
+        if (errors.password) {
+          reset('password', 'password_confirmation');
+          passwordInput.current?.focus();
+        }
+
+        if (errors.current_password) {
+          reset('current_password');
+          currentPasswordInput.current?.focus();
+        }
+      },
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <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>
+    </Card>
+  );
+}