Debugging v1beta

src/app/profile/profile.module.css

@@ -22,4 +22,9 @@
 
 .buttonContainer {
     margin: 0 0 1.5rem 0;
+}
+
+.settingsContainer {
+    width: 100%;
+    max-width: 25rem;
 }

src/components/profileSettings/ProfileSettings.js

@@ -23,16 +23,25 @@ export const ProfileSettings = ({ currentUser }) => {
     }));
   };
 
+  const isUsernameValid = (username) => {
+    const usernameRegex = /^[a-zA-Z0-9_-]{3,20}$/; // Allows 3-20 characters, alphanumeric, hyphens, and underscores
+    return usernameRegex.test(username);
+  };
+
   const validateForm = () => {
-    if (formData.username.length < 3) {
-      setError('Username must be at least 3 characters');
+    if (!isUsernameValid(formData.username)) {
+      setError(
+        'Username must be 3-20 characters and can only contain letters, numbers, hyphens, and underscores.'
+      );
       return false;
     }
+
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(formData.email)) {
       setError('Please enter a valid email address');
       return false;
     }
+
     setError('');
     return true;
   };
@@ -136,11 +145,12 @@ export const ProfileSettings = ({ currentUser }) => {
           <Button variant="aquamarine" onClick={handleEditClick}>
             {isEditing ? 'Save Settings' : 'Edit Settings'}
           </Button>
-          {error && <div className={styles.error}>{error}</div>}
+
 
           <Button variant="red" onClick={handleDeleteClick}>
             Delete Account
           </Button>
+          {error && <div className={styles.error}>{error}</div>}
         </div>
       </div>
       {showPasswordModal && (

src/components/profileSettings/ProfileSettings.module.css

@@ -2,6 +2,7 @@
   color: red;
   margin: 1rem;
   text-align: center;
+
 }
 
 .form {
@@ -23,3 +24,7 @@
   gap: 1.5rem;
 }
 
+.mainContainer {
+
+}
+

src/components/signup/Signup.js

@@ -23,14 +23,20 @@ export default function Signup() {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
+  const isUsernameValid = (username) => {
+    const usernameRegex = /^[a-zA-Z0-9_-]{3,20}$/;
+    return usernameRegex.test(username);
+  };
+
   const isFormValid = () => {
     const { email, password, confirmPassword, username } = formData;
     return (
       email.trim() !== '' &&
       password.trim() !== '' &&
       confirmPassword.trim() !== '' &&
       username.trim() !== '' &&
-      password === confirmPassword
+      password === confirmPassword &&
+      isUsernameValid(username)
     );
   };
 
@@ -51,6 +57,13 @@ export default function Signup() {
       return;
     }
 
+    if (!isUsernameValid(username)) {
+      setError(
+        'Username must be 3-20 characters and can only contain letters, numbers, hyphens, and underscores.'
+      );
+      return;
+    }
+
     if (password !== confirmPassword) {
       setError('Passwords do not match');
       return;
@@ -145,7 +158,7 @@ export default function Signup() {
             variant={isFormValid() ? 'blue' : 'disabled'}
             disabled={!isFormValid()}
           >
-            Signup
+            Sign Up
           </Button>
         </form>
       </div>