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.
Fingertips18 · Sep 22, 2024 · a9a085f · a9a085f
1 parent 91052e6
commit a9a085f
Show file tree

Hide file tree

Showing 15 changed files with 55 additions and 42 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>