From 293dc4f20d7c0b7a7cfedb5ad7f37001de283a7b Mon Sep 17 00:00:00 2001
From: Simon Oliver Tveit <simtve@uninett.no>
Date: Thu, 10 Oct 2024 11:13:11 +0200
Subject: [PATCH 01/25] Uncrispify ErrorLogSearchForm

---
 python/nav/web/radius/forms.py                | 32 ++++++++++++-------
 .../nav/web/templates/radius/error_log.html   |  3 +-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/python/nav/web/radius/forms.py b/python/nav/web/radius/forms.py
index a9f33e87d1..a284c1fc80 100644
--- a/python/nav/web/radius/forms.py
+++ b/python/nav/web/radius/forms.py
@@ -22,6 +22,12 @@
 
 from crispy_forms.helper import FormHelper
 from crispy_forms_foundation.layout import Layout, Row, Column, Submit
+from nav.web.crispyforms import (
+    set_flat_form_attributes,
+    FormColumn,
+    FormRow,
+    SubmitField,
+)
 
 from nav.util import is_valid_cidr
 
@@ -146,17 +152,21 @@ class ErrorLogSearchForm(forms.Form):
     def __init__(self, *args, **kwargs):
         super(ErrorLogSearchForm, self).__init__(*args, **kwargs)
         css_class = 'medium-4'
-        self.helper = FormHelper()
-        self.helper.form_action = ''
-        self.helper.form_method = 'GET'
-        self.helper.form_class = 'custom'
-        self.helper.layout = Layout(
-            Row(
-                Column('query', css_class=css_class),
-                Column('log_entry_type', css_class=css_class),
-                Column('time', css_class=css_class),
-            ),
-            Submit('send', 'Search', css_class='small'),
+        self.attrs = set_flat_form_attributes(
+            form_method='get',
+            form_class='custom',
+            form_fields=[
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self['query']], css_classes=css_class),
+                        FormColumn(
+                            fields=[self['log_entry_type']], css_classes=css_class
+                        ),
+                        FormColumn(fields=[self['time']], css_classes=css_class),
+                    ]
+                ),
+                SubmitField(name='send', value='Search', css_classes='small'),
+            ],
         )
 
 
diff --git a/python/nav/web/templates/radius/error_log.html b/python/nav/web/templates/radius/error_log.html
index 41e8ac78c7..6e3c0f481f 100644
--- a/python/nav/web/templates/radius/error_log.html
+++ b/python/nav/web/templates/radius/error_log.html
@@ -1,5 +1,4 @@
 {% extends "radius/base.html" %}
-{% load crispy_forms_tags %}
 {% load report %}
 
 {% block content %}
@@ -16,7 +15,7 @@ <h4 class="subheader">Search in radius error logs</h4>
   </div>
 
   <div id="forms">
-    {% crispy form %}
+    {% include 'custom_crispy_templates/flat_form.html' %}
   </div>
 
   {% if form.is_bound %}

From 880f172a81b5dfd0bce60a6cef0beda84de2259f Mon Sep 17 00:00:00 2001
From: Simon Oliver Tveit <simtve@uninett.no>
Date: Thu, 7 Nov 2024 09:51:40 +0100
Subject: [PATCH 02/25] Uncrispify QuarantineVlanForm

---
 python/nav/web/arnold/forms.py                    | 15 +++++++++------
 .../nav/web/templates/arnold/quarantinevlans.html |  3 +--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/python/nav/web/arnold/forms.py b/python/nav/web/arnold/forms.py
index fe9de939d7..9b00811458 100644
--- a/python/nav/web/arnold/forms.py
+++ b/python/nav/web/arnold/forms.py
@@ -84,12 +84,15 @@ def __init__(self, *args, **kwargs):
             submit_value = 'Save changes'
             fieldset_legend = 'Edit vlan'
 
-        # Create helper for crispy layout
-        self.helper = FormHelper()
-        self.helper.form_action = 'arnold-quarantinevlans'
-        self.helper.layout = Layout(
-            Fieldset(fieldset_legend, 'vlan', 'description', 'qid'),
-            Submit('submit', submit_value, css_class='small'),
+        self.attrs = set_flat_form_attributes(
+            form_action='arnold-quarantinevlans',
+            form_fields=[
+                FlatFieldset(
+                    fieldset_legend,
+                    fields=[self['vlan'], self['description'], self['qid']],
+                )
+            ],
+            submit_field=SubmitField(value=submit_value, css_classes='small'),
         )
 
 
diff --git a/python/nav/web/templates/arnold/quarantinevlans.html b/python/nav/web/templates/arnold/quarantinevlans.html
index 623a110117..cb75b19b8a 100644
--- a/python/nav/web/templates/arnold/quarantinevlans.html
+++ b/python/nav/web/templates/arnold/quarantinevlans.html
@@ -1,5 +1,4 @@
 {% extends "arnold/tabs.html" %}
-{% load crispy_forms_tags %}
 
 {% block tabcontent %}
 
@@ -39,7 +38,7 @@
 
         {% comment %} Display form for creating a new quarantine vlan {% endcomment %}
         <div class="medium-6 column">
-            {% crispy form %}
+            {% include 'custom_crispy_templates/flat_form.html' %}
         </div>
 
     </div>

From 5fde407ae004b35b9e8270b41de5383d1f2a5333 Mon Sep 17 00:00:00 2001
From: Simon Oliver Tveit <simtve@uninett.no>
Date: Thu, 7 Nov 2024 10:08:59 +0100
Subject: [PATCH 03/25] Uncrispify ManualDetentionTargetForm

---
 python/nav/web/arnold/forms.py                    | 8 ++++----
 python/nav/web/templates/arnold/manualdetain.html | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/python/nav/web/arnold/forms.py b/python/nav/web/arnold/forms.py
index fe9de939d7..88c06df10e 100644
--- a/python/nav/web/arnold/forms.py
+++ b/python/nav/web/arnold/forms.py
@@ -240,10 +240,10 @@ class ManualDetentionTargetForm(forms.Form):
 
     def __init__(self, *args, **kwargs):
         super(ManualDetentionTargetForm, self).__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.form_action = 'arnold-manual-detention'
-        self.helper.layout = Layout(
-            'target', Submit('submit', 'Find', css_class='small')
+        self.attrs = set_flat_form_attributes(
+            form_action='arnold-manual-detention',
+            form_fields=[self['target']],
+            submit_field=SubmitField(value='Find', css_classes='small'),
         )
 
     def clean_target(self):
diff --git a/python/nav/web/templates/arnold/manualdetain.html b/python/nav/web/templates/arnold/manualdetain.html
index f1deaaf5dc..8612654555 100644
--- a/python/nav/web/templates/arnold/manualdetain.html
+++ b/python/nav/web/templates/arnold/manualdetain.html
@@ -1,5 +1,4 @@
 {% extends 'arnold/base.html' %}
-{% load crispy_forms_tags %}
 
 {% block content %}
 
@@ -13,7 +12,7 @@ <h4>Manual detention</h4>
 
   <div class="row">
     <div class="medium-4 column">
-      {% crispy form %}
+      {% include 'custom_crispy_templates/flat_form.html' %}
     </div>
   </div>
 

From 94c1deb14251779ae6cf97797ff23ef5e3910a22 Mon Sep 17 00:00:00 2001
From: Johanna England <johanna.england@sikt.no>
Date: Fri, 11 Oct 2024 15:30:41 +0200
Subject: [PATCH 04/25] Uncrispify AccountGroupForm in useradmin

---
 .../web/templates/useradmin/group_detail.html |  3 +--
 python/nav/web/useradmin/forms.py             | 26 ++++++++++++-------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/python/nav/web/templates/useradmin/group_detail.html b/python/nav/web/templates/useradmin/group_detail.html
index 18e11dbca9..d161305e8b 100644
--- a/python/nav/web/templates/useradmin/group_detail.html
+++ b/python/nav/web/templates/useradmin/group_detail.html
@@ -1,5 +1,4 @@
 {% extends "useradmin/base.html" %}
-{% load crispy_forms_tags %}
 
 {% block base_header_additional_head %}
   {{ block.super }}
@@ -41,7 +40,7 @@ <h4>Create new group</h4>
       {# GROUP FORM #}
       <div class="column medium-6 large-3">
         {% if group_form %}
-          {% crispy group_form %}
+          {% include 'custom_crispy_templates/flat_form.html' with form=group_form %}
         {% endif %}
       </div>
 
diff --git a/python/nav/web/useradmin/forms.py b/python/nav/web/useradmin/forms.py
index 2df2b785cd..b365a5ef7c 100644
--- a/python/nav/web/useradmin/forms.py
+++ b/python/nav/web/useradmin/forms.py
@@ -54,16 +54,22 @@ class AccountGroupForm(forms.ModelForm):
 
     def __init__(self, *args, **kwargs):
         super(AccountGroupForm, self).__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.form_action = ''
-        self.helper.form_method = 'post'
-        self.helper.layout = Layout(
-            Fieldset(
-                'Group info',
-                'name',
-                'description',
-                Submit('submit_group', 'Save changes', css_class='small'),
-            )
+
+        self.attrs = set_flat_form_attributes(
+            form_fields=[
+                FlatFieldset(
+                    legend="Group info",
+                    fields=[
+                        self["name"],
+                        self["description"],
+                        SubmitField(
+                            name="submit_group",
+                            value="Save changes",
+                            css_classes="small",
+                        ),
+                    ],
+                )
+            ]
         )
 
     class Meta(object):

From 7e69461d84b52be834a3f3a60c5d2c8ca028d644 Mon Sep 17 00:00:00 2001
From: Johanna England <johanna.england@sikt.no>
Date: Fri, 11 Oct 2024 13:31:26 +0200
Subject: [PATCH 05/25] Uncrispify StatusWidgetForm in navlets

---
 python/nav/web/status2/forms.py               | 161 +++++++++++-------
 .../web/templates/navlets/status2_edit.html   |   3 +-
 2 files changed, 97 insertions(+), 67 deletions(-)

diff --git a/python/nav/web/status2/forms.py b/python/nav/web/status2/forms.py
index e41fb8f70c..a180679a19 100644
--- a/python/nav/web/status2/forms.py
+++ b/python/nav/web/status2/forms.py
@@ -20,14 +20,6 @@
 
 from django import forms
 from django.forms.utils import pretty_name
-from crispy_forms.helper import FormHelper
-from crispy_forms_foundation.layout import (
-    Layout,
-    Row,
-    Column,
-    Field,
-    Submit,
-)
 
 from nav.models.event import EventType, AlertType
 from nav.models.manage import Organization, Category, NetboxGroup, Location
@@ -37,6 +29,7 @@
     FormRow,
     FormColumn,
     FlatFieldset,
+    SubmitField,
 )
 from . import STATELESS_THRESHOLD
 
@@ -201,72 +194,110 @@ class StatusWidgetForm(StatusPanelForm):
     def __init__(self, *args, **kwargs):
         super(StatusWidgetForm, self).__init__(*args, **kwargs)
 
+        for field_name in (
+            "event_type",
+            "not_event_type",
+            "category",
+            "not_category",
+            "alert_type",
+            "not_alert_type",
+            "organization",
+            "not_organization",
+            "device_group",
+            "not_device_group",
+            "location",
+            "not_location",
+            "severity",
+            "not_severity",
+        ):
+            self.fields[field_name].widget.attrs.update({'class': 'select2'})
+
         column_class = 'medium-6'
-        self.helper = FormHelper()
-        self.helper.form_tag = False
-        self.helper.layout = Layout(
-            Row(
-                Column(
-                    Field('event_type', css_class='select2'), css_class=column_class
-                ),
-                Column(
-                    Field('not_event_type', css_class='select2'), css_class=column_class
-                ),
-            ),
-            Row(
-                Column(Field('category', css_class='select2'), css_class=column_class),
-                Column(
-                    Field('not_category', css_class='select2'), css_class=column_class
-                ),
-            ),
-            Row(
-                Column(
-                    Field('alert_type', css_class='select2'), css_class=column_class
-                ),
-                Column(
-                    Field('not_alert_type', css_class='select2'), css_class=column_class
+
+        self.attrs = set_flat_form_attributes(
+            form_fields=[
+                FormRow(
+                    fields=[
+                        FormColumn(
+                            fields=[self["event_type"]], css_classes=column_class
+                        ),
+                        FormColumn(
+                            fields=[self["not_event_type"]], css_classes=column_class
+                        ),
+                    ]
                 ),
-            ),
-            Row(
-                Column(
-                    Field('organization', css_class='select2'), css_class=column_class
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self["category"]], css_classes=column_class),
+                        FormColumn(
+                            fields=[self["not_category"]], css_classes=column_class
+                        ),
+                    ]
                 ),
-                Column(
-                    Field('not_organization', css_class='select2'),
-                    css_class=column_class,
+                FormRow(
+                    fields=[
+                        FormColumn(
+                            fields=[self["alert_type"]], css_classes=column_class
+                        ),
+                        FormColumn(
+                            fields=[self["not_alert_type"]], css_classes=column_class
+                        ),
+                    ]
                 ),
-            ),
-            Row(
-                Column(
-                    Field('device_group', css_class='select2'), css_class=column_class
+                FormRow(
+                    fields=[
+                        FormColumn(
+                            fields=[self["organization"]], css_classes=column_class
+                        ),
+                        FormColumn(
+                            fields=[self["not_organization"]], css_classes=column_class
+                        ),
+                    ]
                 ),
-                Column(
-                    Field('not_device_group', css_class='select2'),
-                    css_class=column_class,
+                FormRow(
+                    fields=[
+                        FormColumn(
+                            fields=[self["device_group"]], css_classes=column_class
+                        ),
+                        FormColumn(
+                            fields=[self["not_device_group"]], css_classes=column_class
+                        ),
+                    ]
                 ),
-            ),
-            Row(
-                Column(Field('location', css_class='select2'), css_class=column_class),
-                Column(
-                    Field('not_location', css_class='select2'), css_class=column_class
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self["location"]], css_classes=column_class),
+                        FormColumn(
+                            fields=[self["not_location"]], css_classes=column_class
+                        ),
+                    ]
                 ),
-            ),
-            Row(
-                Column(Field('severity', css_class='select2'), css_class=column_class),
-                Column(
-                    Field('not_severity', css_class='select2'), css_class=column_class
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self["severity"]], css_classes=column_class),
+                        FormColumn(
+                            fields=[self["not_severity"]], css_classes=column_class
+                        ),
+                    ]
                 ),
-            ),
-            Row(
-                Column('stateless', 'stateless_threshold', css_class=column_class),
-                Column(
-                    'acknowledged',
-                    'on_maintenance',
-                    'extra_columns',
-                    css_class=column_class,
+                FormRow(
+                    fields=[
+                        FormColumn(
+                            fields=[self["stateless"], self["stateless_threshold"]],
+                            css_classes=column_class,
+                        ),
+                        FormColumn(
+                            fields=[
+                                self["acknowledged"],
+                                self["on_maintenance"],
+                                self["extra_columns"],
+                            ],
+                            css_classes=column_class,
+                        ),
+                    ]
                 ),
-            ),
-            Submit('submit', 'Save'),
+            ],
+            submit_field=SubmitField(value="Save"),
         )
 
 
diff --git a/python/nav/web/templates/navlets/status2_edit.html b/python/nav/web/templates/navlets/status2_edit.html
index f6a934cfc1..a2b2efe25a 100644
--- a/python/nav/web/templates/navlets/status2_edit.html
+++ b/python/nav/web/templates/navlets/status2_edit.html
@@ -1,5 +1,4 @@
 {% extends 'navlets/base.html' %}
-{% load crispy_forms_tags %}
 
 {% block navlet-content %}
 
@@ -8,7 +7,7 @@
       Refresh interval (seconds)
       <input type="text" name="interval" value="{{ interval }}">
     </label>
-    {% crispy form %}
+    {% include 'custom_crispy_templates/_form_content.html' %}
   </form>
 
   <script>

From 189dca2be5fce2afa7c5716d36e0a8e7cdc880ee Mon Sep 17 00:00:00 2001
From: Simon Oliver Tveit <simtve@uninett.no>
Date: Thu, 10 Oct 2024 11:21:24 +0200
Subject: [PATCH 06/25] Uncrispify AccountLogSearchForm

---
 python/nav/web/radius/forms.py                | 32 +++++++++++--------
 .../nav/web/templates/radius/account_log.html |  3 +-
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/python/nav/web/radius/forms.py b/python/nav/web/radius/forms.py
index a284c1fc80..a6eb3c9e34 100644
--- a/python/nav/web/radius/forms.py
+++ b/python/nav/web/radius/forms.py
@@ -21,7 +21,7 @@
 from django.core.validators import validate_integer as django_validate_integer
 
 from crispy_forms.helper import FormHelper
-from crispy_forms_foundation.layout import Layout, Row, Column, Submit
+from crispy_forms_foundation.layout import Layout, Submit
 from nav.web.crispyforms import (
     set_flat_form_attributes,
     FormColumn,
@@ -218,18 +218,24 @@ def __init__(self, *args, **kwargs):
         super(AccountLogSearchForm, self).__init__(*args, **kwargs)
         css_class_large = 'large-4 medium-6'
         css_class_small = 'large-2 medium-6'
-        self.helper = FormHelper()
-        self.helper.form_action = ''
-        self.helper.form_method = 'GET'
-        self.helper.form_class = 'custom'
-        self.helper.layout = Layout(
-            Row(
-                Column('query', css_class=css_class_large),
-                Column('time', css_class=css_class_large),
-                Column('port_type', css_class=css_class_small),
-                Column('dns_lookup', css_class=css_class_small),
-            ),
-            Submit('send', 'Search', css_class='small'),
+        self.attrs = set_flat_form_attributes(
+            form_method='get',
+            form_class='custom',
+            form_fields=[
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self['query']], css_classes=css_class_large),
+                        FormColumn(fields=[self['time']], css_classes=css_class_large),
+                        FormColumn(
+                            fields=[self['port_type']], css_classes=css_class_small
+                        ),
+                        FormColumn(
+                            fields=[self['dns_lookup']], css_classes=css_class_small
+                        ),
+                    ]
+                ),
+                SubmitField(name='send', value='Search', css_classes='small'),
+            ],
         )
 
 
diff --git a/python/nav/web/templates/radius/account_log.html b/python/nav/web/templates/radius/account_log.html
index 14185b5b10..931454fe23 100644
--- a/python/nav/web/templates/radius/account_log.html
+++ b/python/nav/web/templates/radius/account_log.html
@@ -1,5 +1,4 @@
 {% extends "radius/base.html" %}
-{% load crispy_forms_tags %}
 
 {% load radius %}
 
@@ -18,7 +17,7 @@ <h4 class="subheader">Search in radius account logs</h4>
   </div>
 
   <div id="forms">
-    {% crispy form %}
+    {% include 'custom_crispy_templates/flat_form.html' %}
   </div>
 
   {% if form.is_bound %}

From bb9af5bdae7c1e59b79452ec0ca31c10ff253ba0 Mon Sep 17 00:00:00 2001
From: Simon Oliver Tveit <simtve@uninett.no>
Date: Thu, 7 Nov 2024 09:35:19 +0100
Subject: [PATCH 07/25] Uncrispify AccountChartsForm

---
 python/nav/web/radius/forms.py                      | 11 ++++-------
 python/nav/web/templates/radius/account_charts.html |  3 +--
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/python/nav/web/radius/forms.py b/python/nav/web/radius/forms.py
index a6eb3c9e34..294c6b870c 100644
--- a/python/nav/web/radius/forms.py
+++ b/python/nav/web/radius/forms.py
@@ -20,8 +20,6 @@
 from django.core.validators import validate_ipv4_address
 from django.core.validators import validate_integer as django_validate_integer
 
-from crispy_forms.helper import FormHelper
-from crispy_forms_foundation.layout import Layout, Submit
 from nav.web.crispyforms import (
     set_flat_form_attributes,
     FormColumn,
@@ -255,9 +253,8 @@ class AccountChartsForm(forms.Form):
 
     def __init__(self, *args, **kwargs):
         super(AccountChartsForm, self).__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.form_action = ''
-        self.helper.form_method = 'GET'
-        self.helper.layout = Layout(
-            'days', 'charts', Submit('send', 'Show me', css_class='small')
+        self.attrs = set_flat_form_attributes(
+            form_method='get',
+            form_fields=[self['days'], self['charts']],
+            submit_field=SubmitField('send', 'Show me', css_classes='small'),
         )
diff --git a/python/nav/web/templates/radius/account_charts.html b/python/nav/web/templates/radius/account_charts.html
index 8665b5cd43..1780dbaf1c 100644
--- a/python/nav/web/templates/radius/account_charts.html
+++ b/python/nav/web/templates/radius/account_charts.html
@@ -1,5 +1,4 @@
 {% extends "radius/base.html" %}
-{% load crispy_forms_tags %}
 {% load radius %}
 
 {% block content %}
@@ -16,7 +15,7 @@ <h4 class="subheader">Show top 6 talkers</h4>
 
   <div id="form" class="row">
     <div class="medium-6 columns">
-      {% crispy form %}
+      {% include 'custom_crispy_templates/flat_form.html' %}
     </div>
   </div>
 

From 8c023f1f6bb81177eea2b3f60ede306660fe2d82 Mon Sep 17 00:00:00 2001
From: Simon Oliver Tveit <simtve@uninett.no>
Date: Fri, 8 Nov 2024 10:02:27 +0100
Subject: [PATCH 08/25] Uncrispify Arnold SearchForm

---
 python/nav/web/arnold/forms.py              | 36 ++++++++++++++-------
 python/nav/web/templates/arnold/search.html |  3 +-
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/python/nav/web/arnold/forms.py b/python/nav/web/arnold/forms.py
index f572ac5d6a..024138fdc3 100644
--- a/python/nav/web/arnold/forms.py
+++ b/python/nav/web/arnold/forms.py
@@ -25,6 +25,8 @@
 from nav.web.crispyforms import (
     CheckBox,
     FlatFieldset,
+    FormColumn,
+    FormRow,
     SubmitField,
     set_flat_form_attributes,
 )
@@ -120,19 +122,29 @@ class SearchForm(forms.Form):
 
     def __init__(self, *args, **kwargs):
         super(SearchForm, self).__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.form_class = 'custom'
-        self.helper.layout = Layout(
-            Row(
-                Column('searchtype', css_class='medium-3'),
-                Column('searchvalue', css_class='medium-9'),
-                css_class='collapse',
-            ),
-            Row(
-                Column('status', css_class='medium-6'),
-                Column('days', css_class='medium-6'),
+
+        self.attrs = set_flat_form_attributes(
+            form_class='custom',
+            form_fields=[
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self['searchtype']], css_classes='medium-3'),
+                        FormColumn(
+                            fields=[self['searchvalue']], css_classes='medium-9'
+                        ),
+                    ],
+                    css_classes='collapse',
+                ),
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self['status']], css_classes='medium-6'),
+                        FormColumn(fields=[self['days']], css_classes='medium-6'),
+                    ],
+                ),
+            ],
+            submit_field=SubmitField(
+                name='search', value='Search', css_classes='small'
             ),
-            Submit('search', 'Search', css_class='small'),
         )
 
     def clean_searchvalue(self):
diff --git a/python/nav/web/templates/arnold/search.html b/python/nav/web/templates/arnold/search.html
index b94a3b5042..2af54be781 100644
--- a/python/nav/web/templates/arnold/search.html
+++ b/python/nav/web/templates/arnold/search.html
@@ -1,5 +1,4 @@
 {% extends "arnold/base.html" %}
-{% load crispy_forms_tags %}
 
 {% block content %}
 
@@ -12,7 +11,7 @@ <h4>Search</h4>
   <div class="row">
     <div class="medium-6 column">
       <div class="panel white">
-        {% crispy form %}
+        {% include 'custom_crispy_templates/flat_form.html' %}
       </div>
     </div>
   </div>

From 00bac06fe249a30e7e6c3c63979e042176a4f471 Mon Sep 17 00:00:00 2001
From: Morten Brekkevold <morten.brekkevold@sikt.no>
Date: Tue, 12 Nov 2024 12:31:21 +0000
Subject: [PATCH 09/25] Regression test for #3186

The API should be able to retrieve locations and rooms with periods
in their IDs/names.
---
 tests/integration/api_test.py | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/tests/integration/api_test.py b/tests/integration/api_test.py
index 2b4dbd2f8d..f9744bfa63 100644
--- a/tests/integration/api_test.py
+++ b/tests/integration/api_test.py
@@ -192,6 +192,32 @@ def test_get_new_room(db, api_client, token):
     assert response.status_code == 200
 
 
+def test_when_room_has_dot_in_id_the_api_should_still_find_it(db, api_client, token):
+    create_token_endpoint(token, "room")
+    from nav.models.manage import Room
+
+    room = Room(id="foo.bar", location_id="mylocation")
+    room.save()
+
+    response = api_client.get(f"/api/1/room/{room.id}/")
+    print(response)
+    assert response.status_code == 200
+
+
+def test_when_location_has_dot_in_id_the_api_should_still_find_it(
+    db, api_client, token
+):
+    create_token_endpoint(token, "location")
+    from nav.models.manage import Location
+
+    location = Location(id="foo.bar")
+    location.save()
+
+    response = api_client.get(f"/api/1/location/{location.id}/")
+    print(response)
+    assert response.status_code == 200
+
+
 def test_patch_room_not_found(db, api_client, token):
     create_token_endpoint(token, 'room')
     data = {'location': 'mylocation'}

From 5b14fdadfa55899abda77d3070e788fe29f12f17 Mon Sep 17 00:00:00 2001
From: Morten Brekkevold <morten.brekkevold@sikt.no>
Date: Tue, 12 Nov 2024 12:17:13 +0000
Subject: [PATCH 10/25] Allow periods in room/location IDs in API

Django REST Framework's default regexp pattern for matching object
primary keys explicitly disallowed `.` characters in IDs.  Periods are
perfectly acceptable in room and location identifiers, and should be
allowed.

This changes the lookup regex used for rooms and locations.
---
 python/nav/web/api/v1/views.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/python/nav/web/api/v1/views.py b/python/nav/web/api/v1/views.py
index 2e285ddc3c..fbeef1ef99 100644
--- a/python/nav/web/api/v1/views.py
+++ b/python/nav/web/api/v1/views.py
@@ -330,6 +330,7 @@ class RoomViewSet(LoggerMixin, NAVAPIMixin, viewsets.ModelViewSet):
     queryset = manage.Room.objects.all()
     serializer_class = serializers.RoomSerializer
     filterset_fields = ('location', 'description')
+    lookup_value_regex = '[^/]+'
 
 
 class LocationViewSet(LoggerMixin, NAVAPIMixin, viewsets.ModelViewSet):
@@ -349,6 +350,7 @@ class LocationViewSet(LoggerMixin, NAVAPIMixin, viewsets.ModelViewSet):
     serializer_class = serializers.LocationSerializer
     filterset_fields = ('id', 'parent')
     search_fields = ('description',)
+    lookup_value_regex = '[^/]+'
 
 
 class UnrecognizedNeighborViewSet(NAVAPIMixin, viewsets.ReadOnlyModelViewSet):

From 817612b08e29dea6cfd8394b48334c4bb64bcb92 Mon Sep 17 00:00:00 2001
From: Morten Brekkevold <morten.brekkevold@sikt.no>
Date: Tue, 12 Nov 2024 12:32:49 +0000
Subject: [PATCH 11/25] Add news fragment.

---
 changelog.d/3186.fixed.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/3186.fixed.md

diff --git a/changelog.d/3186.fixed.md b/changelog.d/3186.fixed.md
new file mode 100644
index 0000000000..87f517b176
--- /dev/null
+++ b/changelog.d/3186.fixed.md
@@ -0,0 +1 @@
+Rooms and locations with periods in their IDs can now be properly retrieved from the corresponding API endpoints

From bd3fae7009da900520f1343ea596af6929ba653e Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Thu, 3 Oct 2024 14:45:51 +0200
Subject: [PATCH 12/25] Configure NPM and add webpack config for building CSS
 from Sass

The essence of this config:
Sass files will be compiled into CSS files into the same folder (/static/css/) as it was done in the original implementation (with libsass and setuptools).

The resulting files in /static/css will have same layout and names as with the previous solution, except for /static/css/foundation folder. It is dropped completely since it was empty when built with setuptools. This is expected since /sass/foundation folder contains only Sass partials.

Named webpack configuration is used in the config. This is to drop the need of having multiple webpack config files per name/target/purpose.
---
 .gitignore        |  4 ++++
 package.json      | 20 ++++++++++++++++++++
 webpack.config.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 package.json
 create mode 100644 webpack.config.js

diff --git a/.gitignore b/.gitignore
index 3279c76922..fd82f9731c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,7 @@ python/nav/web/static/css
 python/nav/web/static/js/node_modules
 python/nav/web/static/js/require_config.dev.js
 python/nav/web/static/js/coverage
+
+# Javascript libraries
+/node_modules
+package-lock.json
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..6353860a47
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "NAV frontend",
+  "description": "Network Administration Visualized frontend",
+  "version": "5",
+  "private": true,
+  "dependencies": {
+    "css-loader": "^6.10.0",
+    "glob": "^10.3.10",
+    "mini-css-extract-plugin": "^2.8.0",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
+  },
+  "scripts": {
+    "watch:sass": "webpack --config webpack.config.js --config-name sass --mode development --watch",
+    "build:sass": "webpack --config webpack.config.js --config-name sass --mode production"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000000..1d15a8c4bf
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,43 @@
+const path = require('path');
+const glob = require('glob');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+
+const stylesHandler = MiniCssExtractPlugin.loader;
+
+module.exports = [
+    {
+        name: 'sass',
+        entry: {
+            nav: path.resolve(__dirname, './python/nav/web/sass/nav.scss'),
+            ...glob.sync(path.resolve(__dirname, './python/nav/web/sass/nav/**.scss')).filter(v => !path.parse(v).name.startsWith('_')).reduce(function (obj, el) {
+                obj[`nav/${path.parse(el).name}`] = el;
+                return obj
+            }, {}),
+            'font-awesome/font-awesome': path.resolve(__dirname, './python/nav/web/sass/font-awesome/font-awesome.scss'),
+        },
+        output: {
+            path: path.join(__dirname, './python/nav/web/static/css'),
+            clean: true,
+        },
+        plugins: [
+            new MiniCssExtractPlugin(),
+            new RemoveEmptyScriptsPlugin(),
+        ],
+        module: {
+            rules: [
+                {
+                    test: /\.s[ac]ss$/i,
+                    use: [stylesHandler, 'css-loader', 'sass-loader'],
+                },
+                {
+                    test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                    type: 'asset' // webpack will individually pick the best way to include each asset it encounters
+                },
+            ],
+        },
+        // TODO: fix warnings instead of ignoring them
+        ignoreWarnings: [/./], // Suppress all warnings in the console
+    },
+];

From c454d2118e1d4caeadb15c4296e92aa1857ddb47 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Thu, 29 Feb 2024 16:52:55 +0100
Subject: [PATCH 13/25] Fix Sass files to get rid of errors during build

* Fixes failing assets urls.

Read more about problem here https://webpack.js.org/loaders/sass-loader/#problems-with-url. In our case asset urls must be relative to each given entry path (each generated CSS file came from a separate entry). Sass files (entries) have different path depth which introduces another problem - there can't be 1 variable that would satisfy all entries. Furthermore, some assets are defined in the same Sass file AND are used by several entries of varying depth.
squash Fix correct asset name and path


* Remove redundant imports

Otherwise webpack will fail due to assets url not being valid relative to entry path

* Fix correct import

Otherwise webpack would not build CSS file from entries


Also merges duplicate selector definitions into single definition. There were no overlaps in the merged definitions, so no unexpected CSS behaviour would occur. But merging duplicate definitions is better for code maintainability in general.
---
 python/nav/web/sass/_fonts.scss               |  8 ++--
 python/nav/web/sass/_navsettings.scss         |  7 ++-
 python/nav/web/sass/nav/_fonts.scss           |  8 ++--
 python/nav/web/sass/nav/_select2.scss         |  1 +
 python/nav/web/sass/nav/_sensors.scss         |  2 -
 python/nav/web/sass/nav/_settings.scss        |  5 ++
 python/nav/web/sass/nav/geomap.scss           | 26 ++++++-----
 python/nav/web/sass/nav/info_room.scss        |  3 +-
 python/nav/web/sass/nav/ipdevinfo.scss        |  2 +-
 .../web/sass/nav/jquery-ui-1.8.21.custom.scss | 46 +++++++++----------
 python/nav/web/sass/nav/jquery-ui.scss        | 34 +++++++-------
 python/nav/web/sass/nav/multi-select.scss     |  4 +-
 python/nav/web/sass/nav/navlets.scss          |  1 -
 python/nav/web/sass/nav/netmap.scss           |  4 +-
 python/nav/web/sass/nav/networkexplorer.scss  |  8 ++--
 python/nav/web/sass/nav/openlayers.scss       |  3 +-
 python/nav/web/sass/nav/powersupplies.scss    | 12 +++--
 17 files changed, 97 insertions(+), 77 deletions(-)
 create mode 100644 python/nav/web/sass/nav/_settings.scss

diff --git a/python/nav/web/sass/_fonts.scss b/python/nav/web/sass/_fonts.scss
index 047453a398..07c8467a57 100644
--- a/python/nav/web/sass/_fonts.scss
+++ b/python/nav/web/sass/_fonts.scss
@@ -1,18 +1,20 @@
+@import 'navsettings';
+
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('/static/fonts/OS300.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('#{$assets-url}/fonts/OS300.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OS400.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('#{$assets-url}/fonts/OS400.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('/static/fonts/OS600.woff') format('woff');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('#{$assets-url}/fonts/OS600.woff') format('woff');
 }
\ No newline at end of file
diff --git a/python/nav/web/sass/_navsettings.scss b/python/nav/web/sass/_navsettings.scss
index 60d767f21c..42de255eb2 100644
--- a/python/nav/web/sass/_navsettings.scss
+++ b/python/nav/web/sass/_navsettings.scss
@@ -23,8 +23,11 @@ $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (m
 
 
 // Relative image path
-$image-path: '../../images' !global;
-$image-path-partials: '../images' !global;
+// Providing variables for all assets paths in this folder so that there will be no hard coding
+$assets-url: '../static' !global;
+$image-path: '#{$assets-url}/images' !global;
+$image-path-partials: '#{$assets-url}/images' !global;
+$fa-font-path: '#{$assets-url}/fonts';
 
 // Width of a row. To create a limited viewport use em-calc
 // Default from Foundation is $row-width: em-calc(1000) !global;
diff --git a/python/nav/web/sass/nav/_fonts.scss b/python/nav/web/sass/nav/_fonts.scss
index 1ca0275fc2..030faa0192 100644
--- a/python/nav/web/sass/nav/_fonts.scss
+++ b/python/nav/web/sass/nav/_fonts.scss
@@ -1,18 +1,20 @@
+@import 'settings';
+
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('/static/fonts/OS300.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('#{$assets-url}/fonts/OS300.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OS400.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('#{$assets-url}/fonts/OS400.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('/static/fonts/OS600.woff') format('woff');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('#{$assets-url}/fonts/OS600.woff') format('woff');
 }
diff --git a/python/nav/web/sass/nav/_select2.scss b/python/nav/web/sass/nav/_select2.scss
index 236d86dcb5..253b63f2b1 100644
--- a/python/nav/web/sass/nav/_select2.scss
+++ b/python/nav/web/sass/nav/_select2.scss
@@ -2,6 +2,7 @@
 Version: 3.4.5 Timestamp: Mon Nov  4 08:22:42 PST 2013
 */
 @import '../navsettings';
+@import 'settings';
 
 .select2-container {
     margin: 0 0 1rem 0;
diff --git a/python/nav/web/sass/nav/_sensors.scss b/python/nav/web/sass/nav/_sensors.scss
index aef207c8d2..426eaa51b0 100644
--- a/python/nav/web/sass/nav/_sensors.scss
+++ b/python/nav/web/sass/nav/_sensors.scss
@@ -1,5 +1,3 @@
-@import 'navsettings';
-
 /*
  * Styles for everything in the environment tab
  */
diff --git a/python/nav/web/sass/nav/_settings.scss b/python/nav/web/sass/nav/_settings.scss
new file mode 100644
index 0000000000..49cc55453d
--- /dev/null
+++ b/python/nav/web/sass/nav/_settings.scss
@@ -0,0 +1,5 @@
+// Assets path variables
+// Giving same name to  variables as in ../navsettings, and making them default in this folder
+$assets-url: '../../static' !default;
+$image-path: '#{$assets-url}/images' !default;
+$image-path-partials: '#{$assets-url}/images' !default;
\ No newline at end of file
diff --git a/python/nav/web/sass/nav/geomap.scss b/python/nav/web/sass/nav/geomap.scss
index 57f9631aca..0630b0245b 100644
--- a/python/nav/web/sass/nav/geomap.scss
+++ b/python/nav/web/sass/nav/geomap.scss
@@ -1,3 +1,5 @@
+@import "settings";
+
 #map {
     height: 75vh;
 }
@@ -61,51 +63,51 @@
 }
 
 #time-navigation-prev-jump.enabled:before {
-    content: url('../../images/geomap/left2.png');
+    content: url('#{$assets-url}/images/geomap/left2.png');
 }
 
 #time-navigation-prev-jump.disabled:before {
-    content: url('../../images/geomap/left2_grey.png');
+    content: url('#{$assets-url}/images/geomap/left2_grey.png');
 }
 
 #time-navigation-prev.enabled:before {
-    content: url('../../images/geomap/left1.png');
+    content: url('#{$assets-url}/images/geomap/left1.png');
 }
 
 #time-navigation-prev.disabled:before {
-    content: url('../../images/geomap/left1_grey.png');
+    content: url('#{$assets-url}/images/geomap/left1_grey.png');
 }
 
 #time-navigation-next.enabled:before {
-    content: url('../../images/geomap/right1.png');
+    content: url('#{$assets-url}/images/geomap/right1.png');
 }
 
 #time-navigation-next.disabled:before {
-    content: url('../../images/geomap/right1_grey.png');
+    content: url('#{$assets-url}/images/geomap/right1_grey.png');
 }
 
 #time-navigation-next-jump.enabled:before {
-    content: url('../../images/geomap/right2.png');
+    content: url('#{$assets-url}/images/geomap/right2.png');
 }
 
 #time-navigation-next-jump.disabled:before {
-    content: url('../../images/geomap/right2_grey.png');
+    content: url('#{$assets-url}/images/geomap/right2_grey.png');
 }
 
 #time-navigation-last.enabled:before {
-    content: url('../../images/geomap/right_last.png');
+    content: url('#{$assets-url}/images/geomap/right_last.png');
 }
 
 #time-navigation-last.disabled:before {
-    content: url('../../images/geomap/right_last_grey.png');
+    content: url('#{$assets-url}/images/geomap/right_last_grey.png');
 }
 
 #time-navigation-up.enabled:before {
-    content: url('../../images/geomap/up1.png');
+    content: url('#{$assets-url}/images/geomap/up1.png');
 }
 
 #time-navigation-up.disabled:before {
-    content: url('../../images/geomap/up1_grey.png');
+    content: url('#{$assets-url}/images/geomap/up1_grey.png');
 }
 
 #time-navigation-down.disabled {
diff --git a/python/nav/web/sass/nav/info_room.scss b/python/nav/web/sass/nav/info_room.scss
index 906bb00c46..d930353ea5 100644
--- a/python/nav/web/sass/nav/info_room.scss
+++ b/python/nav/web/sass/nav/info_room.scss
@@ -1,4 +1,3 @@
-@import 'sensors';
 
 #netboxes .dataTables_wrapper {
     display: inline-block;
@@ -104,4 +103,4 @@ img.textbottom {
         padding-top: 0.5rem;
         padding-bottom: 0.5rem;
     }
-}
\ No newline at end of file
+}
diff --git a/python/nav/web/sass/nav/ipdevinfo.scss b/python/nav/web/sass/nav/ipdevinfo.scss
index 2e7b0261f8..66d46ef9ba 100644
--- a/python/nav/web/sass/nav/ipdevinfo.scss
+++ b/python/nav/web/sass/nav/ipdevinfo.scss
@@ -22,7 +22,7 @@
  *
  */
 
- @import 'foundation/functions';
+ @import '../foundation/functions';
 
 /* Device details table */
 
diff --git a/python/nav/web/sass/nav/jquery-ui-1.8.21.custom.scss b/python/nav/web/sass/nav/jquery-ui-1.8.21.custom.scss
index be376c1053..fdca124a34 100644
--- a/python/nav/web/sass/nav/jquery-ui-1.8.21.custom.scss
+++ b/python/nav/web/sass/nav/jquery-ui-1.8.21.custom.scss
@@ -8,6 +8,8 @@
  * http://docs.jquery.com/UI/Theming/API
  */
 
+@import "settings";
+
 /* Layout helpers
 ----------------------------------*/
 .ui-helper-hidden { display: none; }
@@ -28,14 +30,14 @@
 ----------------------------------*/
 
 /* states and images */
-.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; width: 16px; height: 16px; background-image: url('#{$assets-url}/images/jqueryui/ui-icons_222222_256x240.png'); }
 
 
 /* Misc visuals
 ----------------------------------*/
 
 /* Overlays */
-.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #aaaaaa url('#{$assets-url}/images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
 
 
 /*!
@@ -56,26 +58,26 @@
 /* .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } */
 .ui-widget .ui-widget { font-size: 1em; }
 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
-.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url('../../images/jqueryui/ui-bg_flat_75_ffffff_40x100.png') 50% 50% repeat-x; color: #222222; }
+.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url('#{$assets-url}/images/jqueryui/ui-bg_flat_75_ffffff_40x100.png') 50% 50% repeat-x; color: #222222; }
 /*.ui-widget-content a { color: #222222; }*/
-.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url('../../images/jqueryui/ui-bg_highlight-soft_75_cccccc_1x100.png') 50% 50% repeat-x; color: #222222; font-weight: bold; }
+.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url('#{$assets-url}/images/jqueryui/ui-bg_highlight-soft_75_cccccc_1x100.png') 50% 50% repeat-x; color: #222222; font-weight: bold; }
 .ui-widget-header a { color: #222222; }
 
 /* Interaction states
 ----------------------------------*/
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url('../../images/jqueryui/ui-bg_glass_75_e6e6e6_1x400.png') 50% 50% repeat-x; font-weight: normal; color: #555555; }
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url('#{$assets-url}/images/jqueryui/ui-bg_glass_75_e6e6e6_1x400.png') 50% 50% repeat-x; font-weight: normal; color: #555555; }
 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url('../../images/jqueryui/ui-bg_glass_75_dadada_1x400.png') 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url('#{$assets-url}/images/jqueryui/ui-bg_glass_75_dadada_1x400.png') 50% 50% repeat-x; font-weight: normal; color: #212121; }
 .ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
-.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url('../../images/jqueryui/ui-bg_glass_65_ffffff_1x400.png') 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url('#{$assets-url}/images/jqueryui/ui-bg_glass_65_ffffff_1x400.png') 50% 50% repeat-x; font-weight: normal; color: #212121; }
 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
 .ui-widget :active { outline: none; }
 
 /* Interaction Cues
 ----------------------------------*/
-.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url('../../images/jqueryui/ui-bg_glass_55_fbf9ee_1x400.png') 50% 50% repeat-x; color: #363636; }
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url('#{$assets-url}/images/jqueryui/ui-bg_glass_55_fbf9ee_1x400.png') 50% 50% repeat-x; color: #363636; }
 .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
-.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url('../../images/jqueryui/ui-bg_glass_95_fef1ec_1x400.png') 50% 50% repeat-x; color: #cd0a0a; font-weight: normal;}
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url('#{$assets-url}/images/jqueryui/ui-bg_glass_95_fef1ec_1x400.png') 50% 50% repeat-x; color: #cd0a0a; font-weight: normal;}
 .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
 .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
 .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
@@ -86,14 +88,13 @@
 ----------------------------------*/
 
 /* states and images */
-.ui-icon { width: 16px; height: 16px; background-image: url('../../images/jqueryui/ui-icons_222222_256x240.png'); }
-.ui-widget-content .ui-icon {background-image: url('../../images/jqueryui/ui-icons_222222_256x240.png'); }
-.ui-widget-header .ui-icon {background-image: url('../../images/jqueryui/ui-icons_222222_256x240.png'); }
-.ui-state-default .ui-icon { background-image: url('../../images/jqueryui/ui-icons_888888_256x240.png'); }
-.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url('../../images/jqueryui/ui-icons_454545_256x240.png'); }
-.ui-state-active .ui-icon {background-image: url('../../images/jqueryui/ui-icons_454545_256x240.png'); }
-.ui-state-highlight .ui-icon {background-image: url('../../images/jqueryui/ui-icons_2e83ff_256x240.png'); }
-.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url('../../images/jqueryui/ui-icons_cd0a0a_256x240.png'); }
+.ui-widget-content .ui-icon {background-image: url('#{$assets-url}/images/jqueryui/ui-icons_222222_256x240.png'); }
+.ui-widget-header .ui-icon {background-image: url('#{$assets-url}/images/jqueryui/ui-icons_222222_256x240.png'); }
+.ui-state-default .ui-icon { background-image: url('#{$assets-url}/images/jqueryui/ui-icons_888888_256x240.png'); }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url('#{$assets-url}/images/jqueryui/ui-icons_454545_256x240.png'); }
+.ui-state-active .ui-icon {background-image: url('#{$assets-url}/images/jqueryui/ui-icons_454545_256x240.png'); }
+.ui-state-highlight .ui-icon {background-image: url('#{$assets-url}/images/jqueryui/ui-icons_2e83ff_256x240.png'); }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url('#{$assets-url}/images/jqueryui/ui-icons_cd0a0a_256x240.png'); }
 
 /* positioning */
 .ui-icon-carat-1-n { background-position: 0 0; }
@@ -283,8 +284,7 @@
 .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
 
 /* Overlays */
-.ui-widget-overlay { background: #aaaaaa url('../../images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
-.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url('../../images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*!
+.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url('#{$assets-url}/images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*!
  * jQuery UI Resizable 1.8.21
  *
  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
@@ -341,7 +341,7 @@
  *
  * http://docs.jquery.com/UI/Autocomplete#theming
  */
-.ui-autocomplete { position: absolute; cursor: default; }	
+.ui-autocomplete { position: absolute; cursor: default; }
 
 /* workarounds */
 * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
@@ -397,8 +397,8 @@
 .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
 .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
 button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
-.ui-button-icons-only { width: 3.4em; } 
-button.ui-button-icons-only { width: 3.7em; } 
+.ui-button-icons-only { width: 3.4em; }
+button.ui-button-icons-only { width: 3.7em; }
 
 /*button text element */
 .ui-button .ui-button-text { display: block; line-height: 1.4;  }
@@ -511,7 +511,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
 .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
 .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
 .ui-datepicker select.ui-datepicker-month-year {width: 100%;}
-.ui-datepicker select.ui-datepicker-month, 
+.ui-datepicker select.ui-datepicker-month,
 .ui-datepicker select.ui-datepicker-year { width: 49%;}
 .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
 .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
diff --git a/python/nav/web/sass/nav/jquery-ui.scss b/python/nav/web/sass/nav/jquery-ui.scss
index deee6287a8..8ae81b5dcb 100644
--- a/python/nav/web/sass/nav/jquery-ui.scss
+++ b/python/nav/web/sass/nav/jquery-ui.scss
@@ -4,6 +4,8 @@
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
 * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
 
+@import "settings";
+
 /* Layout helpers
 ----------------------------------*/
 .ui-helper-hidden {
@@ -845,7 +847,7 @@ body .ui-tooltip {
 }
 .ui-widget-content {
 	border: 1px solid #aaaaaa;
-	background: #ffffff url("../../images/jqueryui/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
+	background: #ffffff url("#{$assets-url}/images/jqueryui/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
 	color: #222222;
 }
 .ui-widget-content a {
@@ -853,7 +855,7 @@ body .ui-tooltip {
 }
 .ui-widget-header {
 	border: 1px solid #aaaaaa;
-	background: #cccccc url("../../images/jqueryui/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
+	background: #cccccc url("#{$assets-url}/images/jqueryui/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
 	color: #222222;
 	font-weight: bold;
 }
@@ -867,7 +869,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
 	border: 1px solid #d3d3d3;
-	background: #e6e6e6 url("../../images/jqueryui/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
+	background: #e6e6e6 url("#{$assets-url}/images/jqueryui/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
 	font-weight: normal;
 	color: #555555;
 }
@@ -884,7 +886,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
 	border: 1px solid #999999;
-	background: #dadada url("../../images/jqueryui/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;
+	background: #dadada url("#{$assets-url}/images/jqueryui/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;
 	font-weight: normal;
 	color: #212121;
 }
@@ -903,7 +905,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
 	border: 1px solid #aaaaaa;
-	background: #ffffff url("../../images/jqueryui/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
+	background: #ffffff url("#{$assets-url}/images/jqueryui/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
 	font-weight: normal;
 	color: #212121;
 }
@@ -920,7 +922,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid #fcefa1;
-	background: #fbf9ee url("../../images/jqueryui/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
+	background: #fbf9ee url("#{$assets-url}/images/jqueryui/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
 	color: #363636;
 }
 .ui-state-highlight a,
@@ -932,7 +934,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
 	border: 1px solid #cd0a0a;
-	background: #fef1ec url("../../images/jqueryui/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
+	background: #fef1ec url("#{$assets-url}/images/jqueryui/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
 	color: #cd0a0a;
 }
 .ui-state-error a,
@@ -978,27 +980,27 @@ body .ui-tooltip {
 }
 .ui-icon,
 .ui-widget-content .ui-icon {
-	background-image: url("../../images/jqueryui/ui-icons_222222_256x240.png");
+	background-image: url("#{$assets-url}/images/jqueryui/ui-icons_222222_256x240.png");
 }
 .ui-widget-header .ui-icon {
-	background-image: url("../../images/jqueryui/ui-icons_222222_256x240.png");
+	background-image: url("#{$assets-url}/images/jqueryui/ui-icons_222222_256x240.png");
 }
 .ui-state-default .ui-icon {
-	background-image: url("../../images/jqueryui/ui-icons_888888_256x240.png");
+	background-image: url("#{$assets-url}/images/jqueryui/ui-icons_888888_256x240.png");
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
-	background-image: url("../../images/jqueryui/ui-icons_454545_256x240.png");
+	background-image: url("#{$assets-url}/images/jqueryui/ui-icons_454545_256x240.png");
 }
 .ui-state-active .ui-icon {
-	background-image: url("../../images/jqueryui/ui-icons_454545_256x240.png");
+	background-image: url("#{$assets-url}/images/jqueryui/ui-icons_454545_256x240.png");
 }
 .ui-state-highlight .ui-icon {
-	background-image: url("../../images/jqueryui/ui-icons_2e83ff_256x240.png");
+	background-image: url("#{$assets-url}/images/jqueryui/ui-icons_2e83ff_256x240.png");
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-	background-image: url("../../images/jqueryui/ui-icons_cd0a0a_256x240.png");
+	background-image: url("#{$assets-url}/images/jqueryui/ui-icons_cd0a0a_256x240.png");
 }
 
 /* positioning */
@@ -1211,14 +1213,14 @@ body .ui-tooltip {
 
 /* Overlays */
 .ui-widget-overlay {
-	background: #aaaaaa url("../../images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
+	background: #aaaaaa url("#{$assets-url}/images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
 	opacity: .3;
 	filter: Alpha(Opacity=30); /* support: IE8 */
 }
 .ui-widget-shadow {
 	margin: -8px 0 0 -8px;
 	padding: 8px;
-	background: #aaaaaa url("../../images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
+	background: #aaaaaa url("#{$assets-url}/images/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
 	opacity: .3;
 	filter: Alpha(Opacity=30); /* support: IE8 */
 	border-radius: 8px;
diff --git a/python/nav/web/sass/nav/multi-select.scss b/python/nav/web/sass/nav/multi-select.scss
index ea59711d52..3ef3986cb5 100644
--- a/python/nav/web/sass/nav/multi-select.scss
+++ b/python/nav/web/sass/nav/multi-select.scss
@@ -1,5 +1,7 @@
+@import "settings";
+
 .ms-container{
-  background: transparent url('../../images/multiselect/switch.png') no-repeat 50% 50%;
+  background: transparent url('#{$assets-url}/images/multiselect/switch.png') no-repeat 50% 50%;
   width: 100%;
 }
 
diff --git a/python/nav/web/sass/nav/navlets.scss b/python/nav/web/sass/nav/navlets.scss
index f796ff5797..8fedb56e85 100644
--- a/python/nav/web/sass/nav/navlets.scss
+++ b/python/nav/web/sass/nav/navlets.scss
@@ -135,7 +135,6 @@ $fullscreen-color: #EEE;
 
 
 .SensorWidget {
-    @import "sensors";
     .room-sensor {
         display: flex;
         justify-content: center;
diff --git a/python/nav/web/sass/nav/netmap.scss b/python/nav/web/sass/nav/netmap.scss
index b9fde88e81..0836cd42b2 100644
--- a/python/nav/web/sass/nav/netmap.scss
+++ b/python/nav/web/sass/nav/netmap.scss
@@ -1,5 +1,5 @@
-@import '../navsettings';
-$image-path: '../../images';
+@import 'settings';
+$image-path: '#{$assets-url}/images';
 
 #graph-view {
   background: #ffffff;
diff --git a/python/nav/web/sass/nav/networkexplorer.scss b/python/nav/web/sass/nav/networkexplorer.scss
index be299b2747..3a387d514a 100644
--- a/python/nav/web/sass/nav/networkexplorer.scss
+++ b/python/nav/web/sass/nav/networkexplorer.scss
@@ -1,3 +1,5 @@
+@import "settings";
+
 #working {
     visibility: hidden;
 }
@@ -13,7 +15,7 @@
 }
 
 #networktree .node  {
-    background: url('../../images/networkexplorer/vertical.gif') repeat-y top left;
+    background: url('#{$assets-url}/images/networkexplorer/vertical.gif') repeat-y top left;
 }
 
 #networktree #root {
@@ -55,12 +57,12 @@ dl, dl dd {
 
 dl, dt, dd {
 	padding-left: 1em;
-	background-image: url('../../images/networkexplorer/vertical.gif');
+	background-image: url('#{$assets-url}/images/networkexplorer/vertical.gif');
 	background-repeat: repeat-y;
 }
 
 .tree-navigators {
-	background-image: url('../../images/networkexplorer/vertical.gif');
+	background-image: url('#{$assets-url}/images/networkexplorer/vertical.gif');
 	background-repeat: repeat-y;
 	}
 #tree > dl, dt, dd {
diff --git a/python/nav/web/sass/nav/openlayers.scss b/python/nav/web/sass/nav/openlayers.scss
index 3c6fd5d828..5228fa9f80 100644
--- a/python/nav/web/sass/nav/openlayers.scss
+++ b/python/nav/web/sass/nav/openlayers.scss
@@ -1,4 +1,5 @@
-$ol-imagepath: '../../images/openlayers';
+@import "settings";
+$ol-imagepath: '#{$assets-url}/images/openlayers';
 
 div.olMap {
     z-index: 0;
diff --git a/python/nav/web/sass/nav/powersupplies.scss b/python/nav/web/sass/nav/powersupplies.scss
index 22deb01622..73cdce4bf0 100644
--- a/python/nav/web/sass/nav/powersupplies.scss
+++ b/python/nav/web/sass/nav/powersupplies.scss
@@ -1,3 +1,5 @@
+@import "settings";
+
 .right { float: right; }
 .left { float: left; }
 .text-right { text-align: right; }
@@ -8,7 +10,7 @@
 h4 { text-align: center; }
 
 div.infobox {
-	margin-bottom: 1em;	
+	margin-bottom: 1em;
 }
 
 div#tablecontainer {
@@ -22,7 +24,7 @@ div#errors {
 
 /*
  * Styles for the table
- */ 
+ */
 
 table#portadmin-interfacecontainer td {
 	height: 30px;
@@ -46,7 +48,7 @@ table#portadmin-interfacecontainer tr td.changed {
 
 
 /*
- * Styles for information boxes 
+ * Styles for information boxes
  */
 div.saveinfo {
 	position: absolute;
@@ -72,13 +74,13 @@ div#summary ul {
 .success {
 	color: #4F8A10;
 	background-color: #DFF2BF;
-	background-image:url('/images/lys/green.png');
+	background-image:url('#{$assets-url}/images/lys/green.png');
 }
 
 .error {
 	color: #D8000C;
 	background-color: #FFBABA;
-	background-image: url('/images/lys/red.png');
+	background-image: url('#{$assets-url}/images/lys/red.png');
 }
 
 table#powersupplycontainer td.warning {

From 3ad9018e8201fa7dee038b7dafcee9b17ade8f50 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Thu, 3 Oct 2024 17:31:24 +0200
Subject: [PATCH 14/25] Add make commands for building css from sass via
 webpack

---
 Makefile | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 04c6367cf7..ceebf1e1d7 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: dummy clean distclean testclean docclean doc .FORCE
+.PHONY: dummy clean distclean testclean docclean doc cssclean sassbuild sasswatch .FORCE
 
 dummy:
 	@echo "'make' is no longer used for deployment. See 'doc/intro/install.rst'"
@@ -32,4 +32,17 @@ doc/reference/alerttypes.rst: .FORCE
 	echo "UID=$(shell id -u)" >> .env
 	echo "GID=$(shell id -g)" >> .env
 
+cssclean:
+	-rm -rf python/nav/web/static/css
+
+sassbuild: cssclean
+	@if [ -f package-lock.json ]; then \
+		(npm ci && npm run build:sass); \
+	else \
+		(npm install && npm run build:sass); \
+	fi
+
+sasswatch:
+	-npm run watch:sass
+
 .FORCE:

From 3c372d285b6294d2038cf32f253346c1b21b91c8 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Thu, 3 Oct 2024 17:36:08 +0200
Subject: [PATCH 15/25] Switch to using sassbuild and sasswatch commands in
 docker

---
 tools/docker/build.sh      | 2 +-
 tools/docker/sass-watch.sh | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/tools/docker/build.sh b/tools/docker/build.sh
index 08c5d19aa7..74cea59df3 100755
--- a/tools/docker/build.sh
+++ b/tools/docker/build.sh
@@ -9,7 +9,7 @@ fi
 
 cd /source
 pip install -vv -e .
-python setup.py build_sass
+make sassbuild
 
 if [[ ! -f "/etc/nav/nav.conf" ]]; then
     echo "Copying initial NAV config files into this container"
diff --git a/tools/docker/sass-watch.sh b/tools/docker/sass-watch.sh
index 4837eccf5e..0639f7bd71 100755
--- a/tools/docker/sass-watch.sh
+++ b/tools/docker/sass-watch.sh
@@ -2,7 +2,4 @@
 # ensures CSS files are rebuilt on SASS file changes
 #
 cd /source
-while inotifywait -e modify -e move -e create -e delete -r --exclude \# /source/python/nav/web/sass
-do
-  /opt/venvs/nav/bin/python setup.py build_sass
-done
+make sasswatch

From 988707ecea4dc2b2e0bcaddb5cd4518a5e1c2e48 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Tue, 5 Mar 2024 13:10:32 +0100
Subject: [PATCH 16/25] Use sassbuild command in tests

Also whitelists make cmd for testing
---
 tox.ini | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tox.ini b/tox.ini
index 73e1ae57ac..d2f2a5064a 100644
--- a/tox.ini
+++ b/tox.ini
@@ -64,6 +64,7 @@ allowlist_externals =
                       sed
                       mkdir
                       chmod
+                      make
 
 usedevelop = true
 commands_pre =
@@ -73,7 +74,7 @@ commands_pre =
 commands =
          unit: pytest -o junit_suite_name="{envname} unit tests" --cov-config {toxinidir}/tests/.coveragerc --cov={toxinidir}/python --cov-report=xml:reports/{envname}/coverage.xml --junitxml=reports/{envname}/unit-results.xml --verbose {posargs:tests/unittests}
 
-         {integration,functional}: python setup.py build_sass
+         {integration,functional}: make sassbuild
 
          integration: python -m nav.django.manage check
          {integration,functional}: nav config install {envdir}/etc

From d53016d3086796eb3f90b338db4e10377833774b Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Fri, 4 Oct 2024 13:10:12 +0200
Subject: [PATCH 17/25] Remove build_sass from setup.py

---
 setup.py | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/setup.py b/setup.py
index c6e74831b0..c6b6bc2c1d 100644
--- a/setup.py
+++ b/setup.py
@@ -1,19 +1,5 @@
-from glob import glob
 from setuptools import setup
-from setuptools.command.build import build
-
-
-# Ensure CSS files are built every time build is invoked
-build.sub_commands = [('build_sass', None)] + build.sub_commands
-
 
 setup(
-    setup_requires=['libsass', 'setuptools_scm'],
-    sass_manifests={
-        'nav.web': {
-            'sass_path': 'sass',
-            'css_path': 'static/css',
-            'strip_extension': True,
-        },
-    },
+    setup_requires=['setuptools_scm'],
 )

From a8fb8e0c8f11de5d669e0eaf35aa22979071fe23 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Tue, 5 Mar 2024 13:20:44 +0100
Subject: [PATCH 18/25] Remove libsass dependencies

---
 pyproject.toml        | 2 +-
 requirements/base.txt | 3 ---
 tox.ini               | 1 -
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index ad3cce68ed..55a6e242c3 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,5 +1,5 @@
 [build-system]
-requires = ["setuptools>=61.0", "wheel", "setuptools_scm[toml]>=6.2", "libsass==0.15.1"]
+requires = ["setuptools>=61.0", "wheel", "setuptools_scm[toml]>=6.2"]
 build-backend = "setuptools.build_meta"
 
 [project]
diff --git a/requirements/base.txt b/requirements/base.txt
index 4a10072370..fb46aee4aa 100644
--- a/requirements/base.txt
+++ b/requirements/base.txt
@@ -32,9 +32,6 @@ iso8601
 
 pynetsnmp-2>=0.1.10
 
-# libsass for compiling scss files to css using distutils/setuptools
-libsass==0.15.1
-
 napalm==3.4.1
 
 git+https://github.com/Uninett/drf-oidc-auth@v4.0#egg=drf-oidc-auth
diff --git a/tox.ini b/tox.ini
index d2f2a5064a..276d0d16b3 100644
--- a/tox.ini
+++ b/tox.ini
@@ -93,7 +93,6 @@ commands =
 
 [testenv:javascript]
 usedevelop=True
-deps = libsass==0.15.1
 allowlist_externals = xvfb-run
 commands_pre =
 commands =

From c3b23d13c27563d37200120a377e3e3854075469 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Fri, 8 Nov 2024 11:47:30 +0100
Subject: [PATCH 19/25] Make build system include everything in the static
 directory

Co-authored-by: Morten Brekkevold <morten.brekkevold@sikt.no>
---
 pyproject.toml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pyproject.toml b/pyproject.toml
index 55a6e242c3..a50ef9bceb 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -63,6 +63,9 @@ include-package-data = true
 zip-safe = false
 platforms = ["any"]
 
+[tool.setuptools.package-data]
+"nav.web" = ["static/**"]
+
 [tool.setuptools_scm]
 
 [tool.setuptools.packages.find]

From ecff38526e70ebb4ab9c6a8f9f768d4ec9810376 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Fri, 4 Oct 2024 13:06:57 +0200
Subject: [PATCH 20/25] Update existing docs and add new docs

* Updates docs about sass-watcher process in docker
* Adds docs about hacking CSS
* Adds docs on how to build CSS from Sass when building NAV from source
---
 doc/hacking/hacking.rst                   | 19 +++++++++++++++++++
 doc/hacking/using-docker.rst              |  7 ++++---
 doc/howto/generic-install-from-source.rst | 17 +++++++++++++++++
 doc/intro/install.rst                     |  4 ++--
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/doc/hacking/hacking.rst b/doc/hacking/hacking.rst
index b93d84c328..69798f2c91 100644
--- a/doc/hacking/hacking.rst
+++ b/doc/hacking/hacking.rst
@@ -156,6 +156,7 @@ Directory                          Description
                                    processes.
 :file:`python/`                    Python source code.
 :file:`python/nav/etc/`            Example/initial configuration files.
+:file:`python/nav/web/sass/`       SCSS stylesheets.
 :file:`python/nav/web/static/`     Static media such as CSS stylesheets, images and JavaScript to be
                                    served by a webserver.
 :file:`python/nav/web/templates/`  Main/global Django HTML templates. More be located in individual
@@ -283,6 +284,24 @@ developing, something browsers love to do! See `config-urlArgs
 documentation for details. :file:`require_config.dev.js` is listed in the
 repository :file:`.gitignore` file.
 
+CSS
+---
+
+NAV uses Sass for styling. If you want to modify the styling,
+you can do so by editing the SCSS files in the :file:`python/nav/web/static/scss`
+directory. To build the CSS assets, you will need to have Node.js
+and npm installed. Once you have these installed, you can run
+the following command to build the CSS files::
+
+  npm install
+  npm run build:sass
+
+This will build the CSS assets and place them in the :file:`python/nav/web/static/css`
+directory. If you want to watch for changes in the SCSS files and rebuild the
+CSS assets automatically, you can run the following command instead::
+
+  npm run watch:sass
+
 
 
 Database
diff --git a/doc/hacking/using-docker.rst b/doc/hacking/using-docker.rst
index 38bdeb03bc..c6b78958b4 100644
--- a/doc/hacking/using-docker.rst
+++ b/doc/hacking/using-docker.rst
@@ -187,9 +187,10 @@ nav
   starts.
 
 sass-watcher
-  This is a process that monitors the :file:`python/nav/web/sass/` subdirectory
-  for changes, and re-runs ``python setup.py build_sass`` (i.e. rebuilding all
-  the SASS-based stylesheets) on changes.
+  This is a process that runs ``npm run watch:sass`` command to monitor and
+  rebuild all the SASS-based stylesheets whenever changes occur
+  in the :file:`python/nav/web/sass/` subdirectory. The command continuously
+  monitors the files and does not exit by itself.
 
 The individual logs of these program are typically found inside the ``nav``
 container in the :file:`/var/log/supervisor/` directory. The NAV process logs
diff --git a/doc/howto/generic-install-from-source.rst b/doc/howto/generic-install-from-source.rst
index d3443816fd..9440358fc3 100644
--- a/doc/howto/generic-install-from-source.rst
+++ b/doc/howto/generic-install-from-source.rst
@@ -5,6 +5,8 @@
 This is a generic guide to installing NAV from source code on a \*NIX flavored
 operating system. The specifics of how to install NAV's dependencies, such as
 :xref:`PostgreSQL` or :xref:`Graphite` will be entirely up to you and your choice of OS.
+Note that building NAV from source will also require Node.js and npm to be installed
+in order to manage frontend assets.
 
 
 Dependencies
@@ -21,6 +23,11 @@ To build NAV, you need at least the following:
  * Python >= 3.9.0
  * Sphinx >= 1.0 (for building this documentation)
 
+Additionally to build frontend assets (like CSS and JS), you will need:
+
+ * Node.js >= 14.0
+ * npm >= 6.0
+
 Runtime requirements
 --------------------
 
@@ -73,6 +80,16 @@ default.
 Installing NAV
 ==============
 
+First you need to build the static assets. To do this, you will need to have
+Node.js and npm installed. Once you have these installed, you can run
+the following command to build the CSS assets::
+
+  npm install
+  npm run build:sass
+
+This will build the CSS assets and place them in the :file:`python/nav/web/static/css`
+directory.
+
 To build and install NAV and all its Python dependencies::
 
   pip install -r requirements.txt -c constraints.txt .
diff --git a/doc/intro/install.rst b/doc/intro/install.rst
index 8cbf854adb..635c2c4120 100644
--- a/doc/intro/install.rst
+++ b/doc/intro/install.rst
@@ -7,7 +7,8 @@
 There are two main options for installing NAV: Either from source code, or from
 a pre-packaged version. Some of these options will require manually installing
 and/or configuring 3rd party software that NAV depends on, mainly :xref:`PostgreSQL`
-and :xref:`Graphite`.
+and :xref:`Graphite`. Building NAV from source code will also require Node.js
+and npm to be installed.
 
 
 Installing a pre-packaged version of NAV
@@ -96,4 +97,3 @@ For you, we provide two guides:
    </howto/generic-install-from-source>`.
 2. :doc:`A step-by-step, detailed guide on installing NAV from source on a
    Debian GNU/Linux operating system </howto/manual-install-on-debian>`.
-

From 19d7c58f18e6d9a0b0459ba583fdde7a34a6f256 Mon Sep 17 00:00:00 2001
From: Ilona Podliashanyk <ilona.podliashanyk@sikt.no>
Date: Thu, 7 Nov 2024 13:51:25 +0100
Subject: [PATCH 21/25] Update changelog

---
 changelog.d/2849.changed.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/2849.changed.md

diff --git a/changelog.d/2849.changed.md b/changelog.d/2849.changed.md
new file mode 100644
index 0000000000..b53bf04e4a
--- /dev/null
+++ b/changelog.d/2849.changed.md
@@ -0,0 +1 @@
+Switched to building CSS from Sass using webpack instead of deprecated `libsass`.

From 8025f3b563c392a2a66fdec7ec0b465d5ebbb9c5 Mon Sep 17 00:00:00 2001
From: Johanna England <johanna.england@sikt.no>
Date: Thu, 17 Oct 2024 08:56:31 +0200
Subject: [PATCH 22/25] Change comment to not mention crispy

---
 python/nav/web/seeddb/forms/__init__.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python/nav/web/seeddb/forms/__init__.py b/python/nav/web/seeddb/forms/__init__.py
index e2170eef9a..5bdc5eef0b 100644
--- a/python/nav/web/seeddb/forms/__init__.py
+++ b/python/nav/web/seeddb/forms/__init__.py
@@ -126,7 +126,7 @@ def cut_branch(field, klass, pk):
     return [c for c in field.choices if c[0] not in descendant_ids]
 
 
-# non-crispy helpers
+# helpers
 
 
 def get_single_layout(heading, row):

From 1379c1b5202ae611badad8f1b0af773ce3ad51b9 Mon Sep 17 00:00:00 2001
From: Johanna England <johanna.england@sikt.no>
Date: Thu, 17 Oct 2024 08:58:51 +0200
Subject: [PATCH 23/25] Remove checks if form has been uncrispified

All SeedDB forms are uncrispified by now
---
 python/nav/web/templates/seeddb/edit.html            | 12 +++---------
 python/nav/web/templates/seeddb/list.html            | 11 +----------
 .../web/templates/seeddb/service_netbox_form.html    |  6 +-----
 .../web/templates/seeddb/service_property_form.html  | 12 ++----------
 4 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/python/nav/web/templates/seeddb/edit.html b/python/nav/web/templates/seeddb/edit.html
index 0c68208a30..a4d0cf0a76 100644
--- a/python/nav/web/templates/seeddb/edit.html
+++ b/python/nav/web/templates/seeddb/edit.html
@@ -1,6 +1,4 @@
 {% extends "seeddb/base.html" %}
-{% load crispy_forms_tags %}
-
 
 {% block base_header_additional_head %}
   {{ block.super }}
@@ -41,13 +39,9 @@ <h4>{{ title }}
       <form class="seeddb-edit" action="" method="post">
         <fieldset>
           <legend>Attributes</legend>
-	        {% if form.attrs %}
-		        {% include 'custom_crispy_templates/_form_content.html' %}
-	        {% else %}
-		        {% block crispyfields %}
-			        {{ form|crispy }}
-		        {% endblock %}
-	        {% endif %}
+          {% block crispyfields %}
+  	        {% include 'custom_crispy_templates/_form_content.html' %}
+          {% endblock %}
         </fieldset>
         <input type="submit" name="submit" value="Save {{ verbose_name }}" class="submit button small left" id="submit-id-submit">
       </form>
diff --git a/python/nav/web/templates/seeddb/list.html b/python/nav/web/templates/seeddb/list.html
index d1ff5bc3ca..f286f4a9a4 100644
--- a/python/nav/web/templates/seeddb/list.html
+++ b/python/nav/web/templates/seeddb/list.html
@@ -1,23 +1,14 @@
 {% extends "seeddb/base.html" %}
-{% load crispy_forms_tags %}
 
 {% block content %}
 
   {% if filter_form %}
     {% if filter_form.base_fields|length >= 3 %}
-      {% if filter_form.attrs %}
-        {% include 'custom_crispy_templates/flat_form.html' with form=filter_form %}
-      {% else %}
-        {{ filter_form }}
-      {% endif %}
+      {% include 'custom_crispy_templates/flat_form.html' with form=filter_form %}
     {% else %}
       <div class="row">
         <div class="medium-6 column">
-        {% if filter_form.attrs %}
           {% include 'custom_crispy_templates/flat_form.html' with form=filter_form %}
-        {% else %}
-          {% crispy filter_form %}
-        {% endif %}
         </div>
       </div>
     {% endif %}
diff --git a/python/nav/web/templates/seeddb/service_netbox_form.html b/python/nav/web/templates/seeddb/service_netbox_form.html
index a2024f9c1f..72c6059000 100644
--- a/python/nav/web/templates/seeddb/service_netbox_form.html
+++ b/python/nav/web/templates/seeddb/service_netbox_form.html
@@ -15,11 +15,7 @@ <h4>
       <form id="service_checker_add_form" action="" method="post">
         <fieldset>
           <legend>Add new service checker</legend>
-          {% if choice_form.attrs %}
-            {% include 'custom_crispy_templates/_form_content.html' with form=choice_form %}
-          {% else %}
-            {{ choice_form }}
-          {% endif %}
+          {% include 'custom_crispy_templates/_form_content.html' with form=choice_form %}
           <input type="submit" value="Continue" class="button small"/>
         </fieldset>
       </form>
diff --git a/python/nav/web/templates/seeddb/service_property_form.html b/python/nav/web/templates/seeddb/service_property_form.html
index 4c9c50bfe1..b93706168b 100644
--- a/python/nav/web/templates/seeddb/service_property_form.html
+++ b/python/nav/web/templates/seeddb/service_property_form.html
@@ -19,17 +19,9 @@ <h4>
       <form action="" method="post">
         <fieldset>
           <legend>Attributes</legend>
-          {% if service_form.attrs %}
-            {% include 'custom_crispy_templates/_form_content.html' with form=service_form %}
-          {% else %}
-            {{ service_form }}
-          {% endif %}
+          {% include 'custom_crispy_templates/_form_content.html' with form=service_form %}
           {% if property_form.fields %}
-            {% if property_form.attrs %}
-              {% include 'custom_crispy_templates/_form_content.html' with form=property_form %}
-            {% else %}
-              {{ property_form }}
-            {% endif %}
+            {% include 'custom_crispy_templates/_form_content.html' with form=property_form %}
           {% else %}
             <div class="alert-box">
               There are no attributes for this service.

From 4ca48c5651dec35b896dec248b21179a2a1af5ca Mon Sep 17 00:00:00 2001
From: Johanna England <johanna.england@sikt.no>
Date: Thu, 17 Oct 2024 08:59:07 +0200
Subject: [PATCH 24/25] Rename block to not mention crispy

---
 python/nav/web/templates/seeddb/edit.html        | 2 +-
 python/nav/web/templates/seeddb/edit_prefix.html | 2 +-
 python/nav/web/templates/seeddb/edit_vlan.html   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/python/nav/web/templates/seeddb/edit.html b/python/nav/web/templates/seeddb/edit.html
index a4d0cf0a76..3fd9f1901a 100644
--- a/python/nav/web/templates/seeddb/edit.html
+++ b/python/nav/web/templates/seeddb/edit.html
@@ -39,7 +39,7 @@ <h4>{{ title }}
       <form class="seeddb-edit" action="" method="post">
         <fieldset>
           <legend>Attributes</legend>
-          {% block crispyfields %}
+          {% block formfields %}
   	        {% include 'custom_crispy_templates/_form_content.html' %}
           {% endblock %}
         </fieldset>
diff --git a/python/nav/web/templates/seeddb/edit_prefix.html b/python/nav/web/templates/seeddb/edit_prefix.html
index 1c81a208fc..cd4e24761c 100644
--- a/python/nav/web/templates/seeddb/edit_prefix.html
+++ b/python/nav/web/templates/seeddb/edit_prefix.html
@@ -1,5 +1,5 @@
 {% extends "seeddb/edit.html" %}
-{% block crispyfields %}
+{% block formfields %}
 {{ block.super }}
 {% include 'custom_crispy_templates/_form_content.html' with form=vlan_form %}
 {% endblock %}
diff --git a/python/nav/web/templates/seeddb/edit_vlan.html b/python/nav/web/templates/seeddb/edit_vlan.html
index 41dc68e875..49a808f9f9 100644
--- a/python/nav/web/templates/seeddb/edit_vlan.html
+++ b/python/nav/web/templates/seeddb/edit_vlan.html
@@ -1,5 +1,5 @@
 {% extends "seeddb/edit.html" %}
-{% block crispyfields %}
+{% block formfields %}
 <div>
     <p>Net type<br/>
     {{ object.net_type }}</p>

From f9e31db30f0ff6b59c7f4b0ed931c17052e5affb Mon Sep 17 00:00:00 2001
From: Johanna England <johanna.england@sikt.no>
Date: Thu, 17 Oct 2024 08:59:58 +0200
Subject: [PATCH 25/25] Remove not needed set_flat_form_attributes calls

They can be removed since they do not set anything
---
 python/nav/web/seeddb/page/service/edit.py | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/python/nav/web/seeddb/page/service/edit.py b/python/nav/web/seeddb/page/service/edit.py
index 146528691e..a52443525a 100644
--- a/python/nav/web/seeddb/page/service/edit.py
+++ b/python/nav/web/seeddb/page/service/edit.py
@@ -24,7 +24,6 @@
 
 from nav.models.service import Service, ServiceProperty
 from nav.models.manage import Netbox
-from nav.web.crispyforms import set_flat_form_attributes
 from nav.web.servicecheckers import get_description, load_checker_classes
 from nav.web.message import new_message, Messages
 from nav.web.seeddb.page.service import ServiceInfo
@@ -45,8 +44,6 @@ def __init__(self, *args, **kwargs):
             widget=forms.Select(attrs={'class': 'select2'}),
         )
 
-        self.attrs = set_flat_form_attributes()
-
     @staticmethod
     def _build_checker_choices():
         checkers = load_checker_classes()
@@ -75,8 +72,6 @@ class ServiceForm(forms.Form):
     handler = forms.CharField(widget=forms.HiddenInput)
     netbox = forms.IntegerField(widget=forms.HiddenInput)
 
-    attrs = set_flat_form_attributes()
-
 
 class ServicePropertyForm(forms.Form):
     """Form for editing service properties"""
@@ -94,8 +89,6 @@ def __init__(self, *args, **kwargs):
             for arg, descr in opt_args:
                 self.fields[arg] = forms.CharField(required=False, help_text=descr)
 
-        self.attrs = set_flat_form_attributes()
-
 
 def service_edit(request, service_id=None):
     """Controller for editing services"""