From 91052e605739001e58ef4b348f9c5c847cbbffbb Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Sun, 22 Sep 2024 23:55:51 +0800
Subject: [PATCH 1/2] Create forgot password form

---
 client/src/App.tsx                            |  5 ++
 client/src/components/or.tsx                  |  2 +-
 client/src/components/switch-auth.tsx         |  9 ++-
 client/src/constants/keys.ts                  |  1 +
 client/src/lib/DTO/forgot-password-dto.ts     |  3 +
 client/src/lib/services/auth-service.ts       | 30 ++++++--
 .../_components/forgot-password-form.tsx      | 70 +++++++++++++++++++
 client/src/pages/forgot-password/page.tsx     | 27 +++++++
 .../sign-in/_components/sign-in-form.tsx      | 14 ++--
 client/src/pages/sign-in/page.tsx             |  9 ++-
 10 files changed, 154 insertions(+), 16 deletions(-)
 create mode 100644 client/src/lib/DTO/forgot-password-dto.ts
 create mode 100644 client/src/pages/forgot-password/_components/forgot-password-form.tsx
 create mode 100644 client/src/pages/forgot-password/page.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5a15f5e..386f2b1 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 
+import { ForgotPasswordPage } from "@/pages/forgot-password/page";
 import VerifyEmailPage from "@/pages/verify-email/page";
 import PrivateGuard from "@/guards/private-guard";
 import { AppRoutes } from "@/constants/routes";
@@ -20,6 +21,10 @@ function App() {
           <Route path={AppRoutes.SignIn} element={<SignInPage />} />
           <Route path={AppRoutes.VerifyEmail} element={<VerifyEmailPage />} />
         </Route>
+        <Route
+          path={AppRoutes.ForgotPassword}
+          element={<ForgotPasswordPage />}
+        />
       </Routes>
     </main>
   );
diff --git a/client/src/components/or.tsx b/client/src/components/or.tsx
index 8d7a48a..9929b84 100644
--- a/client/src/components/or.tsx
+++ b/client/src/components/or.tsx
@@ -1,6 +1,6 @@
 const Or = () => {
   return (
-    <div className="flex-between gap-x-2 w-full md:w-[400px] px-6 lg:px-0">
+    <div className="flex-between gap-x-2 w-full px-6">
       <span className="h-px w-full flex-1 bg-foreground/40 rounded-full" />
       <p className="text-sm lg:text-lg font-semibold text-foreground/40">Or</p>
       <span className="h-px flex-1 bg-foreground/40 rounded-full" />
diff --git a/client/src/components/switch-auth.tsx b/client/src/components/switch-auth.tsx
index 55fae3a..d11af44 100644
--- a/client/src/components/switch-auth.tsx
+++ b/client/src/components/switch-auth.tsx
@@ -1,15 +1,18 @@
 import { Link } from "react-router-dom";
 
 interface SwitchAuthProps {
-  label: string;
+  label?: string;
   tag: string;
   href: string;
 }
 
 const SwitchAuth = ({ label, tag, href }: SwitchAuthProps) => {
   return (
-    <div className="p-4 w-full md:w-[400px] text-sm lg:text-base rounded-md border border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2">
-      <p className="font-medium">{label}</p>
+    <div
+      className="p-4 w-full text-sm lg:text-base rounded-md border border-secondary/50 bg-secondary/15 
+      drop-shadow-2xl flex-center gap-x-2"
+    >
+      {label && <p className="font-medium">{label}</p>}
       <Link
         to={href}
         className="font-bold underline-offset-4 hover:underline text-secondary transition-all hover:drop-shadow-secondary-glow"
diff --git a/client/src/constants/keys.ts b/client/src/constants/keys.ts
index cc4fe97..f22fa6f 100644
--- a/client/src/constants/keys.ts
+++ b/client/src/constants/keys.ts
@@ -4,3 +4,4 @@ export const SIGNOUTKEY = "sign-out";
 export const VERIFYEMAILKEY = "verify-email";
 export const RESENDVERIFYKEY = "resend-verify";
 export const VERIFYTOKENKEY = "verify-token";
+export const FORGOTPASSWORDKEY = "forgot-password";
diff --git a/client/src/lib/DTO/forgot-password-dto.ts b/client/src/lib/DTO/forgot-password-dto.ts
new file mode 100644
index 0000000..c4883ee
--- /dev/null
+++ b/client/src/lib/DTO/forgot-password-dto.ts
@@ -0,0 +1,3 @@
+export type ForgotPasswordDTO = {
+  email: string;
+};
diff --git a/client/src/lib/services/auth-service.ts b/client/src/lib/services/auth-service.ts
index dd5fed4..afe5d1d 100644
--- a/client/src/lib/services/auth-service.ts
+++ b/client/src/lib/services/auth-service.ts
@@ -77,9 +77,7 @@ export const AuthService = {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        token: token,
-      }),
+      body: JSON.stringify(token),
     });
 
     const data = await res.json();
@@ -101,9 +99,7 @@ export const AuthService = {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        email: email,
-      }),
+      body: JSON.stringify(email),
     });
 
     const data = await res.json();
@@ -138,4 +134,26 @@ export const AuthService = {
       user: data.user,
     });
   },
+  forgotPassword: async (email: string) => {
+    const res = await fetch(`${baseURL}${AppRoutes.ForgotPassword}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(email),
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new ErrorResponse({
+        status: res.status,
+        message: data.error,
+      });
+    }
+
+    return new GenericResponse({
+      message: data.message,
+    });
+  },
 };
diff --git a/client/src/pages/forgot-password/_components/forgot-password-form.tsx b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
new file mode 100644
index 0000000..96161fa
--- /dev/null
+++ b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
@@ -0,0 +1,70 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { Mail } from "lucide-react";
+import { FormEvent } from "react";
+import { toast } from "sonner";
+
+import { GenericResponse } from "@/lib/classes/generic-response-class";
+import { ErrorResponse } from "@/lib/classes/error-response-class";
+import { ForgotPasswordDTO } from "@/lib/DTO/forgot-password-dto";
+import { AuthService } from "@/lib/services/auth-service";
+import { ValidateEmail } from "@/lib/utils/validations";
+import { FORGOTPASSWORDKEY } from "@/constants/keys";
+import { Button } from "@/components/text-button";
+import { AppRoutes } from "@/constants/routes";
+import { Input } from "@/components/input";
+
+const ForgotPasswordForm = () => {
+  const navigate = useNavigate();
+
+  const { mutate, isPending } = useMutation({
+    mutationKey: [FORGOTPASSWORDKEY],
+    mutationFn: AuthService.forgotPassword,
+    onSuccess: (res: GenericResponse) => {
+      toast.success(res.message);
+      navigate(AppRoutes.ResetPassword);
+    },
+    onError: (error: ErrorResponse) => toast.error(error.message),
+  });
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.currentTarget);
+
+    const forgotPasswordData = Object.fromEntries(
+      formData.entries()
+    ) as ForgotPasswordDTO;
+
+    mutate(forgotPasswordData.email);
+  };
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
+    >
+      <Input
+        required
+        name="email"
+        label="Email Address"
+        tooltip="Please enter a valid email address. Ensure it includes an '@' symbol and a domain name."
+        placeholder="e.g. john@domain.com"
+        type="email"
+        autoComplete="email"
+        suffixIcon={Mail}
+        validation={ValidateEmail}
+        maxLength={320}
+      />
+
+      <Button
+        label="Send Reset Link"
+        disabled={isPending}
+        loading={isPending}
+        type="submit"
+      />
+    </form>
+  );
+};
+
+export { ForgotPasswordForm };
diff --git a/client/src/pages/forgot-password/page.tsx b/client/src/pages/forgot-password/page.tsx
new file mode 100644
index 0000000..3331887
--- /dev/null
+++ b/client/src/pages/forgot-password/page.tsx
@@ -0,0 +1,27 @@
+import { SwitchAuth } from "@/components/switch-auth";
+import { ForgotPasswordForm } from "./_components/forgot-password-form";
+import { AppRoutes } from "@/constants/routes";
+
+const ForgotPasswordPage = () => {
+  return (
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <div className="w-full rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl">
+        <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase pt-4 pb-2">
+          Forgot Password
+        </h2>
+        <div className="w-full bg-primary/25 p-2.5 flex-center border-t border-primary/50">
+          <p className="text-xs lg:text-base text-center lg:max-w-[324px] text-foreground/60 font-medium">
+            Enter your email address and wait for a reset password link to be
+            sent.
+          </p>
+        </div>
+      </div>
+
+      <ForgotPasswordForm />
+
+      <SwitchAuth href={AppRoutes.Root} tag="Back" />
+    </section>
+  );
+};
+
+export { ForgotPasswordPage };
diff --git a/client/src/pages/sign-in/_components/sign-in-form.tsx b/client/src/pages/sign-in/_components/sign-in-form.tsx
index d31d9c8..d6ed026 100644
--- a/client/src/pages/sign-in/_components/sign-in-form.tsx
+++ b/client/src/pages/sign-in/_components/sign-in-form.tsx
@@ -1,5 +1,5 @@
+import { Link, useNavigate } from "react-router-dom";
 import { useMutation } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
 import { FormEvent } from "react";
 import { toast } from "sonner";
 
@@ -52,10 +52,6 @@ const SignInForm = () => {
       onSubmit={onSubmit}
       className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
     >
-      <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase">
-        Access Your Account
-      </h2>
-
       {SIGNININPUTS.map((s) => (
         <Input
           key={s.label}
@@ -66,6 +62,14 @@ const SignInForm = () => {
         />
       ))}
 
+      <Link
+        to={AppRoutes.ForgotPassword}
+        className="text-sm font-medium hover:underline underline-offset-4 transition-all text-foreground 
+          hover:text-primary px-1.5 inline-block text-end w-full"
+      >
+        Forgot Password?
+      </Link>
+
       <Button
         label="Sign In"
         disabled={isPending}
diff --git a/client/src/pages/sign-in/page.tsx b/client/src/pages/sign-in/page.tsx
index ea3e11c..665be49 100644
--- a/client/src/pages/sign-in/page.tsx
+++ b/client/src/pages/sign-in/page.tsx
@@ -6,7 +6,14 @@ import { SignInForm } from "./_components/sign-in-form";
 
 const SignInPage = () => {
   return (
-    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6">
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <h2
+        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
+        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
+      >
+        Access Your Account
+      </h2>
+
       <SignInForm />
 
       <Or />

From a9a085ff786034e2027db5ce1728160ffc00b954 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Mon, 23 Sep 2024 01:14:43 +0800
Subject: [PATCH 2/2] Consume forgot password api

Redirect to reset password page if forgot password was successful, fix email template foreground color not setting correctly by adding '!important', correctly detect if local storage theme is undefined then set default theme and only add padding right to input component if it's a password.
---
 client/src/components/input.tsx                 |  9 +++++----
 client/src/components/switch-auth.tsx           |  4 ++--
 client/src/lib/DTO/forgot-password-dto.ts       |  3 ---
 client/src/lib/providers/theme-provider.tsx     |  8 ++++----
 client/src/lib/services/auth-service.ts         | 12 +++++++++---
 .../_components/forgot-password-form.tsx        |  8 +++-----
 .../pages/sign-up/_components/sign-up-form.tsx  |  4 ----
 client/src/pages/sign-up/page.tsx               |  9 ++++++++-
 .../verify-email/_components/resend-code.tsx    |  5 ++++-
 .../_components/verify-email-form.tsx           |  6 +++++-
 client/src/pages/verify-email/page.tsx          | 17 +++++++++--------
 templates/request_reset_password.go             |  4 ++--
 templates/success_reset_password.go             |  4 ++--
 templates/verify_email.go                       |  2 +-
 templates/welcome.go                            |  2 +-
 15 files changed, 55 insertions(+), 42 deletions(-)
 delete mode 100644 client/src/lib/DTO/forgot-password-dto.ts

diff --git a/client/src/components/input.tsx b/client/src/components/input.tsx
index 9b55b8a..a45857e 100644
--- a/client/src/components/input.tsx
+++ b/client/src/components/input.tsx
@@ -40,7 +40,7 @@ const Input = ({
   const [obscure, setObscure] = useState(true);
   const [valid, setValid] = useState(false);
 
-  const isPasswod = type === "password";
+  const isPassword = type === "password";
   const hasInput = value.length > 0;
 
   useEffect(() => {
@@ -75,7 +75,7 @@ const Input = ({
         <input
           value={value}
           onChange={(e) => setValue(e.target.value)}
-          type={isPasswod ? (obscure ? "password" : "text") : type}
+          type={isPassword ? (obscure ? "password" : "text") : type}
           placeholder={placeholder}
           autoComplete={autoComplete}
           id={name?.toLowerCase() ?? label.toLowerCase()}
@@ -84,7 +84,8 @@ const Input = ({
           required={required}
           maxLength={maxLength}
           className={`w-full md:w-[400px] bg-background py-2.5 rounded-lg outline-none border ring-1 focus:ring-2 transition-all 
-            placeholder-foreground/50 px-11 disabled:bg-opacity-25 disabled:border-primary/25 disabled:text-foreground/50 disabled:pointer-events-none
+            placeholder-foreground/50 disabled:bg-opacity-25 disabled:border-primary/25 disabled:text-foreground/50 disabled:pointer-events-none
+            ${isPassword ? "px-11" : "pl-11"}
             ${
               hasInput
                 ? valid
@@ -96,7 +97,7 @@ const Input = ({
         <div className="absolute inset-y-0 left-0 flex-center pl-3 pointer-events-none">
           <SuffixIcon size={24} className="text-primary" />
         </div>
-        {isPasswod && (
+        {isPassword && (
           <button
             type="button"
             onClick={() => setObscure(!obscure)}
diff --git a/client/src/components/switch-auth.tsx b/client/src/components/switch-auth.tsx
index d11af44..706b588 100644
--- a/client/src/components/switch-auth.tsx
+++ b/client/src/components/switch-auth.tsx
@@ -9,8 +9,8 @@ interface SwitchAuthProps {
 const SwitchAuth = ({ label, tag, href }: SwitchAuthProps) => {
   return (
     <div
-      className="p-4 w-full text-sm lg:text-base rounded-md border border-secondary/50 bg-secondary/15 
-      drop-shadow-2xl flex-center gap-x-2"
+      className="p-4 w-full text-sm lg:text-base rounded-md border 
+      border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2"
     >
       {label && <p className="font-medium">{label}</p>}
       <Link
diff --git a/client/src/lib/DTO/forgot-password-dto.ts b/client/src/lib/DTO/forgot-password-dto.ts
deleted file mode 100644
index c4883ee..0000000
--- a/client/src/lib/DTO/forgot-password-dto.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type ForgotPasswordDTO = {
-  email: string;
-};
diff --git a/client/src/lib/providers/theme-provider.tsx b/client/src/lib/providers/theme-provider.tsx
index 183acf4..64bd76c 100644
--- a/client/src/lib/providers/theme-provider.tsx
+++ b/client/src/lib/providers/theme-provider.tsx
@@ -23,12 +23,12 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 const ThemeProvider = ({
   children,
   defaultTheme = "system",
-  storageKey = "vite-ui-theme",
+  storageKey = "gra-theme",
   ...props
 }: ThemeProviderProps) => {
-  const [theme, setTheme] =
-    useState<Theme>(() => localStorage.getItem(storageKey) as Theme) ||
-    defaultTheme;
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
 
   useEffect(() => {
     const root = window.document.documentElement;
diff --git a/client/src/lib/services/auth-service.ts b/client/src/lib/services/auth-service.ts
index afe5d1d..648bddb 100644
--- a/client/src/lib/services/auth-service.ts
+++ b/client/src/lib/services/auth-service.ts
@@ -77,7 +77,9 @@ export const AuthService = {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(token),
+      body: JSON.stringify({
+        token: token,
+      }),
     });
 
     const data = await res.json();
@@ -99,7 +101,9 @@ export const AuthService = {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(email),
+      body: JSON.stringify({
+        email: email,
+      }),
     });
 
     const data = await res.json();
@@ -140,7 +144,9 @@ export const AuthService = {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(email),
+      body: JSON.stringify({
+        email: email,
+      }),
     });
 
     const data = await res.json();
diff --git a/client/src/pages/forgot-password/_components/forgot-password-form.tsx b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
index 96161fa..3db235e 100644
--- a/client/src/pages/forgot-password/_components/forgot-password-form.tsx
+++ b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
@@ -6,7 +6,6 @@ import { toast } from "sonner";
 
 import { GenericResponse } from "@/lib/classes/generic-response-class";
 import { ErrorResponse } from "@/lib/classes/error-response-class";
-import { ForgotPasswordDTO } from "@/lib/DTO/forgot-password-dto";
 import { AuthService } from "@/lib/services/auth-service";
 import { ValidateEmail } from "@/lib/utils/validations";
 import { FORGOTPASSWORDKEY } from "@/constants/keys";
@@ -32,11 +31,9 @@ const ForgotPasswordForm = () => {
 
     const formData = new FormData(e.currentTarget);
 
-    const forgotPasswordData = Object.fromEntries(
-      formData.entries()
-    ) as ForgotPasswordDTO;
+    const forgotPasswordData = Object.fromEntries(formData.entries());
 
-    mutate(forgotPasswordData.email);
+    mutate(forgotPasswordData["email"] as string);
   };
 
   return (
@@ -53,6 +50,7 @@ const ForgotPasswordForm = () => {
         type="email"
         autoComplete="email"
         suffixIcon={Mail}
+        disabled={isPending}
         validation={ValidateEmail}
         maxLength={320}
       />
diff --git a/client/src/pages/sign-up/_components/sign-up-form.tsx b/client/src/pages/sign-up/_components/sign-up-form.tsx
index d1357db..f4d24fd 100644
--- a/client/src/pages/sign-up/_components/sign-up-form.tsx
+++ b/client/src/pages/sign-up/_components/sign-up-form.tsx
@@ -41,10 +41,6 @@ const SignUpForm = () => {
       onSubmit={onSubmit}
       className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
     >
-      <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase">
-        Create Account
-      </h2>
-
       {SIGNUPINPUTS.map((s) => (
         <Input
           key={s.label}
diff --git a/client/src/pages/sign-up/page.tsx b/client/src/pages/sign-up/page.tsx
index 36dfa64..d157752 100644
--- a/client/src/pages/sign-up/page.tsx
+++ b/client/src/pages/sign-up/page.tsx
@@ -6,7 +6,14 @@ import { SignUpForm } from "./_components/sign-up-form";
 
 const SignUpPage = () => {
   return (
-    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6">
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <h2
+        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
+        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
+      >
+        Create Account
+      </h2>
+
       <SignUpForm />
 
       <Or />
diff --git a/client/src/pages/verify-email/_components/resend-code.tsx b/client/src/pages/verify-email/_components/resend-code.tsx
index 1a00480..45e104a 100644
--- a/client/src/pages/verify-email/_components/resend-code.tsx
+++ b/client/src/pages/verify-email/_components/resend-code.tsx
@@ -20,7 +20,10 @@ const ResendCode = () => {
   const onClick = () => mutate(email);
 
   return (
-    <div className="flex-center gap-x-2 text-sm">
+    <div
+      className="p-4 w-full text-sm lg:text-base rounded-md border 
+    border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2"
+    >
       <p className="font-medium">Didn't receive a code?</p>
       <button
         className="font-bold underline-offset-4 hover:underline text-secondary transition-all hover:drop-shadow-secondary-glow"
diff --git a/client/src/pages/verify-email/_components/verify-email-form.tsx b/client/src/pages/verify-email/_components/verify-email-form.tsx
index 64eab98..fca6e28 100644
--- a/client/src/pages/verify-email/_components/verify-email-form.tsx
+++ b/client/src/pages/verify-email/_components/verify-email-form.tsx
@@ -84,7 +84,11 @@ const VerifyEmailForm = () => {
   }, [code]);
 
   return (
-    <form ref={formRef} onSubmit={onSubmit} className="space-y-4 lg:space-y-6">
+    <form
+      ref={formRef}
+      onSubmit={onSubmit}
+      className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
+    >
       <div className="flex-center gap-x-4 lg:gap-x-6">
         {code.map((digit, i) => (
           <SingleInput
diff --git a/client/src/pages/verify-email/page.tsx b/client/src/pages/verify-email/page.tsx
index 344d660..1e19146 100644
--- a/client/src/pages/verify-email/page.tsx
+++ b/client/src/pages/verify-email/page.tsx
@@ -3,16 +3,17 @@ import { ResendCode } from "./_components/resend-code";
 
 const VerifyEmailPage = () => {
   return (
-    <section className="px-4 lg:px-0 h-full flex-center">
-      <div className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6">
-        <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase">
-          Verify Email
-        </h2>
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <h2
+        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
+        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
+      >
+        Verify Email
+      </h2>
 
-        <VerifyEmailForm />
+      <VerifyEmailForm />
 
-        <ResendCode />
-      </div>
+      <ResendCode />
     </section>
   );
 };
diff --git a/templates/request_reset_password.go b/templates/request_reset_password.go
index 13719b3..ed3f44d 100644
--- a/templates/request_reset_password.go
+++ b/templates/request_reset_password.go
@@ -16,14 +16,14 @@ const _REQUEST_RESET_PASSWORD_HTML = `
 </head>
 <body style="font-family: Arial, sans-serif; line-height: 1.6; color: %s; max-width: 600px; margin: 0 auto; padding: 20px;">
   <div style="background: linear-gradient(to right, %s, %s); padding: 20px; text-align: center;">
-    <h1 style="color: #DCF9F5; margin: 0;">Password Request Reset</h1>
+    <h1 style="color: #DCF9F5 !important; margin: 0;">Password Request Reset</h1>
   </div>
   <div style="background-color: %s; padding: 20px; border-radius: 0 0 5px 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
     <p>Hello,</p>
     <p>We received a request to reset your password. If you didn't make this request, please ignore this email.</p>
     <p>To reset your password, click the button below:</p>
     <div style="text-align: center; margin: 30px 0;">
-      <a href="{resetURL}" style="background-color: %s; color: #DCF9F5; padding: 12px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;">Reset Password</a>
+      <a href="{resetURL}" style="background-color: %s; color: #DCF9F5 !important; padding: 12px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;">Reset Password</a>
     </div>
     <p>This link will expire in 15 minutes for security reasons.</p>
     <p>Best regards,<br>Fingertips</p>
diff --git a/templates/success_reset_password.go b/templates/success_reset_password.go
index 8343d75..310ab97 100644
--- a/templates/success_reset_password.go
+++ b/templates/success_reset_password.go
@@ -16,13 +16,13 @@ const _RESET_PASSWORD_SUCCESS_HTML = `
 </head>
 <body style="font-family: Arial, sans-serif; line-height: 1.6; color: %s; max-width: 600px; margin: 0 auto; padding: 20px;">
   <div style="background: linear-gradient(to right, %s, %s); padding: 20px; text-align: center;">
-    <h1 style="color: #DCF9F5; margin: 0;">Password Reset Successful</h1>
+    <h1 style="color: #DCF9F5 !important; margin: 0;">Password Reset Successful</h1>
   </div>
   <div style="background-color: %s; padding: 20px; border-radius: 0 0 5px 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
     <p>Hello {username},</p>
     <p>We're writing to confirm that your password has been successfully reset.</p>
     <div style="text-align: center; margin: 30px 0;">
-      <div style="background-color: %s; color: #DCF9F5; width: 50px; height: 50px; line-height: 50px; border-radius: 50%%; display: inline-block; font-size: 30px;">
+      <div style="background-color: %s; color: #DCF9F5 !important; width: 50px; height: 50px; line-height: 50px; border-radius: 50%%; display: inline-block; font-size: 30px;">
         ✓
       </div>
     </div>
diff --git a/templates/verify_email.go b/templates/verify_email.go
index 749e2ca..13dd898 100644
--- a/templates/verify_email.go
+++ b/templates/verify_email.go
@@ -16,7 +16,7 @@ const _VERIFIY_EMAIL_HTML = `
 </head>
 <body style="font-family: Arial, sans-serif; line-height: 1.6; color: %s; max-width: 600px; margin: 0 auto; padding: 20px;">
   <div style="background: linear-gradient(to right, %s, %s); padding: 20px; text-align: center;">
-    <h1 style="color: #DCF9F5; margin: 0;">Verify Your Email</h1>
+    <h1 style="color: #DCF9F5 !important; margin: 0;">Verify Your Email</h1>
   </div>
   <div style="background-color: %s; padding: 20px; border-radius: 0 0 5px 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
     <p>Hello {username},</p>
diff --git a/templates/welcome.go b/templates/welcome.go
index ce60e96..646f2be 100644
--- a/templates/welcome.go
+++ b/templates/welcome.go
@@ -16,7 +16,7 @@ const _WELCOME_MESSAGE_HTML = `
 </head>
 <body style="font-family: Arial, sans-serif; line-height: 1.6; color: %s; max-width: 600px; margin: 0 auto; padding: 20px;">
   <div style="background: linear-gradient(to right, %s, %s); padding: 20px; text-align: center;">
-    <h1 style="color: #DCF9F5; margin: 0;">Welcome Aboard!</h1>
+    <h1 style="color: #DCF9F5 !important; margin: 0;">Welcome Aboard!</h1>
   </div>
   <div style="background-color: %s; padding: 20px; border-radius: 0 0 5px 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
     <p>Hello {username},</p>