4 files changed, 70 insertions, 25 deletions
diff --git a/profile.txt b/profile.txt
index 66655f7..77cae98 100644
--- a/profile.txt
+++ b/profile.txt
@@ -8,3 +8,4 @@ Lebensmotto/Seniorquote - text
 Lieblingsbands/-musiker/-genre - text
 Lieblingsfach - text
 Hassfach - text
+Kinderbild - file
+\ No newline at end of file
diff --git a/profile/public/index.html b/profile/public/index.html
index 672f409..f8fdee5 100644
--- a/profile/public/index.html
+++ b/profile/public/index.html
@@ -1,32 +1,40 @@
 <!DOCTYPE html>
 <html lang="de">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link
+<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>
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"
+            integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw=="
+            crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css"
+          integrity="sha512-w+u2vZqMNUVngx+0GVZYM21Qm093kAexjueWOv9e9nIeYJb1iEfiHC7Y+VvmP/tviQyA5IR32mwN/5hTEJx6Ng=="
+          crossorigin="anonymous"/>
+    <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>
-            <h2 id="username"></h2>
-            <form class="pure-form pure-form-stacked">
-                <fieldset>
-                    <!-- TODO: Consider autosave -->
-                    <button type="submit" class="pure-button pure-button-primary">Wohooo</button>
-                </fieldset>
-            </form>
-        </main>
-        <script src="script.js"></script>
-    </body>
+<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>
+    <h2 id="username"></h2>
+    <form class="pure-form pure-form-stacked">
+        <fieldset>
+            <button type="submit" class="pure-button pure-button-primary">Senden!?</button>
+        </fieldset>
+    </form>
+</main>
+<div class="popup">
+    <img id="popup-img">
+</div>
+<script src="script.js"></script>
+</body>
 </html>
diff --git a/profile/public/script.js b/profile/public/script.js
index b927f9f..ba2284b 100644
--- a/profile/public/script.js
+++ b/profile/public/script.js
@@ -2,6 +2,21 @@ const fs = document.querySelector("fieldset");
 const form = document.querySelector("form");
 let init = true;
 
+const popup = document.querySelector(".popup");
+const popupImage = document.querySelector("#popup-img");
+const cropper = new Cropper(popupImage, { // ration 2/3
+    dragMode: 'move',
+    aspectRatio: 2 / 3,
+    autoCropArea: 0.65,
+    restore: false,
+    guides: false,
+    center: false,
+    highlight: false,
+    cropBoxMovable: false,
+    cropBoxResizable: false,
+    toggleDragModeOnDblclick: false,
+});
+
 function updateHeading(user) {
     document.getElementById("username").textContent = `Steckbrief: ${user.name} ${user.middlename || ""} ${user.surname}`;
 }
@@ -28,7 +43,22 @@ function appendQuestions(question) {
     field.value = question.answer || "";
     field.placeholder = question.question;
     field.type = question.type;
-    if (question.type === "file") field.accept = "image/*";
+    if (question.type === "file") {
+        field.accept = "image/*";
+        field.addEventListener("input", e => {
+            const file = e.target.files[0];
+            popupImage.file = file;
+            const reader = new FileReader();
+            reader.onload = (function (aImg) {
+                return function (e) {
+                    aImg.src = e.target.result;
+                };
+            })(popupImage);
+            reader.readAsDataURL(file);
+            popupImage.style.display = "block !important";
+            console.log(cropper);
+        });
+    }
 
     div.appendChild(field);
     fs.insertBefore(div, fs.querySelector("button"));
diff --git a/profile/public/style.css b/profile/public/style.css
index 106e590..a30e7ef 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -132,3 +132,9 @@ img {
     height: 80%;
     margin-bottom: 12px;
 }
+
+.popup {
+    z-index: 10;
+    position: absolute;
+    display: none;
+}
+\ No newline at end of file