Add Account Settings > Appearance page

hc/accounts/admin.py

@@ -45,6 +45,7 @@ class ProfileFieldset(Fieldset):
         "email",
         "reports",
         "tz",
+        "theme",
         "next_report_date",
         "nag_period",
         "next_nag_date",

hc/accounts/migrations/0038_profile_theme.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.4 on 2021-06-18 09:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('accounts', '0037_profile_tz'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='profile',
+            name='theme',
+            field=models.CharField(blank=True, max_length=10, null=True),
+        ),
+    ]

hc/accounts/models.py

@@ -73,6 +73,7 @@ class Profile(models.Model):
     deletion_notice_date = models.DateTimeField(null=True, blank=True)
     last_active_date = models.DateTimeField(null=True, blank=True)
     tz = models.CharField(max_length=36, default="UTC")
+    theme = models.CharField(max_length=10, null=True, blank=True)
 
     objects = ProfileManager()
 

hc/accounts/urls.py

@@ -13,6 +13,7 @@ urlpatterns = [
         name="hc-check-token",
     ),
     path("profile/", views.profile, name="hc-profile"),
+    path("profile/appearance/", views.appearance, name="hc-appearance"),
     path("profile/notifications/", views.notifications, name="hc-notifications"),
     path("close/", views.close, name="hc-close"),
     path(

hc/accounts/views.py

@@ -742,3 +742,23 @@ def login_webauthn(request):
 
     ctx = {"options": base64.b64encode(cbor.encode(options)).decode()}
     return render(request, "accounts/login_webauthn.html", ctx)
+
+
+@login_required
+def appearance(request):
+    profile = request.profile
+
+    ctx = {
+        "page": "appearance",
+        "profile": profile,
+        "status": "default",
+    }
+
+    if request.method == "POST":
+        theme = request.POST.get("theme", "")
+        if theme in ("", "dark"):
+            profile.theme = theme
+            profile.save()
+            ctx["status"] = "info"
+
+    return render(request, "accounts/appearance.html", ctx)

static/css/appearance.css

@@ -0,0 +1,11 @@
+.theme img {
+    border: 1px solid var(--border-color);
+    padding: 4px;
+    width: 100%;
+}
+
+.theme .radio-container {
+    margin-top: 12px;
+    margin-left: 12px;
+}
+

static/js/appearance.js

@@ -0,0 +1,5 @@
+$(function () {
+    $("input[type=radio][name=theme]").change(function() {
+        document.body.classList.toggle("dark", this.value == "dark");
+    });
+});

templates/accounts/appearance.html

@@ -0,0 +1,90 @@
+{% extends "base.html" %}
+{% load compress hc_extras static tz %}
+
+{% block title %}Account Settings - {{ site_name }}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-sm-12">
+        <h1 class="settings-title">
+            Settings
+            <small>{{ request.user.email }}</small>
+        </h1>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-sm-3">
+        <ul class="nav nav-pills nav-stacked">
+            <li><a href="{% url 'hc-profile' %}">Account</a></li>
+            <li class="active"><a href="{% url 'hc-appearance' %}">Appearance</a></li>
+            {% if show_pricing %}
+            <li><a href="{% url 'hc-billing' %}">Billing</a></li>
+            {% endif %}
+            <li><a href="{% url 'hc-notifications' %}">Email Reports</a></li>
+        </ul>
+    </div>
+
+    <div class="col-sm-9 col-md-6">
+        <div class="panel panel-{{ status }}">
+            <div class="panel-body settings-block">
+                <form method="post">
+                    {% csrf_token %}
+                    <h2>Theme</h2>
+
+                    <div class="row">
+                        <div class="col-sm-6 theme">
+                            <img
+                                src="{% static 'img/theme-light.png' %}"
+                                alt="Light theme preview">
+
+                            <label class="radio-container">
+                                <input
+                                    type="radio"
+                                    name="theme"
+                                    value=""
+                                    {% if profile.theme != "dark" %} checked {% endif %}>
+                                <span class="radiomark"></span>
+                                Light
+                            </label>
+                        </div>
+                        <div class="col-sm-6 theme">
+                            <img
+                                src="{% static 'img/theme-dark.png' %}"
+                                alt="Dark theme preview">
+
+                            <label class="radio-container">
+                                <input
+                                    type="radio"
+                                    name="theme"
+                                    value="dark"
+                                    {% if profile.theme == "dark" %} checked {% endif %}>
+                                <span class="radiomark"></span>
+                                Dark
+                            </label>
+                        </div>
+                    </div>
+
+
+                    <button
+                        type="submit"
+                        class="btn btn-default pull-right">Save Changes</button>
+                </form>
+            </div>
+            {% if status == "info" %}
+            <div class="panel-footer">
+                Your settings have been updated!
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
+<script src="{% static 'js/appearance.js' %}"></script>
+{% endcompress %}
+{% endblock %}

templates/accounts/billing.html

@@ -17,6 +17,7 @@
     <div class="col-sm-3">
         <ul class="nav nav-pills nav-stacked">
             <li><a href="{% url 'hc-profile' %}">Account</a></li>
+            <li><a href="{% url 'hc-appearance' %}">Appearance</a></li>
             <li class="active"><a href="{% url 'hc-billing' %}">Billing</a></li>
             <li><a href="{% url 'hc-notifications' %}">Email Reports</a></li>
         </ul>

templates/accounts/notifications.html

@@ -17,6 +17,7 @@
     <div class="col-sm-3">
         <ul class="nav nav-pills nav-stacked">
             <li><a href="{% url 'hc-profile' %}">Account</a></li>
+            <li><a href="{% url 'hc-appearance' %}">Appearance</a></li>
             {% if show_pricing %}
             <li><a href="{% url 'hc-billing' %}">Billing</a></li>
             {% endif %}

templates/accounts/profile.html

@@ -25,6 +25,7 @@
     <div class="col-sm-3">
         <ul class="nav nav-pills nav-stacked">
             <li class="active"><a href="{% url 'hc-profile' %}">Account</a></li>
+            <li><a href="{% url 'hc-appearance' %}">Appearance</a></li>
             {% if show_pricing %}
             <li><a href="{% url 'hc-billing' %}">Billing</a></li>
             {% endif %}

templates/base.html

@@ -28,6 +28,7 @@
     <link rel="stylesheet" href="{% static 'css/add_credential.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/add_project_modal.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/add_pushover.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/appearance.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/webhook_form.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/badges.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/billing.css' %}" type="text/css">
@@ -57,7 +58,7 @@
     <link rel="stylesheet" href="{% static 'css/set_password.css' %}" type="text/css">
     {% endcompress %}
 </head>
-<body class="page-{{ page }}">
+<body class="page-{{ page }}{% if request.user.is_authenticated and request.profile.theme == 'dark' %} dark{% endif%}">
     {% debug_warning %}
     <nav class="navbar navbar-default">
         <div class="container{% if page == "checks" or page == "details" %}-fluid{% endif %}">