fix(loyalty): make edit PIN modal read-only except for PIN code

When editing a PIN, only the PIN code should be changeable. Staff name,
staff ID, and store are now displayed as read-only fields. This prevents
accidentally reassigning a PIN to a different staff member.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-23 21:36:11 +01:00
parent 77e520bbce
commit 95e4956216

View File

@@ -197,31 +197,17 @@
<!-- Staff Member Autocomplete -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label>
{{ search_autocomplete(
search_var='staffSearch',
results_var='staffSearchResults',
show_dropdown_var='showStaffDropdown',
loading_var='searchingStaff',
search_action='searchStaff()',
select_action='selectStaffMember(item)',
display_field='full_name',
secondary_field='email',
placeholder=_('loyalty.shared.pins.pin_name'),
min_chars=1,
no_results_text=_('loyalty.shared.pins.no_staff_found'),
loading_text=_('loyalty.common.loading')
) }}
<input type="text" :value="pinForm.name" readonly
class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 cursor-not-allowed">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_staff_id') }}</label>
<input type="text" x-model="pinForm.staff_id"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800"
placeholder="{{ _('loyalty.shared.pins.pin_staff_id') }}"
:readonly="pinForm.staff_id && staffMembers.length > 0">
<input type="text" :value="pinForm.staff_id" readonly
class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 cursor-not-allowed">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_code') }}</label>
<input type="password" x-model="pinForm.pin" minlength="4" maxlength="8"
<input type="password" x-model="pinForm.pin" required minlength="4" maxlength="8"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="{{ _('loyalty.shared.pins.pin_edit_placeholder') }}">
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ _('loyalty.shared.pins.pin_edit_hint') }}</p>
@@ -229,13 +215,8 @@
{% if show_store_filter %}
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_store') }}</label>
<select x-model="pinForm.store_id" required
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
<option value="">{{ _('loyalty.shared.pins.select_store') }}</option>
<template x-for="loc in locations" :key="loc.store_id">
<option :value="loc.store_id" x-text="loc.store_name"></option>
</template>
</select>
<input type="text" :value="locations.find(l => l.store_id == pinForm.store_id)?.store_name || '-'" readonly
class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 cursor-not-allowed">
</div>
{% endif %}
</div>