Use message framework in vote

polls/templates/polls/detail.html

@@ -16,9 +16,8 @@
 			</div>
 		</div>
 	</nav>
-
 	<!-- Vote Page Content -->
-	<div class="container mx-auto p-4">
+	{% comment %} <div class="container mx-auto p-4">
 		<!-- Participant + UP DOWN zone -->
 		<div class="flex flex-wrap items-center text-gray-600 mb-4 place-content-center">
 			<div class="flex items-center text-black py-1 rounded-md mr-2">
@@ -33,10 +32,10 @@
 				</div>
 			</div>
 		</div>
-	</div>
+	</div> {% endcomment %}
 
 	<!-- Modern Choice Selection -->
-	<div class="bg-white p-4 rounded-lg shadow-md mb-4">
+	<div class="bg-neutral-100 p-4 rounded-lg mb-4">
 		<div class="relative">
 			<div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10">
 				<div class="bg-white p-4 rounded-lg shadow-md mb-4">
@@ -50,11 +49,6 @@
 						<div class="bg-white p-4 rounded-lg shadow-md mb-4">
 							<div id="selected-choice" class="mt-4 text-lg font-bold text-green-500">Please Select a Choice😊</div>
 						</div>
-						{% if error_message %}
-						<div class="bg-red p-4 rounded-lg shadow-md mb-4">
-							<p class="error-message text-red-500"><strong>{{ error_message }}</strong></p>
-						</div>
-						{% endif %}
 						<div class="bg-white p-4 rounded-lg shadow-md mb-4">
 							<div class="grid grid-cols-3 gap-4">
 								<!-- Buttons as choices (hidden) -->
@@ -81,12 +75,9 @@
 							</a>
 							<button
 								type="submit"
-								class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors duration-300 hidden"
+								name="vote-button"
-								id="vote-button">
+								class="bg-blue-500 text-white px-4 py-2 mx-5 rounded-lg hover:bg-blue-600 transition-colors duration-300"
-								Go Back
+								id="vote-button" disabled>
-							</button>
-							<button
-								class="bg-blue-500 text-white px-4 py-2 mx-5 rounded-lg hover:bg-blue-600 transition-colors duration-300">
 								Vote
 							</button>
 						</div>

polls/templates/polls/results.html

@@ -25,7 +25,19 @@
   </nav>
 
   <!-- Result Page Content -->
-  <div class="container mx-auto p-4">
+
+  <div class="container mx-auto p-4 text-center">
+    {% for message in messages %}
+      {% if message.tags == 'success' %}
+      <div class="relative">
+        <div class="bg-white p-4 rounded-lg shadow-md mb-4 z-10 relative border-black border-solid border-2">
+              <p class="text-green-500 font-bold text-xl">{{ message }}</p>
+        </div>
+        <div
+        class="absolute inset-0 mt-1 ml-1 w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500 h-full"></div>
+      </div>
+      {% endif %}
+    {% endfor %}
 
     <!-- Result Summary -->
     <div class="relative">

polls/views.py

@@ -1,10 +1,12 @@
 from django.http import HttpResponseRedirect
-from django.shortcuts import get_object_or_404, render
+from django.shortcuts import get_object_or_404, render, redirect
 from django.urls import reverse
 from django.views import generic
 from django.utils import timezone
-from django.urls import reverse_lazy
+from django.urls import reverse_lazy, reverse
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.contrib import messages
+from django.contrib.auth.decorators import login_required
 
 from .forms import SignUpForm
 from .models import Choice, Question
@@ -73,26 +75,24 @@ class SignUpView(generic.CreateView):
     success_url = reverse_lazy('login')
     template_name = 'registration/signup.html'
 
-
+@login_required
 def vote(request, question_id):
     """
-    A function that update the database. Add vote count to choice that user vote
+    A function that updates the database. Adds a vote count to the choice that the user votes for
-    in specific question_id.
+    in a specific question_id.
     """
-
     question = get_object_or_404(Question, pk=question_id)
     try:
         selected_choice = question.choice_set.get(pk=request.POST["choice"])
     except (KeyError, Choice.DoesNotExist):
-        return render(
+        messages.error(request, "You didn't select a choice.")
-            request,
+        return render(request, "polls/detail.html", {"question": question})
-            "polls/detail.html",
-            {
-                "question": question,
-                "error_message": "You didn't select a choice.",
-            },
-        )
     else:
+        if request.method == "POST" and "vote-button" in request.POST:
             selected_choice.votes += 1
             selected_choice.save()
+            messages.success(request, "Your vote was recorded successfully🥳")
             return HttpResponseRedirect(reverse("polls:results", args=(question.id,)))
+        else:
+            messages.error(request, "You cannot vote by typing the URL.")
+            return render(request, "polls/detail.html", {"question": question})