assets/app.scss

@@ -19,7 +19,8 @@ pre {
 .theme-switch {
   display: inline-block;
   height: 24px;
-  position: relative;
+  position: absolute;
+  top: 5px;
   width: 50px;
 }
 
@@ -68,3 +69,9 @@ input:checked + .slider::before {
 .table-responsive {
   max-height: 70vh;
 }
+
+.action-block {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}

assets/vendor.js

 // FA
-import 'admin-lte/plugins/fontawesome-free/css/fontawesome.css';
-import 'admin-lte/plugins/fontawesome-free/css/regular.css';
-import 'admin-lte/plugins/fontawesome-free/css/solid.css';
+import 'admin-lte/plugins/fontawesome-free/css/fontawesome.min.css';
+import 'admin-lte/plugins/fontawesome-free/css/solid.min.css';
 
 // AdminLTE
 import 'admin-lte/build/scss/adminlte.scss';
 import 'admin-lte/build/js/Layout.js';
-import 'admin-lte/build/js/ControlSidebar.js';
 import 'admin-lte/build/js/PushMenu.js';
-import 'admin-lte/build/js/CardRefresh.js';

hiboo/account/forms.py

@@ -12,7 +12,7 @@ class LoginForm(flask_wtf.FlaskForm):
 
 
 class TotpForm(flask_wtf.FlaskForm):
-    totp = fields.PasswordField(_('Enter the one-time password delivered by your client'), [validators.DataRequired()])
+    totp = fields.PasswordField(_('Enter the one-time password delivered by your client'), [validators.DataRequired()],  render_kw={'autocomplete': 'one-time-code'})
     submit = fields.SubmitField(_('Confirm'))
 
 

hiboo/profile/templates/profile_details.html

@@ -12,10 +12,10 @@
           <dt class="col-lg-3">{% trans %}Username{% endtrans %}</dt>
           <dd class="col-lg-9">{{ profile.username }}</dd>
 
-		  {% if profile.user %}
+          {% if profile.user %}
           <dt class="col-lg-3">{% trans %}Owner{% endtrans %}</dt>
           <dd class="col-lg-9"><a href="{{ url_for("user.details", user_uuid=profile.user_uuid) }}">{{ profile.user.username }}</a></dd>
-		  {% endif %}
+          {% endif %}
 
           <dt class="col-lg-3">{% trans %}UUID{% endtrans %}</dt>
           <dd class="col-lg-9"><pre>{{ profile.uuid }}</pre></dd>
@@ -29,23 +29,6 @@
       </div>
     </div>
   </div>
-  <div class="col-md-6 col">
-    <div class="card">
-      <div class="card-header">
-        <h4>{% trans %}Actions{% endtrans %}</h4>
-      </div>
-      <div class="card-body">
-        <dl class="row">
-          {% for action in profile.actions %}
-          <dt class="col-3"><a href="{{ action.url(profile) }}">{{ action.label | capitalize }}</a></dt>
-          <dd class="col-9">{{ action.description | capitalize }}</dd>
-          {% endfor %}
-        </dl>
-      </div>
-      </div>
-  </div>
-</div>
-<div class="row">
   <div class="col-md-6 col">
     {{ macros.timeline(profile.history, public_only=False) }}
   </div>

hiboo/templates/base.html

@@ -25,12 +25,6 @@
                     <li class="nav-item user">
                         <div class="nav-link"><i class="fas fa-user"></i> {{ current_user.username }}</div>
                     </li>
-                    <li class="nav-item user">
-                        <a href="{{ url_for("account.signout") }}" class="nav-link">
-                            <i class="fas fa-sign-out"></i>
-                            {% trans %}Sign out{% endtrans %}
-                        </a>
-                    </li>
                     {% else %}
                     <li class="nav-item user">
                         <a href="{{ url_for("account.signin_password") }}" class="nav-link">
@@ -39,14 +33,6 @@
                         </a>
                     </li>
                     {% endif %}
-                    <li class="nav-item">
-                        <div class="theme-switch-wrapper nav-link">
-                            <label class="theme-switch" for="checkbox">
-                                <input type="checkbox" id="checkbox">
-                                <span class="slider round"></span>
-                            </label>
-                        </div>
-                    </li>
                 </ul>
             </nav>
 
@@ -73,8 +59,11 @@
                                 <small>{% block subtitle %}{{ subtitle }}{% endblock %}</small>
                             </h1>
                             <div>
+                                <div class="action-block">
                                 {% block actions %}
+
                                 {% endblock %}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -83,7 +72,7 @@
                     <div class="container-fluid">
                         {% for category, message in get_flashed_messages(with_categories=True) or [] %}
                         <div class="col-md-6 col">
-                            <div class="alert alert-{{ category or "info" }}">{{ message }}</div>
+                            <div class="alert alert-{{ category or "info" }} text-break">{{ message }}</div>
                         </div>
                         {% endfor %}
 						{% if current_user.time_to_deletion and current_user.time_to_deletion() %}

hiboo/templates/sidebar.html

+<li class="nav-item">
+  <a class="nav-link">
+    <i class="nav-icon fas fa-moon"></i>
+    <p>{% trans %}Dark theme{% endtrans %}</p>
+      <label class="theme-switch ml-3" for="checkbox">
+        <input type="checkbox" id="checkbox">
+        <span class="slider round"></span>
+      </label>
+  </a>
+</li>
+
 {% if current_user.is_authenticated %}
 <li class="nav-header">{% trans %}Account{% endtrans %}</li>
 <li class="nav-item">
@@ -25,11 +36,6 @@
     <i class="nav-icon fas fa-qrcode"></i> <p>{% trans %}Two-factor authentication{% endtrans %}</p>
   </a>
 </li>
-<li class="nav-item">
-  <a class="nav-link" href="{{ url_for("account.signout") }}">
-    <i class="nav-icon fas fa-sign-out-alt"></i> <p>{% trans %}Sign out{% endtrans %}</p>
-  </a>
-</li>
 {% else %}
 <li class="nav-item">
   <a class="nav-link" href="{{ utils.url_for("account.signup") }}">
@@ -78,3 +84,12 @@
     <i class="nav-icon fas fa-book"></i> <p>{% trans %}Admin guide{% endtrans %}</p>
   </a>
 </li>
+
+{% if current_user.is_authenticated %}
+<li class="nav-header"></li>
+<li class="nav-item">
+  <a class="nav-link border" href="{{ url_for("account.signout") }}">
+    <i class="nav-icon fas fa-power-off"></i> <p>{% trans %}Sign out{% endtrans %}</p>
+  </a>
+</li>
+{% endif %}

package.json

@@ -9,19 +9,22 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@popperjs/core": "^2.10.2",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@popperjs/core": "^2.11.6",
     "admin-lte": "^3.1.0",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.0",
-    "expose-loader": "^3.1.0",
-    "mini-css-extract-plugin": "^2.4.3",
-    "sass": "^1.43.4",
-    "sass-loader": "^12.3.0",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "expose-loader": "^4.0.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "compression-webpack-plugin": "^10.0.0",
+    "import-glob": "^1.5.0",
+    "sass": "^1.58.3",
+    "sass-loader": "^13.2.0",
     "select2": "^4.1.0-rc.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.1"
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   }
 }

webpack.config.js

-var path = require("path");
-var webpack = require("webpack");
-var css = require("mini-css-extract-plugin");
+const path = require('path');
+const webpack = require('webpack');
+const css = require('mini-css-extract-plugin');
+const mini = require('css-minimizer-webpack-plugin');
+const terse = require('terser-webpack-plugin');
+const compress = require('compression-webpack-plugin');
 
 module.exports = {
-    mode: "production",
-    entry: {
-        app: "./assets/app.js",
-        vendor: "./assets/vendor.js"
+  mode: "production",
+  entry: {
+    app: {
+      import: './assets/app.js',
+      dependOn: 'vendor',
     },
-    output: {
-        path: path.resolve(__dirname, "hiboo/static/"),
-        filename: "[name].js",
-	hashFunction: "xxhash64"
-    },
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                use: ['babel-loader']
-            },
-            {
-                test: /\.scss$/,
-                use: [css.loader, 'css-loader', 'sass-loader']
-            },
-            {
-                test: /\.less$/,
-                use: [css.loader, 'css-loader', 'less-loader']
-            },
-            {
-                test: /\.css$/,
-                use: [css.loader, 'css-loader']
-            }
-        ]
-    },
-    plugins: [
-	      new css({
-	          filename: "[name].css",
-	          chunkFilename: "[id].css"
-	      })
+    vendor: './assets/vendor.js',
+  },
+  output: {
+    path: path.resolve(__dirname, 'hiboo/static/'),
+    filename: '[name].js',
+    assetModuleFilename: '[name][ext]',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: ['babel-loader', 'import-glob'],
+      },
+      {
+        test: /\.s?css$/i,
+        use: [css.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(json|png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      }
     ]
+  },
+  plugins: [
+    new css({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    }),
+    new compress({
+      filename: '[path][base].gz',
+      algorithm: "gzip",
+      exclude: /\.(png|gif|jpe?g)$/,
+      threshold: 5120,
+      minRatio: 0.8,
+      deleteOriginalAssets: false,
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new terse(),
+      new mini({
+        minimizerOptions: {
+          preset: [
+            'default', {
+              discardComments: { removeAll: true },
+            },
+          ],
+        },
+      }),
+    ],
+  },
 }