Created custom SignUp and Login pages

requirements.txt

@@ -2,3 +2,5 @@ Django==4.2.2
 Pillow==9.5.0
 fontawesomefree==6.4.0
 mysqlclient==2.1.1
+django-filter==23.2
+django-tailwind==3.6.0

requirements_dev.txt

@@ -1,2 +1,3 @@
 mypy==1.3.0
 ruff==0.0.272
+django-browser-reload==1.10.0

src/FOSSDB/settings.py

@@ -41,6 +41,7 @@ INSTALLED_APPS = [
     "django_filters",
     "tailwind",
     "tokyonight_night",
+    "crispy_forms",
     "django_browser_reload",
     "fontawesomefree",
     "django.contrib.admin",

src/apps/account/forms.py

@@ -6,7 +6,7 @@ from .models import User
 
 
 class SignUpForm(UserCreationForm):
-    email = forms.EmailField(required=False)
+    email = forms.EmailField(required=False, help_text="Optional.")
 
     class Meta:
         model = User

src/apps/account/templates/login.html

@@ -1,14 +1,32 @@
 {% extends "base.html" %}
 {% load static %}
 {% block title %}{{ title }}{% endblock %}
-{% block meta %}{% endblock %}
+{% block meta %}
+    <script src="{% static 'js/buttons.js' %}" defer></script>
+{% endblock meta %}
 {% block content %}
-    <form method="post">
+    <form method="post"
+          class="flex flex-col items-center justify-center space-y-4 my-auto">
         {% csrf_token %}
-        {{ form.as_p }}
+        <input type="text"
+               placeholder="Username"
+               name="username"
+               value="{{ form.username.value|default:'' }}"
+               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+        {% if form.username.errors %}<p class="text-indianred-100 text-xs italic">{{ form.username.errors }}</p>{% endif %}
+        <input type="password"
+               placeholder="Password"
+               name="password"
+               value="{{ form.username.value|default:'' }}"
+               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+        {% if form.password.errors %}<p class="text-indianred-100 text-xs italic">{{ form.password.errors }}</p>{% endif %}
+        <button type="submit"
+                id="submit-button"
+                class="px-12 py-2 border border-transparent rounded-md text-lightsteelblue-100 bg-slategray-200 opacity-50 transform ease-in-out duration-500 cursor-default">
+            Login
+        </button>
         <p>
-            Don't have an account? Create one <a href="{% url 'signup' %}">Here</a>!
+            Don't have an account? Create one <a class="underline text-skyblue-300" href="{% url 'signup' %}">Here</a>!
         </p>
-        <button type="submit">Login</button>
     </form>
 {% endblock %}

src/apps/account/templates/signup.html

@@ -1,12 +1,45 @@
 {% extends "base.html" %}
+{% load static %}
 {% block title %}{{ title }}{% endblock %}
+{% block meta %}
+    <script src="{% static 'js/buttons.js' %}" defer></script>
+{% endblock meta %}
 {% block content %}
-    <form method="post">
+    <form method="post"
+          id="form-field"
+          class="flex flex-col items-center justify-center space-y-4 my-auto">
         {% csrf_token %}
-        {{ form.as_p }}
+        <input type="text"
+               placeholder="Username"
+               name="username"
+               value="{{ form.username.value|default:'' }}"
+               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+        {% if form.username.errors %}<p class="text-indianred-100 text-xs italic">{{ form.username.errors }}</p>{% endif %}
+        <input type="email"
+               placeholder="Email (optional)"
+               name="email"
+               value="{{ form.email.value|default:'' }}"
+               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" />
+        {% if form.email.errors %}<p class="text-indianred-100 text-xs italic">{{ form.email.errors }}</p>{% endif %}
+        <input type="password"
+               placeholder="Password"
+               name="password1"
+               value="{{ form.password1.value|default:'' }}"
+               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+        {% if form.password1.errors %}<p class="text-indianred-100 text-xs italic">{{ form.password1.errors }}</p>{% endif %}
+        <input type="password"
+               placeholder="Confirm password"
+               name="password2"
+               value="{{ form.password2.value|default:'' }}"
+               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+        {% if form.password2.errors %}<p class="text-indianred-100 text-xs italic">{{ form.password2.errors }}</p>{% endif %}
+        <button type="submit"
+                id="submit-button"
+                class="px-12 py-2 border border-transparent rounded-md text-lightsteelblue-100 bg-slategray-200 opacity-50 transform ease-in-out duration-500 cursor-default">
+            Sign Up
+        </button>
         <p>
-            Have an account? Login <a href="{% url 'login' %}">Here</a>!
+            Have an account? Login <a class="underline text-skyblue-300" href="{% url 'login' %}">Here</a>!
         </p>
-        <button type="submit">Register</button>
     </form>
 {% endblock %}

src/apps/account/views.py

@@ -22,15 +22,12 @@ def signup_view(request):
         if form.is_valid():
             user = form.save()
             raw_password = form.cleaned_data.get("password1")
-            user = authenticate(
+            user = authenticate(username=user.username, password=raw_password)
-                username=user.username,
-                password=raw_password,
-            )
             login(request, user)
-            return redirect("index")
+            return redirect("homepage")
 
     context = {
-        "title": "Sign Up",
+        "title": "FOSSDB | SignUp",
         "form": form,
     }
     return render(request, "signup.html", context)
@@ -42,10 +39,10 @@ def login_view(request):
         if form.is_valid():
             user = form.get_user()
             login(request, user)
-            return redirect("index")
+            return redirect("homepage")
 
     context = {
-        "title": "Login",
+        "title": "FOSSDB | Login",
         "form": form,
     }
     return render(request, "login.html", context)

src/apps/tokyonight_night/static_src/src/styles.css

@@ -14,3 +14,17 @@ body {
 ::after {
     border-width: 0;
 }
+
+.border-gradient-horizontal {
+    position: relative;
+}
+
+.border-gradient-horizontal::before {
+    content: "";
+    position: absolute;
+    top: 0%;
+    width: 100%;
+    height: 0.25rem;
+    background: linear-gradient(to right, transparent, #27a1b9, transparent);
+    transform: translateY(-50%);
+}

src/apps/tokyonight_night/static_src/tailwind.config.js

@@ -43,21 +43,67 @@ module.exports = {
     ],
     theme: {
         colors: {
+            darkslateblue: "#3d59a1",
+            cornflowerblue: "#7aa2f7",
             gray: {
-                100: "#1a1b26",
+                100: "#37222c",
-                200: "#15161e",
+                200: "#1f2231",
-                300: "#16161e",
+                300: "#1a1b26",
+                400: "#16161e",
+                500: "#15161e",
             },
-            indianred: "#db4b4b",
+            darkslategray: {
-            burlywood: "#e0af68",
+                100: "#2c5a66",
-
+                200: "#414868",
+                300: "#3b4261",
+                400: "#283457",
+                500: "#292e42",
+                600: "#20303b",
+            },
+            skyblue: {
+                100: "#89ddff",
+                200: "#2ac3de",
+                300: "#0db9d7",
+            },
+            paleturquoise: "#b4f9f8",
+            steelblue: {
+                100: "#6183bb",
+                200: "#536c9e",
+                300: "#565f89",
+                400: "#394b70",
+            },
+            cadetblue: {
+                100: "#41a6b5",
+                200: "#449dab",
+                300: "#27a1b9",
+            },
+            lightskyblue: "#7dcfff",
             lightsteelblue: {
                 100: "#c0caf5",
                 200: "#a9b1d6",
             },
-            skyblue: "#0db9d7",
+            indianred: {
-            crimson: "#f52a65",
+                100: "#db4b4b",
-            slategray: "#737aa2",
+                200: "#b2555b",
+                300: "#914c54",
+            },
+            sienna: "#713137",
+            slategray: {
+                100: "#737aa2",
+                200: "#545c7e",
+            },
+            mediumturquoise: "#73daca",
+            lightgreen: "#9ece6a",
+            teal: "#266d6a",
+            burlywood: "#e0af68",
+            mediumaquamarine: "#1abc9c",
+            lightcoral: "#f7768e",
+            mediumpurple: {
+                100: "#bb9af7",
+                200: "#9d7cd8",
+            },
+            sandybrown: "#ff9e64",
+            deeppink: "#ff007c",
         },
         fontFamily: {
             rationale: [
@@ -81,9 +127,9 @@ module.exports = {
             base: "1rem",
             xl: "1.25rem",
             "4xl": "4rem",
+            xs: "0.75rem",
         },
         extend: {},
-        extend: {},
     },
     plugins: [
         /**

src/apps/tokyonight_night/templates/base.html

@@ -4,15 +4,25 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Abel&family=Rationale&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+              rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+              rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+              rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+              rel="stylesheet" />
         {% tailwind_css %}
         <link href="{% static 'fontawesomefree/css/all.min.css' %}"
               rel="stylesheet" />
+        {% block meta %}{% endblock %}
         <title>
             {% block title %}{% endblock %}
         </title>
-        {% block meta %}{% endblock %}
     </head>
-    <body class="text-lightsteelblue-100 bg-gray-100 flex flex-col min-h-screen font-roboto">
+    <body class="text-lightsteelblue-100 bg-gray-300 flex flex-col min-h-screen font-roboto">
         <header class="flex justify-between items-center px-6 py-2 font-abel text-xl">
             <div class="flex justify-between">
                 <!-- logo -->
@@ -21,39 +31,39 @@
                          width="40"
                          src="{% static 'img/icons/logo.svg' %}"
                          alt="logo" />
-                    <a class="hover:text-skyblue transform duration-300 ease-in-out"
+                    <a class="hover:text-skyblue-300 transform duration-300 ease-in-out"
-                       href="{% url 'homepage' %}">foss<span class="text-skyblue">db</span></a>
+                       href="{% url 'homepage' %}">foss<span class="text-skyblue-300">db</span></a>
                 </div>
                 <!-- search -->
                 <div class="relative items-center flex">
                     <input type="text"
                            placeholder="Search projects..."
-                           class="py-2 mx-4 placeholder-lightsteelblue-300 focus:outline-none bg-gray-100 border border-b-lightsteelblue-100 hover:border-b-2 transform duration-200 ease-in-out focus:border-b-skyblue focus:border-b-2 max-w-[10rem]" />
+                           class="py-2 mx-4 placeholder-slategray-100 bg-gray-300 border-0 border-b-2 border-b-slategray-100 hover:border-b-lightsteelblue-100 transform duration-200 ease-in-out focus:outline-none focus:border-b-skyblue-300 focus:border-b-2 max-w-[10rem]" />
                 </div>
                 <!-- navbar -->
                 <nav class="uppercase flex gap-x-6 items-center">
                     <a href="{% url 'explore' %}"
-                       class="hover:text-skyblue transform duration-200 ease-in-out">explore</a>
+                       class="hover:text-skyblue-300 transform duration-200 ease-in-out">explore</a>
                     <a href="{% url 'contribute' %}"
-                       class="hover:text-skyblue transform duration-200 ease-in-out">contribute</a>
+                       class="hover:text-skyblue-300 transform duration-200 ease-in-out">contribute</a>
                     <a href="{% url 'news' %}"
-                       class="hover:text-skyblue transform duration-200 ease-in-out">news</a>
+                       class="hover:text-skyblue-300 transform duration-200 ease-in-out">news</a>
                     <a href="{% url 'dashboard' %}"
-                       class="hover:text-skyblue transform duration-200 ease-in-out">dashboard</a>
+                       class="hover:text-skyblue-300 transform duration-200 ease-in-out">dashboard</a>
                     <a href="{% url 'help' %}"
-                       class="hover:text-skyblue transform duration-200 ease-in-out">help</a>
+                       class="hover:text-skyblue-300 transform duration-200 ease-in-out">help</a>
                 </nav>
             </div>
             <div class="">
                 <a href="" class=""><i class="fa-solid fa-globe fa-lg"></i></a>
-                <a href=""
+                <a href="{% url 'login' %}"
-                   class="hover:text-skyblue transition duration-300 ease-in-out"><i class="fa-solid fa-user fa-lg ml-4"></i></a>
+                   class="hover:text-skyblue-300 transition duration-300 ease-in-out"><i class="fa-solid fa-user fa-lg ml-4"></i></a>
             </div>
         </header>
-        <main class="flex-grow">
+        <main class="flex flex-col flex-grow">
             {% block content %}{% endblock %}
         </main>
-        <footer class="h-32 flex items-center text-slategray bg-gray-200 mb-1 mt-4 font-condensed">
+        <footer class="w-full h-32 flex items-center text-slategray-200 bg-gray-500 mt-4 font-condensed border-gradient-horizontal">
             <div class="p-8">
                 <div class="space-y-4 text-left">
                     <p>

src/static/js/buttons.js

@@ -0,0 +1,41 @@
+window.addEventListener("DOMContentLoaded", () => {
+    const FORM_VERIFY = document.getElementsByClassName("verify")
+    const SUBMIT_BUTTON = document.getElementById("submit-button")
+
+    Array.from(FORM_VERIFY).forEach((input) => {
+        input.addEventListener("input", () => {
+            const ALL_FILLED = Array.from(FORM_VERIFY).every(
+                (input) => input.value.trim() !== ""
+            )
+            if (ALL_FILLED) {
+                SUBMIT_BUTTON.classList.remove(
+                    "bg-slategray-200",
+                    "text-lightsteelblue-100",
+                    "opacity-50",
+                    "cursor-default"
+                )
+                SUBMIT_BUTTON.classList.add(
+                    "bg-skyblue-300",
+                    "text-gray-500",
+                    "opacity-100",
+                    "hover:opacity-60"
+                )
+                SUBMIT_BUTTON.disabled = false
+            } else {
+                SUBMIT_BUTTON.classList.remove(
+                    "bg-skyblue-300",
+                    "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
+            }
+        })
+    })
+})