client: wip forgot password component

Casuals4Fun · Jul 16, 2024 · 4ac982d · 4ac982d
2 parents 1c432ed + 003fc6e
commit 4ac982d
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 41 deletions.
diff --git a/client/src/components/modal/auth/forgot-password.tsx b/client/src/components/modal/auth/forgot-password.tsx
@@ -1,47 +1,87 @@
-import { useState } from "react"
-import { useAuthStore, AuthTab } from "../../../store/useAuthStore"
-// import { LoadingSVG } from "../../loading/svg"
+import { useState, useCallback } from "react";
+import { useAuthStore, AuthTab } from "../../../store/useAuthStore";
 
 const ForgotPassword = () => {
     const { setAuthTab } = useAuthStore();
 
-    const [id, setID] = useState('');
+    const [forgotData, setForgotData] = useState({
+        email: "",
+        username: ""
+    });
     const [isSubmitted, setIsSubmitted] = useState(false);
     const [validationState, setValidationState] = useState({
-        isIdValid: true,
-        isOtpValid: true,
-        isPasswordValid: true
+        isEmailValid: true,
+        isUsernameValid: true
     });
 
+    const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setForgotData(prevState => ({
+            ...prevState,
+            [name]: value
+        }));
+
+        setValidationState(prevState => ({
+            ...prevState,
+            [`is${name.charAt(0).toUpperCase() + name.slice(1)}Valid`]: !!value
+        }));
+    }, []);
+
     const handleForgotSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         setIsSubmitted(true);
 
-        const trimmedId = id.trim();
-        setID(trimmedId);
-        setValidationState(prevState => ({
+        const trimmedEmail = forgotData.email.trim();
+        const trimmedUsername = forgotData.username.trim();
+
+        setForgotData(prevState => ({
             ...prevState,
-            isIdValid: !!trimmedId
+            email: trimmedEmail,
+            username: trimmedUsername
         }));
-    }
+
+        setValidationState({
+            isEmailValid: !!trimmedEmail,
+            isUsernameValid: !!trimmedUsername
+        });
+
+        if (trimmedEmail || trimmedUsername) {
+            // Perform further actions for forgot password
+        }
+    };
 
     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>
+                    <p>Email</p>
+                    <input
+                        name="email"
+                        value={forgotData.email}
+                        onChange={handleInputChange}
+                        className={`${isSubmitted && !validationState.isEmailValid ? "shake" : ""}`}
+                        style={{ borderColor: isSubmitted && !validationState.isEmailValid ? "red" : "" }}
+                        placeholder='Enter your email'
+                    />
+                </div>
+                <div className='or-divider'>
+                    <div className='divider' />
+                    <p>or</p>
+                    <div className='divider' />
+                </div>
+                <div className='input__container'>
+                    <p>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'
+                        name="username"
+                        value={forgotData.username}
+                        onChange={handleInputChange}
+                        className={`${isSubmitted && !validationState.isUsernameValid ? "shake" : ""}`}
+                        style={{ borderColor: isSubmitted && !validationState.isUsernameValid ? "red" : "" }}
+                        placeholder='Enter your username'
                     />
                 </div>
                 <button type='submit'>
-                    {/* <LoadingSVG size={23} /> */}
                     Check
                 </button>
                 <div className='extra-btn'>

diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css
@@ -133,6 +133,10 @@
     font-weight: 600;
 }
 
+#forgot .or-divider {
+    margin: 0;
+}
+
 #auth-modal #brief-form {
     margin-top: 20px;
 }

diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
@@ -212,6 +212,10 @@
         display: none;
     }
 
+    #left-sidebar .links__wrapper p {
+        display: none;
+    }
+
     #left-sidebar .footer-active {
         position: absolute;
         bottom: 0;
@@ -224,10 +228,4 @@
     #left-sidebar .underline::after {
         display: none;
     }
-}
-
-@media screen and (max-width: 420px) {
-    #left-sidebar .links__wrapper p {
-        display: none;
-    }
 }
diff --git a/client/src/pages/create-debate/editor.css b/client/src/pages/create-debate/editor.css
@@ -3,6 +3,7 @@
 }
 
 .e-richtexteditor {
+    position: relative;
     min-width: 100%;
     max-width: 100%;
     min-height: 40vh !important;
@@ -16,11 +17,6 @@
     overflow-x: auto;
 }
 
-.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
-.e-richtexteditor .e-toolbar-container.e-rte-tb-float {
-    top: -20px !important;
-}
-
 .e-richtexteditor .e-toolbar-wrapper {
     z-index: 4 !important;
     background-color: var(--bg_secondary);
@@ -81,12 +77,4 @@
 
 .e-richtexteditor .e-rte-character-count {
     z-index: 0 !important;
-}
-
-@media screen and (max-width: 480px) {
-
-    .e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
-    .e-richtexteditor .e-toolbar-container.e-rte-tb-float {
-        top: -70px !important;
-    }
 }
diff --git a/client/src/pages/create-debate/style.css b/client/src/pages/create-debate/style.css
@@ -17,6 +17,7 @@
 #create {
     position: relative;
     overflow: hidden;
+    overscroll-behavior: none;
 }
 
 #create-debate {
@@ -126,8 +127,7 @@
     display: none;
 }
 
-.preview .e-richtexteditor,
-.preview .e-richtexteditor .e-rte-content .e-content {
+.preview .e-richtexteditor {
     min-height: fit-content !important;
     height: fit-content !important;
     background-color: var(--body_background);
@@ -139,6 +139,8 @@
 }
 
 .preview .e-richtexteditor .e-rte-content .e-content {
+    min-height: fit-content !important;
+    height: fit-content !important;
     padding-top: 0;
     padding-bottom: 0;
 }