client: add validation logic in claim username

Casuals4Fun · May 14, 2024 · 44f312f · 44f312f
1 parent a50fb47
commit 44f312f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git a/client/src/components/card/claim-username.css b/client/src/components/card/claim-username.css
@@ -22,7 +22,7 @@
     gap: 10px;
 }
 
-#claim-username p {
+#claim-username p:first-child {
     width: fit-content;
     background-size: 200% 100%;
     background: linear-gradient(to right, var(--shine_text_primary) 0, var(--shine_text_secondary) 10%, var(--shine_text_tertiary) 20%);

diff --git a/client/src/components/card/claim-username.tsx b/client/src/components/card/claim-username.tsx
@@ -1,23 +1,43 @@
 import "./claim-username.css"
 import { useCallback, useState } from "react"
+import { AuthTab, useAuthStore } from "../../store/useAuthStore"
 import { PiArrowUpRightBold } from "react-icons/pi"
-// import { LoadingSVG } from "../loading/svg"
+import { LoadingSVG } from "../loading/svg"
 
 const ClaimUsername = () => {
+    const { setAuthTab } = useAuthStore();
+
     const [isSubmitted, setIsSubmitted] = useState(false);
-    const [username, setUsername] = useState('');
+    const [username, setUsername] = useState(localStorage.getItem("username") || '');
+    const [loading, setLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
 
     const handleKeyPress = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === ' ') e.preventDefault();
     }, []);
 
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const inputUsername = e.target.value;
+        setUsername(inputUsername);
+
+        const usernameRegex = /^[a-zA-Z0-9_-]+$/;
+        if (inputUsername) {
+            if (!usernameRegex.test(inputUsername)) {
+                setErrorMessage('Username can only contain alphanumeric characters, underscores (_) and hyphens (-). No spaces or other special characters are allowed.');
+            } else setErrorMessage('');
+        }
+    }
+
     const handleUsernameSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         setIsSubmitted(true);
         setTimeout(() => setIsSubmitted(false), 500);
 
-        if (username.trim()) {
+        if (username && !errorMessage) {
+            setLoading(true);
 
+            localStorage.setItem("username", username);
+            setTimeout(() => setAuthTab(AuthTab.Signup), 2000);
         }
     }
 
@@ -29,17 +49,21 @@ const ClaimUsername = () => {
                 <input
                     placeholder='johndoe'
                     value={username}
-                    onChange={e => setUsername(e.target.value)}
+                    onChange={handleUsernameChange}
                     onKeyPress={handleKeyPress}
-                    className={isSubmitted && !username.trim() ? "shake" : ""}
-                    style={{ border: isSubmitted && !username.trim() ? "2px dotted white" : "" }}
+                    className={isSubmitted && (!username || errorMessage) ? "shake" : ""}
+                    style={{ border: isSubmitted && (!username || errorMessage) ? "2px dotted white" : "" }}
                 />
             </div>
-            <button className='submit-btn'>
+            <button className='submit-btn' disabled={loading}>
                 <span>CLAIM USERNAME</span>
-                <PiArrowUpRightBold size={20} color='#FFFFFF' />
-                {/* <LoadingSVG size={20} color='#FFFFFF' /> */}
+                {!loading ? (
+                    <PiArrowUpRightBold size={20} color='#FFFFFF' />
+                ) : (
+                    <LoadingSVG size={20} color='#FFFFFF' />
+                )}
             </button>
+            {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
         </form>
     )
 }

diff --git a/client/src/components/modal/auth/brief-info.tsx b/client/src/components/modal/auth/brief-info.tsx
@@ -25,8 +25,17 @@ const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
     const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
         // eslint-disable-next-line no-useless-escape
-        const specialCharRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
-        if (specialCharRegex.test(value)) {
+        const specialCharRegex = /[@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
+        const usernameRegex = /^[a-zA-Z0-9_-]+$/;
+
+        let isValid = true;
+        if (name === 'username') {
+            isValid = value.length > 0 && usernameRegex.test(value);
+        } else if (name === 'first_name' || name === 'last_name') {
+            isValid = value.length > 0 && !specialCharRegex.test(value);
+        }
+
+        if (!isValid && value.length > 0) {
             return toast.warning('Special characters not allowed.');
         }
 
@@ -106,6 +115,7 @@ const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                         setAuthTab(AuthTab.Closed);
                         setIsAuthenticated(AuthStatus.Authenticated);
 
+                        localStorage.removeItem('username');
                         navigate('/');
                     }
                     else {

diff --git a/client/src/components/modal/auth/index.tsx b/client/src/components/modal/auth/index.tsx
@@ -29,7 +29,7 @@ const AuthModal = () => {
         email: tempUser.email || "",
         password: "",
         avatar: tempUser.avatar || "",
-        username: tempUser.username || "",
+        username: localStorage.getItem("username") || tempUser.username || "",
         first_name: tempUser.first_name || "",
         last_name: tempUser.last_name || ""
     }));