UI overhaul: Tailwind + daisyUI reskin (S2–S7)

.gitignore

@@ -141,3 +141,9 @@ app/
 db/
 staticfiles/
 test-project/
+
+# Tailwind / npm
+theme/static_src/node_modules/
+# Allow the compiled CSS even though dist/ is globally ignored
+!theme/static/css/dist/
+!theme/static/css/dist/styles.css

kaplancloud/settings.py

@@ -35,6 +35,8 @@
     "storages",
     "rest_framework",
     "rest_framework.authtoken",
+    "tailwind",
+    "theme",
     "kaplancloudaccounts",
     "kaplancloudapi",
     "kaplancloudapp",
@@ -120,6 +122,8 @@
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.2/howto/static-files/
 
+TAILWIND_APP_NAME = "theme"
+
 STATIC_URL = "/static/"
 
 STATIC_ROOT = BASE_DIR / "staticfiles"

kaplancloudaccounts/forms.py

@@ -6,6 +6,8 @@
 from django.core.exceptions import ValidationError
 from django.utils import timezone
 
+from kaplancloudapp.forms import _apply_daisy_classes
+
 from .models import UserRegistrationToken
 
 TOKEN_EXPIRY_HOURS = 48
@@ -16,7 +18,7 @@ class UserRegistrationForm(forms.ModelForm):
         label="Password",
         strip=False,
         widget=forms.PasswordInput(attrs={"autocomplete": "new-password"}),
-        help_text=password_validation.password_validators_help_text_html(),
+        help_text=" ".join(password_validation.password_validators_help_texts()),
     )
     password2 = forms.CharField(
         label="Password confirmation",
@@ -42,6 +44,10 @@ class Meta:
             "token",
         ]
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        _apply_daisy_classes(self)
+
     def clean_password2(self):
         password1 = self.cleaned_data.get("password1")
         password2 = self.cleaned_data.get("password2")

kaplancloudaccounts/templates/accounts/change-password.html

@@ -3,27 +3,43 @@
 {% block title %}Change Password | Kaplan Cloud{% endblock %}
 
 {% block body %}
-<main id="login">
-  <div id="login-window">
-    <div>
+<div class="min-h-screen flex items-center justify-center bg-base-200 p-4">
+  <div class="card w-full max-w-sm bg-base-100 shadow-md">
+    <div class="card-body">
+      <h2 class="card-title justify-center text-xl mb-2">Change Password</h2>
+
       {% if form.errors %}
-      {{form.errors}}
+      <div class="alert alert-error text-sm">
+        <ul class="list-disc list-inside">
+          {% for field in form %}
+            {% for error in field.errors %}
+            <li>{{ field.label }}: {{ error }}</li>
+            {% endfor %}
+          {% endfor %}
+          {% for error in form.non_field_errors %}
+          <li>{{ error }}</li>
+          {% endfor %}
+        </ul>
+      </div>
       {% endif %}
 
-      <form method="post" action="{% url 'change-password' %}">
-      {% csrf_token %}
-      <table>
-      {{form.as_table}}
-      <tr>
-          <td></td>
-          <td><button type="submit">Change</button></td>
-      </tr>
-      </table>
+      <form method="post" action="{% url 'change-password' %}" class="space-y-4">
+        {% csrf_token %}
+
+        {% for field in form %}
+        <div class="form-control">
+          <label class="label" for="{{ field.id_for_label }}"{% if field.help_text %} title="{{ field.help_text }}"{% endif %}>
+            <span class="label-text">{{ field.label }}</span>
+          </label>
+          {{ field }}
+        </div>
+        {% endfor %}
+
+        <div class="pt-2">
+          <button type="submit" class="btn btn-primary w-full">Change Password</button>
+        </div>
       </form>
     </div>
   </div>
-  <footer>
-    <p>v0.5.1</p>
-  </footer>
-</main>
+</div>
 {% endblock %}

kaplancloudaccounts/templates/accounts/login.html

@@ -3,44 +3,49 @@
 {% block title %}Log In | Kaplan Cloud{% endblock %}
 
 {% block body %}
-<main id="login">
-  <div id="login-window">
-    <div>
+<div class="min-h-screen flex items-center justify-center bg-base-200 p-4">
+  <div class="card w-full max-w-sm bg-base-100 shadow-md">
+    <div class="card-body">
+      <h2 class="card-title justify-center text-xl mb-2">Log In</h2>
+
       {% if form.errors %}
-      <p>Your username and password didn't match. Please try again.</p>
+      <div class="alert alert-error text-sm">
+        Your username and password didn't match. Please try again.
+      </div>
       {% endif %}
 
       {% if next %}
-          {% if user.is_authenticated %}
-          <p>Your account doesn't have access to this page. To proceed,<br/>
-          please log in with an account that has access.</p>
-          {% else %}
-          <p>Please log in to see this page.</p>
-          {% endif %}
+        {% if user.is_authenticated %}
+        <div class="alert alert-warning text-sm">
+          Your account doesn't have access to this page. Please log in with an account that has access.
+        </div>
+        {% else %}
+        <div class="alert alert-info text-sm">
+          Please log in to see this page.
+        </div>
+        {% endif %}
       {% endif %}
 
-      <form method="post" action="{% url 'login' %}">
-      {% csrf_token %}
-      <table>
-      <tr>
-          <td>{{ form.username.label_tag }}</td>
-          <td>{{ form.username }}</td>
-      </tr>
-      <tr>
-          <td>{{ form.password.label_tag }}</td>
-          <td>{{ form.password }}</td>
-      </tr>
-      <tr>
-          <td></td>
-          <td><button type="submit">Log In</button></td>
-      </tr>
-      </table>
-      <input type="hidden" name="next" value="{{ next }}">
+      <form method="post" action="{% url 'login' %}" class="space-y-4">
+        {% csrf_token %}
+        <div class="form-control">
+          <label class="label" for="{{ form.username.id_for_label }}">
+            <span class="label-text">Username</span>
+          </label>
+          {{ form.username }}
+        </div>
+        <div class="form-control">
+          <label class="label" for="{{ form.password.id_for_label }}">
+            <span class="label-text">Password</span>
+          </label>
+          {{ form.password }}
+        </div>
+        <input type="hidden" name="next" value="{{ next }}">
+        <div class="pt-2">
+          <button type="submit" class="btn btn-primary w-full">Log In</button>
+        </div>
       </form>
     </div>
   </div>
-  <footer>
-    <p>v0.5.1</p>
-  </footer>
-</main>
+</div>
 {% endblock %}

kaplancloudaccounts/templates/accounts/register.html

@@ -3,27 +3,43 @@
 {% block title %}Register | Kaplan Cloud{% endblock %}
 
 {% block body %}
-<main id="login">
-  <div id="login-window">
-    <div>
+<div class="min-h-screen flex items-center justify-center bg-base-200 p-4">
+  <div class="card w-full max-w-sm bg-base-100 shadow-md">
+    <div class="card-body">
+      <h2 class="card-title justify-center text-xl mb-2">Register</h2>
+
       {% if form.errors %}
-      {{form.errors}}
+      <div class="alert alert-error text-sm">
+        <ul class="list-disc list-inside">
+          {% for field in form %}
+            {% for error in field.errors %}
+            <li>{{ field.label }}: {{ error }}</li>
+            {% endfor %}
+          {% endfor %}
+          {% for error in form.non_field_errors %}
+          <li>{{ error }}</li>
+          {% endfor %}
+        </ul>
+      </div>
       {% endif %}
 
-      <form method="post" action="{% url 'register' %}">
-      {% csrf_token %}
-      <table>
-      {{form.as_table}}
-      <tr>
-          <td></td>
-          <td><button type="submit">Register</button></td>
-      </tr>
-      </table>
+      <form method="post" action="{% url 'register' %}" class="space-y-4">
+        {% csrf_token %}
+
+        {% for field in form %}
+        <div class="form-control">
+          <label class="label" for="{{ field.id_for_label }}"{% if field.help_text %} title="{{ field.help_text }}"{% endif %}>
+            <span class="label-text">{{ field.label }}</span>
+          </label>
+          {{ field }}
+        </div>
+        {% endfor %}
+
+        <div class="pt-2">
+          <button type="submit" class="btn btn-primary w-full">Register</button>
+        </div>
       </form>
     </div>
   </div>
-  <footer>
-    <p>v0.5.1</p>
-  </footer>
-</main>
+</div>
 {% endblock %}

kaplancloudaccounts/views.py

@@ -3,13 +3,20 @@
 from django.contrib.auth.forms import AuthenticationForm, PasswordChangeForm
 from django.http import HttpResponseRedirect
 from django.shortcuts import redirect, render
+from django.utils.html import strip_tags
+
+from kaplancloudapp.forms import _apply_daisy_classes
 
 from .forms import UserRegistrationForm
 
 
 @login_required
 def change_password(request):
     form = PasswordChangeForm(user=request.user, data=request.POST or None)
+    _apply_daisy_classes(form)
+    for field in form.fields.values():
+        if field.help_text:
+            field.help_text = strip_tags(field.help_text)
 
     if request.method == "POST" and form.is_valid():
         form.save()
@@ -23,6 +30,7 @@ def change_password(request):
 def signin(request):
     if request.method == "POST":
         form = AuthenticationForm(request, request.POST)
+        _apply_daisy_classes(form)
         if form.is_valid():
             user = form.get_user()
             login(request, user)
@@ -35,6 +43,7 @@ def signin(request):
 
     else:
         form = AuthenticationForm()
+        _apply_daisy_classes(form)
         return render(
             request,
             "accounts/login.html",