From ca7b9d974487f36bbe44d532b1e626d688184c57 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Sat, 1 Apr 2023 04:20:15 +0600
Subject: [PATCH] chore: change password page

---
 src/components/Setting/ChangePassword.astro | 52 +++++++++++++++++++++
 src/pages/settings/profile.astro            | 10 ++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/components/Setting/ChangePassword.astro
 create mode 100644 src/pages/settings/profile.astro

diff --git a/src/components/Setting/ChangePassword.astro b/src/components/Setting/ChangePassword.astro
new file mode 100644
index 000000000..9c2983e65
--- /dev/null
+++ b/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>
diff --git a/src/pages/settings/profile.astro b/src/pages/settings/profile.astro
new file mode 100644
index 000000000..20f206280
--- /dev/null
+++ b/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>