feat(mellow-react): add profile page

sailscastshq · Sep 20, 2024 · 7219d6c · 7219d6c
1 parent 07248d8
commit 7219d6c
Showing 1 changed file with 172 additions and 0 deletions.
diff --git a/templates/mellow-react/assets/js/pages/dashboard/profile.jsx b/templates/mellow-react/assets/js/pages/dashboard/profile.jsx
@@ -0,0 +1,172 @@
+import { Link, Head, usePage, useForm, router } from '@inertiajs/react'
+
+import AppLayout from '@/layouts/AppLayout'
+
+import InputText from '@/components/InputText'
+import InputPassword from '@/components/InputPassword'
+import InputEmail from '@/components/InputEmail'
+import InputButton from '@/components/InputButton'
+
+Profile.layout = (page) => <AppLayout children={page} />
+export default function Profile() {
+  const loggedInUser = usePage().props.loggedInUser
+  const { data, setData, ...form } = useForm({
+    email: loggedInUser.email,
+    fullName: loggedInUser.fullName,
+    currentPassword: '',
+    password: '',
+    confirmPassword: ''
+  })
+
+  const {
+    data: deleteAccountData,
+    setData: setDeleteAccountData,
+    ...deleteAccountForm
+  } = useForm({
+    password: ''
+  })
+
+  function updateProfile() {
+    form.patch(`/profile`, {
+      preserveScroll: true,
+      preserveState: true,
+      onError: (errors) => {
+        console.error('Update failed:', errors)
+      }
+    })
+  }
+
+  function deleteAccount(e) {
+    e.preventDefault()
+    if (
+      confirm(
+        'Are you sure you want to delete your account? This action cannot be undone.'
+      )
+    ) {
+      deleteAccountForm.delete('/profile')
+    }
+  }
+
+  return (
+    <>
+      <Head title="Profile | Mellow"></Head>
+      <div className="mx-auto space-y-8 px-4 md:w-4/12">
+        <section className="rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg">
+          <header className="mb-6">
+            <h1 className="text-2xl">Profile Information</h1>
+            <p className="mt-2 text-gray-600">
+              Update your account's profile information and email address.
+            </p>
+          </header>
+
+          <form onSubmit={updateProfile} className="space-y-4">
+            <InputText
+              value={data.fullName}
+              onChange={(e) => setData('fullName', e.target.value)}
+            />
+            <InputEmail
+              value={data.email}
+              onChange={(e) => setData('email', e.target.value)}
+            />
+            <div className="flex items-center justify-end">
+              <InputButton
+                processing={form.processing}
+                disabled={form.processing}
+                label="Save changes"
+              />
+            </div>
+            {form.recentlySuccessful && (
+              <p className="text-right text-green-700">
+                Profile updated successfully!
+              </p>
+            )}
+          </form>
+        </section>
+
+        <section className="rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg">
+          <header className="mb-6">
+            <h2 className="text-2xl">Change Password</h2>
+            <p className="mt-2 text-gray-600">
+              Ensure your account is using a long, random password to stay
+              secure.
+            </p>
+          </header>
+
+          <form onSubmit={updateProfile} className="space-y-4">
+            <InputPassword
+              label="Current Password"
+              id="currentPassword"
+              value={data.currentPassword}
+              onChange={(e) => setData('currentPassword', e.target.value)}
+              placeholder="Current Password"
+            />
+            <InputPassword
+              label="New Password"
+              id="password"
+              value={data.password}
+              onChange={(e) => setData('password', e.target.value)}
+              placeholder="New Password"
+            />
+            <InputPassword
+              label="Confirm Password"
+              placeholder="Confirm Password"
+              id="confirmPassword"
+              value={data.confirmPassword}
+              onChange={(e) => setData('confirmPassword', e.target.value)}
+            />
+            {form.errors.password && (
+              <p className="text-red-500" v-if="form.errors.password">
+                {form.errors.password}
+              </p>
+            )}
+            <div className="flex items-center justify-end">
+              <InputButton
+                processing={form.processing}
+                disabled={form.processing}
+                label="Update Password"
+              />
+            </div>
+            {form.recentlySuccessful && (
+              <p className="text-right text-green-700">
+                Profile updated successfully!
+              </p>
+            )}
+          </form>
+        </section>
+
+        <section className="rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg">
+          <header className="mb-6">
+            <h2 className="text-2xl">Delete Account</h2>
+            <p className="mt-2 text-gray-600">
+              Once your account is deleted, all of its resources and data will
+              be permanently deleted. Before deleting your account, please
+              download any data or information that you wish to retain.
+            </p>
+          </header>
+
+          <form onSubmit={deleteAccount} className="space-y-4">
+            <InputPassword
+              required
+              value={deleteAccountData.password}
+              onChange={(e) => setDeleteAccountData('password', e.target.value)}
+            />
+            <div className="flex items-center justify-end">
+              <InputButton
+                processing={deleteAccountForm.processing}
+                disabled={deleteAccountForm.processing}
+                className="border-red-600 bg-red-600"
+                label="Delete Account"
+              />
+            </div>
+          </form>
+        </section>
+
+        <InputButton
+          onClick={(e) => router.delete('/logout')}
+          className="w-full border-red-600 bg-red-600"
+          label="Logout"
+        />
+      </div>
+    </>
+  )
+}