Nicolas
9e847e15a1
All checks were successful
Nouvelle section `/admin/utilisateurs` (nav + route) : tableau des comptes (date, nom, email, foyer) et un `Dialog` de création en deux temps — formulaire prénom/nom/email, puis affichage unique du mot de passe temporaire généré, avec bouton « Copier ». Validation cliente via `adminCreateUserSchema`, erreurs API traduites (`EMAIL_ALREADY_IN_USE` déjà mappé). Spec Cypress `admin-users.cy.ts` (API mockée). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
148 lines
3.3 KiB
SCSS
148 lines
3.3 KiB
SCSS
// =============================================================================
|
|
// UsersPage — the admin user-account list + "create an account" dialog.
|
|
// Shares the table language of messages-page.scss / corrections-page.scss;
|
|
// its own file since nothing outside this page uses these classes.
|
|
// =============================================================================
|
|
|
|
.users-page__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// "Nouvel utilisateur" — the page's single primary action.
|
|
.users-page__new {
|
|
flex-shrink: 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: var(--color-primary);
|
|
border: 1px solid var(--color-primary);
|
|
border-radius: var(--radius-base);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.users-table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--font-size-sm);
|
|
|
|
th,
|
|
td {
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border-bottom: 1px solid var(--color-border);
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
th {
|
|
color: var(--color-text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__date {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__email {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
}
|
|
|
|
// Create-user modal — the `Dialog` primitive supplies the panel/scroll/close;
|
|
// this only sizes the fields, the footer buttons and the password reveal.
|
|
.user-create-dialog {
|
|
&.dialog-panel {
|
|
max-width: 32rem;
|
|
width: 100%;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin: var(--space-sm) 0 var(--space-xs);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: var(--space-sm);
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-base);
|
|
}
|
|
|
|
.field-error {
|
|
margin: var(--space-xs) 0 0;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.form-error {
|
|
margin: var(--space-sm) 0 0;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
&__submit {
|
|
color: #fff;
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
|
|
&:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
// Read-only temp password + its "Copier" button, side by side.
|
|
&__password-row {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
|
|
input {
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
button {
|
|
flex-shrink: 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-base);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__warning {
|
|
margin: var(--space-sm) 0 0;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
}
|
|
}
|