Finished UI for DeleteView

This commit is contained in:
Kristofers Solo 2023-06-29 01:03:41 +00:00
parent 5265ea03ff
commit 7dc16d0287
4 changed files with 54 additions and 7 deletions

View File

@ -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 %}

View File

@ -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>

View File

@ -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")

View File

@ -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", () => {