From b6c0f1fdc65b98484195279c8f8342bdc5bad747 Mon Sep 17 00:00:00 2001 From: ThibG 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 --- 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/javascript/flavours') 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 6767c15f1..5dd312ce1 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -355,7 +355,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 From 0f71372d6337f695a87c7158c52b93e49acc215d Mon Sep 17 00:00:00 2001 From: ThibG Date: Wed, 12 Aug 2020 12:11:15 +0200 Subject: [Glitch] Add client-side validation in password change forms Port 7dc4c742650ac69ec9a4459b656e172283511e4c to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/packs/public.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index 8168e87da..b9b588dc6 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -105,6 +105,18 @@ function main() { } }); + delegate(document, '#user_password,#user_password_confirmation', 'input', () => { + const password = document.getElementById('user_password'); + const confirmation = document.getElementById('user_password_confirmation'); + if (!confirmation) return; + + 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')); -- cgit