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] 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>