From d672849a2503f2d519547f07509f1389c8de3dba Mon Sep 17 00:00:00 2001
From: Hannes Kuchelmeister <hannes@kuchelmeister.org>
Date: Fri, 3 Sep 2021 17:23:21 +0200
Subject: [PATCH] edit design to look a bit more sleek

---
 templates/base.html     | 32 ++++++++++++++++++
 templates/edit.html     | 50 ++++++++++++++++++----------
 templates/error.html    |  7 +++-
 templates/index.html    | 73 +++++++++++++++++++++++++++++++----------
 templates/redirect.html |  5 ++-
 5 files changed, 130 insertions(+), 37 deletions(-)
 create mode 100644 templates/base.html
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..a85bae9
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+    {% block head %}
+    <title>{% block title %}{% endblock title %} - ics-proxy</title>
+    {% endblock head %}
+</head>
+
+<body>
+    <div id="content">
+        <div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog"
+            id="modalTour">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content rounded-6 shadow">
+                    <div class="modal-body p-5">
+                        {% block content %}{% endblock content %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="footer">
+        {% block footer %}
+        {% endblock footer %}
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/edit.html b/templates/edit.html
index ec94d48..8c37d31 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -1,21 +1,37 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
+{% block title %}Edit{% endblock title %}
+{% block head %}
+{{ super() }}
+<script>
+    function copy_link() {
+        /* Get the text field */
+        var copyText = document.getElementById("proxy_link");
 
-<head>
-    <meta charset="utf-8" />
-    <title>Actix web</title>
-</head>
+        /* Copy the text inside the text field */
+        navigator.clipboard.writeText(copyText.value);
+    }
+</script>
+{% endblock head %}
+{% block content %}
 
-<body>
-    <h1>Hi, your link is <a href="{{ root }}/{{ uuid }}/events.ics"">{{ root }}/{{ uuid }}/events.ics</a>!</h1>
-    it takes the data from
-    <p>
+<h2 class="fw-bold mb-1">Hi, your link is </h2>
+<div class="input-group input-group-lg">
+    <input id="proxy_link" class="form-control" type="text" value="{{ root }}/{{ uuid }}/events.ics" disabled>
+    <button onclick="copy_link()" class=" btn btn-outline-secondary">Copy</button>
+</div>
+
+You can simply copy and past this link into any calendar application.
+<hr class="my-4">
+<div class="mt-3">
+    To edit where it leads to:
     <form action=" edit_process">
-            <input name="uuid" type="hidden" value="{{ uuid }}">
-            <input name="link" type="text" value="{{ link }}">
-            <input value="Replace" name="replace" type="submit">
-            </form>
-            </p>
-</body>
+        <input name="uuid" type="hidden" value="{{ uuid }}">
+        <div class="input-group input-group-sm mb-3">
+            <input class="form-control" name="link" type="text" value="{{ link }}">
+            <input class="btn btn-outline-secondary" value="Replace Link" name="replace" type="submit">
+        </div>
+    </form>
+    <a href="/">Back to main page</a>
+</div>
 
-</html>
\ No newline at end of file
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/error.html b/templates/error.html
index 58f848b..b973cdc 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -1 +1,6 @@
-{{ message }}
\ No newline at end of file
+{% extends "base.html" %}
+{% block content %}
+<div class="alert alert-danger" role="alert">
+    {{ message }}
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9fd6c87..04da92e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,21 +1,58 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
+{% block title %}Index{% endblock title %}
+{% block head %}
+{{ super() }}
+<script>
+    window.onload = function hide_buttons() {
+        document.getElementById("create-button").hidden = true;
+        document.getElementById("edit-button").hidden = true;
+    }
 
-<head>
-    <meta charset="utf-8" />
-    <title>Actix web</title>
-</head>
+    function switch_buttons() {
+        var text = document.getElementById("link").value;
+        var create = document.getElementById("create-button");
+        var edit = document.getElementById("edit-button");
 
-<body>
-    <h1>Welcome!</h1>
-    <p>
-    <form action="index_process">
-        <label for="link"">Link: </label>
-        <input id=" link" type="text" name="link" /><br />
-        <input value="Create proxy link" name="create" type="submit">
-        <input value="Edit proxy link" name="edit" type="submit">
-    </form>
-    </p>
-</body>
+        if (!isValidHttpUrl(text) || containsCurrentURL(text)) {
+            create.hidden = true;
+            edit.hidden = false;
+        } else {
+            create.hidden = false;
+            edit.hidden = true;
+            console.log("Create")
+        }
+    }
 
-</html>
\ No newline at end of file
+    function isValidHttpUrl(string) {
+        let url;
+        try {
+            url = new URL(string);
+        } catch (_) {
+            return false;
+        }
+        return url.protocol === "http:" || url.protocol === "https:";
+    }
+    function containsCurrentURL(str) {
+        return str.includes((new URL(window.location.href)).host);
+    }
+</script>
+{% endblock head %}
+{% block content %}
+<h2 class="fw-bold mb-0">Welcome!</h2>
+<small class="text-muted">Here you can paste an ics link, to create a new proxy url.
+    Alternatively you can paste an existing url to edit it.</small>
+<form action="index_process">
+    <div class="form-floating mb-3">
+        <input name="link" type="text" class="form-control rounded-4" id="link" placeholder="https://some.url"
+            oninput="switch_buttons()">
+        <label for="link">Link</label>
+
+    </div>
+    <div class="form-floating mb-3">
+        <input onload="hide_buttons()" id="create-button" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
+            value="Create new" name="create" type="submit">
+        <input onload="hide_buttons()" id="edit-button" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
+            value="Edit ✎" name="edit" type="submit">
+    </div>
+</form>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/redirect.html b/templates/redirect.html
index 5f6b174..1c9defd 100644
--- a/templates/redirect.html
+++ b/templates/redirect.html
@@ -1,3 +1,6 @@
+{% extends "base.html" %}
+{% block content %}
 <p>{{ message }}</p>
 <p>Please wait to be redirected or click <a href="{{ link }}">here!</a></p>
-<meta http-equiv="Refresh" content="{{ time }}; url='{{ link }}'" />
\ No newline at end of file
+<meta http-equiv="Refresh" content="{{ time }}; url='{{ link }}'" />
+{% endblock content %}
\ No newline at end of file
