From f7b811f42bdba4dfbc44f73c9cdaeadffd939b3c Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Fri, 6 Sep 2024 17:00:03 +0530
Subject: [PATCH 1/8] fixed the logic

---
 .../components/account/auth-forms/email.tsx   | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index ab328a7e1b8..ef666ed85d8 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, FormEvent, useMemo, useState } from "react";
+import { FC, FormEvent, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
 import { CircleAlert, XCircle } from "lucide-react";
@@ -22,7 +22,6 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
   // states
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [email, setEmail] = useState(defaultEmail);
-  const [isFocused, setFocused] = useState(false);
 
   const emailError = useMemo(
     () => (email && !checkEmailValidity(email) ? { email: "Email is invalid" } : undefined),
@@ -41,6 +40,9 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
 
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
+  const [isSel, setIsSel] = useState(true)
+  const inputRef = useRef<HTMLInputElement>(null);
+
   return (
     <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
       <div className="space-y-1">
@@ -50,8 +52,11 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         <div
           className={cn(
             `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            !isSel && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
           )}
+          tabIndex={-1}
+          onFocus={() => {setIsSel(true)}}
+          onBlur={() => {setIsSel(false)}}
         >
           <Input
             id="email"
@@ -61,19 +66,21 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             onChange={(e) => setEmail(e.target.value)}
             placeholder="name@example.com"
             className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
             autoComplete="on"
             autoFocus
+            ref={inputRef}
           />
           {email.length > 0 && (
             <XCircle
               className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-              onClick={() => setEmail("")}
+              onClick={() => {
+                  setEmail("")
+                  inputRef.current?.focus()
+              }}
             />
           )}
         </div>
-        {emailError?.email && !isFocused && (
+        {emailError?.email && !isSel && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
             <CircleAlert height={12} width={12} />
             {emailError.email}
@@ -85,4 +92,4 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
       </Button>
     </form>
   );
-});
+});
\ No newline at end of file

From 6454909bf2ff06bd3cb3b973eb271e8e2d687096 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Fri, 6 Sep 2024 17:38:55 +0530
Subject: [PATCH 2/8] made required css changes

---
 .../components/account/auth-forms/email.tsx    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index ef666ed85d8..320d305d10f 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -70,15 +70,17 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             autoFocus
             ref={inputRef}
           />
-          {email.length > 0 && (
-            <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+            {email.length > 0 && (
+              <button className="h-[46px] items-center content-center px-3 bg-red-500"
               onClick={() => {
-                  setEmail("")
-                  inputRef.current?.focus()
-              }}
-            />
-          )}
+                setEmail("")
+                inputRef.current?.focus()
+              }}>
+                <XCircle
+                  className="h-5 w-5 stroke-custom-text-400 hover:cursor-pointer text-xs"
+                />
+            </button>
+            )}
         </div>
         {emailError?.email && !isSel && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">

From f8318c10c81585ff33c11568004f5426d118365c Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Fri, 6 Sep 2024 18:05:56 +0530
Subject: [PATCH 3/8] replicated same for space component

---
 .../components/account/auth-forms/email.tsx   | 35 ++++++++++++-------
 .../components/account/auth-forms/email.tsx   |  2 +-
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/space/core/components/account/auth-forms/email.tsx b/space/core/components/account/auth-forms/email.tsx
index 6721aedab6f..cbdce81e2c5 100644
--- a/space/core/components/account/auth-forms/email.tsx
+++ b/space/core/components/account/auth-forms/email.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, FormEvent, useMemo, useState } from "react";
+import { FC, FormEvent, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
 import { CircleAlert, XCircle } from "lucide-react";
@@ -22,7 +22,6 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
   // states
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [email, setEmail] = useState(defaultEmail);
-  const [isFocused, setFocused] = useState(false);
 
   const emailError = useMemo(
     () => (email && !checkEmailValidity(email) ? { email: "Email is invalid" } : undefined),
@@ -41,6 +40,9 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
 
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
+  const [isSel, setIsSel] = useState(true)
+  const inputRef = useRef<HTMLInputElement>(null);
+
   return (
     <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
       <div className="space-y-1">
@@ -50,8 +52,11 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         <div
           className={cn(
             `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            !isSel && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
           )}
+          tabIndex={-1}
+          onFocus={() => {setIsSel(true)}}
+          onBlur={() => {setIsSel(false)}}
         >
           <Input
             id="email"
@@ -61,19 +66,23 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             onChange={(e) => setEmail(e.target.value)}
             placeholder="name@company.com"
             className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
             autoComplete="on"
             autoFocus
+            ref={inputRef}
           />
-          {email.length > 0 && (
-            <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-              onClick={() => setEmail("")}
-            />
-          )}
+            {email.length > 0 && (
+              <button className="h-[46px] items-center content-center px-3"
+              onClick={() => {
+                setEmail("")
+                inputRef.current?.focus()
+              }}>
+                <XCircle
+                  className="h-5 w-5 stroke-custom-text-400 hover:cursor-pointer text-xs"
+                />
+            </button>
+            )}
         </div>
-        {emailError?.email && !isFocused && (
+        {emailError?.email && !isSel && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
             <CircleAlert height={12} width={12} />
             {emailError.email}
@@ -85,4 +94,4 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
       </Button>
     </form>
   );
-});
+});
\ No newline at end of file
diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index 320d305d10f..5dd3797b1da 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -71,7 +71,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             ref={inputRef}
           />
             {email.length > 0 && (
-              <button className="h-[46px] items-center content-center px-3 bg-red-500"
+              <button className="h-[46px] items-center content-center px-3"
               onClick={() => {
                 setEmail("")
                 inputRef.current?.focus()

From 01f7d39db5addb2dfba9bb5480596d929e459428 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Fri, 6 Sep 2024 19:00:21 +0530
Subject: [PATCH 4/8] fixed variable name

---
 web/core/components/account/auth-forms/email.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index 5dd3797b1da..e046885a603 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -40,7 +40,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
 
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
-  const [isSel, setIsSel] = useState(true)
+  const [isFocus, setIsFocus] = useState(true)
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
@@ -52,11 +52,11 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         <div
           className={cn(
             `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isSel && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            !isFocus && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
           )}
           tabIndex={-1}
-          onFocus={() => {setIsSel(true)}}
-          onBlur={() => {setIsSel(false)}}
+          onFocus={() => {setIsFocus(true)}}
+          onBlur={() => {setIsFocus(false)}}
         >
           <Input
             id="email"
@@ -82,7 +82,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             </button>
             )}
         </div>
-        {emailError?.email && !isSel && (
+        {emailError?.email && !isFocus && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
             <CircleAlert height={12} width={12} />
             {emailError.email}

From 0e1e1ef2e1cfd5eefb09ea923e94939b7e32a632 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Fri, 6 Sep 2024 19:12:49 +0530
Subject: [PATCH 5/8] replicated for space

---
 space/core/components/account/auth-forms/email.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/space/core/components/account/auth-forms/email.tsx b/space/core/components/account/auth-forms/email.tsx
index cbdce81e2c5..62aa574e4b5 100644
--- a/space/core/components/account/auth-forms/email.tsx
+++ b/space/core/components/account/auth-forms/email.tsx
@@ -40,7 +40,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
 
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
-  const [isSel, setIsSel] = useState(true)
+  const [isFocus, setIsFocus] = useState(true)
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
@@ -52,11 +52,11 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         <div
           className={cn(
             `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isSel && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            !isFocus && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
           )}
           tabIndex={-1}
-          onFocus={() => {setIsSel(true)}}
-          onBlur={() => {setIsSel(false)}}
+          onFocus={() => {setIsFocus(true)}}
+          onBlur={() => {setIsFocus(false)}}
         >
           <Input
             id="email"
@@ -82,7 +82,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             </button>
             )}
         </div>
-        {emailError?.email && !isSel && (
+        {emailError?.email && !isFocus && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
             <CircleAlert height={12} width={12} />
             {emailError.email}

From 6ebd06bb86fe4f0e28d3ee93fd18f42bd4c30de4 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Fri, 6 Sep 2024 19:31:22 +0530
Subject: [PATCH 6/8] better variable name

---
 space/core/components/account/auth-forms/email.tsx | 10 +++++-----
 web/core/components/account/auth-forms/email.tsx   | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/space/core/components/account/auth-forms/email.tsx b/space/core/components/account/auth-forms/email.tsx
index 62aa574e4b5..ca82e05115e 100644
--- a/space/core/components/account/auth-forms/email.tsx
+++ b/space/core/components/account/auth-forms/email.tsx
@@ -40,7 +40,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
 
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
-  const [isFocus, setIsFocus] = useState(true)
+  const [isFocused, setIsFocused] = useState(true)
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
@@ -52,11 +52,11 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         <div
           className={cn(
             `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isFocus && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
           )}
           tabIndex={-1}
-          onFocus={() => {setIsFocus(true)}}
-          onBlur={() => {setIsFocus(false)}}
+          onFocus={() => {setIsFocused(true)}}
+          onBlur={() => {setIsFocused(false)}}
         >
           <Input
             id="email"
@@ -82,7 +82,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             </button>
             )}
         </div>
-        {emailError?.email && !isFocus && (
+        {emailError?.email && !isFocused && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
             <CircleAlert height={12} width={12} />
             {emailError.email}
diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index e046885a603..3555012e082 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -40,7 +40,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
 
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
-  const [isFocus, setIsFocus] = useState(true)
+  const [isFocused, setIsFocused] = useState(true)
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
@@ -52,11 +52,11 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         <div
           className={cn(
             `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isFocus && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
           )}
           tabIndex={-1}
-          onFocus={() => {setIsFocus(true)}}
-          onBlur={() => {setIsFocus(false)}}
+          onFocus={() => {setIsFocused(true)}}
+          onBlur={() => {setIsFocused(false)}}
         >
           <Input
             id="email"
@@ -82,7 +82,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             </button>
             )}
         </div>
-        {emailError?.email && !isFocus && (
+        {emailError?.email && !isFocused && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
             <CircleAlert height={12} width={12} />
             {emailError.email}

From c76d5dd3f08a04e1fe36a48c613dd67e43dd141b Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Mon, 9 Sep 2024 09:38:30 +0530
Subject: [PATCH 7/8] improved the css

---
 web/core/components/account/auth-forms/email.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index 3555012e082..1e96ed3f2f5 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -71,16 +71,14 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             ref={inputRef}
           />
             {email.length > 0 && (
-              <button className="h-[46px] items-center content-center px-3"
+            <XCircle
+              className="h-[46px] w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs"
               onClick={() => {
-                setEmail("")
-                inputRef.current?.focus()
-              }}>
-                <XCircle
-                  className="h-5 w-5 stroke-custom-text-400 hover:cursor-pointer text-xs"
-                />
-            </button>
-            )}
+                setEmail("");
+                inputRef.current?.focus();
+              }}
+            />
+          )}
         </div>
         {emailError?.email && !isFocused && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">

From 57dbc047a532172fc0f1fcfc53e282aa7131b191 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Mon, 9 Sep 2024 09:48:43 +0530
Subject: [PATCH 8/8] replicated for space

---
 .../core/components/account/auth-forms/email.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/space/core/components/account/auth-forms/email.tsx b/space/core/components/account/auth-forms/email.tsx
index ca82e05115e..f0b88407a83 100644
--- a/space/core/components/account/auth-forms/email.tsx
+++ b/space/core/components/account/auth-forms/email.tsx
@@ -71,16 +71,14 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             ref={inputRef}
           />
             {email.length > 0 && (
-              <button className="h-[46px] items-center content-center px-3"
+            <XCircle
+              className="h-[46px] w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs"
               onClick={() => {
-                setEmail("")
-                inputRef.current?.focus()
-              }}>
-                <XCircle
-                  className="h-5 w-5 stroke-custom-text-400 hover:cursor-pointer text-xs"
-                />
-            </button>
-            )}
+                setEmail("");
+                inputRef.current?.focus();
+              }}
+            />
+          )}
         </div>
         {emailError?.email && !isFocused && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">