2 files changed, 37 insertions, 0 deletions
diff --git a/code/api/wwwroot/scripts/components/index.js b/code/api/wwwroot/scripts/components/index.js
new file mode 100644
index 0000000..ffae0e3
--- /dev/null
+++ b/code/api/wwwroot/scripts/components/index.js
@@ -0,0 +1,19 @@
+function load_components() {
+    document.body.appendChild(script_tag("/scripts/components/profile-modal.js", 1));
+}
+
+function get_script_version_hash(key, salt) {
+    const currentHash = localStorage.getItem(key) ?? "";
+    const hash = get_md5_hash(key + salt);
+    if (currentHash === hash) return currentHash;
+    localStorage.setItem(key, hash);
+    return hash;
+}
+
+function script_tag(scriptSrc, version) {
+    return create_element("script", {
+        src: scriptSrc + "?v=" + get_script_version_hash(scriptSrc, version)
+    })
+}
+
+document.addEventListener("DOMContentLoaded", load_components)
+\ No newline at end of file
diff --git a/code/api/wwwroot/scripts/components/profile-modal.js b/code/api/wwwroot/scripts/components/profile-modal.js
new file mode 100644
index 0000000..91d4ed3
--- /dev/null
+++ b/code/api/wwwroot/scripts/components/profile-modal.js
@@ -0,0 +1,18 @@
+class ProfileModal extends HTMLElement {
+    constructor() {
+        super();
+        const sessionData = session.get();
+        const root = create_element("div", {
+            style: {
+                padding: "5px",
+                display: ""
+            }
+        }, [
+            create_element("h4", {innerText: sessionData.username, style: {margin:0}}),
+            create_element("p", {innerText: sessionData.role})
+        ]);
+        this.innerHTML = root.innerHTML;
+    }
+}
+
+customElements.define('profile-modal', ProfileModal);