4 files changed, 140 insertions, 0 deletions
diff --git a/profile/public/index.html b/profile/public/index.html
new file mode 100644
index 0000000..fd7b507
--- /dev/null
+++ b/profile/public/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
+            integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+        <title>Steckbrief</title>
+    </head>
+
+    <body>
+        <div class="pure-menu pure-menu-horizontal">
+            <a href="/" class="pure-menu-item pure-menu-link">Home</a>
+            <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
+        </div>
+        <main>
+            <h1 id="username"></h1>
+            <form class="pure-form pure-form-stacked">
+                <fieldset>
+                    <legend>Steckbrief</legend>
+
+                    <!-- TODO: Consider autosave -->
+                    <button type="submit" class="pure-button pure-button-primary">Wohooo</button>
+                </fieldset>
+            </form>
+        </main>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/profile/public/script.js b/profile/public/script.js
new file mode 100644
index 0000000..a386f56
--- /dev/null
+++ b/profile/public/script.js
@@ -0,0 +1,62 @@
+const fs = document.querySelector("fieldset");
+const form = document.querySelector("form");
+let init = true;
+
+function updateHeading(user) {
+    document.getElementById("username").textContent = `${user.name} ${user.surname}`;
+}
+
+function appendQuestions(question) {
+    const div = document.createElement("div");
+
+    const label = document.createElement("label");
+    label.for = "id_" + question.id;
+    label.textContent = question.question;
+    div.appendChild(label);
+
+    if (question.type === "file" && question.answer) {
+        const img = document.createElement("img");
+        img.src = "uploads/" + question.answer;
+        img.alt = "Image";
+        div.appendChild(img);
+    }
+
+    const field = document.createElement("input");
+    field.id = "id_" + question.id;
+    field.name = question.id;
+    if (question.answer !== undefined) init = false;
+    field.value = question.answer;
+    field.placeholder = question.question;
+    field.type = question.type;
+    if (question.type === "file") field.accept = "image/*";
+
+    div.appendChild(field);
+    fs.insertBefore(div, fs.querySelector("button"));
+}
+
+form.addEventListener("submit", async (evt) => {
+    evt.preventDefault();
+    const url = init ? "api/add" : "api/update";
+    const method = init ? "POST" : "PUT";
+
+    const inputs = form.querySelectorAll("input");
+    const body = new FormData();
+    for (const input of inputs) {
+        if (input.type !== "file") body.append(input.name, input.value);
+        else body.append(input.name, input.files[0] ?? "dbg-image");
+    }
+
+    const resp = await fetch(url, { method, body });
+    const res = await resp.text();
+    if (res !== "ok") alert("AHHHH");
+});
+
+fetch("api/user")
+    .then((response) => response.json())
+    .then(updateHeading)
+    .catch(console.error);
+
+fetch("api/questions")
+    .then((response) => response.json())
+    .then((response) => response.forEach(appendQuestions))
+    .catch(console.error);
diff --git a/profile/public/style.css b/profile/public/style.css
new file mode 100644
index 0000000..e674e71
--- /dev/null
+++ b/profile/public/style.css
@@ -0,0 +1,44 @@
+html,
+body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #eec0c6;
+    background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
+}
+
+div {
+    background: white;
+}
+
+main {
+    position: absolute;
+    max-height: 80%;
+    overflow-y: auto;
+    width: 50%;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    border-radius: 10px;
+    background: white;
+}
+
+input,
+button,
+select {
+    width: 100%;
+}
+
+img {
+    max-width: 80%;
+    max-height: 80%;
+}
+
+@media only screen and (max-width: 600px) {
+    main {
+        width: calc(100% - 50px);
+    }
+}
diff --git a/profile/public/uploads/.gitkeep b/profile/public/uploads/.gitkeep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/profile/public/uploads/.gitkeep