Let admins create and delete users in Benutzerverwaltung, modernize list

Wire up two previously-unwired stored procedures for the usr module:
- fis_admin_createUserAccount gained the missing @authaccount +
  intranet_admin auth gate, a duplicate-email check, and now returns
  the (possibly auto-generated) password so it can be emailed to the
  new user, mirroring fis_admin_resetUserPassword's pattern.
- fis_admin_delUserAccount gained the same missing auth gate plus a
  guard against an admin deleting their own account.

New /do/usr/create and /do/usr/delete endpoints in
IntranetController.AdminUsers.cs, a "Neuer Benutzer" button and a
"Benutzer löschen" ribbon action in fis.usr.js, and unit tests for the
new welcome-email content (BuildWelcomeEmail).

Also restyle the user list (fis.usr.scss) from a plain bordered table
to a card-style row grid with avatar-initial badges and status pills,
matching the Admin dashboard's visual language.

Documented as ADR 0020 and in the admin-user-management concept doc.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Fuchs/wwwroot/web/fis.usr.css

@@ -16,29 +16,87 @@
 /* #1b4379  #0033b3 */
 /*neu: #56a532  ; alt: rgb(32,144,119);*/
 /* 10% sw */
-.usrfrm > table {
-  border-collapse: collapse;
-  margin: 2rem;
+.usrfrm {
+  padding: 1.5rem 2rem;
 }
-.usrfrm > table th {
-  padding: 0.2rem 0.35rem;
-  border: 1px solid #CCC;
+.usrfrm .usr_grid {
+  border: 1px solid #e2e2e2;
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(50, 50, 50, 0.1);
+  overflow: hidden;
 }
-.usrfrm > table td {
-  padding: 0.2rem 0.35rem;
-  border: 1px solid #CCC;
+.usrfrm .usr_row {
+  display: grid;
+  grid-template-columns: 2.75rem 1.6fr 1.8fr 8rem;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.55rem 1rem;
+  border-bottom: 1px solid #eee;
 }
-.usrfrm > table tr {
+.usrfrm .usr_row:last-child {
+  border-bottom: none;
+}
+.usrfrm .usr_row_hd {
+  background: rgb(27, 67, 121);
+  color: #fff;
+  font-weight: bold;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 0.5rem 1rem;
+}
+.usrfrm .usr_row:not(.usr_row_hd) {
   cursor: pointer;
+  transition: background-color 0.12s ease-in-out;
 }
-.usrfrm > table tr:nth-child(2n+1) td {
-  background-color: #EEE;
-}
-.usrfrm > table tr:hover td {
+.usrfrm .usr_row:not(.usr_row_hd):hover {
   background-color: #f3f6fb;
 }
-.usrfrm > table tr.selected td {
-  background-color: lightblue;
+.usrfrm .usr_row:not(.usr_row_hd).selected {
+  background-color: rgba(86, 165, 50, 0.12);
+  box-shadow: inset 3px 0 0 rgb(86, 165, 50);
+}
+.usrfrm .usr_avatar {
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 50%;
+  background: rgb(27, 67, 121);
+  color: #fff;
+  font-size: 0.78rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.usrfrm .usr_col_name {
+  font-weight: 600;
+  color: #222;
+}
+.usrfrm .usr_col_email {
+  color: #555;
+  overflow-wrap: anywhere;
+}
+.usrfrm .usr_pill {
+  display: inline-block;
+  padding: 0.1rem 0.6rem;
+  border-radius: 1rem;
+  font-size: 0.78rem;
+  font-weight: bold;
+  white-space: nowrap;
+}
+.usrfrm .usr_pill_on {
+  background: #e2f3da;
+  color: #2f6d18;
+}
+.usrfrm .usr_pill_off {
+  background: #ececec;
+  color: #777;
+}
+.usrfrm .usr_empty {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  color: #777;
 }
 .usrfrm .usr_err {
   padding: 1rem 2rem;
@@ -46,6 +104,31 @@
   font-weight: bold;
 }
 
+@media (max-width: 640px) {
+  .usrfrm {
+    padding: 0.75rem;
+  }
+  .usrfrm .usr_row {
+    grid-template-columns: 2.25rem 1fr;
+    grid-template-areas: "avatar name" "avatar email" "avatar status";
+  }
+  .usrfrm .usr_row_hd {
+    display: none;
+  }
+  .usrfrm .usr_avatar {
+    grid-area: avatar;
+  }
+  .usrfrm .usr_col_name {
+    grid-area: name;
+  }
+  .usrfrm .usr_col_email {
+    grid-area: email;
+    font-size: 0.85rem;
+  }
+  .usrfrm .usr_col_status {
+    grid-area: status;
+  }
+}
 .usr_groups_dlg {
   padding: 0.25rem 0;
 }

Fuchs/wwwroot/web/fis.usr.de.js

@@ -7,6 +7,20 @@ let $uct = {
     , active: 'Aktiv'
     , disabled: 'Deaktiviert'
     , loadfail: 'Die Benutzerliste konnte nicht geladen werden.'
+    , empty: 'Es sind keine Benutzerkonten vorhanden.'
+    , newuser: 'Neuer Benutzer'
+    , newuser_btn: 'Neuer Benutzer'
+    , firstname_field: 'Vorname'
+    , name_field: 'Nachname'
+    , title_field: 'Titel'
+    , gender_field: 'Anrede'
+    , gender_m: 'Herr'
+    , gender_f: 'Frau'
+    , mobile_field: 'Mobil'
+    , create_sent: 'Das Benutzerkonto wurde angelegt, die Zugangsdaten wurden per E-Mail versendet.'
+    , create_noemail: 'Das Benutzerkonto wurde angelegt, die Zugangsdaten konnten aber nicht per E-Mail zugestellt werden.'
+    , delete: 'Benutzer löschen'
+    , delete_confirm: 'Soll der Benutzer "{0}" wirklich gelöscht werden?'
     , pwdreset: 'Passwort zurücksetzen'
     , pwdreset_btn: 'Zurücksetzen'
     , pwd_field: 'Neues Passwort'
@@ -21,7 +35,10 @@ let $uct = {
         requirements: 'Das Passwort erfüllt nicht die Mindestanforderungen (mind. 6 Zeichen).',
         duplicate_email: 'Diese E-Mail-Adresse ist bereits einem anderen Benutzerkonto zugeordnet.',
         reset_failed: 'Das Passwort konnte nicht zurückgesetzt werden.',
-        change_failed: 'Die Änderung konnte nicht gespeichert werden.'
+        change_failed: 'Die Änderung konnte nicht gespeichert werden.',
+        create_failed: 'Das Benutzerkonto konnte nicht angelegt werden.',
+        delete_failed: 'Der Benutzer konnte nicht gelöscht werden.',
+        cannot_delete_self: 'Das eigene Benutzerkonto kann nicht gelöscht werden.'
     }
     , err_generic: 'Die Änderung konnte nicht gespeichert werden.'
 };
@@ -40,7 +57,7 @@ let $usr = {
     },
     /* Default ribbon (nothing selected). */
     eM: function (r) {
-        let m = [];
+        let m = [{ lbl: $uct.newuser_btn, fnc: $usr.createDlg }];
         if (bool(r, false) === true) { m.push({ lbl: $uct.rel, fnc: $usr.renderLst }); }
         return $('#topbar').ocmsmenu(m);
     },
@@ -49,28 +66,43 @@ let $usr = {
         return $('#topbar').ocmsmenu([
             { lbl: $uct.pwdreset, fnc: function () { $usr.pwdResetDlg(rw); } },
             { lbl: $uct.email, fnc: function () { $usr.emailDlg(rw); } },
-            { lbl: $uct.groups, fnc: function () { $usr.groupsDlg(rw); } }
+            { lbl: $uct.groups, fnc: function () { $usr.groupsDlg(rw); } },
+            { lbl: $uct.delete, fnc: function () { $usr.deleteUser(rw); } }
         ]);
     },
+    /* initials for the avatar badge, e.g. "Nadine Beckmann" -> "NB" */
+    initials: function (firstname, name) {
+        let f = (firstname || '').trim().charAt(0), n = (name || '').trim().charAt(0);
+        return (f + n).toUpperCase() || '?';
+    },
     renderLst: function () {
         let usrlst = $fis.frm_list(true, true).ldng(1), usrfrm = $$.dc('usrfrm', usrlst);
         $usr.eM(true);
         $ocms.postXT({
             url: $ocms.url('usr/list'), success: function (r) {
                 usrfrm.empty();
-                let ts = $$.tblset({}, usrfrm);
-                let thr = $$.tr(ts.hd);
-                $.each([$uct.col_name, $uct.col_email, $uct.col_status], function (i, lbl) {
-                    $$.th(thr).text(lbl);
-                });
+                let grid = $$.dc('usr_grid', usrfrm);
+                let hdr = $$.dc('usr_row usr_row_hd', grid);
+                $$.dc('usr_col_avatar', hdr);
+                $$.dc('usr_col_name', hdr).text($uct.col_name);
+                $$.dc('usr_col_email', hdr).text($uct.col_email);
+                $$.dc('usr_col_status', hdr).text($uct.col_status);
+                if ((r.users || []).length === 0) {
+                    $$.dc('usr_empty', grid).text($uct.empty);
+                    return;
+                }
                 $.each(r.users || [], function (ri, rw) {
-                    let tr = $$.tr(ts.bdy, { id: 'usr' + rw.useraccount_id });
-                    $$.td(tr).text(`${rw.firstname || ''} ${rw.name || ''}`.trim());
-                    $$.td(tr).text(rw.email || '');
-                    $$.td(tr).text(bool(rw.disabled, false) === true ? $uct.disabled : $uct.active);
-                    tr.click(function () {
-                        tr.toggleClass('selected').siblings().rC('selected');
-                        if (tr.is('.selected') === true) { $usr.iMn(rw); } else { $usr.eM(true); }
+                    let disabled = bool(rw.disabled, false) === true;
+                    let row = $$.dc('usr_row', grid, { id: 'usr' + rw.useraccount_id });
+                    $$.dc('usr_avatar', row).text($usr.initials(rw.firstname, rw.name));
+                    $$.dc('usr_col_name', row).text(`${rw.firstname || ''} ${rw.name || ''}`.trim());
+                    $$.dc('usr_col_email', row).text(rw.email || '');
+                    $$.dc('usr_col_status', row).append(
+                        $$.dc(disabled ? 'usr_pill usr_pill_off' : 'usr_pill usr_pill_on').text(disabled ? $uct.disabled : $uct.active)
+                    );
+                    row.click(function () {
+                        row.toggleClass('selected').siblings().rC('selected');
+                        if (row.is('.selected') === true) { $usr.iMn(rw); } else { $usr.eM(true); }
                     });
                 });
             }, error: function () {
@@ -79,6 +111,45 @@ let $usr = {
             }, complete: function () { usrlst.ldng(0); }
         });
     },
+    createDlg: function () {
+        $ocms.dlgform([
+            { name: 'firstname', label: $uct.firstname_field, type: 'string', required: true },
+            { name: 'name', label: $uct.name_field, type: 'string', required: true },
+            { name: 'email', label: $uct.email_field, type: 'email', required: true },
+            { name: 'title', label: $uct.title_field, type: 'string' },
+            { name: 'gender', label: $uct.gender_field, type: 'select', url: [['', ''], ['m', $uct.gender_m], ['f', $uct.gender_f]] },
+            { name: 'mobile', label: $uct.mobile_field, type: 'string' }
+        ], {
+            title: $uct.newuser,
+            button: $uct.newuser_btn,
+            submit: function (e) {
+                let c = $(this).ldng(1);
+                let qs = c.serializeObject(true, { typedvalues: true });
+                $ocms.postXT({
+                    url: $ocms.url('usr/create'), data: qs, success: function (response) {
+                        alert(response.emailed === true ? $uct.create_sent : $uct.create_noemail);
+                        c.trigger('modal_close');
+                    }, error: function (jqXHR) {
+                        let code = ((jqXHR || {}).responseJSON || {}).error;
+                        alert($uct.err[code] || $uct.err_generic);
+                    }, complete: function () { c.ldng(0); $usr.renderLst(); }
+                });
+            }
+        });
+    },
+    deleteUser: function (rw) {
+        let displayName = `${rw.firstname || ''} ${rw.name || ''}`.trim();
+        if (confirm(string($uct.delete_confirm, [displayName]))) {
+            $ocms.postXT({
+                url: $ocms.url('usr/delete'), data: { useraccount_id: rw.useraccount_id }, success: function () {
+                    $usr.eM(true);
+                }, error: function (jqXHR) {
+                    let code = ((jqXHR || {}).responseJSON || {}).error;
+                    alert($uct.err[code] || $uct.err_generic);
+                }, complete: function () { $usr.renderLst(); }
+            });
+        }
+    },
     pwdResetDlg: function (rw) {
         $ocms.dlgform([
             { name: 'useraccount_id', type: 'hidden', value: rw.useraccount_id },

Fuchs/wwwroot/web/fis.usr.min.css

@@ -1 +1 @@
-.usrfrm>table{border-collapse:collapse;margin:2rem}.usrfrm>table td,.usrfrm>table th{padding:.2rem .35rem;border:1px solid #ccc}.usrfrm>table tr{cursor:pointer}.usrfrm>table tr:nth-child(2n+1) td{background-color:#eee}.usrfrm>table tr:hover td{background-color:#f3f6fb}.usrfrm>table tr.selected td{background-color:#add8e6}.usrfrm .usr_err{padding:1rem 2rem;color:#b00020;font-weight:700}.usr_groups_dlg{padding:.25rem 0}.usr_groups_dlg .usr_group_row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid #eee}.usr_groups_dlg .usr_group_row:last-child{border-bottom:none}.usr_groups_dlg .usr_group_row input[type=checkbox]{margin:0}.usr_groups_dlg .usr_group_row label{margin:0;font-weight:400}
+.usrfrm{padding:1.5rem 2rem}.usrfrm .usr_grid{border:1px solid #e2e2e2;border-radius:.5rem;background:#fff;box-shadow:0 1px 3px rgba(50,50,50,.1);overflow:hidden}.usrfrm .usr_row{display:grid;grid-template-columns:2.75rem 1.6fr 1.8fr 8rem;align-items:center;gap:.75rem;padding:.55rem 1rem;border-bottom:1px solid #eee}.usrfrm .usr_row:last-child{border-bottom:none}.usrfrm .usr_row_hd{background:#1b4379;color:#fff;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.02em;padding:.5rem 1rem}.usrfrm .usr_row:not(.usr_row_hd){cursor:pointer;transition:background-color .12s ease-in-out}.usrfrm .usr_row:not(.usr_row_hd):hover{background-color:#f3f6fb}.usrfrm .usr_row:not(.usr_row_hd).selected{background-color:rgba(86,165,50,.12);box-shadow:inset 3px 0 0 #56a532}.usrfrm .usr_avatar{width:2.1rem;height:2.1rem;border-radius:50%;background:#1b4379;color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}.usrfrm .usr_col_name{font-weight:600;color:#222}.usrfrm .usr_col_email{color:#555;overflow-wrap:anywhere}.usrfrm .usr_pill{display:inline-block;padding:.1rem .6rem;border-radius:1rem;font-size:.78rem;font-weight:700;white-space:nowrap}.usrfrm .usr_pill_on{background:#e2f3da;color:#2f6d18}.usrfrm .usr_pill_off{background:#ececec;color:#777}.usrfrm .usr_empty{padding:1.5rem 1rem;text-align:center;color:#777}.usrfrm .usr_err{padding:1rem 2rem;color:#b00020;font-weight:700}@media (max-width:640px){.usrfrm{padding:.75rem}.usrfrm .usr_row{grid-template-columns:2.25rem 1fr;grid-template-areas:"avatar name" "avatar email" "avatar status"}.usrfrm .usr_row_hd{display:none}.usrfrm .usr_avatar{grid-area:avatar}.usrfrm .usr_col_name{grid-area:name}.usrfrm .usr_col_email{grid-area:email;font-size:.85rem}.usrfrm .usr_col_status{grid-area:status}}.usr_groups_dlg{padding:.25rem 0}.usr_groups_dlg .usr_group_row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid #eee}.usr_groups_dlg .usr_group_row:last-child{border-bottom:none}.usr_groups_dlg .usr_group_row input[type=checkbox]{margin:0}.usr_groups_dlg .usr_group_row label{margin:0;font-weight:400}