refactor: apply DRY principles & avoid magic value use scidsg#573

Removed reliance on javascript for insertion of database values, instead directly rely on jinja to fill elements from the database. Suggested in review: scidsg#573 (comment) scidsg#573 (comment) For Roadmap Item scidsg#533 Co-authored-by: brassy endomorph <[email protected]>
rmlibre · Sep 18, 2024 · 007cf1b · 007cf1b
1 parent 2cf9518
commit 007cf1b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 22 deletions.
diff --git a/hushline/__init__.py b/hushline/__init__.py
@@ -79,7 +79,7 @@ def inject_user() -> dict[str, Any]:
 
     @app.context_processor
     def inject_host() -> dict[str, HostOrganization]:
-        if (host_org := db.session.get(HostOrganization, 1)) is None:
+        if (host_org := HostOrganization.default()) is None:
             host_org = HostOrganization()
             db.session.add(host_org)
             db.session.commit()

diff --git a/hushline/model.py b/hushline/model.py
@@ -1,7 +1,7 @@
 import enum
 import secrets
 from datetime import datetime, timedelta, timezone
-from typing import TYPE_CHECKING, Optional, Set
+from typing import TYPE_CHECKING, Optional, Self, Set
 
 from flask import current_app
 from flask_sqlalchemy.model import Model
@@ -31,9 +31,23 @@ def default(cls) -> "SMTPEncryption":
 class HostOrganization(Model):
     __tablename__ = "host_organization"
 
-    id: Mapped[int] = mapped_column(primary_key=True, default=1)
-    brand_app_name: Mapped[str] = mapped_column(db.String(255), default="🤫 Hush Line")
-    brand_primary_hex_color: Mapped[str] = mapped_column(db.String(7), default="#7d25c1")
+    _DEFAULT_PRIMARY_KEY: int = 1
+    _DEFAULT_BRAND_PRIMARY_HEX_COLOR: str = "#7d25c1"
+    _DEFAULT_BRAND_APP_NAME: str = "🤫 Hush Line"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    brand_app_name: Mapped[str] = mapped_column(db.String(255), default=_DEFAULT_BRAND_APP_NAME)
+    brand_primary_hex_color: Mapped[str] = mapped_column(
+        db.String(7), default=_DEFAULT_BRAND_PRIMARY_HEX_COLOR
+    )
+
+    @classmethod
+    def default(cls) -> Self | None:
+        return db.session.get(cls, cls._DEFAULT_PRIMARY_KEY)
+
+    def __init__(self, primary_key: int | None = None) -> None:
+        super().__init__()
+        self.id = primary_key if isinstance(primary_key, int) else self._DEFAULT_PRIMARY_KEY
 
 
 class User(Model):

diff --git a/hushline/settings.py b/hushline/settings.py
@@ -722,7 +722,7 @@ def update_smtp_settings() -> Response | str:
     @bp.route("/update-brand-primary-color", methods=["POST"])
     @admin_authentication_required
     def update_brand_primary_color() -> Response | str:
-        if (host_org := db.session.get(HostOrganization, 1)) is None:
+        if (host_org := HostOrganization.default()) is None:
             abort(500)
 
         form = UpdateBrandPrimaryColorForm()
@@ -738,7 +738,7 @@ def update_brand_primary_color() -> Response | str:
     @bp.route("/update-brand-app-name", methods=["POST"])
     @admin_authentication_required
     def update_brand_app_name() -> Response | str:
-        if (host_org := db.session.get(HostOrganization, 1)) is None:
+        if (host_org := HostOrganization.default()) is None:
             abort(500)
 
         form = UpdateBrandAppNameForm()

diff --git a/hushline/templates/base.html b/hushline/templates/base.html
@@ -64,18 +64,11 @@
       rel="stylesheet"
       href="{{ url_for('static', filename='css/style.css') }}"
     />
-    <script>
-      function importHostConfiguration() {
-        // Update page theme with host's brand color from the database
-        const brandColor = "{{ host_org.brand_primary_hex_color }}";
-        const cssVariable = ["--color-brand", brandColor];
-        document.documentElement.style.setProperty(...cssVariable);
-
-        // Update page h1 with host's brand name from the database
-        const brandName = "{{ host_org.brand_app_name }}";
-        document.querySelector("h1").innerText = brandName;
+    <style>
+      :root {
+        --color-brand: oklch(from {{ host_org.brand_primary_hex_color }} l c h);
       }
-    </script>
+    </style>
   </head>
 
   <body>
@@ -107,7 +100,7 @@
 
     <header>
       <!-- Navigation bar, logo, etc. -->
-      <h1>🤫 Hush Line</h1>
+      <h1>{{ host_org.brand_app_name }}</h1>
       <nav>
         <div class="navGroup">
           <a class="mobileNav btnIcon" aria-label="Navigation menu">Menu</a>
@@ -163,9 +156,6 @@ <h1>🤫 Hush Line</h1>
           >
         </div>
       </nav>
-      <script>
-        importHostConfiguration();
-      </script>
     </header>
 
     <main>