chore: change password page

src/components/Setting/ChangePassword.astro

@@ -0,0 +1,52 @@
+<div>
+  <h2 class='text-3xl font-bold sm:text-4xl'>Password</h2>
+  <p class='mt-2'>Manage settings for your account passwords</p>
+  <div class='mt-8 space-y-4'>
+    <div class='flex w-full flex-col'>
+      <label for='current-password' class='text-sm text-slate-500'
+        >Current Password</label
+      >
+      <input
+        type='password'
+        name='current-password'
+        id='current-password'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='Current password'
+      />
+    </div>
+    <div class='flex w-full flex-col'>
+      <label for='new-password' class='text-sm text-slate-500'
+        >New Password</label
+      >
+      <input
+        type='password'
+        name='new-password'
+        id='new-password'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='New password'
+      />
+    </div>
+    <div class='flex w-full flex-col'>
+      <label for='new-password-confirmation' class='text-sm text-slate-500'
+        >New Password Confirm</label
+      >
+      <input
+        type='password'
+        name='new-password-confirmation'
+        id='new-password-confirmation'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='New password confirm'
+      />
+    </div>
+
+    <button
+      class='!mt-5 inline-flex h-10 items-center justify-center rounded-lg border border-slate-300 bg-black p-2 px-4 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60'
+      type='button'
+    >
+      Change
+    </button>
+  </div>
+</div>

src/pages/settings/profile.astro

@@ -0,0 +1,10 @@
+---
+import ChangePassword from '../../components/Setting/ChangePassword.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title='' description=''>
+  <div class='container py-10'>
+    <ChangePassword />
+  </div>
+</BaseLayout>