diff --git a/client/src/components/modal/auth/forgot-password.tsx b/client/src/components/modal/auth/forgot-password.tsx index b62088d..f2edbea 100644 --- 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) => { + 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) => { 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 (

Account Recover

-

Email or Username

+

Email

+ +
+
+
+

or

+
+
+
+

Username

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' />
diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css index a2493ec..e692c9b 100644 --- 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 index ae228d0..bbf69e2 100644 --- 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; - } } \ No newline at end of file diff --git a/client/src/pages/create-debate/editor.css b/client/src/pages/create-debate/editor.css index 6d75eda..196dbda 100644 --- 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; - } } \ No newline at end of file diff --git a/client/src/pages/create-debate/style.css b/client/src/pages/create-debate/style.css index 2704e3b..9c6ca06 100644 --- 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; }