continued

implemented HTMX
implemented ORM (sequelize)

.gitignore

@@ -0,0 +1 @@
+node_modules/

config.yaml

@@ -1,9 +1,18 @@
+database:
+  host: 10.0.0.31
+  port: 33063
+  database: glauth
+  username: glauth
+  password: b848dc7aa44b66bbcc1e5991a6ae45ce
 application:
   name: Identity Manager
-  logo:
-    dark: /img/logo-dark.png
-    light: /img/logo-light.png
   port: 3000
+ldap:
+  baseDN: dc=example,dc=com
 mfa:
   otp:
-    issuer: example.com
+    issuer: example.com
+admin:
+  username: admin
+  password: adminpassword
+  groupuid: 0

lib/database/connect.mjs

@@ -0,0 +1,41 @@
+// models/index.js
+import { Sequelize } from 'sequelize';
+import { getConfig } from "../config.mjs";
+import { registerModels } from './models.mjs';
+
+const configData = await getConfig();
+
+// SQLite-Datenbank im data/-Verzeichnis
+const sequelize = new Sequelize({
+    dialect: 'mysql',
+    host: configData.database.host,
+    port: configData.database.port,
+    database: configData.database.database,
+    username: configData.database.username,
+    password: configData.database.password,
+    logging: false,
+});
+
+// Modelle initialisieren
+const {
+    Group,
+    User
+} = registerModels(sequelize);
+
+// Datenbank synchronisieren
+(async () => {
+    try {
+        await sequelize.authenticate();
+        console.log('✓ MySQL connection successfull');
+        // Automatische Migration
+        await sequelize.sync({ alter: true, force: false });
+        console.log('✓ MySQL migration finished');
+    } catch (error) {
+        console.error('✕ MySQL Error:', error);
+    }
+})()
+
+export {
+    Group,
+    User
+};

lib/database/models.mjs

@@ -0,0 +1,163 @@
+// models/MacPolicy.js
+import { DataTypes } from 'sequelize';
+
+export const registerModels = (sequelize) => {
+    const Group = sequelize.define('Group', {
+        id: {
+            type: DataTypes.INTEGER(11),
+            primaryKey: true,
+            autoIncrement: true
+        },
+        name: {
+            type: DataTypes.STRING(64),
+            allowNull: false,
+            unique: true
+        },
+        gidnumber: {
+            type: DataTypes.INTEGER(11),
+            allowNull: false,
+            unique: true
+        }
+    }, {
+        tableName: 'ldapgroups',
+        timestamps: false,
+        hooks: {
+            afterCreate: (instance, options) => {
+                console.log(`✓ saved Group: ${instance.name}`);
+            },
+            afterUpdate: (instance, options) => {
+                console.log(`✓ updated Group: ${instance.name}`);
+            },
+            afterDestroy: (instance, options) => {
+                console.log(`✗ deleted Group: ${instance.name}`);
+            }
+        }
+    });
+
+    const User = sequelize.define('User', {
+        id: {
+            type: DataTypes.INTEGER,
+            primaryKey: true,
+            autoIncrement: true
+        },
+        name: {
+            type: DataTypes.STRING(64),
+            allowNull: false,
+            unique: true
+        },
+        uidnumber: {
+            type: DataTypes.INTEGER,
+            allowNull: false
+        },
+        primarygroup: {
+            type: DataTypes.INTEGER,
+            allowNull: false
+        },
+        othergroups: {
+            type: DataTypes.STRING(1024),
+            allowNull: true,
+            defaultValue: ''
+        },
+        givenname: {
+            type: DataTypes.STRING(64),
+            allowNull: true,
+            defaultValue: ''
+        },
+        sn: {
+            type: DataTypes.STRING(64),
+            allowNull: true,
+            defaultValue: ''
+        },
+        mail: {
+            type: DataTypes.STRING(254),
+            allowNull: true,
+            defaultValue: ''
+        },
+        loginshell: {
+            type: DataTypes.STRING(64),
+            allowNull: true,
+            defaultValue: ''
+        },
+        homedirectory: {
+            type: DataTypes.STRING(64),
+            allowNull: true,
+            defaultValue: ''
+        },
+        disabled: {
+            type: DataTypes.SMALLINT,
+            allowNull: true,
+            defaultValue: 0
+        },
+        passsha256: {
+            type: DataTypes.STRING(64),
+            allowNull: true,
+            defaultValue: ''
+        },
+        passbcrypt: {
+            type: DataTypes.STRING(64),
+            allowNull: true,
+            defaultValue: ''
+        },
+        otpsecret: {
+            type: DataTypes.STRING(64),
+            allowNull: true,
+            defaultValue: ''
+        },
+        yubikey: {
+            type: DataTypes.STRING(128),
+            allowNull: true,
+            defaultValue: ''
+        },
+        sshkeys: {
+            type: DataTypes.TEXT,
+            allowNull: true,
+            defaultValue: ''
+        },
+        custattr: {
+            type: DataTypes.TEXT,
+            allowNull: true,
+            defaultValue: '{}',
+            get() {
+                try {
+                    return JSON.parse(this.getDataValue('custattr'));
+                } catch (e) {
+                    return {}; // Fallback, falls DB-Daten fehlerhaft sind
+                }
+            },
+            set(value) {
+                this.setDataValue('custattr', JSON.stringify(value ?? {}));
+            }
+        },
+    }, {
+        tableName: 'users',
+        timestamps: false,
+        hooks: {
+            afterCreate: (instance, options) => {
+                console.log(`✓ saved User: ${instance.name}`);
+            },
+            afterUpdate: (instance, options) => {
+                console.log(`✓ updated User: ${instance.name}`);
+            },
+            afterDestroy: (instance, options) => {
+                console.log(`✗ deleted User: ${instance.name}`);
+            }
+        }
+    });
+
+    // Group.hasMany(User, {
+    //     targetKey: 'uidnumber',
+    //     foreignKey: 'primarygroup',
+    //     as: 'users'
+    // });
+
+    User.belongsTo(Group, {
+        targetKey: 'gidnumber',
+        foreignKey: 'primarygroup',
+        as: 'primarygroupObject'
+    });
+
+    return {
+        Group,
+        User
+    };
+};

lib/mysql.mjs

@@ -2,17 +2,41 @@
 import mysql from "mysql2/promise";
 
 import {
-    generateOTPSecret
-} from "./otp.mjs";
+    getConfig
+} from "./config.mjs";
 
-// Create the connection to database
-const connection = await mysql.createConnection({
-    host: '10.0.0.31',
-    port: 33063,
-    database: 'glauth',
-    user: 'glauth',
-    password: 'b848dc7aa44b66bbcc1e5991a6ae45ce'
-});
+const configData = await getConfig();
+
+var connection = null;
+await connect();
+
+export async function connect(params) {
+    if (connection != null) {
+        connection.destroy();
+    }
+
+    // Create the connection to database
+    connection = await mysql.createConnection({
+        host: configData.database.host,
+        port: configData.database.port,
+        database: configData.database.database,
+        user: configData.database.username,
+        password: configData.database.password
+    });
+
+    await connection.connect();
+
+    connection.on('connection', async () => {
+        console.log("database connection successful!");
+    });
+
+    connection.on('error', async (mysqlError) => {
+        if (mysqlError.code == "PROTOCOL_CONNECTION_LOST") {
+            console.log("database connection lost. reconnecting...");
+            await connect();
+        }
+    });
+}
 
 export async function login(username, password) {
     try {

master.mjs

@@ -13,6 +13,11 @@ import {
     router
 } from "express-file-routing"
 
+const {
+    User,
+    Group
+} = await import("./lib/database/connect.mjs");
+
 import sessions from "express-session";
 
 // Initialize WebServer
@@ -50,15 +55,22 @@ expressApp.use((req, res, next) => {
 // Mount Middlewares to WebServer
 expressApp.use(express.urlencoded());
 expressApp.use(express.json());
-expressApp.use(express.static('./assets/'))
+expressApp.use(express.static('./static/'))
 expressApp.use((request, response, next) => {
-    request.isLoginCompleted = () => {
-        if (typeof request.session.login == 'object' && request.session.login.completed) {
-            return true;
+    request.getAuthState = () => {
+        if (!request.session && !request.session.authState) {
+            return 'unauthenticated';
         } else {
-            return false;
+            return request.session.authState;
         }
     }
+    request.setAuthState = (newState) => {
+        request.session.authState = newState;
+        request.session.save();
+    }
+    request.getUser = async () => {
+        return await User.findByPk(request.session.userid);
+    }
     next();
 })
 expressApp.use("/", await router())

package.json

@@ -18,6 +18,7 @@
     "nunjucks": "^3.2.4",
     "otpauth": "^9.3.6",
     "qrcode": "^1.5.4",
+    "sequelize": "^6.37.7",
     "yaml": "^2.6.1"
   }
 }

routes/admin/[page].mjs

@@ -1,36 +0,0 @@
-
-import {
-    getUsers,
-    getGroups
-} from "../../lib/mysql.mjs";
-
-
-export const get = async function (request, response) {
-    // if (!request.isLoginCompleted()) {
-    //     response.redirect('/login');
-    //     return;
-    // }
-
-    switch (request.params.page) {
-        case 'users':
-            response.render(`ui/admin.njk`, {
-                page: 'users',
-                users: await getUsers()
-            });
-            break;
-        case 'groups':
-            response.render(`ui/admin.njk`, {
-                page: 'groups',
-                groups: await getGroups()
-            });
-            break;
-        default:
-            response.redirect('/admin/users');
-            break;
-    }
-}
-
-export const post = async function (request, response) {
-    console.log(request.body);
-    response.redirect("/login");
-}

routes/admin/groups.mjs

@@ -0,0 +1,17 @@
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.redirect('/login');
+        return;
+    }
+
+    let currUser = await request.getUser();
+
+    response.render(`views/admin/groups.njk`, {
+        user: {
+            firstName: currUser.givenname,
+            lastName: currUser.sn,
+            mail: currUser.mail,
+        }
+    });
+}

routes/admin/users.mjs

@@ -0,0 +1,17 @@
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.redirect('/login');
+        return;
+    }
+
+    let currUser = await request.getUser();
+
+    response.render(`views/admin/users.njk`, {
+        user: {
+            firstName: currUser.givenname,
+            lastName: currUser.sn,
+            mail: currUser.mail,
+        }
+    });
+}

routes/htmx/admin/groups/[groupid].mjs

@@ -0,0 +1,59 @@
+
+import {
+    Group,
+    User
+} from "../../../../lib/database/connect.mjs";
+
+import {
+    getConfig
+} from "../../../../lib/config.mjs";
+
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.set('HX-Redirect', '/login').status(401).end();
+        return;
+    }
+
+    const dbGroup = await Group.findByPk(request.params.groupid);
+    const config = await getConfig();
+
+    const userList = await User.findAll({
+        attributes: [
+            'id',
+            'uidnumber',
+            'name',
+            'othergroups',
+            'primarygroup'
+        ]
+    }).filter((user) => {
+        // check if users primary group is the group being edited
+        if (user.primarygroup == dbGroup.gidnumber) {
+            return true;
+        }
+        // check if users other groups include the group being edited
+        if (user.othergroups.split(',').map(gidnumber => parseInt(gidnumber)).includes(dbGroup.gidnumber)) {
+            return true;
+        }
+        // else exclude user
+        return false;
+    }).map((user) => {
+        return {
+            id: user.id,
+            name: user.name,
+            uidnumber: user.uidnumber,
+        };
+    });
+
+    response.render(`views/htmx/admin/editGroup.njk`, {
+        group: {
+            id: dbGroup.id,
+            name: dbGroup.name,
+            gidnumber: dbGroup.gidnumber,
+        },
+        ldap: {
+            baseDN: config.ldap.baseDN,
+        },
+        userList: userList
+    });
+}

routes/htmx/admin/groups/table.mjs

@@ -0,0 +1,18 @@
+
+import {
+    Group
+} from "../../../../lib/database/connect.mjs";
+
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.set('HX-Redirect', '/login').status(401).end();
+        return;
+    }
+
+    let groupList = await Group.findAll();
+
+    response.render(`views/htmx/admin/groupTable.njk`, {
+        groupList: groupList
+    });
+}

routes/htmx/admin/users/[userid].mjs

@@ -0,0 +1,53 @@
+
+import {
+    Group,
+    User
+} from "../../../../lib/database/connect.mjs";
+
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.set('HX-Redirect', '/login').status(401).end();
+        return;
+    }
+
+    const dbUser = await User.findByPk(request.params.userid);
+
+    if (!dbUser) {
+        response.status(404).end('User not found');
+        return;
+    }
+
+    const userGroups = await (async () => {
+        if (!dbUser.othergroups || dbUser.othergroups.length == 0) {
+            return [];
+        } else {
+            return dbUser.othergroups.split(',').map(gid => parseInt(gid));
+        }
+    })();
+
+    const groupList = (await Group.findAll()).map((dbGroup) => {
+        return {
+            id: dbGroup.id,
+            gidnumber: dbGroup.gidnumber,
+            name: dbGroup.name,
+            isPrimaryGroup: dbUser.primarygroup == dbGroup.gidnumber,
+            isOtherGroup: userGroups.includes(dbGroup.gidnumber)
+        };
+    });
+
+    console.log(groupList);
+
+    response.render(`views/htmx/admin/editUser.njk`, {
+        user: {
+            id: dbUser.id,
+            username: dbUser.name,
+            uidnumber: dbUser.uidnumber,
+            firstName: dbUser.givenname,
+            lastName: dbUser.sn,
+            mail: dbUser.mail,
+            disabled: dbUser.disabled,
+        },
+        groupList: groupList
+    });
+}

routes/htmx/admin/users/table.mjs

@@ -0,0 +1,18 @@
+
+import {
+    User
+} from "../../../../lib/database/connect.mjs";
+
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.set('HX-Redirect', '/login').status(401).end();
+        return;
+    }
+
+    let userList = await User.findAll();
+
+    response.render(`views/htmx/admin/userTable.njk`, {
+        userList: userList
+    });
+}

routes/htmx/authForm.mjs

@@ -0,0 +1,75 @@
+
+import crypto from "crypto";
+
+import {
+    User
+} from "../../lib/database/connect.mjs";
+
+
+function sendAuthForm(response, errors=[]) {
+    response.render(`views/htmx/authForm.njk`, {
+        errors: errors
+    });
+}
+
+
+export const get = async function(request, response) {
+    sendAuthForm(response);
+    // response.set('HX-Redirect', '/profile').status(200).end();
+}
+
+export const post = async function(request, response) {
+    if (!request.body.username || !request.body.password) {
+        sendAuthForm(response, [{
+            title: 'Username and password are required',
+            detail: 'Username or Password was not received.'
+        }]);
+        return;
+    }
+
+    if (typeof request.body.username != 'string' || typeof request.body.password != 'string') {
+        sendAuthForm(response, [{
+            title: 'Invalid input types',
+            detail: 'Username and Password must be strings.'
+        }]);
+        return;
+    }
+
+    let username = request.body.username;
+    let password = crypto.createHash('sha256').update(request.body.password).digest('hex')
+
+    // let loginResult = await login(username, password)
+    let loginUser = await User.findOne({
+        where: {
+            name: username,
+            passsha256: password
+        }
+    });
+
+    if (loginUser == null) {
+        sendAuthForm(response, [{
+            title: 'Login failed',
+            detail: 'Invalid Username or Password.'
+        }]);
+        return;
+    }
+
+    if (loginUser.disabled == 1) {
+        sendAuthForm(response, [{
+            title: 'User disabled',
+            detail: 'This user account is disabled.'
+        }]);
+        return;
+    }
+
+    request.session.userid = loginUser.id;
+    request.session.save();
+    
+    if (loginUser.otpsecret == '' || loginUser.otpsecret == null) {
+        request.setAuthState('authenticated');
+        response.set('HX-Redirect', '/profile').status(200).end();
+    } else {
+        request.setAuthState('totp-verfication');
+        response.redirect('/htmx/totpForm'); 
+    }
+}

routes/htmx/profile/data/edit.mjs

@@ -0,0 +1,27 @@
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.set('HX-Redirect', '/login').status(401).end();
+        return;
+    }
+
+    let dbUser = await request.getUser();
+
+    response.render(`views/htmx/profile/editData.njk`, {
+        user: {
+            firstName: dbUser.givenname,
+            lastName: dbUser.sn,
+            mail: dbUser.mail,
+        },
+        data: {
+            firstName: dbUser.givenname,
+            lastName: dbUser.sn,
+            mail: dbUser.mail,
+        }
+    });
+}
+
+export const post = async function (request, response) {
+    console.log(request.body);
+    response.redirect("/login");
+}

routes/htmx/profile/data/show.mjs

@@ -0,0 +1,29 @@
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.set('HX-Redirect', '/login').status(401).end();
+        return;
+    }
+
+    let dbUser = await request.getUser();
+
+    response.render(`views/htmx/profile/showData.njk`, {
+        user: {
+            firstName: dbUser.givenname,
+            lastName: dbUser.sn,
+            mail: dbUser.mail,
+        },
+        data: {
+            uidnumber: dbUser.uidnumber,
+            username: dbUser.name,
+            firstName: dbUser.givenname,
+            lastName: dbUser.sn,
+            mail: dbUser.mail,
+        }
+    });
+}
+
+export const post = async function (request, response) {
+    console.log(request.body);
+    response.redirect("/login");
+}

routes/htmx/profile/mfa/show.mjs

@@ -0,0 +1,30 @@
+import {
+    generateOTPQRCode
+} from "../../../../lib/otp.mjs";
+
+export const get = async function (request, response) {
+    if (request.getAuthState() != 'authenticated') {
+        response.set('HX-Redirect', '/login').status(401).end();
+        return;
+    }
+
+    let dbUser = await request.getUser();
+
+    response.render(`views/htmx/profile/showMFA.njk`, {
+        user: {
+            firstName: dbUser.givenname,
+            lastName: dbUser.sn,
+            mail: dbUser.mail,
+        },
+        data: {
+            otpsecret: dbUser.otpsecret,
+            yubikey: dbUser.yubikey,
+            qrcode: await generateOTPQRCode(dbUser.mail, dbUser.otpsecret)
+        }
+    });
+}
+
+export const post = async function (request, response) {
+    console.log(request.body);
+    response.redirect("/login");
+}

routes/htmx/totpForm.mjs

@@ -0,0 +1,53 @@
+
+import {
+    validateOTPCode
+} from "../../lib/otp.mjs";
+
+
+function sendTOTPForm(response, errors=[]) {
+    response.render(`views/htmx/totpForm.njk`, {
+        errors: errors
+    });
+}
+
+
+export const get = async function(request, response) {
+    if (request.getAuthState() != 'totp-verfication') {
+        response.redirect('/htmx/authForm');
+        return;
+    }
+
+    sendTOTPForm(response);
+}
+
+export const post = async function(request, response) {
+    // redirect if not in TOTP verification state
+    if (request.getAuthState() != 'totp-verfication') {
+        response.redirect('/htmx/authForm');
+        return;
+    }
+
+    // validate input
+    if (!request.body.otpToken || typeof request.body.otpToken != 'string') {
+        sendTOTPForm(response, [{
+            title: 'OTP token is required',
+            detail: 'no OTP token was received.'
+        }]);
+        return;
+    }
+
+    let otpToken = request.body.otpToken;
+    let dbUser = await request.getUser();
+
+    let validationResult = await validateOTPCode(dbUser.mail, dbUser.otpsecret, otpToken);
+
+    if (validationResult != null) {
+        request.setAuthState('authenticated');
+        response.set('HX-Redirect', '/profile').status(200).end();
+    } else {
+        sendTOTPForm(response, [{
+            title: 'OTP validation failed',
+            detail: 'the provided OTP token is invalid. Please try again.'
+        }]);
+    }
+}

routes/index.mjs

@@ -0,0 +1,4 @@
+
+export const get = async function (request, response) {
+    response.redirect(`/profile`);
+}

routes/login.mjs

@@ -1,78 +1,8 @@
 
-import crypto from "crypto";
-
-import {
-    login,
-    getUser,
-    getUserMFA
-} from "../lib/mysql.mjs";
-
-import {
-    validateOTPCode
-} from "../lib/otp.mjs";
-
 export const get = async function(request, response) {
-    if (typeof request.session.userid != 'string') {
-        response.render(`ui/login.njk`, {
-            step: 'login'
-        });
-        return;
+    if (request.getAuthState() == 'authenticated') {
+        response.redirect('/profile');
     }
-    if (request.session.otpVerified != true) {
-        response.render(`ui/login.njk`, {
-            step: 'otp'
-        });
-        return;
-    }
-}
-
-export const post = async function(request, response) {
-    if (typeof request.body.username == 'string' && typeof request.body.password == 'string') {
-        let username = request.body.username;
-        let password = crypto.createHash('sha256').update(request.body.password).digest('hex')
-
-        let loginResult = await login(username, password)
-
-        if (loginResult == null) {
-            response.render(`ui/login.njk`, {
-                step: 'login',
-                error: 'login failed'
-            });
-            return;
-        }
-
-        request.session.userid = loginResult.id;
-        request.session.login = {
-            completed: false,
-            otpVerified: false
-        }
-        request.session.save();
     
-        if (loginResult.otpsecret != '' && loginResult.yubikey != '') {
-            response.render(`ui/login.njk`, {
-                step: 'otp'
-            });
-            return;
-        } else {
-            request.session.login.completed = true;
-            response.redirect('/profile')
-        }
-    } else if (typeof request.body.otpToken == 'string') {
-        let otpToken = request.body.otpToken;
-        let userData = await getUser(request.session.userid);
-        let mfaData = await getUserMFA(request.session.userid);
-
-        let validationResult = await validateOTPCode(userData.mail, mfaData.otpsecret, otpToken);
-
-        if (validationResult != null) {
-            request.session.login.completed = true;
-            response.redirect('/profile');
-        } else {
-            request.session.destroy();
-            response.render(`ui/login.njk`, {
-                step: 'login',
-                error: 'otp failed'
-            });
-        }
-    }
-}
+    response.render(`views/login.njk`);
+}

routes/logout.mjs

@@ -1,5 +1,5 @@
 
 export const get = async function(request, response) {
     request.session.destroy();
-    response.render(`ui/logout.njk`);
+    response.render(`views/logout.njk`);
 }

routes/profile/[page].mjs

@@ -1,49 +1,58 @@
 
-import {
-    getUser,
-    getUserMFA
-} from "../../lib/mysql.mjs";
-
 import {
     generateOTPQRCode
 } from "../../lib/otp.mjs";
 
 
 export const get = async function(request, response) {
-    if (!request.isLoginCompleted()) {
+    if (request.getAuthState() != 'authenticated') {
         response.redirect('/login');
         return;
     }
 
-    let userData = await getUser(request.session.userid);
-    let mfaData = await getUserMFA(request.session.userid);
+    let dbUser = await request.getUser();
 
     switch (request.params.page) {
         case 'personal':
-            response.render(`ui/profile.njk`, {
+            response.render(`views/profile.njk`, {
                 page: 'profile/personal',
+                user: {
+                    firstName: dbUser.givenname,
+                    lastName: dbUser.sn,
+                    mail: dbUser.mail,
+                },
                 data: {
-                    firstName: userData.givenname,
-                    lastName: userData.sn,
-                    mail: userData.mail,
+                    firstName: dbUser.givenname,
+                    lastName: dbUser.sn,
+                    mail: dbUser.mail,
                 }
             });
             break;
         case 'security':
-            response.render(`ui/profile.njk`, {
+            response.render(`views/profile.njk`, {
                 page: 'profile/security',
+                user: {
+                    firstName: dbUser.givenname,
+                    lastName: dbUser.sn,
+                    mail: dbUser.mail,
+                },
                 otp: {
-                    active: mfaData.otpsecret != '' ? true : false,
-                    qrcode: await generateOTPQRCode(userData.mail, mfaData.otpsecret)
+                    active: dbUser.otpsecret != '' ? true : false,
+                    qrcode: await generateOTPQRCode(dbUser.mail, dbUser.otpsecret)
                 }
             });
             break;
         case 'createOTPSecret':
-            response.render(`ui/profile.njk`, {
+            response.render(`views/profile.njk`, {
                 page: 'profile/createOTPSecret',
+                user: {
+                    firstName: dbUser.givenname,
+                    lastName: dbUser.sn,
+                    mail: dbUser.mail,
+                },
                 otp: {
                     active: mfaData.otpsecret != '' ? true : false,
-                    qrcode: await generateOTPQRCode(userData.mail, mfaData.otpsecret)
+                    qrcode: await generateOTPQRCode(dbUser.mail, dbUser.otpsecret)
                 }
             });
             break;

routes/profile/index.mjs

@@ -1,6 +1,6 @@
 
 export const get = async function (request, response) {
-    if (!request.isLoginCompleted()) {
+    if (request.getAuthState() != 'authenticated') {
         response.redirect('/login');
         return;
     }

routes/profile/mfa/create.mjs

@@ -11,7 +11,7 @@ import {
 } from "../../../lib/mysql.mjs";
 
 export const get = async function (request, response) {
-    if (!request.isLoginCompleted()) {
+    if (request.getAuthState() != 'authenticated') {
         response.redirect('/login');
         return;
     }
@@ -38,7 +38,7 @@ export const get = async function (request, response) {
 
 
 export const post = async function (request, response) {
-    if (!request.isLoginCompleted()) {
+    if (request.getAuthState() != 'authenticated') {
         response.redirect('/login');
         return;
     }

routes/profile/mfa/delete.mjs

@@ -11,7 +11,7 @@ import {
 } from "../../../lib/mysql.mjs";
 
 export const get = async function (request, response) {
-    if (!request.isLoginCompleted()) {
+    if (request.getAuthState() != 'authenticated') {
         response.redirect('/login');
         return;
     }
@@ -38,7 +38,7 @@ export const get = async function (request, response) {
 
 
 export const post = async function (request, response) {
-    if (!request.isLoginCompleted()) {
+    if (request.getAuthState() != 'authenticated') {
         response.redirect('/login');
         return;
     }

static/img/favicon.svg

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40mm"
+   height="40mm"
+   viewBox="0 0 40 40"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   sodipodi:docname="favicon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.0396254"
+     inkscape:cx="396.77752"
+     inkscape:cy="253.45667"
+     inkscape:window-width="3440"
+     inkscape:window-height="1369"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-386.63771,-276.33501)"
+         id="path4" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath6">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-447.51271,-264.59181)"
+         id="path6" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath8">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-507.75881,-335.45701)"
+         id="path8" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath10">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         id="path10" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath12">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-633.05962,-280.8955)"
+         id="path12" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath14">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-687.70702,-304.13771)"
+         id="path14" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path3"
+       d="m 0,0 c -1.069,-0.824 -2.284,-1.532 -3.624,-1.699 -2.326,-0.29 -4.54,1.089 -6.239,2.704 -3.482,3.308 -5.675,7.723 -7.621,12.113 -0.796,1.795 0.572,2.275 1.941,2.943 1.562,0.76 3.013,1.736 4.35,2.843 2.717,2.251 4.962,5.025 6.958,7.92 3.161,-4.608 7.219,-9.096 12.239,-11.693 0.577,-0.299 1.24,-0.68 1.475,-1.238 C 9.535,13.759 9.567,13.615 9.567,13.46 9.568,13.082 9.37,12.735 9.177,12.41 8.666,11.549 8.155,10.687 7.645,9.824 5.516,6.231 3.308,2.549 0,0 m -18.629,17.915 c -0.002,1.057 0.006,2.114 -0.008,3.171 -0.003,0.222 0.095,0.322 0.259,0.427 2.237,1.434 4.335,3.051 6.302,4.837 2.924,2.653 5.544,5.571 7.751,8.852 0.023,0.033 0.047,0.065 0.091,0.128 0.439,-0.612 0.849,-1.201 1.277,-1.777 1.746,-2.346 3.702,-4.504 5.83,-6.508 2.187,-2.061 4.533,-3.917 7.066,-5.535 0.187,-0.119 0.25,-0.246 0.248,-0.464 -0.012,-1.106 -0.005,-2.212 -0.005,-3.404 -5.776,3.71 -10.536,8.355 -14.407,13.949 -3.851,-5.583 -8.628,-10.227 -14.374,-13.939 -0.014,0.117 -0.03,0.19 -0.03,0.263 m 9.439,19.394 c 1.453,0 2.906,0.006 4.359,-0.004 0.275,-0.003 0.253,0.154 0.253,0.333 -10e-4,2.429 0,4.858 0,7.288 v 0.519 c 0.382,-0.039 0.727,-0.037 1.055,-0.113 1.6,-0.372 3.195,-0.765 4.792,-1.152 0.016,-0.004 0.03,-0.023 0.083,-0.065 -0.515,-0.126 -1,-0.247 -1.486,-0.365 -1.163,-0.284 -2.325,-0.569 -3.49,-0.846 -0.159,-0.038 -0.25,-0.091 -0.249,-0.276 0.006,-1.717 0.005,-3.435 0.007,-5.153 0,-0.039 0.015,-0.079 0.031,-0.158 h 6.076 c 0,-0.778 0.005,-1.518 -0.01,-2.256 C 2.23,35.006 2.087,34.91 2.008,34.907 1.5,34.894 0.992,34.9 0.484,34.9 H 0.124 V 30.921 C 0.098,30.913 0.072,30.905 0.046,30.897 c -1.556,1.78 -3.024,3.626 -4.268,5.703 -1.263,-2.065 -2.706,-3.931 -4.344,-5.779 0,0.189 0,0.291 0.001,0.394 0.003,1.077 0.007,2.155 0.012,3.232 0.002,0.468 0.003,0.469 -0.454,0.466 -0.478,-0.004 -0.956,-0.006 -1.433,-0.015 -0.15,-0.002 -0.255,0.015 -0.254,0.207 0.006,0.72 0.003,1.44 0.003,2.204 z M 28.477,19.618 H 43.789 C 42.905,13.353 40.19,7.971 35.659,3.473 30.08,-2.139 23.324,-4.952 15.39,-4.952 c -4.302,0 -8.261,0.866 -11.876,2.518 0.032,0.034 0.081,0.066 0.114,0.116 7.198,7.197 10.797,15.883 10.797,26.059 0,10.175 -3.599,18.862 -10.797,26.059 -0.033,0.049 -0.082,0.082 -0.114,0.115 3.615,1.652 7.574,2.519 11.876,2.519 3.844,0 7.476,-0.736 10.911,-2.176 3.501,-1.423 6.609,-3.468 9.308,-6.151 l 5.759,5.742 c -3.468,3.436 -7.46,6.086 -11.942,7.934 -4.499,1.882 -9.177,2.83 -14.036,2.83 -7.018,0 -13.3,-1.766 -18.911,-5.185 -5.611,3.419 -11.893,5.185 -18.91,5.185 -4.859,0 -9.537,-0.948 -14.036,-2.83 -4.482,-1.848 -8.474,-4.498 -11.942,-7.934 l 5.759,-5.742 c 2.698,2.683 5.807,4.728 9.307,6.151 3.436,1.44 7.068,2.176 10.912,2.176 4.302,0 8.261,-0.867 11.876,-2.519 -0.032,-0.033 -0.082,-0.066 -0.114,-0.115 -7.198,-7.197 -10.797,-15.884 -10.797,-26.059 0,-10.176 3.599,-18.862 10.797,-26.059 0.032,-0.05 0.082,-0.082 0.114,-0.116 -3.615,-1.652 -7.574,-2.518 -11.876,-2.518 -7.934,0 -14.691,2.813 -20.269,8.425 -4.531,4.498 -7.247,9.88 -8.13,16.145 h 15.312 v 8.18 h -23.786 v -4.057 c 0,-10.176 3.599,-18.862 10.797,-26.059 7.198,-7.215 15.901,-10.814 26.076,-10.814 7.017,0 13.299,1.75 18.91,5.186 5.611,-3.436 11.893,-5.186 18.911,-5.186 10.175,0 18.878,3.599 26.076,10.814 7.198,7.197 10.797,15.883 10.797,26.059 v 4.057 H 28.477 Z"
+       style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,21.241954,28.37512)"
+       clip-path="url(#clipPath4)" />
+  </g>
+</svg>

static/img/logo-dark.svg

@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="200mm"
+   height="30mm"
+   viewBox="0 0 200 30"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   sodipodi:docname="logo_dark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.0396254"
+     inkscape:cx="396.77752"
+     inkscape:cy="253.45667"
+     inkscape:window-width="3440"
+     inkscape:window-height="1369"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-386.63771,-276.33501)"
+         id="path4" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath6">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-447.51271,-264.59181)"
+         id="path6" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath8">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-507.75881,-335.45701)"
+         id="path8" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath10">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         id="path10" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath12">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-633.05962,-280.8955)"
+         id="path12" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath14">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-687.70702,-304.13771)"
+         id="path14" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g2"
+       transform="matrix(0.26458333,0,0,0.26458333,-58.750087,-90.83335)"
+       style="display:inline;fill:#fafafa;fill-opacity:1">
+      <path
+         id="path1"
+         d="M 0,0 -22.994,-54.412 -45.988,0 h -8.87 L -45.641,-21.805 -60.161,-54.61 -83.253,0 h -8.822 l 31.765,-75.127 19.03,43.015 18.286,-43.213 L 8.821,0 Z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,356.66467,352.724)" />
+      <path
+         id="path2"
+         d="M 0,0 13.925,28.792 27.851,0 Z m -22.4,-27.702 h 9.069 l 9.416,19.525 h 35.68 l 9.465,-19.525 h 9.02 L 13.925,47.574 Z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,374.88027,410.2748)" />
+      <path
+         id="path3"
+         d="m 0,0 c -1.069,-0.824 -2.284,-1.532 -3.624,-1.699 -2.326,-0.29 -4.54,1.089 -6.239,2.704 -3.482,3.308 -5.675,7.723 -7.621,12.113 -0.796,1.795 0.572,2.275 1.941,2.943 1.562,0.76 3.013,1.736 4.35,2.843 2.717,2.251 4.962,5.025 6.958,7.92 3.161,-4.608 7.219,-9.096 12.239,-11.693 0.577,-0.299 1.24,-0.68 1.475,-1.238 C 9.535,13.759 9.567,13.615 9.567,13.46 9.568,13.082 9.37,12.735 9.177,12.41 8.666,11.549 8.155,10.687 7.645,9.824 5.516,6.231 3.308,2.549 0,0 m -18.629,17.915 c -0.002,1.057 0.006,2.114 -0.008,3.171 -0.003,0.222 0.095,0.322 0.259,0.427 2.237,1.434 4.335,3.051 6.302,4.837 2.924,2.653 5.544,5.571 7.751,8.852 0.023,0.033 0.047,0.065 0.091,0.128 0.439,-0.612 0.849,-1.201 1.277,-1.777 1.746,-2.346 3.702,-4.504 5.83,-6.508 2.187,-2.061 4.533,-3.917 7.066,-5.535 0.187,-0.119 0.25,-0.246 0.248,-0.464 -0.012,-1.106 -0.005,-2.212 -0.005,-3.404 -5.776,3.71 -10.536,8.355 -14.407,13.949 -3.851,-5.583 -8.628,-10.227 -14.374,-13.939 -0.014,0.117 -0.03,0.19 -0.03,0.263 m 9.439,19.394 c 1.453,0 2.906,0.006 4.359,-0.004 0.275,-0.003 0.253,0.154 0.253,0.333 -10e-4,2.429 0,4.858 0,7.288 v 0.519 c 0.382,-0.039 0.727,-0.037 1.055,-0.113 1.6,-0.372 3.195,-0.765 4.792,-1.152 0.016,-0.004 0.03,-0.023 0.083,-0.065 -0.515,-0.126 -1,-0.247 -1.486,-0.365 -1.163,-0.284 -2.325,-0.569 -3.49,-0.846 -0.159,-0.038 -0.25,-0.091 -0.249,-0.276 0.006,-1.717 0.005,-3.435 0.007,-5.153 0,-0.039 0.015,-0.079 0.031,-0.158 h 6.076 c 0,-0.778 0.005,-1.518 -0.01,-2.256 C 2.23,35.006 2.087,34.91 2.008,34.907 1.5,34.894 0.992,34.9 0.484,34.9 H 0.124 V 30.921 C 0.098,30.913 0.072,30.905 0.046,30.897 c -1.556,1.78 -3.024,3.626 -4.268,5.703 -1.263,-2.065 -2.706,-3.931 -4.344,-5.779 0,0.189 0,0.291 0.001,0.394 0.003,1.077 0.007,2.155 0.012,3.232 0.002,0.468 0.003,0.469 -0.454,0.466 -0.478,-0.004 -0.956,-0.006 -1.433,-0.015 -0.15,-0.002 -0.255,0.015 -0.254,0.207 0.006,0.72 0.003,1.44 0.003,2.204 z M 28.477,19.618 H 43.789 C 42.905,13.353 40.19,7.971 35.659,3.473 30.08,-2.139 23.324,-4.952 15.39,-4.952 c -4.302,0 -8.261,0.866 -11.876,2.518 0.032,0.034 0.081,0.066 0.114,0.116 7.198,7.197 10.797,15.883 10.797,26.059 0,10.175 -3.599,18.862 -10.797,26.059 -0.033,0.049 -0.082,0.082 -0.114,0.115 3.615,1.652 7.574,2.519 11.876,2.519 3.844,0 7.476,-0.736 10.911,-2.176 3.501,-1.423 6.609,-3.468 9.308,-6.151 l 5.759,5.742 c -3.468,3.436 -7.46,6.086 -11.942,7.934 -4.499,1.882 -9.177,2.83 -14.036,2.83 -7.018,0 -13.3,-1.766 -18.911,-5.185 -5.611,3.419 -11.893,5.185 -18.91,5.185 -4.859,0 -9.537,-0.948 -14.036,-2.83 -4.482,-1.848 -8.474,-4.498 -11.942,-7.934 l 5.759,-5.742 c 2.698,2.683 5.807,4.728 9.307,6.151 3.436,1.44 7.068,2.176 10.912,2.176 4.302,0 8.261,-0.867 11.876,-2.519 -0.032,-0.033 -0.082,-0.066 -0.114,-0.115 -7.198,-7.197 -10.797,-15.884 -10.797,-26.059 0,-10.176 3.599,-18.862 10.797,-26.059 0.032,-0.05 0.082,-0.082 0.114,-0.116 -3.615,-1.652 -7.574,-2.518 -11.876,-2.518 -7.934,0 -14.691,2.813 -20.269,8.425 -4.531,4.498 -7.247,9.88 -8.13,16.145 h 15.312 v 8.18 h -23.786 v -4.057 c 0,-10.176 3.599,-18.862 10.797,-26.059 7.198,-7.215 15.901,-10.814 26.076,-10.814 7.017,0 13.299,1.75 18.91,5.186 5.611,-3.436 11.893,-5.186 18.911,-5.186 10.175,0 18.878,3.599 26.076,10.814 7.198,7.197 10.797,15.883 10.797,26.059 v 4.057 H 28.477 Z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,515.51693,431.55333)"
+         clip-path="url(#clipPath4)" />
+      <path
+         id="path5"
+         d="M 0,0 H 43.015 V 8.128 H 8.177 v 26.81 h 31.368 v 8.176 H 8.177 v 19.574 h 34.838 v 8.177 L 0,70.865 Z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,596.6836,447.21093)"
+         clip-path="url(#clipPath6)" />
+      <path
+         id="path7"
+         d="m 0,0 h -8.176 v -70.865 h 47.87 v 8.177 H 0 Z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,677.01173,352.724)"
+         clip-path="url(#clipPath8)" />
+      <path
+         id="path9"
+         d="m 557.203,264.592 h 8.177 v 70.865 h -8.177 z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,0,800)"
+         clip-path="url(#clipPath10)" />
+      <path
+         id="path11"
+         d="m 0,0 -54.61,58.328 v -74.632 h 8.175 V 37.712 L 8.177,-20.615 V 54.562 H 0 Z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,844.07947,425.47267)"
+         clip-path="url(#clipPath12)" />
+      <path
+         id="path13"
+         d="M 0,0 V -8.177 H 28.395 C 27.503,-14.454 24.794,-19.839 20.269,-24.332 14.685,-29.948 7.929,-32.756 0,-32.756 c -7.929,0 -14.686,2.808 -20.27,8.424 -5.616,5.583 -8.423,12.34 -8.423,20.269 0,7.929 2.807,14.685 8.423,20.268 5.584,5.616 12.341,8.425 20.27,8.425 3.833,0 7.466,-0.728 10.901,-2.181 3.502,-1.421 6.608,-3.469 9.318,-6.145 l 5.748,5.749 C 22.498,25.489 18.518,28.131 14.025,29.981 9.531,31.865 4.856,32.806 0,32.806 -10.176,32.806 -18.865,29.205 -26.066,22.003 -33.27,14.8 -36.869,6.112 -36.869,-4.063 c 0,-10.176 3.599,-18.865 10.803,-26.067 7.201,-7.202 15.89,-10.803 26.066,-10.803 10.175,0 18.864,3.601 26.065,10.803 7.204,7.202 10.805,15.891 10.805,26.067 V 0 Z"
+         style="fill:#fafafa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.00062996;stroke-dasharray:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,916.94267,394.48307)"
+         clip-path="url(#clipPath14)" />
+    </g>
+  </g>
+</svg>

static/img/logo-light.svg

@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="200mm"
+   height="30mm"
+   viewBox="0 0 200 30"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   sodipodi:docname="logo_light.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.0396254"
+     inkscape:cx="396.77752"
+     inkscape:cy="253.45667"
+     inkscape:window-width="3440"
+     inkscape:window-height="1369"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-386.63771,-276.33501)"
+         id="path4" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath6">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-447.51271,-264.59181)"
+         id="path6" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath8">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-507.75881,-335.45701)"
+         id="path8" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath10">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         id="path10" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath12">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-633.05962,-280.8955)"
+         id="path12" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath14">
+      <path
+         d="M 0,600 H 900 V 0 H 0 Z"
+         transform="translate(-687.70702,-304.13771)"
+         id="path14" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g2"
+       transform="matrix(0.26458333,0,0,0.26458333,-58.750087,-90.83335)"
+       style="display:inline">
+      <path
+         id="path1"
+         d="M 0,0 -22.994,-54.412 -45.988,0 h -8.87 L -45.641,-21.805 -60.161,-54.61 -83.253,0 h -8.822 l 31.765,-75.127 19.03,43.015 18.286,-43.213 L 8.821,0 Z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,356.66467,352.724)" />
+      <path
+         id="path2"
+         d="M 0,0 13.925,28.792 27.851,0 Z m -22.4,-27.702 h 9.069 l 9.416,19.525 h 35.68 l 9.465,-19.525 h 9.02 L 13.925,47.574 Z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,374.88027,410.2748)" />
+      <path
+         id="path3"
+         d="m 0,0 c -1.069,-0.824 -2.284,-1.532 -3.624,-1.699 -2.326,-0.29 -4.54,1.089 -6.239,2.704 -3.482,3.308 -5.675,7.723 -7.621,12.113 -0.796,1.795 0.572,2.275 1.941,2.943 1.562,0.76 3.013,1.736 4.35,2.843 2.717,2.251 4.962,5.025 6.958,7.92 3.161,-4.608 7.219,-9.096 12.239,-11.693 0.577,-0.299 1.24,-0.68 1.475,-1.238 C 9.535,13.759 9.567,13.615 9.567,13.46 9.568,13.082 9.37,12.735 9.177,12.41 8.666,11.549 8.155,10.687 7.645,9.824 5.516,6.231 3.308,2.549 0,0 m -18.629,17.915 c -0.002,1.057 0.006,2.114 -0.008,3.171 -0.003,0.222 0.095,0.322 0.259,0.427 2.237,1.434 4.335,3.051 6.302,4.837 2.924,2.653 5.544,5.571 7.751,8.852 0.023,0.033 0.047,0.065 0.091,0.128 0.439,-0.612 0.849,-1.201 1.277,-1.777 1.746,-2.346 3.702,-4.504 5.83,-6.508 2.187,-2.061 4.533,-3.917 7.066,-5.535 0.187,-0.119 0.25,-0.246 0.248,-0.464 -0.012,-1.106 -0.005,-2.212 -0.005,-3.404 -5.776,3.71 -10.536,8.355 -14.407,13.949 -3.851,-5.583 -8.628,-10.227 -14.374,-13.939 -0.014,0.117 -0.03,0.19 -0.03,0.263 m 9.439,19.394 c 1.453,0 2.906,0.006 4.359,-0.004 0.275,-0.003 0.253,0.154 0.253,0.333 -10e-4,2.429 0,4.858 0,7.288 v 0.519 c 0.382,-0.039 0.727,-0.037 1.055,-0.113 1.6,-0.372 3.195,-0.765 4.792,-1.152 0.016,-0.004 0.03,-0.023 0.083,-0.065 -0.515,-0.126 -1,-0.247 -1.486,-0.365 -1.163,-0.284 -2.325,-0.569 -3.49,-0.846 -0.159,-0.038 -0.25,-0.091 -0.249,-0.276 0.006,-1.717 0.005,-3.435 0.007,-5.153 0,-0.039 0.015,-0.079 0.031,-0.158 h 6.076 c 0,-0.778 0.005,-1.518 -0.01,-2.256 C 2.23,35.006 2.087,34.91 2.008,34.907 1.5,34.894 0.992,34.9 0.484,34.9 H 0.124 V 30.921 C 0.098,30.913 0.072,30.905 0.046,30.897 c -1.556,1.78 -3.024,3.626 -4.268,5.703 -1.263,-2.065 -2.706,-3.931 -4.344,-5.779 0,0.189 0,0.291 0.001,0.394 0.003,1.077 0.007,2.155 0.012,3.232 0.002,0.468 0.003,0.469 -0.454,0.466 -0.478,-0.004 -0.956,-0.006 -1.433,-0.015 -0.15,-0.002 -0.255,0.015 -0.254,0.207 0.006,0.72 0.003,1.44 0.003,2.204 z M 28.477,19.618 H 43.789 C 42.905,13.353 40.19,7.971 35.659,3.473 30.08,-2.139 23.324,-4.952 15.39,-4.952 c -4.302,0 -8.261,0.866 -11.876,2.518 0.032,0.034 0.081,0.066 0.114,0.116 7.198,7.197 10.797,15.883 10.797,26.059 0,10.175 -3.599,18.862 -10.797,26.059 -0.033,0.049 -0.082,0.082 -0.114,0.115 3.615,1.652 7.574,2.519 11.876,2.519 3.844,0 7.476,-0.736 10.911,-2.176 3.501,-1.423 6.609,-3.468 9.308,-6.151 l 5.759,5.742 c -3.468,3.436 -7.46,6.086 -11.942,7.934 -4.499,1.882 -9.177,2.83 -14.036,2.83 -7.018,0 -13.3,-1.766 -18.911,-5.185 -5.611,3.419 -11.893,5.185 -18.91,5.185 -4.859,0 -9.537,-0.948 -14.036,-2.83 -4.482,-1.848 -8.474,-4.498 -11.942,-7.934 l 5.759,-5.742 c 2.698,2.683 5.807,4.728 9.307,6.151 3.436,1.44 7.068,2.176 10.912,2.176 4.302,0 8.261,-0.867 11.876,-2.519 -0.032,-0.033 -0.082,-0.066 -0.114,-0.115 -7.198,-7.197 -10.797,-15.884 -10.797,-26.059 0,-10.176 3.599,-18.862 10.797,-26.059 0.032,-0.05 0.082,-0.082 0.114,-0.116 -3.615,-1.652 -7.574,-2.518 -11.876,-2.518 -7.934,0 -14.691,2.813 -20.269,8.425 -4.531,4.498 -7.247,9.88 -8.13,16.145 h 15.312 v 8.18 h -23.786 v -4.057 c 0,-10.176 3.599,-18.862 10.797,-26.059 7.198,-7.215 15.901,-10.814 26.076,-10.814 7.017,0 13.299,1.75 18.91,5.186 5.611,-3.436 11.893,-5.186 18.911,-5.186 10.175,0 18.878,3.599 26.076,10.814 7.198,7.197 10.797,15.883 10.797,26.059 v 4.057 H 28.477 Z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,515.51693,431.55333)"
+         clip-path="url(#clipPath4)" />
+      <path
+         id="path5"
+         d="M 0,0 H 43.015 V 8.128 H 8.177 v 26.81 h 31.368 v 8.176 H 8.177 v 19.574 h 34.838 v 8.177 L 0,70.865 Z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,596.6836,447.21093)"
+         clip-path="url(#clipPath6)" />
+      <path
+         id="path7"
+         d="m 0,0 h -8.176 v -70.865 h 47.87 v 8.177 H 0 Z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,677.01173,352.724)"
+         clip-path="url(#clipPath8)" />
+      <path
+         id="path9"
+         d="m 557.203,264.592 h 8.177 v 70.865 h -8.177 z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,0,800)"
+         clip-path="url(#clipPath10)" />
+      <path
+         id="path11"
+         d="m 0,0 -54.61,58.328 v -74.632 h 8.175 V 37.712 L 8.177,-20.615 V 54.562 H 0 Z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,844.07947,425.47267)"
+         clip-path="url(#clipPath12)" />
+      <path
+         id="path13"
+         d="M 0,0 V -8.177 H 28.395 C 27.503,-14.454 24.794,-19.839 20.269,-24.332 14.685,-29.948 7.929,-32.756 0,-32.756 c -7.929,0 -14.686,2.808 -20.27,8.424 -5.616,5.583 -8.423,12.34 -8.423,20.269 0,7.929 2.807,14.685 8.423,20.268 5.584,5.616 12.341,8.425 20.27,8.425 3.833,0 7.466,-0.728 10.901,-2.181 3.502,-1.421 6.608,-3.469 9.318,-6.145 l 5.748,5.749 C 22.498,25.489 18.518,28.131 14.025,29.981 9.531,31.865 4.856,32.806 0,32.806 -10.176,32.806 -18.865,29.205 -26.066,22.003 -33.27,14.8 -36.869,6.112 -36.869,-4.063 c 0,-10.176 3.599,-18.865 10.803,-26.067 7.201,-7.202 15.89,-10.803 26.066,-10.803 10.175,0 18.864,3.601 26.065,10.803 7.204,7.202 10.805,15.891 10.805,26.067 V 0 Z"
+         style="fill:#0e1f33;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.00062996;stroke-dasharray:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,916.94267,394.48307)"
+         clip-path="url(#clipPath14)" />
+    </g>
+  </g>
+</svg>

static/styles/theme.default.css

@@ -0,0 +1,25 @@
+.theme-default {
+    --color-base-bg-100: #1e1e1e;
+    --color-base-bg-200: #252526;
+    --color-base-bg-300: #2d2d30;
+    --color-base-bg-400: #3e3e42;
+    --color-base-fg-100: #ffffff;
+    --color-base-fg-200: #d3d3d3;
+    --color-base-fg-300: #b6b6b6;
+    --color-primary-bg: #8000d9;
+    --color-primary-fg: #ffffff;
+    --color-secondary-bg: #422ad5;
+    --color-secondary-fg: #ffffff;
+    --color-info-bg: #51e8fb;
+    --color-info-fg: #007595;
+    --color-success-bg: #7af1a7;
+    --color-success-fg: #008033;
+    --color-warning-bg: #ffb667;
+    --color-warning-fg: #c93400;
+    --color-error-bg: #ff9fa0;
+    --color-error-fg: #bf0004;
+    --login-logo-source: url('/img/logo-dark.svg');
+    --login-logo-height: 4rem;
+    --header-logo-source: url('/img/logo-dark.svg');
+    --header-logo-width: 8rem;
+}

static/styles/theme.light.css

@@ -0,0 +1,25 @@
+.theme-light {
+    --color-base-bg-100: #fafafa;
+    --color-base-bg-200: #f7f7f7;
+    --color-base-bg-300: #e7e7e7;
+    --color-base-bg-400: #d7d7d7;
+    --color-base-fg-100: #080808;
+    --color-base-fg-200: #080808;
+    --color-base-fg-300: #484848;
+    --color-primary-bg: #422ad5;
+    --color-primary-fg: #fafafa;
+    --color-secondary-bg: #422ad5;
+    --color-secondary-fg: #fafafa;
+    --color-info-bg: #51e8fb;
+    --color-info-fg: #007595;
+    --color-success-bg: #7af1a7;
+    --color-success-fg: #008033;
+    --color-warning-bg: #ffb667;
+    --color-warning-fg: #c93400;
+    --color-error-bg: #ff9fa0;
+    --color-error-fg: #bf0004;
+    --login-logo-source: url('/img/logo-light.svg');
+    --login-logo-height: 4rem;
+    --header-logo-source: url('/img/logo-light.svg');
+    --header-logo-width: 8rem;
+}

ui/admin.njk

@@ -1,127 +0,0 @@
-{% extends "./master.njk" %}
-
-{% block content %}
-<div id="app" class="w-full">
-    {% include "./components/navbar.njk" %}
-    <div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
-        <div class="flex flex-row gap-8 w-full text-gray-700">
-            <!-- Setting Menu -->
-            <div class="flex flex-col w-2/6">
-                <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 shadow-md rounded-lg gap-6">
-                    <div class="flex w-full">
-                        <h2 class="text-xl font-bold dark:text-gray-200">Settings</h2>
-                    </div>
-                    <div class="flex flex-col gap-3">
-                        {% if page == 'users' %}
-                        <a href="/admin/users" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
-                        {% else %}
-                        <a href="/admin/users" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
-                        {% endif %}
-                            Users
-                        </a>
-                        {% if page == 'groups' %}
-                        <a href="/admin/groups" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
-                        {% else %}
-                        <a href="/admin/groups" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
-                        {% endif %}
-                            Groups
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="flex flex-col flex-auto gap-8">
-                {% if page == 'users' %}
-                <!-- Table: Users -->
-                <div class="relative overflow-x-auto shadow-md rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
-                    <table class="w-full text-sm text-left">
-                        <caption class="py-5 px-8 text-xl font-semibold text-left">
-                            Users
-                            <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-                                Manage the users in the user directory 
-                            </p>
-                        </caption>
-                        <thead class="text-xs uppercase bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
-                            <tr>
-                                <th scope="col" class="px-6 py-3">
-                                    Name
-                                </th>
-                                <th scope="col" class="px-6 py-3">
-                                    Mail
-                                </th>
-                                <th scope="col" class="px-6 py-3 text-center">
-                                    Enabled
-                                </th>
-                                <th scope="col" class="px-6 py-3">
-                                    
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for user in users %}
-                            <tr class="border-b dark:border-gray-700 hover:bg-gray-100 hover:dark:bg-gray-700">
-                                <th class="px-6 py-4 select-all font-medium whitespace-nowrap">
-                                    {{user.name}}
-                                </th>
-                                <td class="px-6 py-4 select-all">
-                                    {{user.mail}}
-                                </td>
-                                {% if user.disabled == 1 %}
-                                <td class="px-6 py-4 text-2xl text-center text-red-400">
-                                    <i class="ti ti-square-rounded-x-filled"></i>
-                                </td>
-                                {% else %}
-                                <td class="px-6 py-4 text-2xl text-center text-green-500">
-                                    <i class="ti ti-square-rounded-check-filled"></i>
-                                </td>
-                                {% endif %}
-                                <td class="px-6 py-4 text-right">
-                                    <a href="/admin/user/{{user.id}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                {% endif %}
-                {% if page == 'groups' %}
-                <!-- Table: Groups -->
-                <div class="relative overflow-x-auto shadow-md rounded-lg">
-                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                        <caption class="py-5 px-8 text-xl font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-                            Groups
-                            <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-                                Manage the groups in the user directory 
-                            </p>
-                        </caption>
-                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                            <tr>
-                                <th scope="col" class="px-6 py-3">
-                                    Name
-                                </th>
-                                <th scope="col" class="px-6 py-3">
-                                    
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for group in groups %}
-                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                <th class="px-6 py-4 select-all font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                    {{group.name}}
-                                </th>
-                                <td class="px-6 py-4 text-right">
-                                    <a href="/admin/group/{{group.id}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                {% endif %}
-                <!-- / -->
-            </div>
-        </div>
-    </div>
-</div>
-<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
-{% endblock %}

ui/components/meta.njk

@@ -1,20 +0,0 @@
-<link rel="icon" type="image/x-icon" href="/img/AppLogo.svg">
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<script src="https://cdn.tailwindcss.com"></script>
-<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
-<link rel="stylesheet" href="/css/tabler-icons.min.css">
-<!-- <script src="/js/vue.global.prod.js"></script> -->
-<script src="https://unpkg.com/vue@latest"></script>
-<style>
-
-    body,
-    html {
-        /* width: 100svw; */
-        min-height: 100svh;
-
-        user-select: none;
-        background: var(--bs-body-bg);
-    }
-
-</style>

ui/components/navbar.njk

@@ -1,27 +0,0 @@
-<header class="sticky top-0 z-50 w-full flex flex-col bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-600">
-    <nav class="container flex justify-between items-center py-4 mx-auto relative ">
-        <!-- Application Logo -->
-        <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse z-10">
-            <img src="https://flowbite.com/docs/images/logo.svg" class="h-6" alt="Flowbite Logo" />
-            <span class="self-center text-xl font-semibold whitespace-nowrap">Identity Manager</span>
-        </a>
-
-        <!-- Menu Items -->
-        <div class="flex items-center gap-12">
-            <a href="/profile" class="rounded text-gray-900 hover:text-blue-700 dark:text-white dark:hover:text-blue-500">
-                Profile
-            </a>
-            <a href="/admin" class="rounded text-gray-900 hover:text-blue-700 dark:text-white dark:hover:text-blue-500">
-                Administration
-            </a>
-        </div>
-
-        <!-- User Menu -->
-        <div class="flex flex-row gap-2 z-10">
-            <a href="/logout" class="py-2 px-6 rounded text-sm text-white bg-primary-500 hover:bg-primary-600">Sign Out</a>
-        </div>
-    </nav>
-</header>
-
-
-

ui/login.njk

@@ -1,81 +0,0 @@
-{% extends "./master.njk" %}
-
-{% block content %}    
-<div id="app" class="w-full flex align-center" style="min-height: 100svh;">
-    <div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
-        {% if error == "login failed" %}
-        <!-- Login Error -->
-        <div id="alert-login-failed" class="flex items-center w-full max-w-md px-4 py-3 text-red-800 border-t-4 border-red-300 bg-white dark:text-red-400 dark:bg-gray-800 dark:border-red-800 shadow rounded-lg" role="alert">
-            <i class="ti ti-alert-hexagon-filled text-lg"></i>
-            <div class="ms-3 text-sm font-medium">
-                Login failed. Username or password is incorrect.
-            </div>
-        </div>
-        {% endif %}
-        {% if error == "otp failed" %}
-        <!-- Login Error -->
-        <div id="alert-login-failed" class="flex items-center w-full max-w-md px-4 py-3 text-red-800 border-t-4 border-red-300 bg-white dark:text-red-400 dark:bg-gray-800 dark:border-red-800 shadow rounded-lg" role="alert">
-            <i class="ti ti-alert-hexagon-filled text-lg"></i>
-            <div class="ms-3 text-sm font-medium">
-                Login failed. OTP token is incorrect.
-            </div>
-        </div>
-        {% endif %}
-        {% if step == "login" %}
-        <!-- Login Dialoge -->
-        <div class="w-full max-w-md bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
-                <div class="px-4 flex flex-col items-center gap-4">
-                    <img class="min-h-4 max-w-full max-h-64" src="/img/logo-dark.png" alt="logo">
-                    <h1 class="text-3xl text-gray-900 dark:text-white">
-                        Identity Manager
-                    </h1>
-                </div>
-                <form class="space-y-4 md:space-y-6" action="/login" method="post" enctype="application/x-www-form-urlencoded">
-                    <div>
-                        <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                            Your email
-                        </label>
-                        <input type="text" name="username" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="john-doe" required="">
-                    </div>
-                    <div>
-                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                            Password
-                        </label>
-                        <input type="password" name="password" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="••••••••" required="">
-                    </div>
-                    <div class="flex items-center justify-end">
-                        <a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Forgot password?</a>
-                    </div>
-                    <button type="submit" class="w-full px-5 py-3 text-sm text-center text-white bg-primary-600 hover:bg-primary-700 rounded-lg">Sign in</button>
-                </form>
-            </div>
-        </div>
-        {% endif %}
-        {% if step == "otp" %}
-        <!-- TOTP Dialoge -->
-        <div class="w-full max-w-md bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
-                <div class="px-4 flex flex-col items-center gap-4">
-                    <img class="min-h-4 max-w-full max-h-64" src="/img/logo-dark.png" alt="logo">
-                    <h1 class="text-3xl text-gray-900 dark:text-white">
-                        Identity Manager
-                    </h1>
-                </div>
-                <form class="space-y-4 md:space-y-6" action="/login" method="post" enctype="application/x-www-form-urlencoded">
-                    <div>
-                        <label for="otpToken" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                            OTP Token
-                        </label>
-                        <input type="text" name="otpToken" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="12345" required="">
-                    </div>
-                    <button type="submit" class="w-full px-5 py-3 text-sm text-center text-white bg-primary-600 hover:bg-primary-700 rounded-lg">Continue</button>
-                </form>
-            </div>
-        </div>
-        <!-- / -->
-        {% endif %}
-    </div>
-</div>
-<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
-{% endblock %}

ui/master.njk

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-
-<head>
-    <title>Shell Script Hub</title>
-    {% include "./components/meta.njk" %}
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-
-        * {
-            box-sizing: border-box;
-        }
-    </style>
-    <script>
-        // dark / light mode
-        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark')
-        }
-
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: { 
-                            "50": "#eff6ff",
-                            "100": "#dbeafe",
-                            "200": "#bfdbfe",
-                            "300": "#93c5fd",
-                            "400": "#60a5fa",
-                            "500": "#3b82f6",
-                            "600": "#2563eb",
-                            "700": "#1d4ed8",
-                            "800": "#1e40af",
-                            "900": "#1e3a8a",
-                            "950": "#172554"
-                        }
-                    }
-                },
-                fontFamily: {
-                    'sans': [
-                        'Poppins',
-                        'Noto Sans'
-                    ]
-                }
-            }
-        }
-    </script>
-</head>
-
-<body class="bg-gray-100 dark:bg-gray-700 dark:text-white">
-    {% block content %}{% endblock %}
-</body>
-
-</html>

ui/profile.njk

@@ -1,229 +0,0 @@
-{% extends "./master.njk" %}
-
-{% block content %}
-<div id="app" class="w-full">
-    {% include "./components/navbar.njk" %}
-    <div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
-        <div class="flex flex-row gap-8 w-full text-gray-700">
-            <!-- Setting Menu -->
-            <div class="flex flex-col w-2/6">
-                <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
-                    <div class="flex w-full">
-                        <h2 class="text-4xl font-bold dark:text-gray-200">Settings</h2>
-                    </div>
-                    <div class="flex flex-col gap-3">
-                        {% if page == 'profile/personal' %}
-                        <a href="/profile/personal" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
-                        {% else %}
-                        <a href="/profile/personal" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
-                        {% endif %}
-                            Personal Data
-                        </a>
-
-                        {% if page == 'profile/security' %}
-                        <a href="/profile/security" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
-                        {% else %}
-                        <a href="/profile/security" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
-                        {% endif %}
-                            Security / Login
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="flex flex-col flex-auto gap-8">
-                <!-- Form: Personal Data -->
-                {% if page == 'profile/personal' %}
-                <div class="flex flex-col flex-auto">
-                    <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
-                        <div class="flex w-full">
-                            <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
-                                Personal Data
-                            </h2>
-                        </div>
-                        <div class="flex flex-col gap-3">
-                            <div class="flex flex-row align-center gap-4">
-                                <div class="flex flex-col w-1/2 gap-3">
-                                    <label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                        first name
-                                    </label>
-                                    <input type="text" name="firstName" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="John" value="{{ data.firstName }}">
-                                </div>
-                                <div class="flex flex-col w-1/2 gap-3">
-                                    <label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                        last name
-                                    </label>
-                                    <input type="text" name="lastName" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="Doe" value="{{ data.lastName }}">
-                                </div>
-                            </div>
-                            <div class="flex flex-col gap-3">
-                                <label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                    email
-                                </label>
-                                <input type="text" name="mail" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="john@doe" value="{{ data.mail }}">
-                            </div>
-                        </div>
-                        <div class="flex w-full justify-end">
-                            <button type="button" class="py-3 px-8 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-400 bg-gray-100 dark:bg-gray-600">
-                                Save
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-                {% if page == 'profile/security' %}
-                <!-- Form: Change Password -->
-                <div class="flex flex-col flex-auto">
-                    <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
-                        <div class="flex w-full">
-                            <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
-                                Change Password
-                            </h2>
-                        </div>
-                        <div class="flex flex-col gap-3">
-                            <div class="flex flex-col w-1/2 gap-3">
-                                <label for="leihgeber.person" class="text-sm font-medium text-gray-900 dark:text-white">
-                                    old Password
-                                </label>
-                                <input type="password" name="old_password" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="••••••••" value="">
-                            </div>
-                            <div class="flex flex-row align-center gap-4">
-                                <div class="flex flex-col w-1/2 gap-3">
-                                    <label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                        new Password
-                                    </label>
-                                    <input type="password" name="new_password_1" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="••••••••" value="">
-                                </div>
-                                <div class="flex flex-col flex-auto gap-3">
-                                    <label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                        repeat new Password
-                                    </label>
-                                    <input type="password" name="new_password_2" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="••••••••" value="">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Form: 2FA -->
-                <div class="flex flex-col flex-auto">
-                    <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
-                        <div class="flex w-full">
-                            <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
-                                Two-Factor Authentication
-                            </h2>
-                        </div>
-                        {% if otp.active != true %}
-                        <div class="flex w-full">
-                            <div class="flex items-center w-full px-4 py-2 text-sm bg-yellow-100 dark:bg-yellow-600 dark:text-white rounded-lg gap-4" role="alert">
-                                <i class="ti ti-alert-hexagon-filled text-lg"></i>
-                                <div class="ms-3 text-sm font-medium">
-                                    You have not yet configured 2-factor authentication.
-                                </div>
-                            </div>
-                        </div>
-                        {% endif %}
-                        <div class="flex gap-8">
-                            {% if otp.active == true %}
-                            <div class="flex flex-col w-48">
-                                <img class="rounded-lg w-full" src="{{ otp.qrcode }}">
-                            </div>
-                            <div class="flex flex-col flex-auto gap-4">
-                                <div class="flex flex-col lg:flex-row gap-4">
-                                    <div class="flex flex-col flex-auto gap-3">
-                                        <label class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                            your OTP-Secret:
-                                        </label>
-                                        <input type="text" name="otpsecret" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" value="{{ otp.otpsecret }}" readonly>
-                                    </div>
-                                    <button type="button" class="py-3 px-8 mt-auto text-sm text-left rounded-lg text-red-700 dark:text-red-300 hover:text-gray-100 bg-gray-100 dark:bg-gray-600 hover:bg-red-500">
-                                        Delete
-                                    </button>
-                                </div>
-                            </div>
-                            {% endif %}
-                        </div>
-                        <div class="flex flex-col w-full">
-                            
-                            <div id="faq" data-accordion="collapse" class="flex flex-col gap-3" data-active-classes="text-primary-700 dark:text-primary-300" data-inactive-classes="text-gray-500 dark:text-gray-400">
-                                <h2 id="faq-heading-1">
-                                    <a href="#" class="flex items-center justify-between w-full text-gray-500 dark:text-gray-400" data-accordion-target="#faq-body-1">
-                                        <span class="text-lg">How to use 2FA?</span>
-                                        <i data-accordion-icon class="ti ti-square-rounded-chevron-up text-2xl rotate-180"></i>
-                                    </a>
-                                </h2>
-                                <hr class="h-px bg-gray-200 border-0 dark:bg-gray-700">
-                                <div id="faq-body-1" class="hidden" aria-labelledby="faq-heading-1">
-                                    <p class="mb-6 text-gray-800 dark:text-gray-200 text-sm">Each time you authenticate, you must add your current 2FA code at the end of your password.</p>
-                                </div>
-                                <h2 id="faq-heading-2">
-                                    <a href="#" class="flex items-center justify-between w-full text-gray-500 dark:text-gray-400" data-accordion-target="#faq-body-2">
-                                        <span class="text-lg">Which apps can I use with the 2FA code?</span>
-                                        <i data-accordion-icon class="ti ti-square-rounded-chevron-up text-2xl rotate-180"></i>
-                                    </a>
-                                </h2>
-                                <hr class="h-px bg-gray-200 border-0 dark:bg-gray-700">
-                                <div id="faq-body-2" class="hidden" aria-labelledby="faq-heading-2">
-                                    <p class="mb-6 text-gray-800 dark:text-gray-200 text-sm">You can use any Google Authenticator compatible app. Keepass and Passbolt need the specific settings.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-                {% if page == 'profile/otp/create' %}
-                <!-- Form: create OTP-Secret -->
-                <div class="flex flex-col flex-auto">
-                    <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
-                        <div class="flex w-full">
-                            <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
-                                Two-Factor Authentication
-                            </h2>
-                        </div>
-                        <div class="flex w-full">
-                            <div class="flex flex-col w-full px-4 py-3 text-sm bg-blue-100 dark:bg-blue-600 dark:text-white rounded-lg gap-2" role="alert">
-                                <div class="flex items-center gap-4">
-                                    <span class="font-medium">next steps:</span>
-                                </div>
-                                <ul class="px-3 list-disc list-inside">
-                                    <li>scan the QR-Code with your authenticator app or add your secret manually</li>
-                                    <li>enter the generated one-time password in the input field for confirmation</li>
-                                    <li>validate the code from your authenticator app</li>
-                                </ul>
-                            </div>
-                        </div>
-                        <form class="flex gap-8" action="/profile/otp/create" method="post" enctype="application/x-www-form-urlencoded">
-                            <div class="flex flex-col w-48">
-                                <img class="rounded-lg w-full" src="{{ otp.qrcode }}">
-                            </div>
-                            <div class="flex flex-col flex-auto gap-4">
-                                <div class="flex flex-col lg:flex-row gap-4">
-                                    <div class="flex flex-col gap-3 lg:w-4/6">
-                                        <label class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                            your OTP-Secret:
-                                        </label>
-                                        <input type="text" name="otpsecret" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" value="{{ otp.otpsecret }}" readonly>
-                                    </div>
-                                    <div class="flex flex-col gap-3 lg:flex-auto">
-                                        <label class="w-full text-sm font-medium text-gray-900 dark:text-white">
-                                            TOTP Code:
-                                        </label>
-                                        <input type="text" name="otpcode" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" placeholder="123456">
-                                    </div>
-                                </div>
-                                <div class="flex flex-auto"></div>
-                                <div class="flex w-full justify-end gap-4">
-                                    <button type="submit" class="py-3 px-8 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-gray-100 bg-gray-100 dark:bg-gray-600 hover:bg-blue-500">
-                                        Validate
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                {% endif %}
-                <!-- / -->
-            </div>
-        </div>
-    </div>
-</div>
-<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
-{% endblock %}

views/admin/groups.njk

@@ -0,0 +1,22 @@
+{% extends "../master.njk" %}
+
+{% block content %}
+<div id="app" class="w-full">
+    {% include "../components/navbar.njk" %}
+    <div class="container relative mx-auto py-24 flex flex-col justify-center items-center gap-8">
+        <div class="flex flex-col gap-12 max-w-[60%] w-full">
+            <!-- Page Header -->
+            <div class="w-full flex flex-row justify-start items-center">
+                <h2 class="text-4xl font-bold">
+                    Manage Groups
+                </h2>
+            </div>
+            <div id="admin-group-section" class="flex flex-col w-full gap-8"
+                hx-get="/htmx/admin/groups/table"
+                hx-trigger="load">
+                <!-- load via HTMX -->
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

views/admin/users.njk

@@ -0,0 +1,27 @@
+{% extends "../master.njk" %}
+
+{% block content %}
+<div id="app" class="w-full">
+    {% include "../components/navbar.njk" %}
+    <div class="container relative mx-auto py-24 flex flex-col justify-center items-center gap-8">
+        <div class="flex flex-col gap-12 max-w-[60%] w-full">
+            <!-- Page Header -->
+            <div class="w-full flex flex-row justify-start items-center">
+                <h2 class="text-4xl font-bold">
+                    Manage Users
+                </h2>
+            </div>
+            <div id="admin-user-section" class="flex flex-col w-full"
+                hx-get="/htmx/admin/users/table"
+                hx-trigger="load">
+                <!-- Section: User Table -->
+                {# <div id="admin-user-section" class="flex flex-col flex-auto w-full"
+                    hx-get="/htmx/admin/users/table"
+                    hx-trigger="load">
+                    <!-- load via HTMX -->
+                </div> #}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

views/components/meta.njk

@@ -0,0 +1,170 @@
+<link rel="icon" type="image/x-icon" href="/img/favicon.svg">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script src="/js/tailwind.min.js"></script>
+<script src="/js/htmx.min.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="/styles/tabler-icons.min.css">
+<link rel="stylesheet" href="/styles/theme.default.css">
+<link rel="stylesheet" href="/styles/theme.light.css">
+<style>
+
+    body,
+    html {
+        /* width: 100svw; */
+        min-height: 100svh;
+        user-select: none;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+</style>
+<style type="text/tailwindcss">
+@layer components {
+    body {
+        @apply w-full flex flex-col items-center;
+        background: var(--color-base-bg-400);
+        color: var(--color-base-fg-100);
+    }
+
+    #navbar {
+        @apply: sticky top-0 z-50 w-full flex flex-col;
+        background: var(--color-base-bg-100);
+    }
+
+    #pageHeader {
+        @apply w-full flex flex-col items-center;
+        padding: 2rem 0rem 5rem;
+        margin: 0rem 0rem -3rem;
+        background: var(--color-base-bg-100);
+        color: var(--color-base-fg-100);
+    }
+
+    #pageContent {
+        @apply container flex flex-col items-center gap-8;
+        color: var(--color-base-fg-100);
+    }
+
+    .card {
+        @apply rounded-lg;
+        background: var(--color-base-bg-300);
+        border: 1px solid var(--color-base-bg-200);
+    }
+
+    .button {
+        @apply rounded-lg text-center font-medium;
+        @apply px-5 py-2.5;
+        border: 1px solid transparent;
+    }
+
+    .button-sm {
+        @apply rounded-lg text-center font-medium;
+        @apply px-3 py-2 text-sm;
+    }
+
+    .primary-outline,
+    .primary-outline-hover:hover {
+        border: 1px solid var(--color-primary-bg);
+    }
+
+    .primary-fill,
+    .primary-fill-hover:hover {
+        color: var(--color-primary-fg);
+        background: var(--color-primary-bg);
+    }
+
+    .primary-text,
+    .primary-text-hover:hover {
+        color: var(--color-primary-bg);
+    }
+
+    .danger-outline,
+    .danger-outline-hover:hover {
+        border: 1px solid var(--color-error-fg);
+    }
+
+    .danger-fill,
+    .danger-fill-hover:hover {
+        color: var(--color-error-fg);
+        background: var(--color-error-bg);
+    }
+
+    .danger-text,
+    .danger-text-hover:hover {
+        color: var(--color-error-fg);
+    }
+
+    .success-outline,
+    .success-outline-hover:hover {
+        border: 1px solid var(--color-success-fg);
+    }
+
+    .success-fill,
+    .success-fill-hover:hover {
+        color: var(--color-success-fg);
+        background: var(--color-success-bg);
+    }
+
+    .success-text,
+    .success-text-hover:hover {
+        color: var(--color-success-fg);
+    }
+
+    input,
+    textarea,
+    select {
+        @apply rounded-lg py-2 px-4 text-sm;
+        color: var(--color-base-fg-300);
+        background: var(--color-base-bg-200);
+        border: 1px solid var(--color-base-fg-300);
+    }
+
+    input:focus,
+    textarea:focus,
+    select:focus {
+        color: var(--color-base-fg-100);
+        border: 1px solid var(--color-primary-bg) !important;
+    }
+
+    input::placeholder {
+        color: var(--color-base-fg-300);
+    }
+
+    div.table {
+        @apply grid;
+    }
+
+    div.thead {
+        @apply grid grid-cols-subgrid col-span-full items-center;
+        @apply px-6 py-4 gap-8;
+        @apply border-b text-xs tracking-widest uppercase;
+        background: var(--color-base-bg-100);
+        border-color: var(--color-base-bg-300);
+        color: var(--color-base-fg-300);
+    }
+
+    div.trow {
+        @apply grid grid-cols-subgrid col-span-full items-center;
+        @apply px-6 py-4 gap-8;
+        @apply border-b;
+        border-color: var(--color-base-bg-100);
+    }
+
+    div.trow:hover {
+        background: var(--color-base-bg-300);
+    }
+
+    div.table > *:last-child {
+        @apply border-b-0;
+    }
+
+    .alert-danger {
+        @apply rounded-lg border-t-4;
+        @apply flex items-center px-4 py-3;
+        background: var(--color-base-bg-300);
+        border-color: var(--color-error-fg);
+        color: var(--color-error-fg);
+    }
+}
+</style>

views/components/navbar.njk

@@ -0,0 +1,36 @@
+<header id="navbar">
+    <nav class="container flex justify-between items-center py-4 mx-auto relative ">
+        <!-- Application Logo -->
+        <div class="flex items-center gap-4">
+            <span class="bg-center bg-no-repeat bg-contain" style="height: 2rem; width: var(--header-logo-width); background-image: var(--header-logo-source);">
+                <!-- Logo Source from theme.css -->
+            </span>
+            <span class="self-center text-xl font-semibold whitespace-nowrap">User Portal</span>
+        </div>
+
+        <div class="flex items-center gap-24">
+            <!-- Menu Items -->
+            <div class="flex items-center gap-12">
+                <a href="/admin/users" class="button primary-text-hover">
+                    Users
+                </a>
+                <a href="/admin/groups" class="button primary-text-hover">
+                    Groups
+                </a>
+            </div>
+
+            <!-- User Menu -->
+            <div class="flex items-center gap-12">
+                <a href="/logout" class="button primary-text-hover">
+                    Sign Out
+                </a>
+                <a href="/profile" class="button primary-text-hover">
+                    {{ user.firstName }} {{ user.lastName }}
+                </a>
+            </div>
+        </div>
+    </nav>
+</header>
+
+
+

views/htmx/admin/editGroup.njk

@@ -0,0 +1,45 @@
+<form class="flex flex-col gap-6 p-12" hx-post="/htmx/admin/groups/{{ group.id }}" hx-target="#admin-group-section">
+    <div class="w-full flex flex-row justify-between items-center">
+        <span class="text-2xl font-bold">
+            edit Group {{ group.name }}
+        </span>
+    </div>
+    <div class="flex flex-col gap-8">
+        <div class="flex flex-row align-center gap-4">
+            <div class="flex flex-col w-1/2 gap-3">
+                <label for="firstName" class="w-full text-sm font-medium">
+                    Group Name
+                </label>
+                <input type="text" name="name" placeholder="Group Name" value="{{ group.name }}">
+            </div>
+            <div class="flex flex-col w-1/2 gap-3">
+                <label for="lastName" class="w-full text-sm font-medium">
+                    Group ID
+                </label>
+                <input type="number" name="gidnumber" placeholder="1000" value="{{ group.gidnumber }}">
+            </div>
+        </div>
+        <div class="flex flex-row align-center gap-3">
+            <div class="flex flex-col w-full gap-2">
+                <span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
+                    LDAP Path
+                </span>
+                <span class="select-text">
+                    ou={{ group.name }},{{ ldap.baseDN }}
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="flex w-full justify-end gap-4">
+        <a href="#" class="button-sm"
+            hx-get="/htmx/admin/groups/table"
+            hx-target="#admin-group-section">
+            <i class="ti ti-arrow-left"></i>
+            Back
+        </a>
+        <button type="button" class="button-sm primary-fill">
+            <i class="ti ti-device-floppy"></i>
+            Save Changes
+        </button>
+    </div>
+</form>

views/htmx/admin/editUser.njk

@@ -0,0 +1,106 @@
+<div class="flex flex-col gap-8 w-full">
+    <form class="card flex flex-col gap-6 p-12" hx-post="/htmx/admin/groups/{{ group.id }}" hx-target="#admin-group-section">
+        <div class="w-full flex flex-row justify-between items-center">
+            <span class="text-2xl font-thin">
+                edit User {{ user.username }}
+            </span>
+        </div>
+        <div class="flex flex-col gap-8">
+            <div class="flex flex-row align-center gap-4">
+                <div class="flex flex-col w-1/2 gap-3">
+                    <label for="username" class="w-full text-sm font-medium">
+                        Username
+                    </label>
+                    <input type="text" name="username" placeholder="Username" value="{{ user.username }}">
+                </div>
+                <div class="flex flex-col w-1/2 gap-3">
+                    <label for="uidnumber" class="w-full text-sm font-medium">
+                        User ID
+                    </label>
+                    <input type="number" name="uidnumber" placeholder="1000" value="{{ user.uidnumber }}">
+                </div>
+            </div>
+            <div class="flex flex-row align-center gap-4">
+                <div class="flex flex-col w-1/2 gap-3">
+                    <label for="firstName" class="w-full text-sm font-medium">
+                        First Name
+                    </label>
+                    <input type="text" name="firstName" class="" placeholder="John" value="{{ user.firstName }}">
+                </div>
+                <div class="flex flex-col w-1/2 gap-3">
+                    <label for="lastName" class="w-full text-sm font-medium">
+                        Last Name
+                    </label>
+                    <input type="text" name="lastName" class="" placeholder="Doe" value="{{ user.lastName }}">
+                </div>
+            </div>
+            <div class="flex flex-row align-center gap-4">
+                <div class="flex flex-col w-1/2 gap-3">
+                    <label for="username" class="w-full text-sm font-medium">
+                        Primary Group
+                    </label>
+                    <select name="primaryGroup" class="">
+                        {% for group in groupList %}
+                            <option value="{{ group.gidnumber }}" {% if group.isPrimaryGroup %}selected{% endif %}>{{ group.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="flex flex-col w-1/2 gap-3">
+                    <label for="mail" class="w-full text-sm font-medium">
+                    Mail Address
+                </label>
+                <input type="text" name="mail" class="" placeholder="john@doe.com" value="{{ user.mail }}">
+                </div>
+            </div>
+        </div>
+        <div class="flex w-full justify-end gap-4">
+            <a href="#" class="button-sm"
+                hx-get="/htmx/admin/users/table"
+                hx-target="#admin-user-section">
+                <i class="ti ti-arrow-left"></i>
+                Back
+            </a>
+            <button type="button" class="button-sm primary-fill">
+                <i class="ti ti-device-floppy"></i>
+                Save Changes
+            </button>
+        </div>
+    </form>
+    <div class="card flex flex-col w-full">
+        <div class="w-full flex flex-row justify-between items-center py-5 px-8">
+            <span class="text-2xl font-thin">
+                manage Groups for {{ user.username }}
+            </span>
+        </div>
+        <div class="table grid-cols-[min-content_1fr_min-content]">
+            <!-- Table Header -->
+            <div class="thead font-bold py-2 border-b">
+                <div>GID</div>
+                <div>Name</div>
+                <div>Actions</div>
+            </div>
+            {% for group in groupList %}
+                <!-- Table Row -->
+                <div class="trow py-2 border-b">
+                    <div>{{ group.gidnumber }}</div>
+                    <div>{{ group.name }}</div>
+                    <div class="flex flex-row justify-end align-center gap-4">
+                        {% if not group.isPrimaryGroup and not group.isOtherGroup %}
+                        <a href="#" class="button-sm text-xs hover:underline success-fill whitespace-nowrap"
+                            hx-get="/htmx/admin/groups/{{ group.id }}"
+                            hx-target="#admin-group-section">
+                            <i class="ti ti-user-plus"></i>
+                        </a>
+                        {% else %}
+                        <a href="#" class="button-sm text-xs hover:underline danger-fill whitespace-nowrap"
+                            hx-get="/htmx/admin/groups/{{ group.id }}"
+                            hx-target="#admin-group-section">
+                            <i class="ti ti-user-minus"></i>
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>

views/htmx/admin/groupTable.njk

@@ -0,0 +1,41 @@
+<div class="card flex flex-col w-full">
+    <div class="w-full py-5 px-8 flex flex-row justify-between items-center">
+        <span class="text-2xl font-bold">
+            Users
+        </span>
+        <div class="flex flex-row gap-4 items-center">
+            <a href="#" class="button-sm primary-fill"
+                hx-get="/htmx/admin/group/create"
+                hx-target="#profile-data-section">
+                <i class="ti ti-users-plus"></i>
+                Create Group
+            </a>
+        </div>
+    </div>
+    <table class="w-full text-sm text-left">
+        <thead class="text-xs uppercase" style="background: var(--color-base-bg-200); color: var(--color-base-fg-300);">
+            <tr>
+                <th scope="col" class="px-6 py-3">
+                    Name
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for group in groupList %}
+            <tr class="border-b border-gray-700">
+                <th class="px-6 py-4 select-all font-medium whitespace-nowrap">
+                    {{group.name}}
+                </th>
+                <td class="px-6 py-4 text-right">
+                    <a href="#" class="font-medium hover:underline"
+                        hx-get="/htmx/admin/groups/{{group.id}}"
+                        hx-target="#admin-group-section">Edit</a>
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>

views/htmx/admin/userTable.njk

@@ -0,0 +1,61 @@
+<div class="card flex flex-col w-full">
+    <div class="w-full py-5 px-8 flex flex-row justify-between items-center">
+        <span class="text-2xl font-bold">
+            Users
+        </span>
+        <div class="flex flex-row gap-4 items-center">
+            <a href="#" class="button-sm primary-fill"
+                hx-get="/htmx/admin/user/create"
+                hx-target="#profile-data-section">
+                <i class="ti ti-user-plus"></i>
+                Create User
+            </a>
+        </div>
+    </div>
+    <table class="w-full text-sm text-left">
+        <thead class="text-xs uppercase" style="background: var(--color-base-bg-200); color: var(--color-base-fg-300);">
+            <tr>
+                <th scope="col" class="px-6 py-3">
+                    Name
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Mail
+                </th>
+                <th scope="col" class="px-6 py-3 text-center">
+                    Enabled
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for user in userList %}
+            <tr class="border-b dark:border-gray-700 hover:bg-gray-100 hover:dark:bg-gray-700">
+                <th class="px-6 py-4 select-all font-medium whitespace-nowrap">
+                    {{user.givenname}} {{user.sn}}
+                </th>
+                <td class="px-6 py-4 select-all">
+                    {{user.mail}}
+                </td>
+                {% if user.disabled == 1 %}
+                <td class="px-6 py-4 text-2xl text-center text-red-400">
+                    <i class="ti ti-square-rounded-x-filled"></i>
+                </td>
+                {% else %}
+                <td class="px-6 py-4 text-2xl text-center text-green-500">
+                    <i class="ti ti-square-rounded-check-filled"></i>
+                </td>
+                {% endif %}
+                <td class="px-6 py-4 text-right">
+                    <a href="#" class="font-medium hover:underline primary-text"
+                        hx-get="/htmx/admin/users/{{user.id}}"
+                        hx-target="#admin-user-section">
+                        Edit
+                    </a>
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>

views/htmx/authForm.njk

@@ -0,0 +1,46 @@
+<div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
+    {% for error in errors %}
+        <!-- Login Error -->
+        <div class="alert-danger w-full max-w-md" role="alert">
+            <i class="ti ti-alert-hexagon-filled text-lg"></i>
+            <div class="ms-3 text-sm font-medium">
+                {{ error.title }}: {{ error.detail }}
+            </div>
+        </div>
+    {% endfor %}
+    <!-- Login Dialoge -->
+    <div id="dialoge" class="card w-full max-w-md">
+        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+            <div class="px-4 flex flex-col items-center gap-4">
+                <span class="w-full block bg-center bg-no-repeat bg-contain" style="height: var(--login-logo-height); background-image: var(--login-logo-source);">
+                    <!-- Logo Source from theme.css -->
+                </span>
+                <h1 class="text-3xl">
+                    Welcome
+                </h1>
+                <h4 class="text-sm">
+                    Sign In to User-Portal
+                </h4>
+            </div>
+            <form class="space-y-4 md:space-y-6" hx-post="/htmx/authForm" hx-target="#app">
+                <div>
+                    <label for="username" class="block mb-2 text-sm font-medium">
+                        Username
+                    </label>
+                    <input type="text" name="username" class="w-full" placeholder="john-doe" required="">
+                </div>
+                <div>
+                    <label for="password" class="block mb-2 text-sm font-medium">
+                        Password
+                    </label>
+                    <input type="password" name="password" class="w-full" placeholder="••••••••" required="">
+                </div>
+                <div class="flex items-center justify-end">
+                    <a href="#" class="text-sm font-medium hover:underline">Forgot password?</a>
+                </div>
+                <button type="submit" class="w-full button primary-fill">Sign in</button>
+            </form>
+        </div>
+    </div>
+    <!-- / -->
+</div>

views/htmx/profile/editData.njk

@@ -0,0 +1,41 @@
+<form class="flex flex-col gap-6" hx-post="/htmx/profile/data/edit" hx-target="#profile-data-section">
+    <div class="flex w-full">
+        <span class="text-2xl font-bold">
+            edit Personal Data
+        </span>
+    </div>
+    <div class="flex flex-col gap-3">
+        <div class="flex flex-row align-center gap-4">
+            <div class="flex flex-col w-1/2 gap-3">
+                <label for="firstName" class="w-full text-sm font-medium">
+                    First Name
+                </label>
+                <input type="text" name="firstName" class="" placeholder="John" value="{{ data.firstName }}">
+            </div>
+            <div class="flex flex-col w-1/2 gap-3">
+                <label for="lastName" class="w-full text-sm font-medium">
+                    Last Name
+                </label>
+                <input type="text" name="lastName" class="" placeholder="Doe" value="{{ data.lastName }}">
+            </div>
+        </div>
+        <div class="flex flex-col gap-3">
+            <label for="mail" class="w-full text-sm font-medium">
+                Mail Address
+            </label>
+            <input type="text" name="mail" class="" placeholder="john@doe.com" value="{{ data.mail }}">
+        </div>
+    </div>
+    <div class="flex w-full justify-end gap-4">
+        <a href="#" class="button-sm"
+            hx-get="/htmx/profile/data/show"
+            hx-target="#profile-data-section">
+            <i class="ti ti-arrow-left"></i>
+            Back
+        </a>
+        <button type="button" class="button-sm primary-fill">
+            <i class="ti ti-device-floppy"></i>
+            Save Changes
+        </button>
+    </div>
+</form>

views/htmx/profile/editMFA.njk

@@ -0,0 +1,49 @@
+<!-- Form: create OTP-Secret -->
+<div class="flex flex-col flex-auto">
+    <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
+        <div class="flex w-full">
+            <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
+                Two-Factor Authentication
+            </h2>
+        </div>
+        <div class="flex w-full">
+            <div class="flex flex-col w-full px-4 py-3 text-sm bg-blue-100 dark:bg-blue-600 dark:text-white rounded-lg gap-2" role="alert">
+                <div class="flex items-center gap-4">
+                    <span class="font-medium">next steps:</span>
+                </div>
+                <ul class="px-3 list-disc list-inside">
+                    <li>scan the QR-Code with your authenticator app or add your secret manually</li>
+                    <li>enter the generated one-time password in the input field for confirmation</li>
+                    <li>validate the code from your authenticator app</li>
+                </ul>
+            </div>
+        </div>
+        <form class="flex gap-8" action="/profile/otp/create" method="post" enctype="application/x-www-form-urlencoded">
+            <div class="flex flex-col w-48">
+                <img class="rounded-lg w-full" src="{{ otp.qrcode }}">
+            </div>
+            <div class="flex flex-col flex-auto gap-4">
+                <div class="flex flex-col lg:flex-row gap-4">
+                    <div class="flex flex-col gap-3 lg:w-4/6">
+                        <label class="w-full text-sm font-medium text-gray-900 dark:text-white">
+                            your OTP-Secret:
+                        </label>
+                        <input type="text" name="otpsecret" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" value="{{ otp.otpsecret }}" readonly>
+                    </div>
+                    <div class="flex flex-col gap-3 lg:flex-auto">
+                        <label class="w-full text-sm font-medium text-gray-900 dark:text-white">
+                            TOTP Code:
+                        </label>
+                        <input type="text" name="otpcode" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" placeholder="123456">
+                    </div>
+                </div>
+                <div class="flex flex-auto"></div>
+                <div class="flex w-full justify-end gap-4">
+                    <button type="submit" class="py-3 px-8 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-gray-100 bg-gray-100 dark:bg-gray-600 hover:bg-blue-500">
+                        Validate
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

views/htmx/profile/editPasswd.njk

@@ -0,0 +1,32 @@
+<!-- Form: Change Password -->
+    <div class="flex flex-col flex-auto">
+        <div class="card flex flex-col px-8 py-6 gap-6">
+            <div class="flex w-full">
+                <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
+                    Change Password
+                </h2>
+            </div>
+            <div class="flex flex-col gap-3">
+                <div class="flex flex-col w-1/2 gap-3">
+                    <label for="leihgeber.person" class="text-sm font-medium text-gray-900 dark:text-white">
+                        old Password
+                    </label>
+                    <input type="password" name="old_password" class="" placeholder="••••••••" value="">
+                </div>
+                <div class="flex flex-row align-center gap-4">
+                    <div class="flex flex-col w-1/2 gap-3">
+                        <label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
+                            new Password
+                        </label>
+                        <input type="password" name="new_password_1" class="" placeholder="••••••••" value="">
+                    </div>
+                    <div class="flex flex-col flex-auto gap-3">
+                        <label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
+                            repeat new Password
+                        </label>
+                        <input type="password" name="new_password_2" class="" placeholder="••••••••" value="">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>

views/htmx/profile/showData.njk

@@ -0,0 +1,59 @@
+<div class="flex flex-col gap-8">
+    <div class="w-full flex flex-row justify-between items-center">
+        <span class="text-2xl font-bold">
+            Personal Data
+        </span>
+        <div class="flex flex-row gap-4 items-center">
+            <a href="#" class="button-sm primary-fill"
+                hx-get="/htmx/profile/data/edit"
+                hx-target="#profile-data-section">
+                <i class="ti ti-pencil"></i>
+                Edit Data
+            </a>
+            <a href="#" class="button-sm primary-fill"
+                hx-get="/htmx/profile/password/edit"
+                hx-target="#profile-data-section">
+                <i class="ti ti-key"></i>
+                Edit Password
+            </a>
+        </div>
+    </div>
+    <div class="flex flex-col gap-8">
+        <div class="flex flex-row align-center gap-4">
+            <div class="flex flex-col w-1/2 gap-2">
+                <span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
+                    Username
+                </span>
+                <span class="select-text">
+                    {{ data.username }}
+                </span>
+            </div>
+            <div class="flex flex-col w-1/2 gap-2">
+                <span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
+                    User ID
+                </span>
+                <span class="select-text">
+                    {{ data.uidnumber }}
+                </span>
+            </div>
+        </div>
+        <div class="flex flex-row align-center gap-4">
+            <div class="flex flex-col w-1/2 gap-2">
+                <span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
+                    Name
+                </span>
+                <span class="select-text">
+                    {{ data.firstName }} {{ data.lastName }}
+                </span>
+            </div>
+            <div class="flex flex-col w-1/2 gap-2">
+                <span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
+                    Mail Address
+                </span>
+                <span class="select-text">
+                    {{ data.mail }}
+                </span>
+            </div>
+        </div>
+    </div>
+</div>

views/htmx/profile/showMFA.njk

@@ -0,0 +1,51 @@
+<!-- Form: 2FA -->
+<div class="flex flex-col gap-6">
+    <div class="w-full flex flex-row justify-between items-center">
+        <span class="text-2xl font-bold">
+            Multi-Factor Authentication
+        </span>
+        <div class="flex flex-row gap-4 items-center">
+            {% if otpsecret and otpsecret.length > 0 %}
+            <a href="#" class="button-sm primary-fill">
+                <i class="ti ti-cross"></i>
+                disable TOTP
+            </a>
+            {% else %}
+            <a href="#" class="button-sm primary-fill">
+                <i class="ti ti-check"></i>
+                enable TOTP
+            </a>
+            {% endif %}
+        </div>
+    </div>
+    {% if otp.active != true %}
+    <div class="flex w-full">
+        <div class="flex items-center w-full px-4 py-2 text-sm bg-yellow-100 dark:bg-yellow-600 dark:text-white rounded-lg gap-4" role="alert">
+            <i class="ti ti-alert-hexagon-filled text-lg"></i>
+            <div class="ms-3 text-sm font-medium">
+                You have not yet configured 2-factor authentication.
+            </div>
+        </div>
+    </div>
+    {% endif %}
+    <div class="flex gap-8">
+        {% if otp.active == true %}
+        <div class="flex flex-col w-48">
+            <img class="rounded-lg w-full" src="{{ otp.qrcode }}">
+        </div>
+        <div class="flex flex-col flex-auto gap-4">
+            <div class="flex flex-col lg:flex-row gap-4">
+                <div class="flex flex-col flex-auto gap-3">
+                    <label class="w-full text-sm font-medium text-gray-900 dark:text-white">
+                        your OTP-Secret:
+                    </label>
+                    <input type="text" name="otpsecret" class="" value="{{ otp.otpsecret }}" readonly>
+                </div>
+                <button type="button" class="button primary-fill">
+                    Delete
+                </button>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>

views/htmx/totpForm.njk

@@ -0,0 +1,34 @@
+<div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
+    {% for error in errors %}
+        <!-- TOTP Error -->
+        <div class="alert-danger w-full max-w-md" role="alert">
+            <i class="ti ti-alert-hexagon-filled text-lg"></i>
+            <div class="ms-3 text-sm font-medium">
+                {{ error.title }}: {{ error.detail }}
+            </div>
+        </div>
+    {% endfor %}
+    <!-- TOTP Dialoge -->
+    <div class="card w-full max-w-md">
+        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+            <div class="px-4 flex flex-col items-center gap-4">
+                <span class="w-full block bg-center bg-no-repeat bg-contain" style="height: var(--login-logo-height); background-image: var(--login-logo-source);">
+                    <!-- Logo Source from theme.css -->
+                </span>
+                <h1 class="text-3xl">
+                    Identity Manager
+                </h1>
+            </div>
+            <form class="space-y-4 md:space-y-6" hx-post="/htmx/totpForm" hx-target="#app">
+                <div>
+                    <label for="otpToken" class="block mb-2 text-sm font-medium">
+                        OTP Token
+                    </label>
+                    <input type="text" name="otpToken" class="w-full" placeholder="123456" required="">
+                </div>
+                <button type="submit" class="w-full button primary-fill">Continue</button>
+            </form>
+        </div>
+    </div>
+    <!-- / -->
+</div>

views/login.njk

@@ -0,0 +1,12 @@
+{% extends "./master.njk" %}
+
+{% block content %}    
+<div id="app"
+    class="w-full flex align-center"
+    style="min-height: 100svh;"
+    hx-get="/htmx/authForm"
+    hx-trigger="load">
+    <!-- HTMX Content -->
+</div>
+<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+{% endblock %}

views/master.njk

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <title>Account Manager</title>
+    {% include "./components/meta.njk" %}
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
+        * {
+            box-sizing: border-box;
+        }
+    </style>
+    <script>
+        
+        if (localStorage.getItem('color-theme') != undefined) {
+            document.documentElement.classList.add(
+                localStorage.getItem('color-theme')
+            );
+            console.log(localStorage.getItem('color-theme'));
+        } else {
+            document.documentElement.classList.add('theme-default');
+            console.log(localStorage.getItem('theme-default'));
+        }
+
+        tailwind.config = {
+            theme: {
+                fontFamily: {
+                    'sans': [
+                        'Poppins',
+                        'Noto Sans'
+                    ]
+                }
+            }
+        }
+    </script>
+</head>
+
+<body>
+    {% block content %}{% endblock %}
+</body>
+
+</html>

views/profile.njk

@@ -0,0 +1,33 @@
+{% extends "./master.njk" %}
+
+{% block content %}
+<div id="app" class="w-full">
+    {% include "./components/navbar.njk" %}
+    <div class="container relative mx-auto py-24 flex flex-col justify-center items-center gap-8">
+        <div class="flex flex-col gap-12 max-w-[60%] w-full">
+            <!-- Page Header -->
+            <div class="w-full flex flex-row justify-start items-center">
+                <h2 class="text-4xl font-bold">
+                    Your User-Profile
+                </h2>
+            </div>
+            <div class="flex flex-col gap-8 w-full">
+                <!-- Section: Personal Data -->
+                <div id="profile-data-section" class="flex flex-col flex-auto card p-12"
+                    hx-get="/htmx/profile/data/show"
+                    hx-trigger="load">
+                    <!-- load via HTMX -->
+                </div>
+                <!-- Section: Multi Factor Authentification -->
+                <div id="profile-mfa-section" class="flex flex-col flex-auto card p-12"
+                    hx-get="/htmx/profile/mfa/show"
+                    hx-trigger="load">
+                    <!-- load via HTMX -->
+                </div>
+                <!-- / -->
+            </div>
+        </div>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+{% endblock %}