Merge pull request #27 from CS3219-AY2425S1/edit-profile

Update UI and Include Checks for Username

Author: RingoftheKing

Frontend/package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",

Frontend/package.json

@@ -12,7 +12,6 @@ function EditProfile() {
     const [errorMessage, setErrorMessage] = useState('');
     const [successMessage, setSuccessMessage] = useState('');
     const [usernameError, setUsernameError] = useState(false);
-    const [emailError, setEmailError] = useState(false);
     const [passwordError, setPasswordError] = useState(false);
 
     useEffect(() => {
@@ -21,6 +20,7 @@ function EditProfile() {
             const response = await userService.getUser(id,
                 { headers: { Authorization: `Bearer ${sessionStorage.getItem('jwt_token')}` } });
             setUserData(response.data);
+            setEmail(response.data.data.email)
         }
         fetchUserData();
     }, [id]);
@@ -34,22 +34,30 @@ function EditProfile() {
         // Handle the user profile edit
         const newUser = {};
         if (username) newUser.username = username;
-        if (email) newUser.email = email;
         if (password) newUser.password = password;
 
         // Reset error messages
         setErrorMessage('');
         setSuccessMessage('');
         setUsernameError(false);
-        setEmailError(false);
         setPasswordError(false);
 
         // Validate inputs
-        if (!username && !email && !password) {
+        if (!username && !password) {
             setErrorMessage("Please fill in at least one field")
             return;
         }
 
+        const usernameRegex = /^[a-zA-Z0-9._]{3,20}$/;
+        const isValidUsername = usernameRegex.test(username)
+        
+        if(!isValidUsername) {
+            console.log("username is not valid:", username)
+            setUsernameError(true)
+            setErrorMessage("Username can only contain letters, numbers, dots (.), and underscores (_), and must be between 3 and 20 characters long.")
+            return;
+        }
+
         if (password !== confirmPassword) {
             setPasswordError(true);
             setErrorMessage('Passwords do not match');
@@ -72,7 +80,7 @@ function EditProfile() {
                     case 409:
                         setErrorMessage('Username or email already exists.');
                         setUsernameError(true);
-                        setEmailError(true);
+                        // setEmailError(true);
                         break;
                     case 500:
                         setErrorMessage('Server error. Please try again later.');
@@ -89,9 +97,24 @@ function EditProfile() {
     const goHome = () => navigate('/home')
     // Render user edit form based on userData
     return userData ? (
-        <div>
-            <h2>Edit Profile</h2>
-            <div className="right-side">
+        
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'left',
+            height: '100vh',
+            textAlign: 'center', // Centers text within child elements
+            margin: 30 // Ensures no default margin
+        }}>
+            <div style={{
+                width: '100%', // Full width
+                maxWidth: '600px', // Optional: limit width for better layout
+                padding: '20px',
+                backgroundColor: '#fff',
+                borderRadius: '8px' // Optional: rounded corners
+            }}>
+                <h2 style={{textAlign: 'left'}}>Edit Profile</h2>
+                <p style={{ textAlign: 'left'}}>Hi <strong>{email}</strong>, feel free to update any information below.</p>
                 <div className="input-container">
                     <form onSubmit={handleEditProfile}>
                         <InputField
@@ -100,29 +123,18 @@ function EditProfile() {
                             placeholder="Enter your username"
                             value={username}
                             onChange={(e) => {
-                                setUsername(e.target.value)
+                                setUsername(e.target.value);
                                 setUsernameError(false);
                             }}
                             error={usernameError}
                         />
-                        <InputField
-                            label="Email"
-                            type="email"
-                            placeholder="Enter your email"
-                            value={email}
-                            onChange={(e) => {
-                                setEmail(e.target.value)
-                                setEmailError(false);
-                            }}
-                            error={emailError}
-                        />
                         <InputField
                             label="Password"
                             type="password"
                             placeholder="Enter your password"
                             value={password}
                             onChange={(e) => {
-                                setPassword(e.target.value)
+                                setPassword(e.target.value);
                                 setPasswordError(false);
                             }}
                             error={passwordError}
@@ -133,27 +145,23 @@ function EditProfile() {
                             placeholder="Confirm your password"
                             value={confirmPassword}
                             onChange={(e) => {
-                                setConfirmPassword(e.target.value)
+                                setConfirmPassword(e.target.value);
                                 setPasswordError(false);
                             }}
                             error={passwordError}
                         />
-                        <div className='button-container'>
+                        <div className='button-container' style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
+                            <button type='button' onClick={goHome} className="create-account-link">
+                                Cancel
+                            </button>
                             <button type="submit" className="signup-button">
                                 Change Profile Details
                             </button>
                         </div>
-                        <div className='button-container'>
-                            <button type={'button'} onClick={goHome} className="signup-button">
-                                Cancel
-                            </button>
-                        </div>
+
                     </form>
-                    <div className='notification'>
-                        {/* Success Message */}
+                    <div className='notification' style={{ marginTop: '5px', textAlign: 'center' }}>
                         {successMessage && <p className="text-success mt-3">{successMessage}</p>}
-
-                        {/* Error Message */}
                         {errorMessage && <p className="text-danger mt-3">{errorMessage}</p>}
                     </div>
                 </div>