From 77df7aa6d6ddd638f539e6a48f7196d59a809e74 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Tue, 11 Aug 2020 23:09:13 +0200
Subject: [Glitch] Add HTML form validation for the registration form
Port d70c3ab4c39e642d41138ab693af77dd6c258e8c to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
app/javascript/flavours/glitch/packs/public.js | 10 ++++++++++
app/javascript/flavours/glitch/styles/forms.scss | 3 ++-
2 files changed, 12 insertions(+), 1 deletion(-)
(limited to 'app')
diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js
index 58febcf5b..8168e87da 100644
--- a/app/javascript/flavours/glitch/packs/public.js
+++ b/app/javascript/flavours/glitch/packs/public.js
@@ -95,6 +95,16 @@ function main() {
new Rellax('.parallax', { speed: -1 });
}
+ delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => {
+ const password = document.getElementById('registration_user_password');
+ const confirmation = document.getElementById('registration_user_password_confirmation');
+ if (password.value && password.value !== confirmation.value) {
+ confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format());
+ } else {
+ confirmation.setCustomValidity('');
+ }
+ });
+
delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 726da1da7..917b5c873 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -349,7 +349,8 @@ code {
box-shadow: none;
}
- &:focus:invalid:not(:placeholder-shown) {
+ &:focus:invalid:not(:placeholder-shown),
+ &:required:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%);
}
--
cgit