username validation

frontend/app/layout.js

@@ -6,7 +6,7 @@ import { ToastContainer, Flip } from 'react-toastify';
 import { CheckCircleIcon, InformationCircleIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import Sidebar from "@components/Sidebar";
 
-import { ToastProvider } from "@/lib/ToastContext"; // Update with your file path
+import { ToastProvider } from "@lib/ToastContext";
 
 export default function RootLayout({ children }) {
   const contentStyle = {

frontend/app/page.js

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
 import NexusAuthApi from "@lib/Nexus_Auth_API";
 
 export default function Home() {
@@ -8,6 +9,7 @@ export default function Home() {
   const [userID, setUserID] = useState(null);
   const [token, setToken] = useState(null);
   const [accessLevel, setAccessLevel] = useState(null);
+  const router = useRouter();
 
   useEffect(() => {
     setUsername(localStorage.getItem('me'));
@@ -28,6 +30,7 @@ export default function Home() {
     NexusAuthApi.logout(userID, token)
       .then(() => {
         clearLocalStorage();
+        router.push('/');
         window.location.reload();
       })
       .catch((error) => {

frontend/components/NexusAuth.js

@@ -12,10 +12,14 @@ const SignupForm = ({ onSignup }) => {
     const [confirmPassword, setConfirmPassword] = useState('');
     const [email, setEmail] = useState('');
     const [usernameAvailable, setUsernameAvailable] = useState(null); // null for initial state
+    const [doesUsernameContainInvalidChars, setDoesUsernameContainInvalidChars] = useState(false);
+    const [doesUsernameExceedMinLength, setDoesUsernameExceedMinLength] = useState(false);
     const [passwordValid, setPasswordValid] = useState(false); // Initially invalid
     const [formValid, setFormValid] = useState(false);
     const [debounceTimeout, setDebounceTimeout] = useState(null); // Store timeout ID
 
+    const minUsernameLength = 3;
+
     const validatePassword = (password) => {
         return password.length >= 8;
     };
@@ -32,11 +36,29 @@ const SignupForm = ({ onSignup }) => {
             clearTimeout(debounceTimeout);
         }
 
-        if (newUsername.trim().length > 0) {
+        // Check for invalid characters
+        const invalidChars = /[^a-zA-Z0-9_]/g;
+        if (invalidChars.test(newUsername)) {
+            setDoesUsernameContainInvalidChars(true);
+            setTimeout(() => {
+                setDoesUsernameContainInvalidChars(false);
+            }, 2000); // Show error for 2 seconds
+        }
+
+        // Basic sanitization to prevent SQL injection
+        const sanitizedUsername = newUsername.replace(invalidChars, '');
+
+        if (sanitizedUsername.length < minUsernameLength) {
+            setDoesUsernameExceedMinLength(false);
+            return;
+        } else {
+            setDoesUsernameExceedMinLength(true);}
+
+        if (sanitizedUsername.trim().length > 0) {
             // Set a new timeout to check availability
             const newTimeout = setTimeout(async () => {
                 try {
-                    const response = await NexusAuthApi.isUsernameAvailable(newUsername);
+                    const response = await NexusAuthApi.isUsernameAvailable(sanitizedUsername);
                     setUsernameAvailable(response?.is_available === true);
                 } catch (error) {
                     console.error('Error checking username availability:', error);
@@ -48,6 +70,9 @@ const SignupForm = ({ onSignup }) => {
         } else {
             setUsernameAvailable(null); // Reset availability check when input is empty
         }
+
+        // Set sanitized username
+        setUsername(sanitizedUsername);
     };
 
     const handlePasswordChange = (e) => {
@@ -76,7 +101,8 @@ const SignupForm = ({ onSignup }) => {
             usernameAvailable === true &&
             password === confirmPassword &&
             passwordValid &&
-            username.length > 0
+            username.length >= minUsernameLength &&
+            !doesUsernameContainInvalidChars
         );
     }, [username, password, confirmPassword, usernameAvailable, passwordValid]);
 
@@ -94,6 +120,12 @@ const SignupForm = ({ onSignup }) => {
                 {usernameAvailable === true && username.length > 0 && (
                     <CheckCircleIcon className="h-5 w-5 text-green-500" />
                 )}
+                {doesUsernameExceedMinLength === false && (
+                    <p className="error-message text-red-500">Username must have more than {minUsernameLength} characters.</p>
+                )}
+                {doesUsernameContainInvalidChars === true && (
+                    <p className="error-message text-red-500">Username cannot contain invalid characters.</p>
+                )}
                 {usernameAvailable === false && (
                     <p className="error-message text-red-500">Username is already taken</p>
                 )}