client: update card styling, add forgot tab

Casuals4Fun · Jun 17, 2024 · 25b035e · 25b035e
2 parents e74ca86 + b27f29b
commit 25b035e
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 15 deletions.
diff --git a/client/src/components/card/claim-username.css b/client/src/components/card/claim-username.css
@@ -1,10 +1,10 @@
 :root {
-    --claim-border: #000;
-    --username-bg: #E8E8E8;
+    --claim-border: #E5E4E2;
+    --username-bg: #E5E4E2;
     --username-color: #000;
     --username-input-bg: #FFF;
     --username-input-color: #000;
-    --submit-bg: #1F1F21;
+    --submit-bg: #FFF;
 }
 
 [data-theme='dark'] {
@@ -99,7 +99,11 @@
 }
 
 #claim-username .submit-btn span {
-    color: #FFFFFF;
+    color: var(--username-color);
+}
+
+#claim-username .submit-btn svg {
+    color: var(--username-color);
 }
 
 @media screen and (max-width: 1024px) {

diff --git a/client/src/components/card/claim-username.tsx b/client/src/components/card/claim-username.tsx
@@ -72,15 +72,15 @@ const ClaimUsername = () => {
                     onChange={handleUsernameChange}
                     onKeyPress={handleKeyPress}
                     className={isSubmitted && (!username || message.type === 'error') ? "shake" : ""}
-                    style={{ border: isSubmitted && (!username || message.type === 'error') ? "2px dotted white" : "" }}
+                    style={{ border: isSubmitted && (!username || message.type === 'error') ? "2px dotted var(--username-color)" : "" }}
                 />
             </div>
             <button className='submit-btn' disabled={loading}>
                 <span>CLAIM USERNAME</span>
                 {!loading ? (
-                    <PiArrowUpRightBold size={20} color='#FFFFFF' />
+                    <PiArrowUpRightBold size={20} />
                 ) : (
-                    <LoadingSVG size={20} color='#FFFFFF' />
+                    <LoadingSVG size={20} />
                 )}
             </button>
             {message.content && <p style={{ color: message.type === 'error' ? 'red' : 'green' }}>{message.content}</p>}

diff --git a/client/src/components/modal/auth/forgot-password.tsx b/client/src/components/modal/auth/forgot-password.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react"
+import { useAuthStore, AuthTab } from "../../../store/useAuthStore"
+// import { LoadingSVG } from "../../loading/svg"
+
+const ForgotPassword = () => {
+    const { setAuthTab } = useAuthStore();
+
+    const [id, setID] = useState('');
+    const [isSubmitted, setIsSubmitted] = useState(false);
+    const [validationState, setValidationState] = useState({
+        isIdValid: true,
+        isOtpValid: true,
+        isPasswordValid: true
+    });
+
+    const handleForgotSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setIsSubmitted(true);
+
+        const trimmedId = id.trim();
+        setID(trimmedId);
+        setValidationState(prevState => ({
+            ...prevState,
+            isIdValid: !!trimmedId
+        }));
+    }
+
+    return (
+        <div id='forgot'>
+            <h3>Account Recover</h3>
+            <form id='forgot-form' className='form__container' onSubmit={handleForgotSubmit}>
+                <div className='input__container'>
+                    <p>Email or Username</p>
+                    <input
+                        name="id"
+                        value={id}
+                        onChange={e => setID(e.target.value)}
+                        className={`${isSubmitted && !validationState.isIdValid ? "shake" : ""}`}
+                        style={{ borderColor: isSubmitted && !validationState.isIdValid ? "red" : "" }}
+                        placeholder='Enter your email or username'
+                    />
+                </div>
+                <button type='submit'>
+                    {/* <LoadingSVG size={23} /> */}
+                    Check
+                </button>
+                <div className='extra-btn'>
+                    <p><span onClick={() => setAuthTab(AuthTab.Login)}>Go Back</span></p>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default ForgotPassword;
diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css
@@ -83,13 +83,18 @@
 
 #login,
 #signup,
-#brief {
+#brief,
+#forgot {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
+#forgot {
+    gap: 20px;
+}
+
 #auth-modal h3 {
     font-size: 30px;
     font-weight: 500;
@@ -182,7 +187,14 @@
     position: absolute;
 }
 
+#auth-modal .form__container .extra-btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
 #auth-modal .form__container p {
+    width: fit-content;
     font-size: 17px;
 }
 
@@ -307,6 +319,7 @@
         width: 100%;
         height: 100%;
         flex-direction: column;
+        gap: 10px;
         border: none;
         border-radius: unset;
     }
@@ -328,13 +341,14 @@
     }
 
     .auth__container .left__container {
+        width: 40%;
         display: flex;
         margin: 0 auto;
         overflow-y: unset;
     }
 
     .auth__container .left__container .lottie-anim {
-        width: 95%;
+        width: 100%;
         height: auto;
     }
 
@@ -352,4 +366,10 @@
     #auth-modal .auth__header p {
         font-size: 16px;
     }
+
+    #auth-modal .form__container .extra-btn {
+        /* align-items: flex-start; */
+        gap: 10px;
+        flex-direction: column;
+    }
 }
diff --git a/client/src/components/modal/auth/index.tsx b/client/src/components/modal/auth/index.tsx
@@ -7,6 +7,7 @@ import WavingHand from "../../../lottie/WavingHand.json"
 import LoginTab from "./login-tab"
 import SignupTab from "./signup-tab"
 import BriefInfo from "./brief-info"
+import ForgotPassword from "./forgot-password"
 import { IoCloseOutline } from "react-icons/io5"
 
 type RegisterData = {
@@ -66,11 +67,13 @@ const AuthModal = () => {
                             registerData={registerData}
                             setRegisterData={setRegisterData}
                         />
-                    ) : authTab === AuthTab.Info && (
+                    ) : authTab === AuthTab.Info ? (
                         <BriefInfo
                             registerData={registerData}
                             setRegisterData={setRegisterData}
                         />
+                    ) : authTab === AuthTab.Forgot && (
+                        <ForgotPassword />
                     )}
                 </div>
                 <>

diff --git a/client/src/components/modal/auth/login-tab.tsx b/client/src/components/modal/auth/login-tab.tsx
@@ -134,7 +134,10 @@ const LoginTab = () => {
                 <button type='submit' disabled={isAuthenticated === AuthStatus.Authenticating}>
                     {isAuthenticated === AuthStatus.Authenticating && isSubmitted ? <LoadingSVG size={23} /> : 'Login'}
                 </button>
-                <p>New here? <span onClick={() => setAuthTab(AuthTab.Signup)}>Create Account</span></p>
+                <div className='extra-btn'>
+                    <p>New here? <span onClick={() => setAuthTab(AuthTab.Signup)}>Create Account</span></p>
+                    <p><span onClick={() => setAuthTab(AuthTab.Forgot)}>Forgot Password</span></p>
+                </div>
             </form>
         </div>
     );

diff --git a/client/src/components/modal/auth/signup-tab.tsx b/client/src/components/modal/auth/signup-tab.tsx
@@ -112,7 +112,9 @@ const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                 <button type='submit' disabled={isAuthenticated === AuthStatus.Authenticating}>
                     {isAuthenticated === AuthStatus.Authenticating ? <LoadingSVG size={23} /> : 'Continue'}
                 </button>
-                <p>Already have an account? <span onClick={() => setAuthTab(AuthTab.Login)}>Log In</span></p>
+                <div className='extra-btn'>
+                    <p>Already have an account? <span onClick={() => setAuthTab(AuthTab.Login)}>Log In</span></p>
+                </div>
             </form>
         </div>
     );

diff --git a/client/src/globals.css b/client/src/globals.css
@@ -60,7 +60,7 @@
     --nav_profile_username: #a6a6a6;
     --explore_input_bg: #E8E8E8;
     --explore_input_placeholder: #606060;
-    --card_background: #ffffff;
+    --card_background: #f4f4f4;
     --card_color_primary: #111111;
     --card_color_secondary: #606060;
     --card_border: #e5e4e2;
@@ -78,7 +78,7 @@
     --nav_profile_username: #606060;
     --explore_input_bg: #1f1f21;
     --explore_input_placeholder: #a0a0a0;
-    --card_background: #0a0a0a;
+    --card_background: #121212;
     --card_color_primary: #ffffff;
     --card_color_secondary: #a5a5a5;
     --card_border: #212122;

diff --git a/client/src/store/useAuthStore.ts b/client/src/store/useAuthStore.ts
@@ -4,7 +4,8 @@ export enum AuthTab {
     Closed = 'closed',
     Login = 'login',
     Signup = 'signup',
-    Info = 'info'
+    Info = 'info',
+    Forgot = 'forgot',
 }
 
 export enum AuthStatus {