✨ [maykinmedia/open-api-framework#163] Integrate django-common

Dockerfile

@@ -70,6 +70,7 @@ RUN mkdir /app/log /app/config /app/tmp
 
 # copy frontend build statics
 COPY --from=frontend-build /app/src/objects/static /app/src/objects/static
+COPY --from=frontend-build /app/node_modules/@fortawesome/fontawesome-free/webfonts /app/node_modules/@fortawesome/fontawesome-free/webfonts
 
 # copy source code
 COPY ./src /app/src

package.json

@@ -21,6 +21,7 @@
   "homepage": "https://maykinmedia.nl",
   "dependencies": {
     "microscope-sass": "latest",
+    "@fortawesome/fontawesome-free": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "tough-cookie": "^4.1.4"
@@ -58,4 +59,4 @@
     "webpack-stream": "latest",
     "yargs": "latest"
   }
-}
+}

requirements/base.in

@@ -5,12 +5,17 @@ glom # data represenation based on spec
 jsonschema
 furl
 
+# Django libraries
+django-capture-tag
+
 # Common ground libraries
 django-setup-configuration>=0.5.0
 notifications-api-common[setup-configuration]
 zgw-consumers[setup-configuration]
 mozilla-django-oidc-db[setup-configuration]
 commonground-api-common[oas]
+maykin-common[axes,mfa]
+
 # celery dependencies
 # TODO this should be moved to open-api-framework once it is verified that this fixes
 # maykinmedia/objects-api#541

requirements/base.txt

@@ -104,17 +104,24 @@ django==5.2.7
     #   drf-spectacular
     #   drf-spectacular-sidecar
     #   maykin-2fa
+    #   maykin-common
     #   mozilla-django-oidc
     #   mozilla-django-oidc-db
     #   notifications-api-common
     #   open-api-framework
     #   zgw-consumers
 django-admin-index==3.1.0
-    # via open-api-framework
+    # via
+    #   maykin-common
+    #   open-api-framework
 django-appconf==1.0.6
     # via django-log-outgoing-requests
 django-axes==6.5.1
-    # via open-api-framework
+    # via
+    #   maykin-common
+    #   open-api-framework
+django-capture-tag==1.0
+    # via -r requirements/base.in
 django-cors-headers==4.4.0
     # via open-api-framework
 django-csp==4.0
@@ -238,7 +245,11 @@ kombu==5.5.4
     #   -r requirements/base.in
     #   celery
 maykin-2fa==1.0.1
-    # via open-api-framework
+    # via
+    #   maykin-common
+    #   open-api-framework
+maykin-common==0.11.0
+    # via -r requirements/base.in
 mozilla-django-oidc==4.0.0
     # via mozilla-django-oidc-db
 mozilla-django-oidc-db==0.22.0

requirements/ci.txt

@@ -167,6 +167,7 @@ django==5.2.7
     #   drf-spectacular
     #   drf-spectacular-sidecar
     #   maykin-2fa
+    #   maykin-common
     #   mozilla-django-oidc
     #   mozilla-django-oidc-db
     #   notifications-api-common
@@ -187,6 +188,10 @@ django-axes==6.5.1
     #   -c requirements/base.txt
     #   -r requirements/base.txt
     #   open-api-framework
+django-capture-tag==1.0
+    # via
+    #   -c requirements/base.txt
+    #   -r requirements/base.txt
 django-cors-headers==4.4.0
     # via
     #   -c requirements/base.txt
@@ -446,6 +451,10 @@ maykin-2fa==1.0.1
     #   -c requirements/base.txt
     #   -r requirements/base.txt
     #   open-api-framework
+maykin-common==0.11.0
+    # via
+    #   -c requirements/base.txt
+    #   -r requirements/base.txt
 mozilla-django-oidc==4.0.0
     # via
     #   -c requirements/base.txt

requirements/dev.txt

@@ -207,6 +207,7 @@ django==5.2.7
     #   drf-spectacular
     #   drf-spectacular-sidecar
     #   maykin-2fa
+    #   maykin-common
     #   mozilla-django-oidc
     #   mozilla-django-oidc-db
     #   notifications-api-common
@@ -227,6 +228,10 @@ django-axes==6.5.1
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
     #   open-api-framework
+django-capture-tag==1.0
+    # via
+    #   -c requirements/ci.txt
+    #   -r requirements/ci.txt
 django-cors-headers==4.4.0
     # via
     #   -c requirements/ci.txt
@@ -534,6 +539,10 @@ maykin-2fa==1.0.1
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
     #   open-api-framework
+maykin-common==0.11.0
+    # via
+    #   -c requirements/ci.txt
+    #   -r requirements/ci.txt
 mdurl==0.1.2
     # via markdown-it-py
 mozilla-django-oidc==4.0.0

src/objects/accounts/tests/test_oidc.py

@@ -1,21 +1,17 @@
 from functools import partial
-from pathlib import Path
 
 from django.urls import reverse
 from django.utils.translation import gettext as _
 
-import vcr
 from django_webtest import WebTest
+from maykin_common.vcr import VCRMixin
 from mozilla_django_oidc_db.models import OpenIDConnectConfig
 
 from objects.utils.tests.keycloak import keycloak_login, mock_oidc_db_config
 
 from ..models import User
 from .factories import StaffUserFactory
 
-TEST_FILES = (Path(__file__).parent / "keycloak_cassets").resolve()
-
-
 mock_admin_oidc_config = partial(
     mock_oidc_db_config,
     app_label="mozilla_django_oidc_db",
@@ -63,8 +59,7 @@ def test_oidc_button_enabled(self):
         )
 
 
-class OIDCFLowTests(WebTest):
-    @vcr.use_cassette(str(TEST_FILES / "duplicate_email.yaml"))
+class OIDCFLowTests(VCRMixin, WebTest):
     @mock_admin_oidc_config()
     def test_duplicate_email_unique_constraint_violated(self):
         # this user collides on the email address
@@ -101,7 +96,6 @@ def test_duplicate_email_unique_constraint_violated(self):
             self.assertEqual(staff_user.email, "admin@example.com")
             self.assertTrue(staff_user.is_staff)
 
-    @vcr.use_cassette(str(TEST_FILES / "happy_flow.yaml"))
     @mock_admin_oidc_config()
     def test_happy_flow(self):
         login_page = self.app.get(reverse("admin:login"))
@@ -122,7 +116,6 @@ def test_happy_flow(self):
         user = User.objects.get()
         self.assertEqual(user.username, "admin")
 
-    @vcr.use_cassette(str(TEST_FILES / "happy_flow_existing_user.yaml"))
     @mock_admin_oidc_config(make_users_staff=False)
     def test_happy_flow_existing_user(self):
         staff_user = StaffUserFactory.create(username="admin", email="update-me")

src/objects/conf/api.py

@@ -105,6 +105,7 @@
     "COMPONENT_NO_READ_ONLY_REQUIRED": True,
     "POSTPROCESSING_HOOKS": [
         "drf_spectacular.hooks.postprocess_schema_enums",
+        "maykin_common.drf_spectacular.hooks.remove_invalid_url_defaults",
     ],
     "TAGS": [{"name": "objects"}, {"name": "permissions"}],
     "SERVERS": [{"url": "/api/v2"}],

src/objects/conf/base.py

@@ -26,6 +26,8 @@
 # Application definition
 
 INSTALLED_APPS = INSTALLED_APPS + [
+    "maykin_common",
+    "capture_tag",
     # Optional applications.
     "django.contrib.gis",
     # `django.contrib.sites` added at the project level because it has been removed at the packages level.
@@ -87,7 +89,7 @@
 
 # Django-Admin-Index
 ADMIN_INDEX_DISPLAY_DROP_DOWN_MENU_CONDITION_FUNCTION = (
-    "objects.utils.admin_index.should_display_dropdown_menu"
+    "maykin_common.django_two_factor_auth.should_display_dropdown_menu"
 )
 
 #
@@ -143,3 +145,14 @@
 #
 DJANGO_STRUCTLOG_IP_LOGGING_ENABLED = False
 DJANGO_STRUCTLOG_CELERY_ENABLED = True
+
+#
+# SECURITY settings
+#
+CSRF_FAILURE_VIEW = "maykin_common.views.csrf_failure"
+
+# This setting is used by the csrf_failure view (accounts app).
+# You can specify any path that should match the request.path
+# Note: the LOGIN_URL Django setting is not used because you could have
+# multiple login urls defined.
+LOGIN_URLS = [reverse_lazy("admin:login")]

src/objects/scss/_app.scss

@@ -3,31 +3,28 @@ h2,
 h3,
 h4,
 h5 {
-    margin-top: 0;
-    margin-bottom: 0;
-    line-height: 1.2;
+  line-height: 1.5;
 }
 
 h1 {
-    font-weight: 300;
+  font-weight: 300;
 }
 
 h2,
 h3,
 h4,
 h5 {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 p {
-    margin-top: 0;
-    margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-        "Helvetica Neue", Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-    color: var(--color-text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--color-text);
 }

src/objects/scss/_settings.scss

@@ -23,23 +23,28 @@ $color-border: $color_secondary_dark;
 
 // css vars
 :root {
-  --color_primary: #{$color_primary};
-  --color_primary_dark: #{$color_primary_dark};
-
-  --color_secondary: #{$color_secondary};
-  --color_secondary_dark: #{$color_secondary_dark};
-  --color_secondary_light: #{$color_secondary_light};
-
-  --color_alert: #{$color_alert};
-  --color_alert_dark: #{$color_alert_dark};
-
-  --color-darkest: #{$color-darkest};
-  --color_dark: #{$color_dark};
-  --color_lightest: #{$color_lightest};
-  --color_muted: #{$color_muted};
+  // Link component
+  --link-color: #017092;
+  --link-color-hover: var(--link-color);
+  --link-color-muted: #6c757d;
+
+  // footer component
+  --footer-border-color: #dee2e6;
+
+  // tabs component
+  --tabs-border-color: #dee2e6;
+  --tabs-item-hover-border-color: #f3f3f3;
+
+  // Button component
+  --button-color: #ffffff;
+  --button-background-color: #04a5bb;
+  --button-hover-background-color: #017092;
+  --button-alert-background-color: #dc3545;
+  --button-alert-hover-background-color: #bd2130;
+}
 
-  --color_link: #{$color_link};
-  --color_link_hover: #{$color_link_hover};
-  --color-text: #{$color-text};
-  --color-border: #{$color-border};
+.content {
+  &#{&}--align-right {
+    text-align: right;
+  }
 }

src/objects/scss/components/_index.scss

@@ -1,7 +1,8 @@
 // Use this file to include individual components.
-@import "button.scss";
-@import "container.scss";
-@import "footer.scss";
-@import "link.scss";
-@import "nav.scss";
-@import "title.scss";
+@use "button";
+@use "container";
+@use "footer";
+@use "link";
+@use "nav";
+@use "title";
+@use "view";

src/objects/scss/components/_view.scss

@@ -0,0 +1,21 @@
+.view {
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    row-gap: 3rem;
+    min-block-size: 100dvh;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__main {
+    flex-grow: 1;
+    inline-size: clamp(20rem, 100%, 960px);
+    margin-inline: auto;
+
+    display: flex;
+    flex-direction: column;
+    row-gap: 2rem;
+  }
+}

src/objects/scss/screen.scss

@@ -1,4 +1,8 @@
-@import 'settings';
-@import 'app';
-@import 'components';
-@import 'views';
+// vendor
+@use "vendor";
+
+// own styles
+@use 'settings';
+@use 'components';
+@use 'app';
+@use 'views';

src/objects/scss/vendor/_fa.scss

@@ -0,0 +1,2 @@
+@use "@fortawesome/fontawesome-free/scss/fontawesome";
+@use "@fortawesome/fontawesome-free/scss/solid";

src/objects/scss/vendor/_index.scss

@@ -0,0 +1 @@
+@use "fa";