feat(frontend): add custom bootstrap CSS

.gitignore

@@ -18,3 +18,6 @@ build/
 .pytest_cache/
 .coverage
 htmlcov/
+
+# Node modules
+/node_modules/

README.md

@@ -25,6 +25,20 @@ The following frameworks and/or libraries are used:
     - [jQuery](https://api.jquery.com/) - a JavaScript library for DOM manipulation and AJAX routines
     - [jQuery tablesorter plugin](https://mottie.github.io/tablesorter/docs/) - a plugin for jQuery used to make sortable HTML tables
 
+## Compiling SASS
+
+Install a SASS preprocessor:
+
+```bash
+npm install -g sass
+```
+
+Process the custom SASS files:
+
+```
+sass scss/bootstrap.scss lumi2/static/css/bootstrap.css
+```
+
 # Testing
 
 Make sure all dependencies listed in `requirements.txt` are installed.

lumi2/static/css/style.css

@@ -1,4 +0,0 @@
-body {
-    background-color: #222222;
-    color: #CCCCCC;
-}

lumi2/templates/base.html

@@ -18,8 +18,7 @@
         <link rel="icon" href="{{ url_for('static', filename='images/base/favicon.svg') }}" type="image/svg+xml">
         <link rel="apple-touch-icon" href="{{ url_for('static', filename='images/base/apple-touch-icon.png') }}">
 
-        <!--<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">-->
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
     </head>
 

lumi2/templates/usermanager/group_create.html

@@ -7,7 +7,7 @@
     </div>
 </div>
 <div class="row align-items-center border rounded m-2">
-    <label for="groupNameInput" class="col-sm-2 col-form-label text-end m-2">Group Name</label>
+    <label for="groupNameInput" class="col-sm-2 col-form-label text-center m-2">Group Name</label>
     <input type="text" class="col-sm form-control m-2" id="groupNameInput">
     <a class="col-sm-2 btn btn-secondary m-2" href="{{ url_for('usermanager.group_list') }}" role="button">Cancel</a>
     <button class="col-sm-2 btn btn-primary m-2" type="button" id="createGroupButton">Create Group</button>

package-lock.json

@@ -0,0 +1,58 @@
+{
+  "name": "lumi2",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "lumi2",
+      "version": "1.0.0",
+      "license": "AGPL-3.0-or-later",
+      "dependencies": {
+        "bootstrap": "^5.2.3"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    }
+  },
+  "dependencies": {
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true
+    },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    }
+  }
+}

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "lumi2",
+  "version": "1.0.0",
+  "description": "A minimalistic frontend for LDAP.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "LUMI 2 Development Team",
+  "license": "AGPL-3.0-or-later",
+  "dependencies": {
+    "bootstrap": "^5.2.3"
+  }
+}

scss/bootstrap.scss

@@ -0,0 +1,3 @@
+//$primary: #DD5533;
+
+@import "../node_modules/bootstrap/scss/bootstrap";