Merge pull request #104 from aadibhat09/main

Username is editable and stored locally
nighthawkcoders · Nov 4, 2024 · 93070d0 · 93070d0
2 parents f29069b + 44d2a96
commit 93070d0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/navigation/rate_and_relate/instabox/profile.md b/navigation/rate_and_relate/instabox/profile.md
@@ -125,7 +125,7 @@ author: Aadi, Aaditya, Aditya, Kanhay
                 <img id="profile-pic" src="{{site.baseurl}}/images/rate_and_relate/instabox/pfp_placeholder.jpg" alt="Profile Picture">
             </label>
             <input id="file-upload" type="file" class="file-input" accept="image/*" onchange="updateProfilePic(event)">
-            <h2>Username</h2>
+            <h2 id="username">Username</h2>
             <p>📍 Location: Hometown</p>
             <p>🌟 Status: "Always pushing the limits!"</p>
         </div>
@@ -149,6 +149,10 @@ author: Aadi, Aaditya, Aditya, Kanhay
             if (savedImage) {
                 document.getElementById("profile-pic").src = savedImage;
             }
+            const username = localStorage.getItem("username");
+            if (username) {
+                document.getElementById("username").innerText = username;
+            }
         };
         function updateProfilePic(event) {
             const file = event.target.files[0];

diff --git a/navigation/rate_and_relate/instabox/settings.md b/navigation/rate_and_relate/instabox/settings.md
@@ -61,6 +61,9 @@ author: Aadi, Aaditya, Aditya, Kanhay
     .settings-card label {
         display: block;
         margin: 10px 0 5px;
+        color: #777;
+    }
+    .settings-card label span{
         color: #bbb;
     }
     .settings-card input[type="text"],
@@ -133,42 +136,55 @@ author: Aadi, Aaditya, Aditya, Kanhay
         <div class="settings-card">
             <h2>Account Settings</h2>
             <!-- Username change -->
-            <label for="username">Change Username:</label>
+            <label for="username"><span>Change Username</span> (optional)</label>
             <input type="text" id="username" placeholder="Enter new username">
             <!-- Divider line -->
-            <div class="divider"></div>
-            <!-- Password change section -->
-            <label for="current-password">Current Password:</label>
-            <input type="password" id="current-password" placeholder="Enter current password">
-            <label for="new-password">New Password:</label>
+            <label for="new-password"><span>Change Password</span> (optional)</label>
             <div class="password-fields">
                 <input type="password" id="new-password" placeholder="New password">
                 <input type="password" id="confirm-password" placeholder="Confirm new password">
             </div>
+            <div class="divider"></div>
+            <!-- Password change section -->
+            <label for="current-password"><span>Current Password</span> (mandatory)</label>
+            <input type="password" id="current-password" placeholder="Enter current password">
             <!-- Save Changes button -->
-            <button class="save-btn" onclick="validatePasswords()">Save Changes</button>
+            <button class="save-btn" onclick="updateInfo()">Save Changes</button>
             <!-- Log Out button -->
             <button class="logout-btn">Log Out</button>
         </div>
     </div>
     <script>
-        function validatePasswords() {
+        function updateInfo() {  
+            const username = document.getElementById("username").value;
             const newPassword = document.getElementById("new-password").value;
             const confirmPassword = document.getElementById("confirm-password").value;
             const currentPassword = document.getElementById("current-password").value;
+            let usernameUpdated = false;
             if (currentPassword === "") {
                 alert("Please enter your current password.");
                 return;
             }
-            if (newPassword === "") {
-                alert("Please enter a new password.");
-                return;
+            if (username != "") {
+                localStorage.setItem("username", username);
+                usernameUpdated = true;
+            }
+            if (newPassword === "" && confirmPassword === "") {
+                if (usernameUpdated) {
+                    alert("Username updated!");
+                    return;
+                }
             }
             if (newPassword !== confirmPassword) {
                 alert("New passwords do not match.");
             } else {
-                alert("Password changed successfully!");
-                // Here, you would handle the form submission to update the user's password
+                if (usernameUpdated) {
+                    alert("Username and password updated!");
+                    return;
+                } else {
+                    alert("Password updated!");
+                    return;
+                }
             }
         }
     </script>