feat: forgot password page

riipandi · Oct 4, 2024 · aff5ac1 · aff5ac1
1 parent a21a38d
commit aff5ac1
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 24 deletions.
diff --git a/app/routes/_auth+/_layout.tsx b/app/routes/_auth+/_layout.tsx
@@ -5,6 +5,13 @@ import { clx } from '#/utils/ui-helper'
 export default function AuthLayout() {
   const { pathname } = useLocation()
 
+  const authLinks = [
+    { href: '/login', label: 'sign in' },
+    { href: '/signup', label: 'sign up' },
+  ]
+
+  const isAuthPage = ['/login', '/signup'].includes(pathname)
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <div className="absolute top-4 right-4 z-50 flex size-10 items-center justify-center">
@@ -32,32 +39,34 @@ export default function AuthLayout() {
         <div className="relative mx-auto flex w-full max-w-md items-center px-6 lg:w-2/5">
           <main className="w-full max-w-md">
             <div className="mx-auto flex justify-center">
-              <img
-                src="/favicon.svg"
-                className="h-12 w-auto sm:h-10 dark:invert"
-                alt="Remix Start"
-              />
-            </div>
-            <div className="mt-12 flex items-center justify-center px-8 sm:mt-14">
-              {[
-                { href: '/login', label: 'sign in' },
-                { href: '/signup', label: 'sign up' },
-              ].map(({ href, label }) => (
-                <Link
-                  key={href}
-                  to={href}
-                  className={clx(
-                    pathname === href
-                      ? 'border-primary-500 text-primary-500 dark:border-primary-400 dark:text-white'
-                      : 'border-gray-400 dark:text-gray-400',
-                    'w-1/2 border-b pb-4 text-center font-medium capitalize'
-                  )}
-                >
-                  {label}
-                </Link>
-              ))}
+              <Link to="/" title="Back to home">
+                <img
+                  src="/favicon.svg"
+                  className="h-12 w-auto sm:h-10 dark:invert"
+                  alt="Remix Start"
+                />
+              </Link>
             </div>
 
+            {isAuthPage && (
+              <div className="mt-12 flex items-center justify-center px-8 sm:mt-14">
+                {authLinks.map(({ href, label }) => (
+                  <Link
+                    key={href}
+                    to={href}
+                    className={clx(
+                      'w-1/2 border-b pb-4 text-center font-medium capitalize',
+                      pathname === href
+                        ? 'border-primary-500 text-primary-500 dark:border-primary-400 dark:text-white'
+                        : 'border-gray-400 dark:text-gray-400'
+                    )}
+                  >
+                    {label}
+                  </Link>
+                ))}
+              </div>
+            )}
+
             <Outlet />
           </main>
         </div>

diff --git a/app/routes/_auth+/forgot-password.$.tsx b/app/routes/_auth+/forgot-password.$.tsx
@@ -0,0 +1,52 @@
+import type { MetaFunction } from '@remix-run/node'
+import * as Lucide from 'lucide-react'
+import { Link } from '#/components/link'
+
+export const meta: MetaFunction = () => [{ title: 'Sign in - Remix Start' }]
+
+export default function ForgotPasswordPage() {
+  return (
+    <>
+      <div className="mt-6 flex flex-col items-center justify-center px-8 text-center sm:mt-8">
+        <h1 className="font-medium text-xl">Forgot your password?</h1>
+        <p className="mt-3 text-gray-500 text-sm">
+          Don't worry, enter your email address below and we'll send you a link to reset your
+          password.
+        </p>
+      </div>
+
+      <form autoComplete="off">
+        <div className="relative mt-8 flex items-center">
+          <span className="absolute">
+            <Lucide.Mail
+              className="mx-3 size-5 text-primary-300 dark:text-gray-500"
+              strokeWidth={1.8}
+            />
+          </span>
+          <input
+            type="email"
+            className="block w-full rounded-lg border border-primary-400 bg-white px-11 py-2.5 text-gray-700 placeholder:text-gray-400 focus:border-primary-400 focus:outline-none focus:ring focus:ring-primary-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-primary-300 dark:focus:border-primary-300"
+            placeholder="Email address"
+            autoComplete="email"
+          />
+        </div>
+
+        <div className="mt-6">
+          <button
+            type="button"
+            className="w-full transform rounded-lg bg-primary-500 px-6 py-2.5 font-medium text-sm text-white capitalize tracking-wide transition-colors duration-300 hover:bg-primary-400 focus:outline-none focus:ring focus:ring-primary-300 focus:ring-opacity-50"
+          >
+            Send reset link
+          </button>
+        </div>
+      </form>
+
+      <div className="mt-10 space-x-1 text-center text-sm dark:text-white">
+        <span>Remember your password?</span>
+        <Link to="/login" className="hover:underline">
+          Back to sign in
+        </Link>
+      </div>
+    </>
+  )
+}