domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/user-editor.html

@@ -1,19 +1,155 @@
-<div class="view-header">
-    <h1><span data-icon="user"></span> <span id="editor-title">New User</span></h1>
-    <div class="view-header-actions">
-        <button id="cancel-btn" class="btn btn-ghost">Cancel</button>
-    </div>
-</div>
+<!-- User editor (#/users/new, #/users/edit/:id). Bound with M.applyBindings - see
+     admin/js/views/user-editor.js, which also draws the profile fields from the user-profiles schema and inserts
+     the role / project chip templates (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner ("Users › <name>") is the heading; Back and Save are banner actions. -->
+<div class="uex">
+    <p class="uex-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+    <p class="uex-note" data-bind-hidden="!loading.value">Loading…</p>
+
+    <p class="uex-alert" data-bind-hidden="loading.value || !lockedReason.value">
+        <span data-icon="lock" data-icon-size="15"></span>
+        <span data-bind-text="lockedReason.value"></span>
+    </p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="user-form-container"></div>
+    <div class="uex-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit" data-icon-size="14"></span>
+        <span data-bind-text="dirtyText">You have unsaved changes.</span>
+        <span class="uex-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannotSave.value">
+            <span data-icon="check" data-icon-size="13"></span> <span data-bind-text="saveText">Save</span></button>
     </div>
-</div>
 
-<div class="card mt-4" id="profile-card" style="display:none;">
-    <div class="card-header"><h2><span data-icon="user"></span> Profile</h2></div>
-    <div class="card-body">
-        <div id="profile-form-container"></div>
+    <div class="uex-card uex-who" data-bind-hidden="loading.value || loadError.value">
+        <span class="uex-avatar" aria-hidden="true" data-bind-text="avatar.value"></span>
+        <span class="uex-who-main">
+            <strong data-bind-text="shownName.value"></strong>
+            <small data-bind-text="shownEmail.value"></small>
+            <small class="uex-facts" data-bind-text="factsText.value"></small>
+        </span>
+        <span class="uex-chips">
+            <span class="uex-chip is-primary" data-bind-hidden="!isSelf.value">You</span>
+            <span class="uex-chip is-ok" data-bind-text="roleText.value"></span>
+            <span class="uex-chip is-warn" data-bind-hidden="isActive.value">Inactive</span>
+        </span>
     </div>
+
+    <fieldset class="uex-fields" data-bind-disabled="locked.value || saving.value" data-bind-hidden="loading.value || loadError.value">
+        <div class="uex-card">
+            <div class="uex-card-title">Account
+                <span data-help="The name shown in the admin and on anything they author. The email is what they sign in with, and where password resets go - no two accounts may share one."></span></div>
+            <div class="uex-grid">
+                <div>
+                    <label class="form-label" for="uex-name">Full name <span class="text-danger">*</span></label>
+                    <input id="uex-name" type="text" class="form-input" maxlength="100" autocomplete="off" placeholder="Jane Smith" data-model="name.value">
+                    <small class="uex-err" data-bind-hidden="!err.value.name" data-bind-text="err.value.name"></small>
+                </div>
+                <div>
+                    <label class="form-label" for="uex-email">Email <span class="text-danger">*</span></label>
+                    <input id="uex-email" type="email" class="form-input" maxlength="200" autocomplete="off" placeholder="jane@example.com" data-model="email.value">
+                    <small class="uex-err" data-bind-hidden="!emailErr.value" data-bind-text="emailErr.value"></small>
+                </div>
+                <div>
+                    <label class="form-label" for="uex-pw"><span data-bind-text="pwLabel.value">Password</span>
+                        <span data-help-title="Password" data-help="At least 8 characters. When editing, leave it empty to keep the current password. It is never kept as a draft - if you leave the screen, it is typed again."></span></label>
+                    <input id="uex-pw" type="password" data-bind-type="showPw.value ? 'text' : 'password'" class="form-input" autocomplete="new-password"
+                           data-bind-placeholder="pwPlaceholder.value" data-model="password.value">
+                    <small class="uex-err" data-bind-hidden="!err.value.password" data-bind-text="err.value.password"></small>
+                    <label class="uex-show"><input type="checkbox" data-model="showPw.value"> Show what I type</label>
+                </div>
+                <div class="uex-setting">
+                    <label class="form-label" for="uex-active">Active account
+                        <span data-help="An inactive account cannot sign in. Nothing it made is removed - switch it back on at any time. You cannot switch off your own account."></span></label>
+                    <input id="uex-active" type="checkbox" class="form-switch" data-model="isActive.value" data-bind-disabled="isSelf.value"
+                           data-bind-title="isSelf.value ? 'You cannot switch off your own account' : ''">
+                </div>
+            </div>
+        </div>
+
+        <div class="uex-card">
+            <div class="uex-card-title">Roles
+                <span data-help-title="Roles" data-help="The primary role is the badge shown beside their name, and what seniority is compared on. Additional roles add their permissions on top - someone can be, say, a recruiter AND a content editor; the most senior role they hold decides who may manage them. You can only give roles below your own; a role they already hold can always be kept."></span></div>
+            <div class="uex-grid">
+                <div>
+                    <label class="form-label" for="uex-role">Primary role <span class="text-danger">*</span></label>
+                    <select id="uex-role" class="form-input uex-role-select" data-model="role.value"></select>
+                    <small class="uex-err" data-bind-hidden="!err.value.role" data-bind-text="err.value.role"></small>
+                </div>
+                <div class="uex-wide">
+                    <span class="form-label">Additional roles</span>
+                    <div class="uex-pick uex-roles" data-each="extraChips.value key=name"></div>
+                    <small class="uex-hint" data-bind-hidden="extraChips.value.length">No other roles to add.</small>
+                    <small class="uex-err" data-bind-hidden="!err.value.additionalRoles" data-bind-text="err.value.additionalRoles"></small>
+                </div>
+            </div>
+        </div>
+
+        <div class="uex-card" data-bind-hidden="!hasProjects.value">
+            <div class="uex-card-title">Projects
+                <span data-help-title="Projects" data-help="Owned by: where this user is filed in the sidebar's Projects section - administrative only. Access: which projects' pages, collections and forms they can see and edit - leave it all unticked for no restriction. Core is always visible."></span></div>
+            <div class="uex-grid">
+                <div>
+                    <label class="form-label" for="uex-owner">Owned by project</label>
+                    <select id="uex-owner" name="ownedByProject" class="form-input uex-owner-select" data-model="ownedByProject.value"></select>
+                </div>
+                <div class="uex-wide">
+                    <span class="form-label">Project access</span>
+                    <div class="uex-pick uex-projects" data-each="projectChips.value key=slug"></div>
+                    <small class="uex-hint" data-bind-text="accessHint.value"></small>
+                </div>
+            </div>
+        </div>
+
+        <div class="uex-card" data-bind-hidden="!hasProfile.value">
+            <div class="uex-card-title">Profile
+                <span data-help="Extra details about this user. Which ones are asked for is set in the User Profiles collection."></span></div>
+            <div class="uex-grid uex-profile"></div>
+        </div>
+    </fieldset>
 </div>
+
+<style>
+.uex { display: flex; flex-direction: column; gap: .75rem; max-width: 60rem; }
+.uex [hidden] { display: none !important; }
+.uex-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
+.uex-fields:disabled { opacity: .75; }
+.uex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.uex-note.is-bad { color: var(--dm-danger); }
+.uex-alert { margin: 0; display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.uex-dirty { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); position: sticky; top: 0; z-index: 2; }
+.uex-dirty .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.uex-spacer { flex: 1; }
+.uex-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .7rem; }
+.uex-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.uex-who { flex-direction: row; align-items: center; gap: .9rem; flex-wrap: wrap; }
+.uex-avatar { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0;
+    font-weight: 700; color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 14%, transparent); }
+.uex-who-main { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
+.uex-who-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.uex-facts { margin-top: .15rem; }
+.uex-chips { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
+.uex-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.uex-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.uex-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.uex-chip.is-primary { background: color-mix(in srgb, var(--dm-primary) 16%, transparent); color: var(--dm-primary); }
+.uex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
+.uex-wide { grid-column: 1 / -1; }
+.uex .form-label { display: flex; align-items: center; gap: .3rem; }
+.uex-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.uex-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.uex-show { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dm-text-xs); color: var(--dm-text-muted); cursor: pointer; margin-top: .3rem; }
+.uex-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; align-self: end; padding-bottom: .4rem; }
+.uex-setting .form-label { margin: 0; }
+.uex-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
+.uex-pick-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--dm-border); border-radius: 999px; padding: .2rem .65rem;
+    background: none; color: var(--dm-text); font: inherit; font-size: var(--dm-text-sm); cursor: pointer; }
+.uex-pick-chip:hover:not(:disabled) { border-color: var(--dm-primary); }
+.uex-pick-chip.is-on { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); border-color: var(--dm-primary); color: var(--dm-primary); }
+.uex-pick-chip:disabled { opacity: .5; cursor: not-allowed; }
+.uex-pick-chip small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.uex-check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin-right: .8rem; }
+@media (max-width: 640px) { .uex-grid { grid-template-columns: 1fr; } }
+</style>

package/admin/js/templates/users.html

@@ -1,12 +1,72 @@
-<div class="view-header">
-    <h1><span data-icon="users"></span> Users</h1>
-    <div id="users-header-actions">
-        <a href="#/users/new" class="btn btn-primary"><span data-icon="plus"></span> New User</a>
-    </div>
-</div>
+<!-- Users. Bound with M.applyBindings - see admin/views/users.js, which also inserts the row template
+     (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the Tool
+     banner above is the heading, and New user is a banner action. -->
+<div class="usx">
+    <p class="usx-note">Everyone who can sign in to this admin, with their role and when they last signed in.
+        <span data-help-title="Users" data-help="A role decides what someone can do (System › Roles). You can edit your own account, and anyone whose role is junior to yours - not a peer, not someone senior. Project access narrows what a user sees to those projects (and Core); none means everything. An inactive account cannot sign in, but keeps its work."></span></p>
+    <p class="usx-note" data-bind-hidden="!projectNote.value">
+        <span data-bind-text="projectNote.value"></span> <a href="#/users">Show all users</a></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="users-table"></div>
+    <div class="usx-card">
+        <div class="usx-bar">
+            <div class="usx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showActive" data-bind-class="filter.value === 'active' && 'is-on'">Active <b data-bind-text="counts.value.active"></b></button>
+                <button type="button" data-on-click="showInactive" data-bind-class="filter.value === 'inactive' && 'is-on'">Inactive <b data-bind-text="counts.value.inactive"></b></button>
+            </div>
+            <select class="form-input usx-select" aria-label="Role" data-model="role.value">
+                <option value="">Every role</option>
+            </select>
+            <input type="search" class="form-input usx-search" placeholder="Search name, email, role…" aria-label="Search users" data-model="query.value">
+            <select class="form-input usx-select" aria-label="Sort" data-model="sort.value">
+                <option value="name">Name</option>
+                <option value="recent">Last signed in</option>
+            </select>
+            <span data-help-title="The list" data-help="Click someone to edit them. Right-click (or ⋮, or Shift+F10) to edit, copy their email, make the account active or inactive, or delete it. Greyed actions are ones your role does not allow - the menu says why."></span>
+        </div>
+        <p class="usx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="usx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="usx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="usx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
+
+<style>
+.usx { display: flex; flex-direction: column; gap: .75rem; }
+.usx [hidden] { display: none !important; }
+.usx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.usx-note.is-bad { color: var(--dm-danger); }
+.usx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.usx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.usx-search { flex: 1; min-width: 10rem; max-width: 20rem; }
+.usx-select { width: auto; flex: 0 0 auto; }
+.usx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.usx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.usx-seg button + button { border-left: 1px solid var(--dm-border); }
+.usx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.usx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.usx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.usx-list { display: flex; flex-direction: column; }
+.usx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.usx-row:last-child { border-bottom: 0; }
+.usx-row:hover, .usx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.usx-row.is-locked { cursor: default; }
+.usx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%;
+    font-size: var(--dm-text-xs); font-weight: 700; color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 14%, transparent); }
+.usx-row.is-off .usx-avatar { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 14%, transparent); }
+.usx-row.is-off .usx-main strong { color: var(--dm-text-muted); }
+.usx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.usx-main strong, .usx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.usx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.usx-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; flex-shrink: 0; max-width: 55%; }
+.usx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.usx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.usx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.usx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.usx-chip.is-primary { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.usx-chip.is-outline { background: none; border: 1px solid var(--dm-border); }
+.usx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.usx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .usx-chips { max-width: 40%; } .usx-main small { white-space: normal; } }
+</style>