ajax -- user management and user edit

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "whitespaceSensitivity": "ignore",
+  "bracketLine": true,
+  "useTabs": true,
+  "tabWidth": 2,
+	"printWidth": 700,
+  "plugins": ["prettier-plugin-go-template"]
+}

controllers/user_management.go

@@ -2,13 +2,13 @@ package controllers
 
 import (
 	"fmt"
-	"time"
 
 	"github.com/Theodor-Springmann-Stiftung/musenalm/app"
 	"github.com/Theodor-Springmann-Stiftung/musenalm/dbmodels"
 	"github.com/Theodor-Springmann-Stiftung/musenalm/middleware"
 	"github.com/Theodor-Springmann-Stiftung/musenalm/pagemodels"
 	"github.com/Theodor-Springmann-Stiftung/musenalm/templating"
+	"github.com/pocketbase/dbx"
 	"github.com/pocketbase/pocketbase/core"
 	"github.com/pocketbase/pocketbase/tools/router"
 )
@@ -55,8 +55,8 @@ func (p *UserManagementPage) Setup(router *router.Router[*core.RequestEvent], ap
 func GetSessionsCounts(app core.App) ([]*SessionCount, error) {
 	query := app.RecordQuery(dbmodels.SESSIONS_TABLE).
 		Select("COUNT(*) AS count", dbmodels.SESSIONS_USER_FIELD).
-		GroupBy(dbmodels.SESSIONS_USER_FIELD).
-		OrderBy("count DESC")
+		AndWhere(dbx.HashExp{dbmodels.SESSIONS_STATUS_FIELD: dbmodels.TOKEN_STATUS_VALUES[0]}).
+		GroupBy(dbmodels.SESSIONS_USER_FIELD)
 
 	var counts []*SessionCount
 	err := query.All(&counts)
@@ -70,14 +70,14 @@ func GetSessionsCounts(app core.App) ([]*SessionCount, error) {
 func (p *UserManagementPage) GET(engine *templating.Engine, app core.App) HandleFunc {
 	return func(e *core.RequestEvent) error {
 		data := make(map[string]any)
-		p.getData(app, data)
+		p.getData(app, templating.NewRequest(e), data)
 		SetRedirect(data, e)
 
 		return engine.Response200(e, p.Template, data, p.Layout)
 	}
 }
 
-func (p *UserManagementPage) getData(app core.App, data map[string]any) error {
+func (p *UserManagementPage) getData(app core.App, req *templating.Request, data map[string]any) error {
 	records := []*core.Record{}
 	err := app.RecordQuery(dbmodels.USERS_TABLE).OrderBy(dbmodels.USERS_NAME_FIELD).All(&records)
 	if err != nil {
@@ -102,22 +102,17 @@ func (p *UserManagementPage) getData(app core.App, data map[string]any) error {
 	data["users"] = users
 	data["len"] = len(users)
 	data["session_counts"] = scmap
-
-	csrfNonce, csrfToken, err := CSRF_CACHE.GenerateTokenBundleWithExpiration(2 * time.Hour)
-	if err != nil {
-		return fmt.Errorf("Konnte kein CSRF-Token generieren.")
-	}
-	data["csrf_nonce"] = csrfNonce
-	data["csrf_token"] = csrfToken
+	data["csrf_token"] = req.Session().Token
 
 	return nil
 }
 
 func (p *UserManagementPage) ErrorResponse(engine *templating.Engine, e *core.RequestEvent, err error) error {
 	data := make(map[string]any)
+	req := templating.NewRequest(e)
 	data["error"] = err.Error()
 
-	err = p.getData(e.App, data)
+	err = p.getData(e.App, req, data)
 	if err != nil {
 		engine.Response500(e, fmt.Errorf("Nutzerdaten konnten nicht geladen werden: %w", err), data)
 	}
@@ -136,14 +131,14 @@ func (p *UserManagementPage) POSTDeactivate(engine *templating.Engine, app core.
 		formdata := struct {
 			User string `form:"uid"`
 			CSRF string `form:"csrf_token"`
-			Nonce string `form:"csrf_nonce"`
 		}{}
 
 		if err := e.BindBody(&formdata); err != nil {
 			return p.ErrorResponse(engine, e, fmt.Errorf("Formulardaten ungültig: %w", err))
 		}
 
-		if _, err := CSRF_CACHE.ValidateTokenBundle(formdata.Nonce, formdata.CSRF); err != nil {
+		req := templating.NewRequest(e)
+		if err := req.CheckCSRF(formdata.CSRF); err != nil {
 			return p.ErrorResponse(engine, e, err)
 		}
 
@@ -165,9 +160,8 @@ func (p *UserManagementPage) POSTDeactivate(engine *templating.Engine, app core.
 		data := make(map[string]any)
 		data["success"] = "Nutzer " + u.Name() + "(" + u.Email() + ") wurde deaktiviert."
 
-		p.getData(app, data)
+		p.getData(app, req, data)
 
-		req := templating.NewRequest(e)
 		if req.User() != nil && req.User().Id == u.Id {
 			return e.Redirect(303, "/login/")
 		}
@@ -182,14 +176,14 @@ func (p *UserManagementPage) POSTActivate(engine *templating.Engine, app core.Ap
 		formdata := struct {
 			User string `form:"uid"`
 			CSRF string `form:"csrf_token"`
-			Nonce string `form:"csrf_nonce"`
 		}{}
 
 		if err := e.BindBody(&formdata); err != nil {
 			return p.ErrorResponse(engine, e, fmt.Errorf("Formulardaten ungültig: %w", err))
 		}
 
-		if _, err := CSRF_CACHE.ValidateTokenBundle(formdata.Nonce, formdata.CSRF); err != nil {
+		req := templating.NewRequest(e)
+		if err := req.CheckCSRF(formdata.CSRF); err != nil {
 			return p.ErrorResponse(engine, e, err)
 		}
 
@@ -211,9 +205,8 @@ func (p *UserManagementPage) POSTActivate(engine *templating.Engine, app core.Ap
 		data := make(map[string]any)
 		data["success"] = "Nutzer " + u.Name() + "(" + u.Email() + ") wurde aktiviert."
 
-		p.getData(app, data)
+		p.getData(app, req, data)
 
-		req := templating.NewRequest(e)
 		if req.User() != nil && req.User().Id == u.Id {
 			return e.Redirect(303, "/login/")
 		}
@@ -228,14 +221,14 @@ func (p *UserManagementPage) POSTLogout(engine *templating.Engine, app core.App)
 		formdata := struct {
 			User string `form:"uid"`
 			CSRF string `form:"csrf_token"`
-			Nonce string `form:"csrf_nonce"`
 		}{}
 
 		if err := e.BindBody(&formdata); err != nil {
 			return p.ErrorResponse(engine, e, fmt.Errorf("Formulardaten ungültig: %w", err))
 		}
 
-		if _, err := CSRF_CACHE.ValidateTokenBundle(formdata.Nonce, formdata.CSRF); err != nil {
+		req := templating.NewRequest(e)
+		if err := req.CheckCSRF(formdata.CSRF); err != nil {
 			return p.ErrorResponse(engine, e, err)
 		}
 
@@ -250,9 +243,8 @@ func (p *UserManagementPage) POSTLogout(engine *templating.Engine, app core.App)
 		data := make(map[string]any)
 		data["success"] = "Nutzer " + u.Name() + "(" + u.Email() + ") wurde überall ausgeloggt."
 
-		p.getData(app, data)
+		p.getData(app, req, data)
 
-		req := templating.NewRequest(e)
 		if req.User() != nil && req.User().Id == u.Id {
 			return e.Redirect(301, "/login/")
 		}

views/.prettierrc

@@ -1,10 +1,10 @@
 {
-  bracketSameLine: true,
-  bracketSpacing: true,
-  whitespaceSensitivity: "ignore",
-  proseWrap: "always",
-  bracketLine: true,
-  useTabs: true,
-  tabWidth: 2,
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "whitespaceSensitivity": "ignore",
+  "bracketLine": true,
+  "useTabs": true,
+  "tabWidth": 2,
+	"printWidth": 700,
   "plugins": ["prettier-plugin-go-template"]
 }

views/layouts/components/_head.gohtml

@@ -15,8 +15,8 @@
 {{ end }}
 
 
-<script src="/assets/js/alpine.ajax.min.js"></script>
-<script src="/assets/js/alpine.min.js"></script>
+<script src="/assets/js/alpine.ajax.min.js" defer></script>
+<script src="/assets/js/alpine.min.js" defer></script>
 <script src="/assets/js/htmx.min.js"></script>
 <script src="/assets/js/htmx-response-targets.js"></script>
 <script src="/assets/js/mark.min.js" defer></script>

views/routes/user/edit/body.gohtml

@@ -4,26 +4,17 @@
 <div class="flex container-normal bg-slate-100 mx-auto !pt-36 px-8">
 	<div class="flex-col w-full">
 		{{ if $model.redirect_url }}
-			<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950">
-				<i class="ri-arrow-left-s-line"></i> Zurück
-			</a>
+			<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950"> <i class="ri-arrow-left-s-line"></i> Zurück </a>
 		{{ else }}
-			<a href="/" class="text-gray-700 hover:text-slate-950">
-				<i class="ri-arrow-left-s-line"></i> Startseite
-			</a>
+			<a href="/" class="text-gray-700 hover:text-slate-950"> <i class="ri-arrow-left-s-line"></i> Startseite </a>
 		{{ end }}
 		<h1 class="text-2xl self-baseline w-full my-6 font-bold text-slate-900">Profil bearbeiten</h1>
 	</div>
 </div>
+
 <div class="flex container-normal mx-auto px-8 mt-4">
 	<div class="flex-col max-w-2xl w-full">
-		<form
-			class="w-full grid grid-cols-3 gap-4"
-			id="changeuserform"
-			x-target="changeuserform footer"
-			hx-boost="false"
-			method="POST"
-			x-data="{ openpw: false }">
+		<form class="w-full grid grid-cols-3 gap-4" id="changeuserform" x-target="changeuserform footer" hx-boost="false" method="POST" x-data="{ openpw: false }">
 			<div class="col-span-3">
 				{{ template "_usermessage" $model }}
 			</div>
@@ -31,44 +22,21 @@
 				class="rounded-xs col-span-3 border-2 border-transparent px-3
 				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
 				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
-				<label for="username" class="text-sm text-gray-700 font-bold">
-					Name <i class="ri-text"></i>
-				</label>
-				<input
-					type="text"
-					name="name"
-					id="name"
-					class="mt-1 block w-full focus:border-none focus:outline-none"
-					placeholder=""
-					required
-					autocomplete="off"
-					value="{{ $model.user.Name }}"
-					autofocus />
+				<label for="username" class="text-sm text-gray-700 font-bold"> Name <i class="ri-text"></i> </label>
+				<input type="text" name="name" id="name" class="mt-1 block w-full focus:border-none focus:outline-none" placeholder="" required autocomplete="off" value="{{ $model.user.Name }}" autofocus />
 			</div>
 			<div
 				class="rounded-xs col-span-3 border-2 border-transparent px-3
 				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
 				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
-				<label for="username" class="text-sm text-gray-700 font-bold">
-					E-Mail <i class="ri-at-line"></i>
-				</label>
-				<input
-					type="email"
-					name="username"
-					id="username"
-					autocomplete="off"
-					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
-					placeholder=""
-					required
-					value="{{ $model.user.Email }}" />
+				<label for="username" class="text-sm text-gray-700 font-bold"> E-Mail <i class="ri-at-line"></i> </label>
+				<input type="email" name="username" id="username" autocomplete="off" class="mt-1 block w-full rounded-md focus:border-none focus:outline-none" placeholder="" required value="{{ $model.user.Email }}" />
 			</div>
 			<div
 				class="rounded-xs col-span-3 border-2 border-transparent px-3
 				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
 				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
-				<label for="role" class="text-sm text-gray-700 font-bold">
-					Rolle <i class="ri-user-3-line"></i>
-				</label>
+				<label for="role" class="text-sm text-gray-700 font-bold"> Rolle <i class="ri-user-3-line"></i> </label>
 				<select
 					{{ if not (eq $model.request.user.Role "Admin") -}}
 						disabled
@@ -78,15 +46,9 @@
 					autocomplete="off"
 					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none
 					disabled:opacity-50">
-					<option value="User" {{ if eq $model.user.Role "User" }}selected{{ end }}>
-						Benutzer
-					</option>
-					<option value="Editor" {{ if eq $model.user.Role "Editor" }}selected{{ end }}>
-						Redakteur
-					</option>
-					<option value="Admin" {{ if eq $model.user.Role "Admin" }}selected{{ end }}>
-						Administrator
-					</option>
+					<option value="User" {{ if eq $model.user.Role "User" }}selected{{ end }}>Benutzer</option>
+					<option value="Editor" {{ if eq $model.user.Role "Editor" }}selected{{ end }}>Redakteur</option>
+					<option value="Admin" {{ if eq $model.user.Role "Admin" }}selected{{ end }}>Administrator</option>
 				</select>
 			</div>
 			{{- if and
@@ -98,29 +60,20 @@
 					<div class="align-top">
 						<i class="ri-information-line text-gray-700 mt-2 mr-2 align-top"></i>
 					</div>
-					<p class="text-sm text-gray-700 max-w-[80ch]">
-						Achtung! Wenn Sie Ihre eigenen Berechtigungen ändern, verlieren Sie die Möglichkeit,
-						diese Änderungen rückgängig zu machen. Weiter werden Sie von allen laufenden Sitzungen
-						abgemeldet und müssen sich erneut anmelden.
-					</p>
+					<p class="text-sm text-gray-700 max-w-[80ch]">Achtung! Wenn Sie Ihre eigenen Berechtigungen ändern, verlieren Sie die Möglichkeit, diese Änderungen rückgängig zu machen. Weiter werden Sie von allen laufenden Sitzungen abgemeldet und müssen sich erneut anmelden.</p>
 				</div>
 			{{- else if (eq $model.request.user.Role "Admin") -}}
 				<div class="flex flex-row col-span-3">
 					<div class="align-top">
 						<i class="ri-information-line text-gray-700 mt-2 mr-2 align-top"></i>
 					</div>
-					<p class="text-sm text-gray-700 max-w-[80ch]">
-						Achtung! Wenn Sie die Rolle eines Benutzers ändern, wird dieser unter Umständen von
-						laufenden Sitzungen abgemeldet und muss sich erneut anmelden.
-					</p>
+					<p class="text-sm text-gray-700 max-w-[80ch]">Achtung! Wenn Sie die Rolle eines Benutzers ändern, wird dieser unter Umständen von laufenden Sitzungen abgemeldet und muss sich erneut anmelden.</p>
 				</div>
 			{{- end -}}
 			<div class="col-span-3">
 				<div class="flex items-center">
 					<input type="checkbox" name="openpw" id="openpw" x-model="openpw" class="mr-2" />
-					<label for="openpw" class="text-sm text-gray-700 font-bold">
-						Passwort ändern <i class="ri-key-2-line"></i>
-					</label>
+					<label for="openpw" class="text-sm text-gray-700 font-bold"> Passwort ändern <i class="ri-key-2-line"></i> </label>
 				</div>
 			</div>
 			{{- if not (eq $model.request.user.Role "Admin") -}}
@@ -130,13 +83,7 @@
 				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
 				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
 					<label for="password_old" class="text-sm text-gray-700 font-bold"> Altes Passwort </label>
-					<input
-						x-bind:type="openpw ? 'password' : 'hidden'"
-						name="password_old"
-						id="password_old"
-						class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
-						placeholder=""
-						required />
+					<input x-bind:type="openpw ? 'password' : 'hidden'" name="password_old" id="password_old" class="mt-1 block w-full rounded-md focus:border-none focus:outline-none" placeholder="" required />
 				</div>
 			{{- end -}}
 			<div
@@ -145,42 +92,19 @@
 				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
 				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
 				<label for="password" class="text-sm text-gray-700 font-bold"> Neues Passwort </label>
-				<input
-					x-bind:type="openpw ? 'password' : 'hidden'"
-					minlength="10"
-					name="password"
-					id="password"
-					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
-					placeholder=""
-					required />
+				<input x-bind:type="openpw ? 'password' : 'hidden'" minlength="10" name="password" id="password" class="mt-1 block w-full rounded-md focus:border-none focus:outline-none" placeholder="" required />
 			</div>
 			<div
 				x-bind:style="!openpw ? 'display:none' : ''"
 				class="rounded-xs col-span-3 border-2 border-transparent px-3
 				py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
 				bg-slate-200 focus-within:bg-slate-100 transition-all duration-100">
-				<label for="password_repeat" class="text-sm text-gray-700 font-bold">
-					Passwort wiederholen
-				</label>
-				<input
-					x-bind:type="openpw ? 'password' : 'hidden'"
-					minlength="10"
-					name="password_repeat"
-					id="password_repeat"
-					class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
-					placeholder=""
-					required />
+				<label for="password_repeat" class="text-sm text-gray-700 font-bold"> Passwort wiederholen </label>
+				<input x-bind:type="openpw ? 'password' : 'hidden'" minlength="10" name="password_repeat" id="password_repeat" class="mt-1 block w-full rounded-md focus:border-none focus:outline-none" placeholder="" required />
 			</div>
 			<div class="col-span-3 flex justify-end" x-bind:style="!openpw ? 'display:none' : ''">
-				<input
-					type="checkbox"
-					name="logout"
-					id="logout"
-					class="mr-2"
-					x-bind:style="!openpw ? 'display:none' : ''" />
-				<label for="logout" class="text-sm text-gray-700 font-bold">
-					überall ausloggen <i class="ri-logout-box-line"></i>
-				</label>
+				<input type="checkbox" name="logout" id="logout" class="mr-2" x-bind:style="!openpw ? 'display:none' : ''" />
+				<label for="logout" class="text-sm text-gray-700 font-bold"> überall ausloggen <i class="ri-logout-box-line"></i> </label>
 			</div>
 			<div class="col-span-1 col-start-2">
 				<a
@@ -192,18 +116,7 @@
 				</a>
 			</div>
 			<div class="col-span-1 col-start-3">
-				<input
-					type="hidden"
-					name="csrf_nonce"
-					id="csrf_nonce"
-					required
-					value="{{ $model.csrf_nonce }}" />
-				<input
-					type="hidden"
-					name="csrf_token"
-					id="csrf_token"
-					required
-					value="{{ $model.csrf_token }}" />
+				<input type="hidden" name="csrf_token" id="csrf_token" required value="{{ $model.csrf_token }}" />
 				<button
 					type="submit"
 					class="w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md
@@ -216,47 +129,17 @@
 
 		<div class="col-span-1 mt-12 justify-self-end self-end items-end flex flex-row justify-end">
 			{{ if not $model.user.Deactivated }}
-				<form action="/user/{{ $model.user.Id }}/deactivate/" method="POST">
-					<input
-						type="hidden"
-						name="csrf_nonce"
-						id="csrf_nonce"
-						required
-						value="{{ $model.csrf_nonce }}" />
-					<input
-						type="hidden"
-						name="csrf_token"
-						id="csrf_token"
-						required
-						value="{{ $model.csrf_token }}" />
-					<button
-						type="submit"
-						type="button"
-						class="cursor-pointer text-red-700 hover:text-red-900 pr-4 mt-6">
+				<form id="actbtn" x-init @ajax:before="confirm('Der Benutzer {{ $model.user.Name }} wird deaktiviert und kann sich nicht mehr einloggen. Sicher?') || $event.preventDefault()" action="/user/{{ $model.user.Id }}/deactivate/" method="POST" hx-boost="false" x-target="user-message footer actbtn" x-target.away="_top">
+					<input type="hidden" name="csrf_token" id="csrf_token" required value="{{ $model.csrf_token }}" />
+					<button type="submit" type="button" class="cursor-pointer text-red-700 hover:text-red-900 pr-4 mt-6">
 						<i class="ri-prohibited-2-line"></i>
 						Deaktivieren
 					</button>
 				</form>
 			{{ else }}
-				<form action="/user/{{ $model.user.Id }}/activate/" method="POST">
-					<input
-						type="hidden"
-						name="csrf_nonce"
-						id="csrf_nonce"
-						required
-						value="{{ $model.csrf_nonce }}" />
-					<input
-						type="hidden"
-						name="csrf_token"
-						id="csrf_token"
-						required
-						value="{{ $model.csrf_token }}" />
-					<button
-						type="submit"
-						type="button"
-						class="cursor-pointer text-green-700 hover:text-green-900 pr-4 mt-6">
-						<i class="ri-restart-line"></i> Aktivieren
-					</button>
+				<form id="actbtn" x-init @ajax:before="confirm('Der Benutzer {{ $model.user.Name }} wird wieder aktiviert und kann sich einloggen. Sicher?') || $event.preventDefault()" action="/user/{{ $model.user.Id }}/activate/" method="POST" hx-boost="false" x-target="user-message footer actbtn" x-target.away="_top">
+					<input type="hidden" name="csrf_token" id="csrf_token" required value="{{ $model.csrf_token }}" />
+					<button type="submit" type="button" class="cursor-pointer text-green-700 hover:text-green-900 pr-4 mt-6"><i class="ri-restart-line"></i> Aktivieren</button>
 				</form>
 			{{ end }}
 		</div>

views/routes/user/management/body.gohtml

@@ -4,13 +4,9 @@
 <div class="flex container-normal bg-slate-100 mx-auto !pt-36 px-8">
 	<div class="flex-col w-full">
 		{{ if $model.redirect_url }}
-			<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950">
-				<i class="ri-arrow-left-s-line"></i> Zurück
-			</a>
+			<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950"> <i class="ri-arrow-left-s-line"></i> Zurück </a>
 		{{ else }}
-			<a href="/" class="text-gray-700 hover:text-slate-950">
-				<i class="ri-arrow-left-s-line"></i> Startseite
-			</a>
+			<a href="/" class="text-gray-700 hover:text-slate-950"> <i class="ri-arrow-left-s-line"></i> Startseite </a>
 		{{ end }}
 		<h1
 			class="text-2xl self-baseline w-full my-6 font-bold
@@ -19,24 +15,10 @@
 		</h1>
 	</div>
 </div>
+
 <div class="flex container-normal mx-auto px-8 mt-4">
 	<div class="flex-col w-full">
-		<div id="user-message">
-			{{ if $model.success }}
-				<div
-					class="text-green-800 text-sm mt-2 rounded bg-green-200 p-2 font-bold border-green-700
-				border-2 mb-3">
-					{{ $model.success }}
-				</div>
-			{{ end }}
-			{{ if $model.error }}
-				<div
-					class="text-red-800 text-sm mt-2 rounded bg-red-200 p-2 font-bold border-red-700
-				border-2 mb-3">
-					{{ $model.error }}
-				</div>
-			{{ end }}
-		</div>
+		{{ template "_usermessage" $model }}
 		<table class="user-mgmt w-full text-lg">
 			<thead>
 				<tr>
@@ -49,7 +31,7 @@
 			</thead>
 			<tbody>
 				{{ range $u := $model.users }}
-					<tr class="{{ if $u.Deactivated }}deactivated{{ end }}">
+					<tr class="{{ if $u.Deactivated }}deactivated{{ end }}" id="user-{{ $u.Id }}">
 						<td>{{ $u.Name }}</td>
 						<td>{{ $u.Email }}</td>
 						{{- if eq $u.Role "Admin" -}}
@@ -61,61 +43,64 @@
 						{{- end -}}
 						<td>{{ index $model.session_counts $u.Id }}</td>
 						<td>
-							<form class="flex flex-row gap-x-4 justify-end">
-								<input type="hidden" name="uid" id="uid" required value="{{ $u.Id }}" />
-								<input
-									type="hidden"
-									name="csrf_nonce"
-									id="csrf_nonce"
-									required
-									value="{{ $model.csrf_nonce }}" />
-								<input
-									type="hidden"
-									name="csrf_token"
-									id="csrf_token"
-									required
-									value="{{ $model.csrf_token }}" />
-								<!-- INFO: we dont use request.fullpath here, since this can be /logout /activate
-									or /deactivate, which would not work with the redirectTo query param -->
+							<div class="flex flex-row justify-end items-center gap-2">
+								<!-- INFO: User edit button -->
+								<div class="edit-button">
 									<tool-tip position="top">
 										<div class="data-tip font-bold hidden">Bearbeiten</div>
-									<button
-										formmethod="GET"
-										formaction="/user/{{ $u.Id }}/edit?redirectTo=/user/management">
+										<a href="/user/{{ $u.Id }}/edit?redirectTo=/user/management" class="text-gray-200 no-underline">
 											<i class="ri-pencil-line"></i>
-									</button>
+										</a>
 									</tool-tip>
+								</div>
+
+								<!-- INFO: User logout button -->
+								<form
+									{{- if eq $u.Id $model.request.user.Id }}
+										x-init @ajax:before="confirm('Sie werden ausgeloggt und müssen sich neu einloggen. Sicher?') || $event.preventDefault()"
+									{{ end }}
+									class=""
+									method="POST"
+									action="/user/management/logout/"
+									hx-boost="false"
+									x-target="user-{{ $u.Id }} user-message"
+									x-target.away="_top">
+									<input type="hidden" name="uid" id="uid" required value="{{ $u.Id }}" />
+									<input type="hidden" name="csrf_token" id="csrf_token" required value="{{ $model.csrf_token }}" />
 									<tool-tip position="top">
 										<div class="data-tip font-bold hidden">Logout</div>
-									<button
-										formmethod="POST"
-										formaction="/user/management/logout/"
-										class="text-orange-800 bg-orange-200 hover:bg-orange-300">
+										<button class="text-red-900 bg-red-200 hover:bg-red-300">
 											<i class="ri-logout-box-r-line"></i>
 										</button>
 									</tool-tip>
+								</form>
+
+								<!-- INFO: User activate/deactivate button -->
 								{{- if $u.Deactivated }}
+									<form x-init @ajax:before="confirm('Der Benutzer {{ $u.Name }} wird wieder aktiviert und kann sich einloggen. Sicher?') || $event.preventDefault()" class="" method="POST" action="/user/management/activate/" hx-boost="false" x-target="user-{{ $u.Id }} user-message">
+										<input type="hidden" name="uid" id="uid" required value="{{ $u.Id }}" />
+										<input type="hidden" name="csrf_token" id="csrf_token" required value="{{ $model.csrf_token }}" />
 										<tool-tip position="top">
 											<div class="data-tip font-bold hidden">Reaktivieren</div>
-										<button
-											formmethod="POST"
-											formaction="/user/management/activate/"
-											class="text-green-800 bg-green-200 hover:bg-green-300">
+											<button class="bg-green-600 hover:bg-green-700">
 												<i class="ri-restart-line"></i>
 											</button>
 										</tool-tip>
+									</form>
 								{{- else -}}
+									<form x-init @ajax:before="confirm('Der Benutzer {{ $u.Name }} wird ausgeloggt und kann sich nicht mehr einloggen. Sicher?') || $event.preventDefault()" class="" method="POST" action="/user/management/deactivate/" hx-boost="false" x-target="user-{{ $u.Id }} user-message" x-target.away="_top">
+										<input type="hidden" name="uid" id="uid" required value="{{ $u.Id }}" />
+										<input type="hidden" name="csrf_token" id="csrf_token" required value="{{ $model.csrf_token }}" />
 										<tool-tip position="top">
 											<div class="data-tip font-bold hidden">Deaktivieren</div>
-										<button
-											formmethod="POST"
-											formaction="/user/management/deactivate/"
-											class="text-red-800 bg-red-200 hover:bg-red-300">
+											<button class="bg-red-600 hover:bg-red-700">
 												<i class="ri-prohibited-2-line"></i>
 											</button>
 										</tool-tip>
-								{{- end -}}
 									</form>
+								{{- end -}}
+
+							</div>
 						</td>
 					</tr>
 				{{ end }}

views/transform/site.css

@@ -560,7 +560,8 @@
 		@apply text-gray-400 line-through;
 	}
 
-	.user-mgmt form button {
+	.user-mgmt form button,
+	.user-mgmt .edit-button {
 		@apply bg-slate-700 text-gray-200 text-base rounded-xs font-sans transition-all duration-75 px-3 py-1.5 hover:bg-slate-800 hover:text-white cursor-pointer;
 	}
 
@@ -765,7 +766,7 @@
 		@apply bg-gray-100 text-gray-700 border border-gray-300 py-1 px-1.5 text-sm rounded hover:bg-gray-200 hover:border-gray-400 disabled:bg-gray-50 disabled:text-gray-400 disabled:border-gray-200 disabled:opacity-70 disabled:cursor-not-allowed;
 	}
 	.mss-create-new-button.hidden {
-		@apply hidden !important; /* Ensure it hides */
+		@apply !hidden; /* Ensure it hides */
 	}
 
 	.mss-options-list {