From 2dcfa5147608b4c3096b274f0d3939853aa19554 Mon Sep 17 00:00:00 2001
From: iKAN2025 <142475176+iKAN2025@users.noreply.github.com>
Date: Wed, 3 Jul 2024 16:06:03 -0700
Subject: [PATCH] profile

---
 _includes/create_user.html |  61 +++-
 navigation/backend.md      | 557 +++++++++++++++++--------------------
 navigation/profile.md      | 320 ++++++++++++++++++++-
 3 files changed, 626 insertions(+), 312 deletions(-)
diff --git a/_includes/create_user.html b/_includes/create_user.html
index 3d284102f..bfc65986a 100644
--- a/_includes/create_user.html
+++ b/_includes/create_user.html
@@ -3,6 +3,56 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Create User</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: black;
+            padding: 20px;
+        }
+
+        form {
+            max-width: 400px;
+            margin: 0 auto;
+            background-color: darkblue;
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        label {
+            display: block;
+            margin-bottom: 10px;
+            font-weight: bold;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+            width: calc(100% - 10px);
+            padding: 8px;
+            margin-bottom: 15px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 16px;
+        }
+
+        input[type="checkbox"] {
+            margin-top: 5px;
+        }
+
+        button {
+            background-color: #3498db;
+            color: #ffffff;
+            border: none;
+            border-radius: 4px;
+            padding: 10px 20px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        button:hover {
+            background-color: #2980b9;
+        }
+    </style>
 </head>
 <body>
     <form id="userForm">
@@ -18,6 +68,7 @@
         <label for="kasm_server_needed">Kasm Server Needed:</label>
         <input type="checkbox" id="kasm_server_needed" name="kasm_server_needed"><br>
 
+
         <button type="button" onclick="submitForm()">Create User</button>
     </form>
 
@@ -25,17 +76,19 @@
         async function submitForm() {
             const form = document.getElementById('userForm');
             const formData = new FormData(form);
-
+            
+            // Collect selected sections
+          
             // Create the payload
             const payload = {
                 name: formData.get('name'),
                 uid: formData.get('uid'),
                 password: formData.get('password'),
-                kasm_server_needed: formData.get('kasm_server_needed') ? true : false
+                kasm_server_needed: formData.get('kasm_server_needed') === 'on',
             };
 
             try {
-                const response = await fetch('http://127.0.0.1:8086/api/user', {
+                const response = await fetch('http://127.0.0.1:8086/api/users/', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json'
@@ -57,3 +110,5 @@
     </script>
 </body>
 </html>
+
+
diff --git a/navigation/backend.md b/navigation/backend.md
index 588cf6004..198f56e4a 100644
--- a/navigation/backend.md
+++ b/navigation/backend.md
@@ -5,338 +5,281 @@ permalink: /login
 search_exclude: true
 ---
 
-
 {% include nav/flask.html %}
 
-
 <style>
 .login-container {
-   display: flex;
-   justify-content: space-between;
-   flex-wrap: wrap;  /* allows the cards to wrap onto the next line if the screen is too small */
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap; /* allows the cards to wrap onto the next line if the screen is too small */
 }
 
-
 .login-card {
-   margin-top: 0;  /* remove the top margin */
-   width: 45%;
-   border: 1px solid #ddd;
-   border-radius: 5px;
-   padding: 20px;
-   box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-   margin-bottom: 20px;
-   overflow-x: auto; /* Enable horizontal scrolling */
+    margin-top: 0; /* remove the top margin */
+    width: 45%;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    margin-bottom: 20px;
+    overflow-x: auto; /* Enable horizontal scrolling */
 }
 
-
 .login-card h1 {
-   margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
-
 .login-card table {
-   width: 100%;
-   margin-top: 20px;
+    width: 100%;
+    margin-top: 20px;
 }
 
-
 .details-button {
-   display: block;
-   width: 100%;
-   padding: 10px;
-   margin-top: 20px;
-   background-color: #007BFxF;
-   color: white;
-   border: none;
-   border-radius: 5px;
-   cursor: pointer;
-   text-align: center;  /* center the text */
+    display: block;
+    width: 100%;
+    padding: 10px;
+    margin-top: 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    text-align: center; /* center the text */
 }
 
-
 .details-button:hover {
-   background-color: #0056b3;
+    background-color: #0056b3;
 }
 </style>
 
-
-
-
 <div class="login-container">
-
-
-<!-- Java Login Form -->
-<div class="login-card">
-   <h1 id="javaTitle"> User Login (Java)</h1>
-   <form id="javaForm" action="javascript:javaLogin()">
-       <p><label>
-           User ID:
-           <input type="text" name="uid" id="uid" required>
-       </label></p>
-       <p><label>
-           Password:
-           <input type="password" name="password" id="password" required>
-       </label></p>
-       <p>
-           <button>Login</button>
-       </p>
-       <p id="java-message" style="color: red;"></p>
-   </form>
-   <!-- Data Table Layout -->
-   <table id="javaTable">
-       <thead>
-       <tr>
-           <th>Name</th>
-           <th>ID</th>
-           <th>Age</th>
-           <th>Role</th>
-       </tr>
-       </thead>
-       <tbody id="javaResult">
-           <!-- javascript generated data -->
-       </tbody>
-   </table>
-   <a href="{{site.baseurl}}/javaUI" id="javaButton" class="details-button">Java Details</a>
-</div>
-
-
-<!-- Python Login Form -->
-<div class="login-card">
-   <h1 id="pythonTitle">User Login (Python)</h1>
-   <form id="pythonForm" action="javascript:pythonLogin()">
-       <p><label>
-           User ID:
-           <input type="text" name="python-uid" id="python-uid" required>
-       </label></p>
-       <p><label>
-           Password:
-           <input type="password" name="python-password" id="python-password" required>
-       </label></p>
-       <p>
-           <button>Login</button>
-       </p>
-       <p id="python-message" style="color: red;"></p>
-   </form>
-   <table id="pythonTable">
-       <thead>
-       <tr>
-          <th>ID</th>
-               <th>Name</th>
-               <th>UID</th>
-               <th>Role</th>
-               <th>Profile Picture</th>
-               <th>KASM Server Needed</th>
-               <th>Classes</th>
+    <!-- Java Login Form -->
+    <div class="login-card">
+        <h1 id="javaTitle"> User Login (Java)</h1>
+        <form id="javaForm" onsubmit="javaLogin(); return false;">
+            <p>
+                <label>
+                    User ID:
+                    <input type="text" name="uid" id="uid" required>
+                </label>
+            </p>
+            <p>
+                <label>
+                    Password:
+                    <input type="password" name="password" id="password" required>
+                </label>
+            </p>
+            <p>
+                <button type="submit">Login</button>
+            </p>
+            <p id="java-message" style="color: red;"></p>
+        </form>
+        <!-- Data Table Layout -->
+        <table id="javaTable">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>ID</th>
+                    <th>Age</th>
+                    <th>Roles</th>
                 </tr>
-       </thead>
-       <tbody id="pythonResult">
-           <!-- javascript generated data -->
-       </tbody>
-   </table>
-   <a href="#" id="pythonButton" class="details-button">Python Details</a>
+            </thead>
+            <tbody id="javaResult">
+                <!-- javascript generated data -->
+            </tbody>
+        </table>
+        <a href="{{ site.baseurl }}/javaUI" id="javaButton" class="details-button">Java Details</a>
+    </div>
+
+    <!-- Python Login Form -->
+    <div class="login-card">
+        <h1 id="pythonTitle">User Login (Python)</h1>
+        <form id="pythonForm" onsubmit="pythonLogin(); return false;">
+            <p>
+                <label>
+                    User ID:
+                    <input type="text" name="python-uid" id="python-uid" required>
+                </label>
+            </p>
+            <p>
+                <label>
+                    Password:
+                    <input type="password" name="python-password" id="python-password" required>
+                </label>
+            </p>
+            <p>
+                <button type="submit">Login</button>
+            </p>
+            <p id="python-message" style="color: red;"></p>
+        </form>
+        <table id="pythonTable">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>UID</th>
+                    <th>Role</th>
+                    <th>Profile Picture</th>
+                    <th>KASM Server Needed</th>
+                    <th>Classes</th>
+                </tr>
+            </thead>
+            <tbody id="pythonResult">
+                <!-- javascript generated data -->
+            </tbody>
+        </table>
+        <a href="#" id="pythonButton" class="details-button">Python Details</a>
+    </div>
 </div>
 
-
-
-
-
-
 <script type="module">
-   import { login, javaURI, pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
-
-
- window.javaLogin = function() {
-   const options = {};
-   options.URL = javaURI + '/authenticate';
-   options.callback = javaDatabase;
-   options.message = "java-message";
-   options.method = "POST";
-   options.cache = "no-cache";
-   options.body = {
-       email: document.getElementById("uid").value,
-       password: document.getElementById("password").value,
-   };
-   login(options);
-}
-
-
-// Method to fetch and display data for Java
-function javaDatabase() {
-   const URL = javaURI + '/api/person';
-   const loginForm = document.getElementById('javaForm');
-   const dataTable = document.getElementById('javaTable');
-   const dataButton = document.getElementById('javaButton');
-   const resultContainer = document.getElementById("javaResult");
-   resultContainer.innerHTML = '';
-
-
-   fetch(URL, fetchOptions)
-       .then(response => {
-           if (response.status !== 200) {
-               loginForm.style.display = 'block';
-               dataTable.style.display = 'none';
-               dataButton.style.display = 'none';
-
-
-               const errorMsg = "Spring server response: " + response.status;
-               console.log(errorMsg);
-               const tr = document.createElement("tr");
-               const td = document.createElement("td");
-               td.innerHTML = errorMsg;
-               tr.appendChild(td);
-               resultContainer.appendChild(tr);
-               return;
-           }
-
-
-           loginForm.style.display = 'none';
-           dataTable.style.display = 'block';
-           dataButton.style.display = 'block';
-
-
-           response.json().then(data => {
-               const tr = document.createElement("tr");
-               const name = document.createElement("td");
-               const id = document.createElement("td");
-               const age = document.createElement("td");
-               const roles = document.createElement("td");
-               name.innerHTML = data.name;
-               id.innerHTML = data.email;
-               age.innerHTML = data.age;
-               roles.innerHTML = data.roles.map(role => role.name).join(', ');
-               tr.appendChild(name);
-               tr.appendChild(id);
-               tr.appendChild(age);
-               tr.appendChild(roles);
-               resultContainer.appendChild(tr);
-           })
-       })
-       .catch(err => {
-           loginForm.style.display = 'block';
-           dataTable.style.display = 'none';
-           dataButton.style.display = 'none';
-
-
-           console.error("Network error: " + err);
-           const tr = document.createElement("tr");
-           const td = document.createElement("td");
-           td.innerHTML = err + ": " + URL;
-           tr.appendChild(td);
-           resultContainer.appendChild(tr);
-       });
-}
-
-
-// Method to login user for Python
-window.pythonLogin = function() {
-   const options = {};
-   options.URL = pythonURI + '/api/authenticate';
-   options.callback = pythonDatabase;
-   options.message = "python-message";
-   options.method = "POST";
-   options.cache = "no-cache";
-   options.body = {
-       uid: document.getElementById("python-uid").value,
-       password: document.getElementById("python-password").value,
-   };
-   login(options);
-}
-
-
-// Method to fetch and display data for Python
-function pythonDatabase() {
-   const URL = pythonURI + '/api/id';
-   const loginForm = document.getElementById('pythonForm');
-   const dataTable = document.getElementById('pythonTable');
-   const dataButton = document.getElementById('pythonButton');
-   const resultContainer = document.getElementById("pythonResult");
-   resultContainer.innerHTML = '';
-
-
-   fetch(URL, fetchOptions)
-       .then(response => {
-           if (response.status !== 200) {
-               loginForm.style.display = 'block';
-               dataTable.style.display = 'none';
-               dataButton.style.display = 'none';
-
-
-               const errorMsg = "Flask server response: " + response.status;
-               console.log(errorMsg);
-               const tr = document.createElement("tr");
-               const td = document.createElement("td");
-               td.innerHTML = errorMsg;
-               tr.appendChild(td);
-               resultContainer.appendChild(tr);
-               return;
-           }
-
-
-           loginForm.style.display = 'none';
-           dataTable.style.display = 'block';
-           dataButton.style.display = 'block';
-
-
-           response.json().then(data => {
-               resultContainer.appendChild(displayRow(data));
-           })
-       })
-       .catch(err => {
-           loginForm.style.display = 'block';
-           dataTable.style.display = 'none';
-           dataButton.style.display = 'none';
-
-
-           console.error("Network error: " + err);
-           const tr = document.createElement("tr");
-           const td = document.createElement("td");
-           td.innerHTML = err + ": " + URL;
-           tr.appendChild(td);
-           resultContainer.appendChild(tr);
-       });
-}
-
-
-// Function to display data row
-function displayRow(row) {
-   const tr = document.createElement("tr");
-   const idCell = document.createElement("td");
-   const nameCell = document.createElement("td");
-   const uidCell = document.createElement("td");
-   const roleCell = document.createElement("td");
-   const profileCell = document.createElement("td");
-   const kasmCell = document.createElement("td");
-   const classesCell = document.createElement("td");
-
-
-   idCell.innerHTML = row.id; // Add appropriate data for "D" column
-   nameCell.innerHTML = row.name;
-   uidCell.innerHTML = row.uid;
-   roleCell.innerHTML = row.role;
-   profileCell.innerHTML = row.pfp; // Add appropriate data for "Profile Picture" column
-   kasmCell.innerHTML = row.kasm_server_needed; // Add appropriate data for "KASM Server Needed" column
-   classesCell.innerHTML = row.sections; // Add appropriate data for "Classes" column
-
-
-   tr.appendChild(idCell);
-   tr.appendChild(nameCell);
-   tr.appendChild(uidCell);
-   tr.appendChild(roleCell);
-   tr.appendChild(profileCell);
-   tr.appendChild(kasmCell);
-   tr.appendChild(classesCell);
-
-
-   return tr;
-}
-
-
-// Call relevant database functions on page load
-window.onload = function() {
-   javaDatabase();
-   pythonDatabase();
-};
+    import { login, javaURI, pythonURI, fetchOptions } from '{{ site.baseurl }}/assets/js/api/config.js';
+
+    // Function to handle Java login
+    window.javaLogin = function() {
+        const options = {
+            URL: `${javaURI}/authenticate`,
+            callback: javaDatabase,
+            message: "java-message",
+            method: "POST",
+            cache: "no-cache",
+            body: {
+                email: document.getElementById("uid").value,
+                password: document.getElementById("password").value,
+            }
+        };
+        login(options);
+    }
+
+    // Function to fetch and display Java data
+    function javaDatabase() {
+        const URL = `${javaURI}/api/person`;
+        const loginForm = document.getElementById('javaForm');
+        const dataTable = document.getElementById('javaTable');
+        const dataButton = document.getElementById('javaButton');
+        const resultContainer = document.getElementById("javaResult");
+        resultContainer.innerHTML = '';
+
+        fetch(URL, fetchOptions)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Spring server response: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                loginForm.style.display = 'none';
+                dataTable.style.display = 'block';
+                dataButton.style.display = 'block';
+
+                const tr = document.createElement("tr");
+                const name = document.createElement("td");
+                const id = document.createElement("td");
+                const age = document.createElement("td");
+                const roles = document.createElement("td");
+                name.textContent = data.name;
+                id.textContent = data.email;
+                age.textContent = data.age;
+                roles.textContent = data.roles.map(role => role.name).join(', ');
+                tr.appendChild(name);
+                tr.appendChild(id);
+                tr.appendChild(age);
+                tr.appendChild(roles);
+                resultContainer.appendChild(tr);
+            })
+            .catch(error => {
+                console.error("Java Database Error:", error);
+                const errorMsg = `Java Database Error: ${error.message}`;
+                const tr = document.createElement("tr");
+                const td = document.createElement("td");
+                td.textContent = errorMsg;
+                tr.appendChild(td);
+                resultContainer.appendChild(tr);
+            });
+    }
+
+    // Function to handle Python login
+    window.pythonLogin = function() {
+        const options = {
+            URL: `${pythonURI}/api/authenticate`,
+            callback: pythonDatabase,
+            message: "python-message",
+            method: "POST",
+            cache: "no-cache",
+            body: {
+                uid: document.getElementById("python-uid").value,
+                password: document.getElementById("python-password").value,
+            }
+        };
+        login(options);
+    }
+
+    // Function to fetch and display Python data
+    function pythonDatabase() {
+        const URL = `${pythonURI}/api/id`;
+        const loginForm = document.getElementById('pythonForm');
+        const dataTable = document.getElementById('pythonTable');
+        const dataButton = document.getElementById('pythonButton');
+        const resultContainer = document.getElementById("pythonResult");
+        resultContainer.innerHTML = '';
+
+        fetch(URL, fetchOptions)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Flask server response: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                loginForm.style.display = 'none';
+                dataTable.style.display = 'block';
+                dataButton.style.display = 'block';
+
+                const tr = document.createElement("tr");
+                const id = document.createElement("td");
+                const name = document.createElement("td");
+                const uid = document.createElement("td");
+                const role = document.createElement("td");
+                const profile = document.createElement("td");
+                const kasm = document.createElement("td");
+                const classes = document.createElement("td");
+
+                id.textContent = data.id;
+                name.textContent = data.name;
+                uid.textContent = data.uid;
+                role.textContent = data.role;
+                profile.textContent = data.pfp;
+                kasm.textContent = data.kasm_server_needed;
+
+                if (Array.isArray(data.sections)) {
+                    classes.innerHTML = data.sections.map(section => `${section.abbreviation} - ${section.name}`).join('<br>');
+                } else {
+                    classes.textContent = '';
+                }
+
+                tr.appendChild(id);
+                tr.appendChild(name);
+                tr.appendChild(uid);
+                tr.appendChild(role);
+                tr.appendChild(profile);
+                tr.appendChild(kasm);
+                tr.appendChild(classes);
+                resultContainer.appendChild(tr);
+            })
+            .catch(error => {
+                console.error("Python Database Error:", error);
+                const errorMsg = `Python Database Error: ${error.message}`;
+                const tr = document.createElement("tr");
+                const td = document.createElement("td");
+                td.textContent = errorMsg;
+                tr.appendChild(td);
+                resultContainer.appendChild(tr);
+            });
+    }
+
+    // Call relevant database functions on page load
+    window.onload = function() {
+        javaDatabase();
+        pythonDatabase();
+    };
 </script>
-
-
-
diff --git a/navigation/profile.md b/navigation/profile.md
index 7c3278c3d..b45221f7b 100644
--- a/navigation/profile.md
+++ b/navigation/profile.md
@@ -1,7 +1,323 @@
 ---
 layout: post
-title: Profile
+title: Profile Setup
 permalink: /profile
 ---
 
-{% include nav/flask.html %}
\ No newline at end of file
+{% include nav/flask.html %}
+
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile Setup</title>
+    <script type="module" src="{{site.baseurl}}/assets/js/api/config.js"></script>
+    
+    <style>
+    /* Global styles */
+    body {
+        font-family: Arial, sans-serif;
+        line-height: 1.6;
+        background-color: #f0f0f0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .login-card {
+        width: 100%;
+        max-width: 600px;
+        background-color: #2c3e50; /* Dark blue background */
+        border: 1px solid #34495e; /* Darker border */
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+        margin-top: 20px;
+        color: #ffffff; /* White text */
+    }
+
+    .login-card h1 {
+        font-size: 24px;
+        margin-bottom: 20px;
+        text-align: center;
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-group label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .form-group input[type="text"],
+    .form-group input[type="file"],
+    .form-group select {
+        width: calc(100% - 12px);
+        padding: 8px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 16px;
+    }
+
+    .form-group button {
+        background-color: #3498db; /* Blue button */
+        color: #ffffff;
+        border: none;
+        border-radius: 4px;
+        padding: 10px 20px;
+        cursor: pointer;
+        font-size: 16px;
+    }
+
+    .form-group button:hover {
+        background-color: #2980b9; /* Darker blue on hover */
+    }
+
+    .profile-table {
+        width: 100%;
+        margin-top: 20px;
+        border-collapse: collapse;
+    }
+
+    .profile-table th,
+    .profile-table td {
+        border: 1px solid #ddd;
+        padding: 10px;
+        text-align: left;
+    }
+
+    .details-button {
+        display: block;
+        width: 100%;
+        padding: 10px;
+        margin-top: 20px;
+        background-color: #3498db; /* Blue button */
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .details-button:hover {
+        background-color: #2980b9; /* Darker blue on hover */
+    }
+</style>
+
+    </style>
+</head>
+<body>
+
+<div class="login-container">
+
+    <!-- Profile Setup -->
+    <div class="login-card">
+        <h1>Profile Setup</h1>
+        <form id="profileForm">
+            <div class="form-group">
+                <label for="sectionDropdown">Choose Section:</label>
+                <select id="sectionDropdown">
+                    <!-- Options will be dynamically populated -->
+                </select>
+            </div>
+            <div class="form-group">
+                <button type="button" onclick="addSection()">Add Section</button>
+            </div>
+            <div class="form-group">
+                <label for="profilePicture">Upload Profile Picture:</label>
+                <input type="file" id="profilePicture" accept="image/*" onchange="uploadProfilePicture(this)">
+            </div>
+            <p id="profile-message" style="color: red;"></p>
+        </form>
+        <table class="profile-table" id="profileTable">
+            <thead>
+                <tr>
+                    <th>Abbreviation</th>
+                    <th>Name</th>
+                </tr>
+            </thead>
+            <tbody id="profileResult">
+                <!-- Table rows will be dynamically populated -->
+            </tbody>
+        </table>
+        <a href="#" id="saveSectionsButton" class="details-button" onclick="saveSections()">Save Sections</a>
+    </div>
+
+</div>
+
+<script type="module">
+    // Import fetchOptions from config.js
+    import { pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
+
+    // Array to store user-added sections
+    let userSections = [];
+
+    document.addEventListener('DOMContentLoaded', async function() {
+        // Fetch existing sections on page load
+        await fetchSections();
+
+        // Populate section dropdown menu
+        populateSectionDropdown();
+    });
+
+    // Function to fetch existing sections
+    async function fetchSections() {
+        const URL = `${pythonURI}/api/user/section`; // Adjusted endpoint
+
+        try {
+            const response = await fetch(URL, fetchOptions);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch sections: ${response.status}`);
+            }
+
+            const data = await response.json();
+            userSections = data.sections || []; // Assuming data is in { "sections": [...] } format
+
+            // Display fetched sections
+            displayProfileSections();
+        } catch (error) {
+            console.error('Error fetching sections:', error.message);
+            // Handle error display or fallback mechanism
+        }
+    }
+
+    // Function to populate section dropdown menu
+    function populateSectionDropdown() {
+        const sectionDropdown = document.getElementById('sectionDropdown');
+        const sections = [
+            { "abbreviation": "CSA", "id": 1, "name": "Computer Science A" },
+            { "abbreviation": "CSP", "id": 2, "name": "Computer Science Principles" },
+            { "abbreviation": "CSSE", "id": 4, "name": "Computer Science and Software Engineering" }
+            // Add more sections as needed
+        ];
+
+        sections.forEach(section => {
+            const option = document.createElement('option');
+            option.value = section.id;
+            option.textContent = `${section.abbreviation} - ${section.name}`;
+            sectionDropdown.appendChild(option);
+        });
+    }
+
+    // Function to add a section
+    function addSection() {
+        const dropdown = document.getElementById('sectionDropdown');
+        const selectedOption = dropdown.options[dropdown.selectedIndex];
+        const abbreviation = selectedOption.textContent.split(' ')[0];
+        const name = document.getElementById('sectionName').value.trim();
+
+        if (!abbreviation || !name) {
+            document.getElementById('profile-message').textContent = 'Please fill in both fields.';
+            return;
+        }
+
+        // Clear error message
+        document.getElementById('profile-message').textContent = '';
+
+        // Add section to userSections array
+        userSections.push({ abbreviation, name });
+
+        // Display added section in the table
+        displayProfileSections();
+    }
+
+    // Function to display added sections in the table
+    function displayProfileSections() {
+        const tableBody = document.getElementById('profileResult');
+        tableBody.innerHTML = '';
+
+        userSections.forEach(section => {
+            const tr = document.createElement('tr');
+            const abbreviationCell = document.createElement('td');
+            const nameCell = document.createElement('td');
+
+            abbreviationCell.textContent = section.abbreviation;
+            nameCell.textContent = section.name;
+
+            tr.appendChild(abbreviationCell);
+            tr.appendChild(nameCell);
+
+            tableBody.appendChild(tr);
+        });
+    }
+
+    // Function to upload profile picture
+    async function uploadProfilePicture(fileInput) {
+        const file = fileInput.files[0];
+        if (!file) return;
+
+        try {
+            const base64String = await convertToBase64(file);
+            await sendProfilePicture(base64String);
+            console.log('Profile picture uploaded successfully!');
+            // Handle success message or UI update
+        } catch (error) {
+            console.error('Error uploading profile picture:', error.message);
+            // Handle error display or fallback mechanism
+        }
+    }
+
+    // Function to convert file to base64 string
+    function convertToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result.split(',')[1]);
+            reader.onerror = error => reject(error);
+        });
+    }
+
+    // Function to send profile picture to server
+    async function sendProfilePicture(base64String) {
+        const URL = `${pythonURI}/api/id/pfp`; // Adjust endpoint as needed
+        const options = {
+            ...fetchOptions,
+            method: 'POST',
+            body: JSON.stringify({ base64String }),
+        };
+
+        const response = await fetch(URL, options);
+        if (!response.ok) {
+            throw new Error(`Failed to upload profile picture: ${response.status}`);
+        }
+        // Handle success response as needed
+    }
+
+    // Function to save sections (example action)
+    function saveSections() {
+        const URL = `${pythonURI}/api/user/section`; // Adjusted endpoint
+
+        const sectionsData = {
+            sections: userSections
+        };
+
+        const options = {
+            ...fetchOptions,
+            method: 'POST',
+            headers: {
+                ...fetchOptions.headers,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(sectionsData)
+        };
+
+        fetch(URL, options)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Failed to save sections: ${response.status}`);
+                }
+                // Handle success response as needed
+                console.log('Sections saved successfully!');
+            })
+            .catch(error => {
+                console.error('Error saving sections:', error.message);
+                // Handle error display or fallback mechanism
+            });
+    }
+</script>
+
+</body>
+</html>
