validate search forms

tubearchivist/home/forms.py

@@ -60,3 +60,27 @@ class ApplicationSettingsForm(forms.Form):
     downloads_add_thumbnail = forms.ChoiceField(
         widget=forms.Select, choices=THUMBNAIL_CHOICES, required=False
     )
+
+
+class VideoSearchForm(forms.Form):
+    """search videos form"""
+
+    searchInput = forms.CharField(
+        label="Search your videos",
+        widget=forms.TextInput(attrs={"autocomplete": "off"}),
+    )
+
+
+class ChannelSearchForm(forms.Form):
+    """search for channels"""
+
+    searchInput = forms.CharField(
+        label="",
+        widget=forms.TextInput(
+            attrs={
+                "oninput": "searchChannels(this.value)",
+                "autocomplete": "off",
+                "list": "resultBox",
+            }
+        ),
+    )

tubearchivist/home/templates/home/channel.html

@@ -20,11 +20,12 @@
     <div class="search-form icon-text">
         <div class="search-icon">
             <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
-            <p>Search Channels</p>
+            <p>Search your Channels</p>
         </div>
         <form onSubmit="return channelRedirect();" id="search-box">
             {% csrf_token %}
-            <input name="videoSearch" list="resultBox" type="text" id="searchInput" autocomplete="off" oninput="searchChannels(this.value)">
+            <!-- <input name="videoSearch" list="resultBox" type="text" id="searchInput" autocomplete="off" oninput="searchChannels(this.value)"> -->
+            {{ search_form }}
             <datalist id="resultBox">
             </datalist>
         </form>

tubearchivist/home/templates/home/home.html

@@ -34,7 +34,7 @@
         </div>
         <form action="/" method="POST" id="search-box">
             {% csrf_token %}
-            <input name="videoSearch" list="resultBox" type="text" id="searchInput" autocomplete="off">
+            {{ search_form }}
         </form>
     </div>
 </div>

tubearchivist/home/views.py

@@ -17,8 +17,10 @@ from django.utils.http import urlencode
 from django.views import View
 from home.forms import (
     ApplicationSettingsForm,
+    ChannelSearchForm,
     CustomAuthForm,
     UserSettingsForm,
+    VideoSearchForm,
 )
 from home.src.config import AppConfig
 from home.src.download import ChannelSubscription, PendingList
@@ -75,7 +77,10 @@ class HomeView(View):
         videos_hits = search.get_data()
         max_hits = search.max_hits
         pagination_handler.validate(max_hits)
+
+        search_form = VideoSearchForm()
         context = {
+            "search_form": search_form,
             "videos": videos_hits,
             "pagination": pagination_handler.pagination,
             "sort_by": view_config["sort_by"],
@@ -157,11 +162,15 @@ class HomeView(View):
     @staticmethod
     def post(request):
         """handle post from search form"""
-        post_data = dict(request.POST)
-        search_query = post_data["videoSearch"][0]
+        search_form = VideoSearchForm(data=request.POST)
+        if search_form.is_valid():
+            search_query = request.POST.get("searchInput")
+            print(search_query)
             search_url = "/?" + urlencode({"search": search_query})
             return redirect(search_url, permanent=True)
 
+        return redirect("home")
+
 
 class LoginView(View):
     """resolves to /login/
@@ -469,7 +478,9 @@ class ChannelView(View):
         channel_hits = search.get_data()
         max_hits = search.max_hits
         pagination_handler.validate(search.max_hits)
+        search_form = ChannelSearchForm()
         context = {
+            "search_form": search_form,
             "channels": channel_hits,
             "max_hits": max_hits,
             "pagination": pagination_handler.pagination,

tubearchivist/static/css/style.css

@@ -62,7 +62,7 @@ ul {
     margin-left: 20px;
 }
 
-td, span {
+td, span, label {
     font-family: Sen-Regular, sans-serif;
     color: var(--main-font);
 }

tubearchivist/static/script.js

@@ -372,7 +372,7 @@ function showSearch() {
     } else {
         searchBox.style.display = "";
     }
-    var inputBox = document.getElementById('searchInput');
+    var inputBox = document.getElementById('id_searchInput');
     inputBox.focus();
 }