chore: forgot password page

src/components/Login/EmailSignupForm.tsx

@@ -33,7 +33,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
             const json = await res.json();
             if (res.status === 200) {
               setMessage(
-                'We have sent you an email. Please verify your account to login.'
+                'We have sent you an email with the verification link. Please follow the instructions to login.'
               );
               setError(null);
               console.log(json);

src/pages/forgot-password.astro

@@ -0,0 +1,46 @@
+---
+import SettingLayout from '../layouts/SettingLayout.astro';
+---
+
+<SettingLayout title='Forgot Password'>
+  <div class='container py-16'>
+    <form class='mx-auto max-w-md'>
+      <h2 class='text-3xl font-bold sm:text-center sm:text-4xl'>
+        Forgot password?
+      </h2>
+      <p class='mt-2 mb-6 sm:text-center'>
+        Enter the email address associated with your account, and we'll email
+        you a link to reset your password.
+      </p>
+
+      <label
+        for='email'
+        class='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
+      >
+        Email
+      </label>
+      <input
+        type='email'
+        name='email'
+        id='email'
+        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='arik@roadmap.sh'
+      />
+
+      <button
+        type='submit'
+        class='mt-2 inline-flex h-10 w-full 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:cursor-not-allowed disabled:opacity-60'
+        >Continue</button
+      >
+    </form>
+
+    <div class='mt-6 text-center text-sm'>
+      Don't have an account? <a
+        href='/register'
+        class='text-blue-600 transition duration-150 ease-in-out hover:text-blue-500'
+        >Register</a
+      >
+    </div>
+  </div>
+</SettingLayout>