Capoturno: autorizzazione con PIN (nome + tastierino) o password nella modale (#59)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-07 12:39:07 +02:00
parent c8dd5eecfd
commit dc94b2e778
3 changed files with 370 additions and 43 deletions
@@ -921,7 +921,55 @@
</div>
</div>
<div class="space-y-3 mb-5">
{# #59: two ways to authorise - PIN (default, touch pad) or password. #}
<div class="flex gap-2 mb-4" role="tablist">
<button type="button" role="tab" @click="setSupervisorMode('pin')"
:disabled="!supervisorPinUsers.length"
class="btn flex-1 text-sm"
:class="supervisorMode === 'pin' ? 'btn-primary' : 'btn-secondary'">{{ _('PIN') }}</button>
<button type="button" role="tab" @click="setSupervisorMode('password')"
class="btn flex-1 text-sm"
:class="supervisorMode === 'password' ? 'btn-primary' : 'btn-secondary'">{{ _('Password') }}</button>
</div>
<div x-show="supervisorMode === 'pin'" class="mb-5">
{# name grid #}
<div x-show="!supervisorPinUser">
<p class="text-xs text-center text-[var(--text-secondary)] mb-3">{{ _('Chi sei?') }}</p>
<div class="grid grid-cols-2 gap-3 max-h-64 overflow-y-auto">
<template x-for="u in supervisorPinUsers" :key="u.id">
<button type="button" @click="selectSupervisorUser(u)"
class="btn btn-secondary min-h-[64px] text-base w-full" x-text="u.display_name"></button>
</template>
</div>
</div>
{# pad #}
<div x-show="supervisorPinUser">
<p class="text-center font-semibold mb-1" x-text="supervisorPinUser && supervisorPinUser.display_name"></p>
<p class="text-xs text-center text-[var(--text-secondary)] mb-3">{{ _('Inserisci il PIN') }}</p>
<div class="flex justify-center gap-3 mb-3" aria-hidden="true">
<template x-for="i in 4" :key="i">
<span class="h-4 w-4 rounded-full border-2 border-[var(--border-color)]"
:class="supervisorPin.length >= i ? 'bg-primary-600 border-primary-600' : ''"></span>
</template>
</div>
<div class="grid grid-cols-3 gap-3 max-w-xs mx-auto">
<template x-for="d in ['1','2','3','4','5','6','7','8','9']" :key="d">
<button type="button" @click="pressSupervisorPin(d)" :disabled="supervisorValidating"
class="btn btn-secondary h-16 min-w-[64px] text-2xl" x-text="d"></button>
</template>
<button type="button" @click="backSupervisorUser()" :disabled="supervisorValidating"
class="btn btn-secondary h-16 min-w-[64px] text-sm">{{ _('Indietro') }}</button>
<button type="button" @click="pressSupervisorPin('0')" :disabled="supervisorValidating"
class="btn btn-secondary h-16 min-w-[64px] text-2xl">0</button>
<button type="button" @click="supervisorPin = supervisorPin.slice(0, -1)" :disabled="supervisorValidating"
class="btn btn-secondary h-16 min-w-[64px] text-sm">{{ _('Cancella') }}</button>
</div>
</div>
<p x-show="supervisorError" class="text-sm text-center text-red-600 mt-3" role="alert" x-text="supervisorError"></p>
</div>
<div x-show="supervisorMode === 'password'" class="space-y-3 mb-5">
<div>
<label class="tmf-label text-xs">{{ _('Username') }}</label>
<input type="text" x-model="supervisorUsername" class="tmf-input text-sm"
@@ -945,13 +993,13 @@
<span x-show="supervisorAction === 'out_of_tolerance'">{{ _('Rimisura la quota') }}</span>
</button>
<button @click="submitSupervisor()"
:disabled="!supervisorUsername || !supervisorPassword || supervisorValidating"
:disabled="!supervisorCanSubmit || supervisorValidating"
class="btn btn-primary flex-1 text-sm gap-1">
<svg x-show="supervisorValidating" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
</svg>
{{ _('Autorizza') }}
<span x-text="supervisorMode === 'pin' ? '{{ _('Conferma') }}' : '{{ _('Autorizza') }}'"></span>
</button>
</div>
</div>
@@ -1039,6 +1087,11 @@ function taskExecute() {
supervisorAction: '', // 'out_of_tolerance', 'fermo_linea', 'fine_produzione'
supervisorUsername: '',
supervisorPassword: '',
// #59: the capoturno can authorise with name + 4-digit PIN instead of the password.
supervisorMode: 'pin', // 'pin' | 'password'
supervisorPinUsers: [], // [{id, display_name}] from /measure/api/pin-users
supervisorPinUser: null,
supervisorPin: '', // never kept past the modal: cleared on open and close
supervisorError: '',
supervisorValidating: false,
/* The out-of-tolerance measurement waiting for the capoturno:
@@ -1832,6 +1885,7 @@ function taskExecute() {
this.supervisorUsername = '';
this.supervisorPassword = '';
this.supervisorError = '';
this.resetSupervisorPin(); // #59: PIN fields cleared, names reloaded
this.showSupervisorModal = true;
},
@@ -1840,6 +1894,68 @@ function taskExecute() {
this.supervisorUsername = '';
this.supervisorPassword = '';
this.supervisorError = '';
this.supervisorPin = ''; // #59: the PIN does not outlive the modal
this.supervisorPinUser = null;
},
/* #59: PIN mode of the capoturno modal. */
resetSupervisorPin() {
this.supervisorPin = '';
this.supervisorPinUser = null;
this.supervisorMode = 'pin';
this.loadSupervisorPinUsers();
},
// Names with a PIN; an empty list or a failure opens the Password tab instead.
async loadSupervisorPinUsers() {
try {
const resp = await fetch('{{ url_for("measure.api_pin_users") }}', { headers: { 'Accept': 'application/json' } });
const list = resp.ok ? await resp.json() : [];
this.supervisorPinUsers = Array.isArray(list) ? list : [];
} catch (e) {
this.supervisorPinUsers = [];
}
if (!this.supervisorPinUsers.length) this.supervisorMode = 'password';
},
setSupervisorMode(mode) {
this.supervisorMode = mode;
this.supervisorPin = '';
this.supervisorPinUser = null;
this.supervisorError = '';
},
selectSupervisorUser(u) {
this.supervisorPinUser = u;
this.supervisorPin = '';
this.supervisorError = '';
},
backSupervisorUser() {
this.supervisorPinUser = null;
this.supervisorPin = '';
this.supervisorError = '';
},
// Submits by itself on the fourth digit.
pressSupervisorPin(d) {
if (this.supervisorValidating || this.supervisorPin.length >= 4) return;
this.supervisorPin += d;
this.supervisorError = '';
if (this.supervisorPin.length === 4) this.submitSupervisor();
},
get supervisorCanSubmit() {
if (this.supervisorMode === 'pin') return !!this.supervisorPinUser && this.supervisorPin.length === 4;
return !!this.supervisorUsername && !!this.supervisorPassword;
},
// The pair the proxies forward: id + PIN in PIN mode, username + password otherwise.
supervisorCredentials() {
if (this.supervisorMode === 'pin') {
return { supervisor_user_id: this.supervisorPinUser && this.supervisorPinUser.id, supervisor_pin: this.supervisorPin };
}
return { supervisor_username: this.supervisorUsername, supervisor_password: this.supervisorPassword };
},
/* What kind of task this is, as declared in the recipe.
@@ -1910,16 +2026,15 @@ function taskExecute() {
const resp = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
body: JSON.stringify({
supervisor_username: this.supervisorUsername,
supervisor_password: this.supervisorPassword,
}),
body: JSON.stringify(this.supervisorCredentials()), // #59: PIN or password
});
const data = await resp.json().catch(() => null);
if (!resp.ok || (data && data.error)) {
this.supervisorError = (data && data.detail)
|| (this.supervisorMode === 'pin' && resp.status === 401 ? '{{ _("PIN errato") }}' : '')
|| '{{ _("Credenziali non valide o utente non autorizzato") }}';
if (this.supervisorMode === 'pin') this.supervisorPin = ''; // #59: wrong PIN stays in the modal, pad cleared
this.supervisorValidating = false;
return;
}
@@ -1954,10 +2069,7 @@ function taskExecute() {
const base = '{{ url_for("measure.api_pause_production", run_id=0) }}'
.replace('/0/pause', '/' + this.productionRun.id + '/' + action);
const run = await this.postProduction(base, {
supervisor_username: this.supervisorUsername,
supervisor_password: this.supervisorPassword,
});
const run = await this.postProduction(base, this.supervisorCredentials()); // #59: PIN or password
this.supervisorValidating = false;
if (!run) {
@@ -1965,6 +2077,7 @@ function taskExecute() {
// capoturno sees why the action was refused, rather than a silent no-op.
this.supervisorError = this.productionError || '{{ _("Azione non riuscita") }}';
this.productionError = '';
if (this.supervisorMode === 'pin') this.supervisorPin = ''; // #59: wrong PIN / lockout: pad cleared, modal stays
return;
}