football2801/pictureFrame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: orientation model, password confirm, frontend build

Browse Source 
- Collapse orientation to landscape/portrait (ribbon left = portrait standard)
- Add OrientationPicker component and wire settings sheet in HomeView
- Add password confirmation field to registration form (RepeatedType)
- Build frontend SPA to public/build/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-04 16:59:03 -04:00
parent 2e5ef7fe78
commit 6bce4822e7
124 changed files with 82380 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/security/register.html.twig
+34 -5
View File
@@ -90,14 +90,27 @@
</div>
<div class="field">
{{ form_label(form.plainPassword) }}
{{ form_widget(form.plainPassword, {attr: {
{{ form_label(form.plainPassword.first) }}
{{ form_widget(form.plainPassword.first, {attr: {
id: 'reg-password',
autocomplete: 'new-password',
'aria-describedby': 'reg-password-error',
'aria-invalid': form.plainPassword.vars.errors|length > 0 ? 'true' : 'false'
'aria-invalid': form.plainPassword.first.vars.errors|length > 0 ? 'true' : 'false'
}}) }}
<p id="reg-password-error" class="field-error" role="alert">
{% for error in form.plainPassword.first.vars.errors %}{{ error.message }}{% endfor %}
</p>
</div>
<div class="field">
{{ form_label(form.plainPassword.second) }}
{{ form_widget(form.plainPassword.second, {attr: {
id: 'reg-password-confirm',
autocomplete: 'new-password',
'aria-describedby': 'reg-password-confirm-error',
'aria-invalid': form.plainPassword.vars.errors|length > 0 ? 'true' : 'false'
}}) }}
<p id="reg-password-confirm-error" class="field-error" role="alert">
{% for error in form.plainPassword.vars.errors %}{{ error.message }}{% endfor %}
</p>
</div>
@@ -116,9 +129,10 @@
var emailError = document.getElementById('reg-email-error');
var pwInput = document.getElementById('reg-password');
var pwError = document.getElementById('reg-password-error');
var confirmInput = document.getElementById('reg-password-confirm');
var confirmError = document.getElementById('reg-password-confirm-error');
function validateEmail() {
// Only run client-side validation when there is no server-side error already shown
if (emailError.dataset.serverError) return;
var val = emailInput.value.trim();
if (!val) {
@@ -142,6 +156,15 @@
}
}
function validateConfirm() {
if (confirmError.dataset.serverError) return;
if (confirmInput.value && confirmInput.value !== pwInput.value) {
setError(confirmInput, confirmError, 'Passwords do not match.');
} else {
clearError(confirmInput, confirmError);
}
}
function setError(input, errorEl, message) {
input.setAttribute('aria-invalid', 'true');
errorEl.textContent = message;
@@ -155,17 +178,23 @@
// Mark existing server errors so client-side blur doesn't clobber them
if (emailError.textContent.trim()) emailError.dataset.serverError = '1';
if (pwError.textContent.trim()) pwError.dataset.serverError = '1';
if (confirmError.textContent.trim()) confirmError.dataset.serverError = '1';
// Clear server-error flag once user starts typing
emailInput.addEventListener('input', function () { delete emailError.dataset.serverError; });
pwInput.addEventListener('input', function () { delete pwError.dataset.serverError; });
confirmInput.addEventListener('input', function () { delete confirmError.dataset.serverError; });
emailInput.addEventListener('blur', validateEmail);
pwInput.addEventListener('blur', validatePassword);
confirmInput.addEventListener('blur', validateConfirm);
// Re-validate confirm whenever the password field changes
pwInput.addEventListener('input', function () { if (confirmInput.value) validateConfirm(); });
form.addEventListener('submit', function () {
form.addEventListener('submit', function (e) {
validateEmail();
validatePassword();
validateConfirm();
});
}());
</script>