From 05f2e2123f0fe7f5581514f268be220c0ae2fe32 Mon Sep 17 00:00:00 2001
From: Micah Baker <micahb923@gmail.com>
Date: Sun, 29 Dec 2024 13:21:44 -0800
Subject: [PATCH] Initial profile page for officers and users

---
 public/profile/background.gif | Bin 0 -> 9192 bytes
 public/profile/index.css      | 135 +++++++
 public/profile/index.html     | 655 +++-------------------------------
 public/profile/index.js       | 154 ++++++++
 public/profile/script.js      |  12 -
 public/profile/style.css      | 157 --------
 public/profile/term.html      |  56 +++
 public/profile/term.js        | 128 +++++++
 src/main/components/Page.js   |  27 +-
 src/main/index.js             |   2 -
 src/main/pages/index.js       |   1 -
 tailwind.config.js            |   2 +-
 12 files changed, 531 insertions(+), 798 deletions(-)
 create mode 100644 public/profile/background.gif
 create mode 100644 public/profile/index.css
 create mode 100644 public/profile/index.js
 delete mode 100644 public/profile/script.js
 delete mode 100644 public/profile/style.css
 create mode 100644 public/profile/term.html
 create mode 100644 public/profile/term.js

diff --git a/public/profile/background.gif b/public/profile/background.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4e62cb686070aa6edcf4391ba6b7e07603fdf612
GIT binary patch
literal 9192
zcmZ?wbhEHbEMzET_|5<VXa3*%4+O`LANl|7|Fh%&4_*2H{N$0J|Np-z0n3jPqaiSC
zLqPFAx1VcBu(M-;tC5}oGb7NWivOhDGt(UNGIJG@Di!?llS(r(i}Dpb5=%<*i!vD$
zf3k4!1C{B3!UU9y7&!hjFmlLvY*=uxnL}7B=ER1Dhuiu29p-p!Ty(Ts!Z_>BiH(bo
z_bWJei70GZa&odF`+}I0o0guQZV;)|;kkL)+1VDwueN9uE<Zotp_xn8t0d*(VvosM
zvR(-<56$$;b?Vicu;ld0kZ7eFr%Yd;UKh7Mk9T#cLfEE^%d28fZ(DnNyTaN-S2eb0
z9b+lxzqYpH`qQ{+OibMSZkWG6a8N{8BQ9r0R>GmK+EqN7-`6`I>opbA>$y<$?EC`f
zZn?Q%*Bo57#NN*@_p)*Jvh~TQ=lR}Ndv$A#@8h-`!Czk8J<yzfO?S_ZkB?7G){d9E
z^7Y`oGbf$;{bC=#e|1AwDq&x3<@d*Ihq@E|?e-bJ`}Bal?)<s9#D;Gl62%hi>=zba
z`kL)89<gBm|0n+$Z^XNOUpY0t?xX682TeR-AqmZjciA4ch=h6Es$OV2L!eFKZTN-K
z#KMdi29;?)Cb#L&oH3{Cc%jCk)=jJ|n1S974E&q_AOHV<1Xyrg{_*4Mo2!>5E&cy?
z#*{rTuI!Hh#my)f4T0es0;7e_z!W;q{=fbIzYkdGJo@<i<>$vsl1l%7PED@8uwtt9
z@J(!^J{t`IPza0`Is;SaeER?G&pke1q4VM8-+MnlmK(bL|7mPwzq2MsZZu(zhQRO+
zfzd)|U<w`Jn9zfx%)mnD|HJ>6{{Q!25dHrjn9>&bI}Y#kHtM_45EyOg4A7X)XiH}_
t^NrXL7;WhcOiO2UOlQPqxlxag7CHk{=#0)@jpn@(8v>(+4$TW4YXC`HZ<YW6

literal 0
HcmV?d00001

diff --git a/public/profile/index.css b/public/profile/index.css
new file mode 100644
index 0000000..533fee6
--- /dev/null
+++ b/public/profile/index.css
@@ -0,0 +1,135 @@
+body {
+  background-image: url('/profile/background.gif');
+  background-repeat: repeat;
+}
+
+input {
+  padding: 0 4px;
+  font-size: 8pt;
+  border: 1px solid #c0c0c0;
+  background-color: #f8f8f8;
+  color: black;
+}
+
+input:disabled {
+  border: 1px solid #808080;
+  background-color: #e0e0e0;
+  color: #808080;
+}
+
+input::placeholder {
+  color: #808080;
+}
+
+textarea {
+  width: 100%;
+  padding: 0 4px;
+  font-size: 8pt;
+  border: 1px solid #c0c0c0;
+  background-color: #f8f8f8;
+  color: black;
+}
+
+button {
+  font-size: 10pt;
+  padding: 2px 6px;
+  border: 1px solid #b0b0b0;
+  background-color: #f0f0f0;
+  color: black;
+  border-radius: 4px;
+}
+
+button:hover {
+  border: 1px solid #c0c0c0;
+  background-color: #f8f8f8;
+}
+
+#tabs {
+  display: flex;
+  flex-flow: row wrap-reverse;
+  width: 404px;
+  background-color: #e0e0e0;
+  gap: 0 2px;
+  padding-top: 8px;
+  padding-left: 8px;
+}
+
+#tabs a {
+  display: block;
+  background-color: #f0f0f0;
+  font-size: 8pt;
+  padding-top: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  color: #606060;
+  border: 1px solid #c0c0c0;
+  border-bottom: 1px solid #e0e0e0;
+  border-radius: 8px 8px 0 0;
+}
+
+#tabs a.selected {
+  background-color: white;
+  border-bottom: 1px solid white;
+  color: black;
+}
+
+.login {
+  color: #6080ff;
+  text-decoration: underline;
+}
+
+.user-info-grid {
+  display: grid;
+  column-gap: 4px;
+  row-gap: 4px;
+  grid-template-columns: 128px 144px 92px;
+  grid-template-rows: 20px 20px 20px 20px;
+  grid-template-areas:
+    "none none picture"
+    "none none picture"
+    "none none picture"
+    "none none picture"
+}
+
+.officer-info-grid {
+  display: grid;
+  column-gap: 4px;
+  row-gap: 4px;
+  grid-template-columns: 128px 240px;
+  grid-template-rows: 20px 20px 20px 20px;
+  grid-template-areas:
+    "none none"
+    "none none"
+    "none none"
+    "none none"
+    "none none"
+}
+
+.officer-term-grid-1 {
+  display: grid;
+  column-gap: 4px;
+  row-gap: 4px;
+  grid-template-columns: 128px 144px 92px;
+  grid-template-rows: 20px 20px 20px 20px 20px;
+  grid-template-areas:
+    "none none photo"
+    "none none photo"
+    "none none photo"
+    "none none photo"
+    "none none photo"
+}
+
+.officer-term-grid-2 {
+  display: grid;
+  column-gap: 4px;
+  row-gap: 4px;
+  grid-template-columns: 128px 240px;
+  grid-template-rows: 20px 20px 20px 20px 20px 1fr;
+  grid-template-areas:
+    "none none"
+    "none none"
+    "none none"
+    "none none"
+    "none none"
+    "biography biography"
+}
diff --git a/public/profile/index.html b/public/profile/index.html
index a859e7d..ff29844 100644
--- a/public/profile/index.html
+++ b/public/profile/index.html
@@ -1,610 +1,53 @@
-<!-- All those who modify this file shall be of honour and the most excellence. -->
-
 <!doctype html>
-<html>
-    <head>
-        <title>CSSS User Profile</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="icon" type="image/png" href="/static/icons/favicon_white.png" />
-
-        <!-- fonts -->
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-
-        <link rel="stylesheet" href="/profile/style.css">
-    </head>
-
-    <script>
-        // scripts should wait until hasPermission is non-null (& true)
-        var hasPermission = null;
-        var computingID = null;
-
-        const dateTimeFormat = Intl.DateTimeFormat('en', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-        });
-
-        const DEBUG = false;
-        if (!DEBUG) {
-            fetch("/api/auth/user").then(response => {
-                if (response.status == 401) {
-                    hasPermission = false;
-                    loginRedirect();
-                } else if (!response.ok) {
-                    // TODO: show an error message or something "failed to get user info"
-                    console.log(response);
-                    hasPermission = false;
-                    //window.location.replace("/");
-                } else {
-                    // check if user has same computing_id as query param
-                    response.json().then(json => {
-                        hasPermission = true;
-                        computingID = json["computing_id"];
-
-                        document.getElementById("logged-in-as").innerHTML = "Logged in as " + computingID;
-
-                        // update user info
-                        document.getElementById("user-info-computing-id").innerHTML = computingID;
-                        document.getElementById("user-info-last-log-in").innerHTML = dateTimeFormat.format(new Date(json["last_logged_in"]))
-                        document.getElementById("user-info-first-log-in").innerHTML = dateTimeFormat.format(new Date(json["first_logged_in"]))
-
-                        initOfficerInfo(computingID);
-                    });
-                }
-            });
-        }
-
-        function initOfficerInfo(computingID) {
-            fetch(`/api/officers/info/${computingID}`).then(response => {
-                if (response.status == 401) {
-                    loginRedirect();
-                } else if (response.status == 404) {
-                    // do nothing, but happily
-                    console.log("user is not an officer");
-                } else if (!response.ok) {
-                    // assume that failed
-                    console.log("unexpected:");
-                    console.log(response);
-                } else {
-                    // check if user has same computing_id as query param
-                    document.getElementById("officer-info-container").removeAttribute("hidden");
-
-                    response.json().then(json => {
-                        console.log(json);
-
-                        document.getElementById("officer-info-form-status").innerHTML = json.is_filled_in ? "<b>Complete</b>" : "Not yet complete";
-
-                        // update the data fields with this info
-                        document.getElementById("legal-name").value = json.legal_name;
-                        document.getElementById("db-legal-name").innerHTML = json.legal_name;
-
-                        document.getElementById("phone-number").value = json.phone_number;
-                        document.getElementById("db-phone-number").innerHTML = json.phone_number;
-                        
-                        document.getElementById("discord-id").value = json.discord_id;
-                        document.getElementById("db-discord-id").innerHTML = json.discord_id;
-
-                        document.getElementById("discord-name").value = json.discord_name;
-                        document.getElementById("db-discord-name").innerHTML = json.discord_name;
-
-                        document.getElementById("discord-nickname").value = json.discord_nickname;
-                        document.getElementById("db-discord-nickname").innerHTML = json.discord_nickname;
-
-                        document.getElementById("github-username").value = json.github_username;
-                        document.getElementById("db-github-username").innerHTML = json.github_username;
-
-                        document.getElementById("google-email").value = json.google_drive_email;
-                        document.getElementById("db-google-email").innerHTML = json.google_drive_email;
-                    });
-
-                    // once officer info has been found, also fetch officer terms
-                    initOfficerTerms(computingID);
-                }
-            });
-        }
-
-        function initOfficerTerms(computingID) {
-            if (document.getElementById("officer-info-container").getAttribute("hidden"))
-                return;
-
-            // TODO: ensure this returns all of the current officer's terms (b/c they have access to them)
-            fetch(`/api/officers/terms/${computingID}?include_inactive=True`).then(response => {
-                if (response.status == 401) {
-                    loginRedirect();
-                } else if (!response.ok) {
-                    // assume that failed
-                    console.log("unexpected:");
-                    console.log(response);
-                } else {
-                    // response.json is a list of serializble dict
-                    response.json().then(json => {
-                        console.log(json);
-
-                        for(let termData of json) {
-                            let i = termData.id;
-                            let element = document.createElement("div");
-                            element.classList.add("widget");
-                            element.id = `officer-term-form-${i}`;
-                            element.innerHTML = `
-                            <div style="display: flex; flex-direction: row; width: 100%;">
-                                <div
-                                    class="unselectable"
-                                    style="cursor: pointer; display: flex;"
-                                    onclick="toggleHidden('officer-term-form-${i}-contents', 'officer-term-${i}-collapsible');"
-                                >
-                                    <div class="title" style="font-weight: 600;">Officer Term ${i}</div>
-                                    <img class="collapsible" id="officer-term-${i}-collapsible" style="margin-left: 0.25rem;" src="/static/icons/minus.svg">
-                                </div>
-                                <div style="margin-left: auto;" id="officer-term-form-${i}-status">Not yet complete</div>
-                            </div>
-                            <div id="officer-term-form-${i}-contents" style="width: 100%;">
-                                <br>
-                                <div style="display: flex; gap: 1rem;">
-                                    <em style="color: #aaa;">Admin</em>
-                                    <hr style="border-left: none; border-top: 1px solid #bbb; width: 100%; margin-top: 0.75rem; margin-bottom: 0;">
-                                </div>
-                                <br>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="position-${i}">Position</label>
-                                        <input type="text" id="position-${i}" disabled style="cursor: not-allowed;">
-                                    </div>
-                                    <div class="db-result" id="db-position-${i}"></div>
-                                </div>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="start_date-${i}">Start Date</label>
-                                        <input type="text" id="start_date-${i}" disabled style="cursor: not-allowed;">
-                                    </div>
-                                    <div class="db-result" id="db-start_date-${i}"></div>
-                                </div>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="end_date-${i}">End Date</label>
-                                        <input type="text" id="end_date-${i}" disabled style="cursor: not-allowed;">
-                                    </div>
-                                    <div class="db-result" id="db-end_date-${i}"></div>
-                                </div>
-
-                                <br>
-                                <div style="display: flex; gap: 1rem;">
-                                    <em style="color: #aaa;">Personal</em>
-                                    <hr style="border-left: none; border-top: 1px solid #bbb; width: 100%; margin-top: 0.75rem; margin-bottom: 0;">
-                                </div>
-                                <br>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="nickname-${i}">Nickname</label>
-                                        <input type="text" id="nickname-${i}">
-                                    </div>
-                                    <div class="db-result" id="db-nickname-${i}"></div>
-                                </div>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="favourite_course_0-${i}">Favourite Course 0</label>
-                                        <input type="text" id="favourite_course_0-${i}">
-                                    </div>
-                                    <div class="db-result" id="db-favourite_course_0-${i}"></div>
-                                </div>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="favourite_course_1-${i}">Favourite Course 1</label>
-                                        <input type="text" id="favourite_course_1-${i}">
-                                    </div>
-                                    <div class="db-result" id="db-favourite_course_1-${i}"></div>
-                                </div>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="favourite_pl_0-${i}">Favourite Programming Language 0</label>
-                                        <input type="text" id="favourite_pl_0-${i}">
-                                    </div>
-                                    <div class="db-result" id="db-favourite_pl_0-${i}"></div>
-                                </div>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="favourite_pl_1-${i}">Favourite Programming Language 1</label>
-                                        <input type="text" id="favourite_pl_1-${i}">
-                                    </div>
-                                    <div class="db-result" id="db-favourite_pl_1-${i}"></div>
-                                </div>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="biography-${i}">Biography</label>
-                                        <textarea type="text" id="biography-${i}" style="resize: vertical;"></textarea>
-                                    </div>
-                                    <div markdown="1" class="db-result" id="db-biography-${i}" style="white-space: pre-wrap;"></div>
-                                </div>
-
-                                <br>
-
-                                <div class="officer-input-container">
-                                    <div class="officer-input">
-                                        <label for="photo_url-${i}">Photo URL</label>
-                                        <input type="text" id="photo_url-${i}">
-                                    </div>
-                                    <div class="db-result" id="db-photo_url-${i}"></div>
-                                </div>
-                                
-                                <br>
-
-                                <button style="display: block; width: 8rem; height: 2rem; margin: auto;" id="officer-term-${i}-update" onclick="updateTerm(${i})">Update</button>
-                                <p style="display: block; width: 100%; margin: auto; margin-top: 1rem;" id="officer-term-${i}-validation-failures"></p>
-                            </div>
-                            `;
-
-                            document.getElementById("officer-widgets").appendChild(element);
-
-                            document.getElementById(`officer-term-form-${i}-status`).innerHTML = termData.is_filled_in ? "<b>Complete</b>" : "Not yet complete";
-
-                            // update the data fields with this info
-                            document.getElementById(`position-${i}`).value = termData.position;
-                            document.getElementById(`db-position-${i}`).innerHTML = termData.position;
-
-                            document.getElementById(`start_date-${i}`).value = termData.start_date;
-                            const startDatePretty = dateTimeFormat.format(new Date(termData.start_date));
-                            document.getElementById(`db-start_date-${i}`).innerHTML = startDatePretty;
-
-                            document.getElementById(`end_date-${i}`).value = termData.end_date;
-                            const endDatePretty = dateTimeFormat.format(new Date(termData.end_date));
-                            document.getElementById(`db-end_date-${i}`).innerHTML = endDatePretty;
-
-                            document.getElementById(`nickname-${i}`).value = termData.nickname;
-                            document.getElementById(`db-nickname-${i}`).innerHTML = termData.nickname;
-
-                            document.getElementById(`favourite_course_0-${i}`).value = termData.favourite_course_0;
-                            document.getElementById(`db-favourite_course_0-${i}`).innerHTML = termData.favourite_course_0;
-
-                            document.getElementById(`favourite_course_1-${i}`).value = termData.favourite_course_1;
-                            document.getElementById(`db-favourite_course_1-${i}`).innerHTML = termData.favourite_course_1;
-
-                            document.getElementById(`favourite_pl_0-${i}`).value = termData.favourite_pl_0;
-                            document.getElementById(`db-favourite_pl_0-${i}`).innerHTML = termData.favourite_pl_0;
-
-                            document.getElementById(`favourite_pl_1-${i}`).value = termData.favourite_pl_1;
-                            document.getElementById(`db-favourite_pl_1-${i}`).innerHTML = termData.favourite_pl_1;
-
-                            document.getElementById(`biography-${i}`).value = termData.biography;
-                            document.getElementById(`db-biography-${i}`).innerHTML = termData.biography;
-
-                            document.getElementById(`photo_url-${i}`).value = termData.photo_url;
-                            document.getElementById(`db-photo_url-${i}`).innerHTML = termData.photo_url;
-                        }
-                    });
-                }
-            });
-        }
-
-        function loginRedirect() {
-            // redirect the user to the sfu login api if they are not yet logged in
-            const CAS_LOGIN_URL = "https://cas.sfu.ca/cas/login?service=";
-            const API_LOGIN_URL = window.location.protocol + "//" + window.location.host + "/api/auth/login";
-            let loginURL = CAS_LOGIN_URL + API_LOGIN_URL + "?next_url=" + encodeURIComponent(window.location.href);
-            window.location.replace(loginURL);
-        }
-
-        function logOut() {
-            const API_LOGOUT_URL = window.location.protocol + "//" + window.location.host + "/api/auth/logout";
-            fetch(API_LOGOUT_URL, { method: "POST" });
-            window.location.replace("/");
-        }
-
-        // TODO: (GUI) take inspiration from google settings update -> have a button to edit, then press a button to leave edit mode.
-        function updateInfo() {
-            if (computingID === null) {
-                console.log("computing_id is null");
-                return;
-            }
-
-            fetch(`/api/officers/info/${computingID}`, {
-                method: "PATCH",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    // TODO: stop legal_name from being None
-                    "legal_name": document.getElementById("legal-name").value,
-                    "phone_number": document.getElementById("phone-number").value,
-                    "discord_name": document.getElementById("discord-name").value,
-                    "github_username": document.getElementById("github-username").value,
-                    "google_drive_email": document.getElementById("google-email").value,
-                })
-            }).then(response => {
-                if (!response.ok) {
-                    // assume that failed
-                    console.log("unexpected:");
-                    console.log(response);
-                } else {
-                    response.json().then(json => {
-                        console.log(json);
-
-                        document.getElementById("officer-info-form-status").innerHTML = json.is_filled_in ? "<b>Complete</b>" : "Not yet complete";
-
-                        // update the data fields with this info
-                        document.getElementById("db-legal-name").innerHTML = json.updated_officer_info.legal_name;
-                        document.getElementById("db-phone-number").innerHTML = json.updated_officer_info.phone_number;
-
-                        document.getElementById("db-discord-name").innerHTML = json.updated_officer_info.discord_name;
-                        document.getElementById("db-discord-nickname").innerHTML = json.updated_officer_info.discord_nickname;
-                        document.getElementById("db-discord-id").innerHTML = json.updated_officer_info.discord_id;
-
-                        document.getElementById("discord-name").value = json.updated_officer_info.discord_name;
-                        document.getElementById("discord-nickname").value = json.updated_officer_info.discord_nickname;
-                        document.getElementById("discord-id").value = json.updated_officer_info.discord_id;
-
-                        document.getElementById("db-github-username").innerHTML = json.updated_officer_info.github_username;
-                        document.getElementById("db-google-email").innerHTML = json.updated_officer_info.google_drive_email;
-                        
-                        let validationErrorsElement = document.getElementById("officer-info-validation-failures");
-                        if (json.validation_failures.length == 0) {
-                            validationErrorsElement.innerHTML = "";
-                        } else {
-                            validationErrorsElement.innerHTML = "Validation Errors:";
-                            for (let i = 0; i < json.validation_failures.length; i++) {
-                                const desc = json.validation_failures[i];
-                                const colour = (i % 2 == 0) ? "fff" : "ddd";
-                                validationErrorsElement.innerHTML += `
-                                    <div style="background-color: #${colour}; padding: 0.5rem; border-radius: 0.5rem;">
-                                        <b style="margin-right: 0.5rem;">${i}</b>
-                                        ${desc}
-                                    <div>
-                                `;
-                            }
-                        }
-                    });
-                }
-            });
-        }
-
-        function updateTerm(termID) {
-            if (computingID === null) {
-                console.log("computing_id is null");
-                return;
-            }
-
-            fetch(`/api/officers/term/${termID}`, {
-                method: "PATCH",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    "position": document.getElementById(`position-${termID}`).value,
-                    "start_date": document.getElementById(`start_date-${termID}`).value,
-                    "end_date": document.getElementById(`end_date-${termID}`).value == "" ? null : document.getElementById(`end_date-${termID}`).value,
-                    "nickname": document.getElementById(`nickname-${termID}`).value,
-                    "favourite_course_0": document.getElementById(`favourite_course_0-${termID}`).value,
-                    "favourite_course_1": document.getElementById(`favourite_course_1-${termID}`).value,
-                    "favourite_pl_0": document.getElementById(`favourite_pl_0-${termID}`).value,
-                    "favourite_pl_1": document.getElementById(`favourite_pl_1-${termID}`).value,
-                    "biography": document.getElementById(`biography-${termID}`).value,
-                    "photo_url": document.getElementById(`photo_url-${termID}`).value,
-                })
-            }).then(response => {
-                if (!response.ok) {
-                    // assume that failed
-                    console.log("unexpected:");
-                    console.log(response);
-                } else {
-                    response.json().then(json => {
-                        console.log(json);
-
-                        document.getElementById(`officer-term-form-${termID}-status`).innerHTML = json.is_filled_in ? "<b>Complete</b>" : "Not yet complete";
-
-                        // update the data fields with this info
-                        document.getElementById(`db-position-${termID}`).innerHTML = json.updated_officer_term.position;
-
-                        const startDatePretty = dateTimeFormat.format(new Date(json.updated_officer_term.start_date));
-                        document.getElementById(`db-start_date-${termID}`).innerHTML = startDatePretty;
-                        document.getElementById(`db-end_date-${termID}`).innerHTML = (
-                            json.updated_officer_term.end_date == null
-                            ? ""
-                            : dateTimeFormat.format(new Date(json.updated_officer_term.end_date))
-                        );
-
-                        document.getElementById(`db-nickname-${termID}`).innerHTML = json.updated_officer_term.nickname;
-                        document.getElementById(`db-favourite_course_0-${termID}`).innerHTML = json.updated_officer_term.favourite_course_0;
-                        document.getElementById(`db-favourite_course_1-${termID}`).innerHTML = json.updated_officer_term.favourite_course_1;
-                        document.getElementById(`db-favourite_pl_0-${termID}`).innerHTML = json.updated_officer_term.favourite_pl_0;
-                        document.getElementById(`db-favourite_pl_1-${termID}`).innerHTML = json.updated_officer_term.favourite_pl_1;
-                        document.getElementById(`db-biography-${termID}`).innerHTML = json.updated_officer_term.biography;
-                        document.getElementById(`db-photo_url-${termID}`).innerHTML = json.updated_officer_term.photo_url;
-
-                        // TODO: into a function
-                        let validationErrorsElement = document.getElementById(`officer-term-${termID}-validation-failures`);
-                        if (json.validation_failures.length == 0) {
-                            validationErrorsElement.innerHTML = "";
-                        } else {
-                            validationErrorsElement.innerHTML = "Validation Errors:";
-                            for (let i = 0; i < json.validation_failures.length; i++) {
-                                const desc = json.validation_failures[i];
-                                const colour = (i % 2 == 0) ? "fff" : "ddd";
-                                validationErrorsElement.innerHTML += `
-                                    <div style="background-color: #${colour}; padding: 0.5rem; border-radius: 0.5rem;">
-                                        <b style="margin-right: 0.5rem;">${i}</b>
-                                        ${desc}
-                                    <div>
-                                `;
-                            }
-                        }
-                    });
-                }
-            });
-        }
-    </script>
-
-    <body>
-        <div id="header">
-            <div style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
-                <a href="/">
-                    <img src="/static/files/csss_black.svg" style="width: 3rem; height: 3rem; margin-right: 1rem;" />
-                </a>
-                <span id="profile-title" class="title" style="font-size: 2rem; font-weight: 700;">User Profile</span>
-                <div style="margin-left: auto; text-align: end;">
-                    <span id="logged-in-as" >Logged in as ...</span> <br>
-                    <a id="log-out" onclick="logOut()" style="text-decoration: underline; cursor: pointer;">Log out</a>
-                </div>
-            </div>
-            <div style="align-items: end; display: flex; flex-direction: row; justify-content: end;">
-            </div>
+<html lang="en">
+  <head>
+    <title>Profile | CSSS</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="/static/icons/favicon_black.png" />
+    <link rel="stylesheet" href="/static/css/tailwind.css" />
+    <link rel="stylesheet" href="/profile/index.css" />
+    <script defer="defer" src="/profile/index.js"></script>
+  </head>
+  <body class="w-screen h-screen flex justify-center items-center">
+    <div class="border border-slate-400 bg-white" id="root">
+      <div id="tabs">
+        <a href="/profile" class="selected">profile</a>
+      </div>
+      <div class="px-4 py-2">
+        <p id="error" class="text-xs text-red-500 py-2 hidden"></p>
+        <div class="user-info-grid py-2">
+          <p class="text-sm">Computing ID:</p>
+          <input id="computing_id" type="text" disabled></input>
+          <p class="text-sm">First logged in:</p>
+          <input id="first_logged_in" type="text" disabled></input>
+          <p class="text-sm">Last logged in:</p>
+          <input id="last_logged_in" type="text" disabled></input>
+          <p class="text-sm">Picture URL:</p>
+          <input id="profile_picture_url" type="text" placeholder="https://example.com/image.png"></input>
+          <img id="profile_picture" style="grid-area: picture" class="w-full h-full bg-slate-400 object-cover" />
         </div>
-        <div id="content">
-            <div id="officer-info-container" hidden>
-                <hr style="width: 100%; border-top: 1px solid #ddd;">
-                <h3 class="title" style="font-weight: 600;">Officer Info</h3>
-
-                <div class="clear-widget">
-                    <h3 class="title" style="font-weight: 600;">Welcome CSSS Officer!</h3>
-                    <p style="margin-bottom: 0;">
-                        Please ensure your info is up to date as soon as possible, so that we can give you access
-                        to our services, such as the <a href="https://github.com/CSSS">CSSS Github</a>,
-                        or the <a href="https://drive.google.com/drive/u/0/folders/0AGb0FPdVjrsqUk9PVA">CSSS Google Drive</a>.
-                    </p>
-                </div>
-
-                <div id="officer-widgets">
-                    <div class="widget" id="officer-info-form">
-                        <div style="display: flex; flex-direction: row; width: 100%;">
-                            <div class="unselectable" style="cursor: pointer; display: flex;" onclick="toggleHidden('officer-info-form-contents', 'officer-info-collapsible');">
-                                <div class="title" style="font-weight: 600;">Officer Info</div>
-                                <img class="collapsible" id="officer-info-collapsible" style="margin-left: 0.25rem;" src="/static/icons/minus.svg">
-                            </div>
-                            <div style="margin-left: auto;" id="officer-info-form-status">Not yet complete</div>
-                        </div>
-                        <div id="officer-info-form-contents" style="width: 100%;">
-                            <br>
-                            <div style="display: flex; gap: 1rem;">
-                                <em style="color: #aaa;">Personal</em>
-                                <hr style="border-left: none; border-top: 1px solid #bbb; width: 100%; margin-top: 0.75rem; margin-bottom: 0;">
-                            </div>
-                            <br>
-
-                            <div class="officer-input-container">
-                                <div class="officer-input">
-                                    <label for="legal-name">Legal Name</label>
-                                    <input type="text" id="legal-name" name="legal-name">
-                                </div>
-                                <div class="db-result" id="db-legal-name"></div>
-                            </div>
-
-                            <div class="officer-input-container">
-                                <div class="officer-input">
-                                    <label for="phone-number">Phone Number</label>
-                                    <input type="text" id="phone-number" name="phone-number">
-                                </div>
-                                <div class="db-result" id="db-phone-number"></div>
-                            </div>
-
-                            <br>
-                            <div style="display: flex; gap: 1rem;">
-                                <em style="color: #aaa;">Accounts</em>
-                                <hr style="border-left: none; border-top: 1px solid #bbb; width: 100%; margin-top: 0.75rem; margin-bottom: 0;">
-                            </div>
-                            <br>
-
-                            <div class="officer-input-container">
-                                <div class="officer-input">
-                                    <label for="discord-name" style="display: flex; align-items: center;">
-                                        <span>Discord Name</span>
-                                        <em class="smol-text">
-                                            <a href="https://discord.gg/sfucsss" class="smol-text">// join our discord</a>
-                                            <a href="https://support.discord.com/hc/en-us/articles/12620128861463-New-Usernames-Display-Names" class="smol-text">& update your username</a>
-                                        </em>
-                                    </label>
-                                    <input type="text" id="discord-name" name="discord-name">
-                                </div>
-                                <div class="db-result" id="db-discord-name"></div>
-                            </div>
-
-                            <div class="officer-input-container">
-                                <div class="officer-input">
-                                    <label for="discord-nickname" style="display: flex; align-items: center;">
-                                        <span>Discord Nickname</span>
-                                        <em class="grey smol-text">// auto-generated</em>
-                                    </label>
-                                    <input type="text" id="discord-nickname" name="discord-nickname" disabled style="cursor: not-allowed;">
-                                </div>
-                                <div class="db-result" id="db-discord-nickname"></div>
-                            </div>
-
-                            <div class="officer-input-container">
-                                <div class="officer-input">
-                                    <label for="discord-id" style="display: flex; align-items: center;">
-                                        <span>Discord ID</span>
-                                        <em class="grey smol-text">// auto-generated</em>
-                                    </label>
-                                    <input type="text" id="discord-id" name="discord-id" disabled style="cursor: not-allowed;">
-                                </div>
-                                <div class="db-result" id="db-discord-id"></div>
-                            </div>
-
-                            <br>
-
-                            <div class="officer-input-container">
-                                <div class="officer-input">
-                                    <label for="google-email" style="display: flex; align-items: center;">
-                                        <span>Google Email</span>
-                                        <em class="grey smol-text">// for google drive</em>
-                                    </label>
-                                    <input type="text" id="google-email" name="google-email">
-                                </div>
-                                <div class="db-result" id="db-google-email"></div>
-                            </div>
-
-                            <div class="officer-input-container">
-                                <div class="officer-input">
-                                    <!-- TODO: add a popup that is updated as typing that links to https://github.com/<name> & says "// is this you?" -->
-                                    <label for="github-username">Github Username</label>
-                                    <input type="text" id="github-username" name="github-username">
-                                </div>
-                                <div class="db-result" id="db-github-username"></div>
-                            </div>
-                            
-                            <br>
-
-                            <button style="display: block; width: 8rem; height: 2rem; margin: auto;" id="officer-info-update" onclick="updateInfo()">Update</button>
-                            <p style="display: block; width: 100%; margin: auto; margin-top: 1rem;" id="officer-info-validation-failures"></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="user-info-container">
-                <hr style="width: 100%; border-top: 1px solid #ddd;">
-                <h3 class="title" style="font-weight: 600;">Metadata</h3>
-                <div>
-                    <div class="widget">
-                        <div style="display: flex; flex-direction: row; width: 100%;">
-                            <div class="title" style="font-weight: 600; cursor: pointer;">User Info</div>
-                            <div style="margin-left: auto;"></div>
-                        </div>
-
-                        <table style="width: 90%; margin: auto; margin-top: 0.5rem; margin-bottom: 1rem;">
-                            <tr style="background-color: #fff;">
-                                <td><b>SFU computing id</b></td>
-                                <td><span id="user-info-computing-id"></span></td>
-                            </tr>
-                            <tr style="background-color: #ddd;">
-                                <td><b>Most recent login</b></td>
-                                <td><span id="user-info-last-log-in"></span></td>
-                            </tr>
-                            <tr style="background-color: #fff;">
-                                <td><b>First login</b></td>
-                                <td><span id="user-info-first-log-in"></span></td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
-            </div>
+        <hr />
+        <p class="text-xs pt-2 text-zinc-500">Officer general information:</p>
+        <div class="officer-info-grid py-1 py-2">
+          <p class="text-sm">Legal name:</p>
+          <input id="legal_name" type="text" placeholder="Only for officers" disabled></input>
+          <p class="text-sm">Phone number:</p>
+          <input id="phone_number" type="text" placeholder="Only for officers" disabled></input>
+          <p class="text-sm">Discord username:</p>
+          <input id="discord_name" type="text" placeholder="Only for officers" disabled></input>
+          <p class="text-sm">Github username:</p>
+          <input id="github_username" type="text" placeholder="Only for officers" disabled></input>
+          <p class="text-sm">Google drive email:</p>
+          <input id="google_drive_email" type="text" placeholder="Only for officers" disabled></input>
         </div>
-    </body>
-
-    <script src="/profile/script.js"></script>
+        <hr />
+        <div class="flex flex-row justify-start items-center w-full gap-1 py-2">
+          <button type="button" onclick="user_logout()">Log out</button>
+          <button type="botton" onclick="user_reset()" style="margin-left: auto;">Reset</button>
+          <button type="botton" onclick="user_submit()">Submit</button>
+        </div>
+      </div>
+    </div>
+  </body>
 </html>
diff --git a/public/profile/index.js b/public/profile/index.js
new file mode 100644
index 0000000..cad2ee8
--- /dev/null
+++ b/public/profile/index.js
@@ -0,0 +1,154 @@
+let is_officer = false;
+let computing_id = null;
+
+const load = async () => {
+  try {
+    // get user login info
+    let req = await fetch("/api/auth/user");
+    if (req.status !== 200) {
+      throw new Error(req.status);
+    }
+    let data = await req.json();
+
+    // auto doggo for blank pfps
+    if (!data.profile_picture_url) {
+      do {
+        req = await fetch("https://random.dog/woof.json");
+        const dog_data = await req.json();
+        data.profile_picture_url = dog_data.url;
+      } while (data.profile_picture_url.endsWith(".mp4"));
+    }
+
+    // update input fields
+    document.getElementById("computing_id").value = data.computing_id;
+    document.getElementById("first_logged_in").value = data.first_logged_in.split('T')[0];
+    document.getElementById("last_logged_in").value = data.last_logged_in.split('T')[0];
+    document.getElementById("profile_picture_url").value = data.profile_picture_url;
+    document.getElementById("profile_picture").src = data.profile_picture_url;
+
+    computing_id = data.computing_id;
+    req = await fetch("/api/officers/info/" + computing_id);
+    if (req.status !== 200) {
+      console.log("Not an officer.");
+      return;
+    }
+    data = await req.json();
+    is_officer = true;
+
+    const e_legal_name = document.getElementById("legal_name");
+    const e_phone_number = document.getElementById("phone_number");
+    const e_discord_name = document.getElementById("discord_name");
+    const e_github_username = document.getElementById("github_username");
+    const e_google_drive_email = document.getElementById("google_drive_email");
+
+    e_legal_name.value = data.legal_name;
+    e_phone_number.value = data.phone_number;
+    e_discord_name.value = data.discord_name;
+    e_github_username.value = data.github_username;
+    e_google_drive_email.value = data.google_drive_email;
+
+    e_legal_name.removeAttribute("disabled");
+    e_phone_number.removeAttribute("disabled");
+    e_discord_name.removeAttribute("disabled");
+    e_github_username.removeAttribute("disabled");
+    e_google_drive_email.removeAttribute("disabled");
+
+    e_legal_name.setAttribute("placeholder", "First Last");
+    e_phone_number.setAttribute("placeholder", "6040001111");
+    e_discord_name.setAttribute("placeholder", "discorduser");
+    e_github_username.setAttribute("placeholder", "ghuser");
+    e_google_drive_email.setAttribute("placeholder", "officer123@gmail.com");
+
+    // prompt officer to fill in their info
+    if (!data.is_filled_in) {
+      e_phone_number.focus();
+    }
+
+    req = await fetch("http://localhost:8080/api/officers/terms/" + computing_id + "?include_inactive=true");
+    if (req.status !== 200) {
+      throw new Error(req.status);
+    }
+    data = await req.json();
+
+    e_tabs = document.getElementById("tabs");
+    data.forEach((term) => {
+      const e_term = document.createElement("a");
+      e_term.href = "/profile/term.html?term=" + term.id;
+      e_term.innerHTML = `${term.position} (${term.start_date.split("T")[0]})`;
+      e_tabs.appendChild(e_term);
+    });
+  } catch (err) {
+    const root = document.getElementById("root");
+    const loginUrl = "https://cas.sfu.ca/cas/login?service=" +
+      encodeURIComponent(`${window.location.origin}/api/auth/login?redirect_path=${window.location.pathname}&redirect_fragment=`);
+    root.innerHTML = `<p class="px-4 py-2">
+        You are not logged in.<br />
+        <a class="login" href=${loginUrl}>Log in with SFU CAS</a><br />
+        <span id="error" class="text-xs text-zinc-500 py-2"></span>
+      </p>`;
+    console.log(err.toString());
+    document.getElementById("error").innerHTML = err.toString();
+  }
+};
+
+load();
+
+async function user_logout() {
+  try {
+    await fetch("/api/auth/logout");
+    window.location.href = "/";
+    window.location.reload();
+  } catch (err) {
+    console.log(err.toString());
+    document.getElementById("error").classList.remove("hidden");
+    document.getElementById("error").innerHTML = err.toString();
+  }
+}
+
+function user_reset() {
+  window.location.reload();
+}
+
+async function user_submit() {
+  try {
+    // set site user information
+    const e_profile_picture_url = document.getElementById("profile_picture_url");
+    let req = await fetch(
+      "/api/auth/user?profile_picture_url=" + encodeURIComponent(e_profile_picture_url.value),
+      { method: 'PATCH' }
+    );
+    if (req.status !== 200) {
+      throw new Error(req.status);
+    }
+
+    // set officer info
+    if (is_officer) {
+      const body = {
+        legal_name: document.getElementById("legal_name").value,
+        phone_number: document.getElementById("phone_number").value,
+        discord_name: document.getElementById("discord_name").value,
+        github_username: document.getElementById("github_username").value,
+        google_drive_email: document.getElementById("google_drive_email").value
+      };
+
+      req = await fetch(
+        "/api/officers/info/" + computing_id,
+        {
+          method: 'PATCH',
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(body)
+        }
+      );
+      if (req.status !== 200) {
+        throw new Error(req.status);
+      }
+    }
+    window.location.reload();
+  } catch (err) {
+    console.log(err.toString());
+    document.getElementById("error").classList.remove("hidden");
+    document.getElementById("error").innerHTML = err.toString();
+  }
+}
diff --git a/public/profile/script.js b/public/profile/script.js
deleted file mode 100644
index 1bd5b66..0000000
--- a/public/profile/script.js
+++ /dev/null
@@ -1,12 +0,0 @@
-function toggleHidden(elementID, collapsibleID) {
-  let element = document.getElementById(elementID);
-  let collapsible = document.getElementById(collapsibleID);
-
-  if (element.getAttribute('hidden') !== null) {
-    element.removeAttribute('hidden');
-    collapsible.src = '/static/icons/minus.svg';
-  } else {
-    element.setAttribute('hidden', '');
-    collapsible.src = '/static/icons/chevron-down.svg';
-  }
-}
diff --git a/public/profile/style.css b/public/profile/style.css
deleted file mode 100644
index 2cab280..0000000
--- a/public/profile/style.css
+++ /dev/null
@@ -1,157 +0,0 @@
-body {
-    margin: 0;
-
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-
-    background-color: #24242e;
-}
-
-a {
-    color: #2fbdda;
-    font-weight: bold;
-}
-a:hover {
-    color: #28c074;
-    font-weight: bold;
-}
-
-h3 {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-label {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-}
-
-input[type=text],
-input[type=date],
-select,
-textarea {
-    padding: 0.5rem;
-
-    border: #fff solid 3px;
-    border-radius: 0.25rem;
-    outline: none;
-
-    font-family: monospace;
-
-    background-color: #fff;
-}
-
-input[type=text]:focus,
-input[type=date]:focus,
-select:focus,
-textarea:focus {
-    border: #aaa solid 3px;
-}
-
-table {
-    border-collapse: collapse;
-}
-td {
-    padding: 0.5rem;
-}
-
-#header {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    margin: auto;
-    padding: 3rem 3rem 1rem 3rem;
-    max-width: calc(980px - 6rem);
-
-    background-color: #fff;
-}
-
-#content {
-    display: flex;
-    flex-direction: column;
-
-    margin: auto;
-    padding: 1rem 3rem;
-    max-width: calc(980px - 6rem);
-    min-height: 600px;
-    
-    background-color: #fff;
-}
-
-.widget {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-
-    margin: auto;
-    margin-bottom: 1rem;
-    max-width: 600px;
-    padding: 1rem;
-    border-radius: 1rem; 
-    
-    background-color: #eee;
-}
-
-.clear-widget {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-
-    margin: auto;
-    margin-bottom: 1rem;
-    max-width: 600px;
-    padding: 1rem;
-    border-radius: 1rem; 
-}
-
-.title {
-    font-family: Poppins, sans-serif;
-}
-
-.officer-input-container {
-    display: flex;
-    flex-direction: row;
-}
-.officer-input {
-    display: flex;
-    flex-direction: column;
-
-    width: 50%;
-}
-.officer-input .smol-text {
-    margin-left: auto;
-    font-weight: 400;    
-}
-
-.db-result {
-    text-align: left;
-    display: flex;
-    align-items: center;
-
-    color: #777;
-    border-bottom: 1px solid #bbb;
-
-    width: calc(50% - 2 * 1rem);
-    margin: 2rem 1rem 0.5rem 1rem;
-}
-
-.unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.collapsible {
-    display: inline-block;
-}
-
-.grey {
-    color: #aaa;
-}
-
-.smol-text {
-    font-size: 0.6rem;
-}
\ No newline at end of file
diff --git a/public/profile/term.html b/public/profile/term.html
new file mode 100644
index 0000000..60ba238
--- /dev/null
+++ b/public/profile/term.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Profile | CSSS</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="/static/icons/favicon_black.png" />
+    <link rel="stylesheet" href="/static/css/tailwind.css" />
+    <link rel="stylesheet" href="/profile/index.css" />
+    <script defer="defer" src="/profile/term.js"></script>
+  </head>
+  <body class="w-screen h-screen flex justify-center items-center">
+    <div class="border border-slate-400 bg-white" id="root">
+      <div id="tabs"></div>
+      <div class="px-4 py-2">
+        <p id="error" class="text-xs text-red-500 py-2 hidden"></p>
+        <p class="text-xs text-zinc-500 py-2">Officer term information:</p>
+        <div class="officer-term-grid-1">
+          <p class="text-sm">Computing ID:</p>
+          <input id="computing_id" type="text" disabled></input>
+          <p class="text-sm">Position:</p>
+          <input id="position" type="text" disabled></input>
+          <p class="text-sm">Start date:</p>
+          <input id="start_date" type="text" disabled></input>
+          <p class="text-sm">End date:</p>
+          <input id="end_date" type="text" disabled></input>
+          <p class="text-sm">Photo URL:</p>
+          <input id="photo_url" type="text" placeholder="https://example.com/image.jpg"></input>
+          <img id="photo" style="grid-area: photo" class="w-full h-full bg-slate-400 object-cover" />
+        </div>
+        <div class="officer-term-grid-2 mt-1">
+          <p class="text-sm">Preferred name:</p>
+          <input id="nickname" type="text" placeholder="First Last"></input>
+          <p class="text-sm">Fav. course 1:</p>
+          <input id="favourite_course_0" type="text" placeholder="CMPT120"></input>
+          <p class="text-sm">Fav. course 2:</p>
+          <input id="favourite_course_1" type="text" placeholder="MATH150"></input>
+          <p class="text-sm">Fav. language 1:</p>
+          <input id="favourite_pl_0" type="text" placeholder="JavaScript"></input>
+          <p class="text-sm">Fav. language 2:</p>
+          <input id="favourite_pl_1" type="text" placeholder="C/C++"></input>
+          <div style="grid-area: biography">
+            <p class="text-sm">Biography:</p>
+            <textarea id="biography" rows="4">I'm a CS student at SFU.</textarea>
+          </div>
+        </div>
+        <hr />
+        <div class="flex flex-row justify-start items-center w-full gap-1 py-2">
+          <button type="button" onclick="user_logout()">Log out</button>
+          <button type="botton" onclick="user_reset()" style="margin-left: auto;">Reset</button>
+          <button type="botton" onclick="user_submit()">Submit</button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/public/profile/term.js b/public/profile/term.js
new file mode 100644
index 0000000..868f7b6
--- /dev/null
+++ b/public/profile/term.js
@@ -0,0 +1,128 @@
+let is_officer = false;
+let computing_id = null;
+let selected_term = null;
+
+const load = async () => {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const term_id = parseInt(params.get("term"), 10);
+    
+    // get user login info
+    let req = await fetch("/api/auth/user");
+    if (req.status !== 200) {
+      throw new Error(req.status);
+    }
+    let data = await req.json();
+    computing_id = data.computing_id;
+
+    // get all terms for the tabs
+    req = await fetch("http://localhost:8080/api/officers/terms/" + computing_id + "?include_inactive=true");
+    if (req.status !== 200) {
+      throw new Error(req.status);
+    }
+    data = await req.json();
+
+    e_tabs = document.getElementById("tabs");
+
+    const e_profile = document.createElement("a");
+    e_profile.href = "/profile";
+    e_profile.innerHTML = "profile";
+    e_tabs.appendChild(e_profile);
+
+    const e_terms = [];
+
+    // iterate to find the selected term; it should be shown at the bottom of the tabs
+    data.forEach((term) => {
+      const e_term = document.createElement("a");
+      e_term.href = "/profile/term.html?term=" + term.id;
+      e_term.innerHTML = `${term.position} (${term.start_date.split("T")[0]})`;
+
+      // check for selected term
+      if (term.id === term_id) {
+        e_term.classList.add("selected");
+        e_tabs.appendChild(e_term);
+        selected_term = term;
+      } else {
+        e_terms.push(e_term);
+      }
+    });
+
+    if (selected_term === null) {
+      // invalid selection
+      window.location.href = "/profile";
+      return;
+    }
+
+    // add the remaining terms
+    e_terms.forEach((e_term) => e_tabs.appendChild(e_term));
+
+    document.getElementById("computing_id").value = computing_id;
+    document.getElementById("position").value = selected_term.position;
+    document.getElementById("start_date").value = selected_term.start_date.split("T")[0];
+    document.getElementById("end_date").value =
+      selected_term.end_date === null ? "In progress" : selected_term.end_date.split("T")[0];
+    document.getElementById("photo_url").value = selected_term.photo_url;
+    document.getElementById("photo").src = selected_term.photo_url;
+    document.getElementById("nickname").value = selected_term.nickname;
+    document.getElementById("favourite_course_0").value = selected_term.favourite_course_0;
+    document.getElementById("favourite_course_1").value = selected_term.favourite_course_1;
+    document.getElementById("favourite_pl_0").value = selected_term.favourite_pl_0;
+    document.getElementById("favourite_pl_1").value = selected_term.favourite_pl_1;
+    document.getElementById("biography").value = selected_term.biography;
+  } catch (err) {
+    console.log(err.toString());
+    document.getElementById("error").classList.remove("hidden");
+    document.getElementById("error").innerHTML = err.toString();
+  }
+};
+
+load();
+
+async function user_logout() {
+  try {
+    await fetch("/api/auth/logout");
+    window.location.href = "/";
+    window.location.reload();
+  } catch (err) {
+    console.log(err.toString());
+    document.getElementById("error").classList.remove("hidden");
+    document.getElementById("error").innerHTML = err.toString();
+  }
+}
+
+function user_reset() {
+  window.location.reload();
+}
+
+async function user_submit() {
+  try {
+    const body = {
+      nickname: document.getElementById("nickname").value,
+      favourite_course_0: document.getElementById("favourite_course_0").value,
+      favourite_course_1: document.getElementById("favourite_course_1").value,
+      favourite_pl_0: document.getElementById("favourite_pl_0").value,
+      favourite_pl_1: document.getElementById("favourite_pl_1").value,
+      biography: document.getElementById("biography").value,
+      photo_url: document.getElementById("photo_url").value
+    };
+
+    req = await fetch(
+      "/api/officers/term/" + selected_term.id,
+      {
+        method: 'PATCH',
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body)
+      }
+    );
+    if (req.status !== 200) {
+      throw new Error(req.status);
+    }
+    window.location.reload();
+  } catch (err) {
+    console.log(err.toString());
+    document.getElementById("error").classList.remove("hidden");
+    document.getElementById("error").innerHTML = err.toString();
+  }
+}
diff --git a/src/main/components/Page.js b/src/main/components/Page.js
index 364e9eb..8627fa7 100644
--- a/src/main/components/Page.js
+++ b/src/main/components/Page.js
@@ -33,25 +33,14 @@ export const Page = ({ children }) => {
           '--csss-icon-color': '#a1a1aa' // zinc-400
         }}
       />
-      <a style={{ marginTop: 'auto' }} href="#profile">
-        {userInfo !== null && userInfo.profile_picture_url !== null ? (
-          <img
-            style={{
-              width: '32px',
-              height: '32px',
-              objectFit: 'cover'
-            }}
-            src="https://random.dog/oq9izk0057hy.jpg"
-          />
-        ) : (
-          <Icon.Profile
-            style={{
-              width: '100%',
-              '--csss-icon-color': '#a1a1aa', // zinc-400
-              '--csss-icon-stroke-width': '1px'
-            }}
-          />
-        )}
+      <a style={{ marginTop: 'auto' }} href="/profile">
+        <Icon.Profile
+          style={{
+            width: '100%',
+            '--csss-icon-color': '#a1a1aa', // zinc-400
+            '--csss-icon-stroke-width': '1px'
+          }}
+        />
       </a>
     </>
   );
diff --git a/src/main/index.js b/src/main/index.js
index ec27493..3a3c22c 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -4,7 +4,6 @@ import { createHashRouter, RouterProvider } from 'react-router-dom';
 
 import {
   Home,
-  Profile,
   CommonRooms,
   NotFound,
   Affiliates,
@@ -15,7 +14,6 @@ import {
 const router = createHashRouter([
   { path: '/', element: <Home /> },
   { path: '/common_rooms', element: <CommonRooms /> },
-  { path: '/profile', element: <Profile /> },
   { path: '/affiliates', element: <Affiliates /> },
   { path: '/committees', element: <Committees /> },
   { path: '/documents', element: <Documents /> },
diff --git a/src/main/pages/index.js b/src/main/pages/index.js
index 5888fd6..f8e8e41 100644
--- a/src/main/pages/index.js
+++ b/src/main/pages/index.js
@@ -1,6 +1,5 @@
 export * from './Home.js';
 export * from './NotFound.js';
-export * from './Profile.js';
 export * from './CommonRooms.js';
 export * from './Committees.js';
 export * from './Affiliates.js';
diff --git a/tailwind.config.js b/tailwind.config.js
index 7e6eead..1b18af7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.js'],
+  content: ['./src/**/*.js', './public/**/*.html'],
   theme: {
     extend: {}
   },