First commit

templates/register.jinja2

@@ -0,0 +1,105 @@
+{% extends "base.jinja2" %}
+{% block title %}Grass Touching Register{% endblock %}
+{% block body %}
+
+<div class="d-flex justify-content-center align-items-center" style="height: 75vh;">
+    <div class="bg-white rounded rounded-5 border border-5 border-white p-4">
+        <h2>Register</h2>
+        <form target="/register" method="post">
+            <div class="form-group" style="margin-top: 4%;">
+                <label for="usernameinput">Username</label>
+                <input name="username" class="form-control" id="usernameinput" placeholder="Enter username">
+            </div>
+
+            <div class="form-group" style="margin-top: 4%;">
+                <label for="passwordinput">Password</label>
+                <input name="password" class="form-control" id="passwordinput" placeholder="Enter password">
+            </div>
+
+            <div class="form-group" style="margin-top: 4%;">
+                <div id="grass-touching-form" class="mb-3">
+                    <label class="form-label" for="file_input">Grass touching proof</label>
+                    <input accept="image/png, image/jpeg" name="file" type="file" class="form-control" id="file_input">
+                </div>
+
+                <small id="proofhelp" class="form-text text-muted">Dont worry! We wont tell your friends.</small>
+            </div>
+            <button disabled id="submit" type="submit" class="btn btn-primary mx-auto d-block" style="width: 100%; margin-top: 4%;">Submit</button>
+        </form>
+    </div>
+</div>
+
+<script type="text/javascript">
+file_input = document.getElementById("file_input");
+file_input.addEventListener("change", function () {
+
+    var filereader = new FileReader();
+
+    function upload_success(image_url) {
+        document.getElementById("submit").disabled = false;
+        document.getElementById("submit").innerHTML = "Submit"
+
+        document.getElementById("grass-touching-form").innerHTML += `<img class="preview-img" src="${image_url}"></img>`;
+    }
+
+    function upload_file(file_type, file_content) {
+        fetch('{{ url_for("upload") }}', {
+                method: "POST",
+                body: JSON.stringify({image_data: file_content, image_type: file_type}),
+                headers: {
+                    "Content-type": "application/json"
+                }
+            }
+        ).then(response => {
+            if (response.status == 401) {
+                response.text().then(text => {
+                        if (text) {
+                            console.error(text);
+                            document.getElementById("grass-touching-form").innerHTML += `<div class="text-danger">${text}</div>`;
+                            document.getElementById("submit").innerHTML = "Submit"
+
+                        }
+                    }
+                )
+                return;
+            }
+            else if (response.status == 400) {
+                document.getElementById("grass-touching-form").innerHTML += `<div class="text-danger">Unknown error happened. Please try again.</div>`;
+                document.getElementById("submit").innerHTML = "Submit"
+                console.error("Unknown error")
+                return;
+            } 
+
+            return response.text();
+        })
+        .then(image_url => {
+            if (image_url) {
+                upload_success(image_url);
+            }
+        })
+        .catch((error) => {
+            console.error("Error:", error);
+        });
+    }
+
+    filereader.onload = function () {
+        document.getElementById("submit").innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden">Loading...</span>';
+        
+        const file = file_input.files[0];
+        let file_type;
+
+        if (file.type.match("image/jpeg")) {
+            file_type = "jpeg";
+        }
+        else if (file.type.match("image/png")) {
+            file_type = "png";
+        }
+
+        upload_file(file_type, filereader.result);
+    };
+
+    filereader.readAsDataURL(file_input.files[0]);
+});
+</script>
+
+{% endblock %}