From 7dc16d02877575da307358e0ac424a3f654e70b3 Mon Sep 17 00:00:00 2001
From: Kristofers Solo <kristians.cagulis@pm.me>
Date: Thu, 29 Jun 2023 01:03:41 +0000
Subject: [PATCH] Finished UI for `DeleteView`

---
 src/apps/fossdb/templates/delete_view.html   | 54 ++++++++++++++++++--
 src/apps/fossdb/templates/detailed_view.html |  2 +-
 src/apps/fossdb/views.py                     |  4 +-
 src/static/js/buttons.js                     |  1 +
 4 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/apps/fossdb/templates/delete_view.html b/src/apps/fossdb/templates/delete_view.html
index ac37c83..4b0f0d1 100644
--- a/src/apps/fossdb/templates/delete_view.html
+++ b/src/apps/fossdb/templates/delete_view.html
@@ -1,9 +1,55 @@
 {% extends "base.html" %}
-{% block title %}Delete {{ project.name }}{% endblock %}
+{% load static %}
+{% block title %}Delete {{ project }}{% endblock %}
 {% block content %}
-    <h4>Are you sue you want to delete {{ project.name }}?</h4>
-    <form method="post">
+    <form method="post"
+          id="delete-form"
+          class="flex flex-col items-center justify-center space-y-4 my-auto">
+        <p class="font-bold">To confirm, type "{{ project.owner.username }}/{{ project.name }}" in the box below</p>
         {% csrf_token %}
-        <button class="" type="submit">Delete post</button>
+        <input type="text"
+               id="confirm-input"
+               class="mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300 text-center" />
+        <button id="submit-button"
+                class="px-12 py-2 border border-transparent rounded-md text-lightsteelblue-100 font-bold uppercase bg-slategray-200 opacity-50 transform ease-in-out duration-500 cursor-default"
+                type="submit">Delete</button>
     </form>
+    <script type="text/javascript">
+        var confirm_string = "{{ project.owner.username }}/{{ project.name }}"
+        const USER_INPUT = document.getElementById("confirm-input")
+        const SUBMIT_BUTTON = document.getElementById("submit-button")
+        SUBMIT_BUTTON.disabled = true
+
+        USER_INPUT.addEventListener("input", () => {
+            if (confirm_string == USER_INPUT.value) {
+                SUBMIT_BUTTON.classList.remove(
+                    "bg-slategray-200",
+                    "text-lightsteelblue-100",
+                    "opacity-50",
+                    "cursor-default"
+                )
+                SUBMIT_BUTTON.classList.add(
+                    "bg-indianred-100",
+                    "text-gray-500",
+                    "opacity-100",
+                    "hover:opacity-60"
+                )
+                SUBMIT_BUTTON.disabled = false
+            } else {
+                SUBMIT_BUTTON.classList.remove(
+                    "bg-indianred-100",
+                    "text-gray-500",
+                    "opacity-100",
+                    "hover:opacity-60"
+                )
+                SUBMIT_BUTTON.classList.add(
+                    "bg-slategray-200",
+                    "text-lightsteelblue-100",
+                    "opacity-50",
+                    "cursor-default"
+                )
+                SUBMIT_BUTTON.disabled = true
+            }
+        })
+    </script>
 {% endblock %}
diff --git a/src/apps/fossdb/templates/detailed_view.html b/src/apps/fossdb/templates/detailed_view.html
index 81d190d..84942a0 100644
--- a/src/apps/fossdb/templates/detailed_view.html
+++ b/src/apps/fossdb/templates/detailed_view.html
@@ -114,7 +114,7 @@
                 <button class="px-12 py-2 border border-transparent rounded-md text-gray-500 bg-skyblue-300 hover:opacity-60 transform ease-in-out duration-500">
                     <a href="{% url 'project-update' project.owner project.name %}">Update</a>
                 </button>
-                <button class="px-12 py-2 border border-transparent rounded-md text-gray-500 bg-skyblue-300 hover:opacity-60 transform ease-in-out duration-500">
+                <button class="px-12 py-2 border border-transparent rounded-md text-gray-500 bg-burlywood hover:opacity-60 transform ease-in-out duration-500">
                     <a href="{% url 'project-delete' project.owner project.name %}">Delete</a>
                 </button>
             </div>
diff --git a/src/apps/fossdb/views.py b/src/apps/fossdb/views.py
index beac620..2e997ad 100644
--- a/src/apps/fossdb/views.py
+++ b/src/apps/fossdb/views.py
@@ -82,7 +82,7 @@ class ProjectUpdateView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):
         return self.get_object().owner == self.request.user
 
     def handle_no_permission(self):
-        return redirect("index")
+        return redirect("login")
 
     def get_context_data(self, *args, **kwargs):
         data = super(ProjectUpdateView, self).get_context_data(**kwargs)
@@ -105,4 +105,4 @@ class ProjectDeleteView(LoginRequiredMixin, UserPassesTestMixin, DeleteView):
         return self.get_object().owner == self.request.user
 
     def handle_no_permission(self):
-        return redirect("index")
+        return redirect("login")
diff --git a/src/static/js/buttons.js b/src/static/js/buttons.js
index 847c3e8..07bca2e 100644
--- a/src/static/js/buttons.js
+++ b/src/static/js/buttons.js
@@ -1,6 +1,7 @@
 window.addEventListener("DOMContentLoaded", () => {
     const FORM_VERIFY = document.getElementsByClassName("verify")
     const SUBMIT_BUTTON = document.getElementById("submit-button")
+    SUBMIT_BUTTON.disabled = true
 
     Array.from(FORM_VERIFY).forEach((input) => {
         input.addEventListener("input", () => {