treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Add client-side validation for taken username in sign-up form 

Port 955ec252a4 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/59/head
Eugen Rochko 2023-04-16 02:10:48 +02:00 committed by Claire
parent bc7b3399fb
commit 6ea9137233
1 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/javascript/flavours/glitch/packs/public.jsx
View File

@ -2,6 +2,15 @@ import 'packs/public-path';
import loadPolyfills from 'flavours/glitch/load_polyfills'; import loadPolyfills from 'flavours/glitch/load_polyfills';
import ready from 'flavours/glitch/ready'; import ready from 'flavours/glitch/ready';
import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
import axios from 'axios';
import { throttle } from 'lodash';
import { defineMessages } from 'react-intl';
const messages = defineMessages({
usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
passwordExceedsLength: { id: 'password_confirmation.exceeds_maxlength', defaultMessage: 'Password confirmation exceeds the maximum password length' },
passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' },
});
function main() { function main() {
const IntlMessageFormat = require('intl-messageformat').default; const IntlMessageFormat = require('intl-messageformat').default;
@ -9,7 +18,7 @@ function main() {
const { delegate } = require('@rails/ujs'); const { delegate } = require('@rails/ujs');
const emojify = require('flavours/glitch/features/emoji/emoji').default; const emojify = require('flavours/glitch/features/emoji/emoji').default;
const { getLocale } = require('locales'); const { getLocale } = require('locales');
const { messages } = getLocale(); const { localeData } = getLocale();
const React = require('react'); const React = require('react');
const ReactDOM = require('react-dom'); const ReactDOM = require('react-dom');
const { createBrowserHistory } = require('history'); const { createBrowserHistory } = require('history');
@ -54,6 +63,11 @@ function main() {
hour12: false, hour12: false,
}); });
const formatMessage = ({ id, defaultMessage }, values) => {
const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
return messageFormat.format(values);
};
[].forEach.call(document.querySelectorAll('.emojify'), (content) => { [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
content.innerHTML = emojify(content.innerHTML); content.innerHTML = emojify(content.innerHTML);
}); });
@ -73,7 +87,7 @@ function main() {
date.getMonth() === today.getMonth() && date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear(); date.getFullYear() === today.getFullYear();
}; };
const todayFormat = new IntlMessageFormat(messages['relative_format.today'] || 'Today at {time}', locale); const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale);
[].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => { [].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => {
const datetime = new Date(content.getAttribute('datetime')); const datetime = new Date(content.getAttribute('datetime'));
@ -99,7 +113,7 @@ function main() {
const timeGiven = content.getAttribute('datetime').includes('T'); const timeGiven = content.getAttribute('datetime').includes('T');
content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime); content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
content.textContent = timeAgoString({ content.textContent = timeAgoString({
formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values), formatMessage,
formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
}, datetime, now, now.getFullYear(), timeGiven); }, datetime, now, now.getFullYear(), timeGiven);
}); });
@ -128,17 +142,19 @@ function main() {
scrollToDetailedStatus(); scrollToDetailedStatus();
} }
delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => { delegate(document, '#user_account_attributes_username', 'input', throttle(() => {
const password = document.getElementById('registration_user_password'); const username = document.getElementById('user_account_attributes_username');
const confirmation = document.getElementById('registration_user_password_confirmation');
if (confirmation.value && confirmation.value.length > password.maxLength) { if (username.value && username.value.length > 0) {
confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format()); axios.get('/api/v1/accounts/lookup', { params: { acct: username.value } }).then(() => {
} else if (password.value && password.value !== confirmation.value) { username.setCustomValidity(formatMessage(messages.usernameTaken));
confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format()); }).catch(() => {
} else { username.setCustomValidity('');
confirmation.setCustomValidity('');
}
}); });
} else {
username.setCustomValidity('');
}
}, 500, { leading: false, trailing: true }));
delegate(document, '#user_password,#user_password_confirmation', 'input', () => { delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
const password = document.getElementById('user_password'); const password = document.getElementById('user_password');
@ -146,9 +162,9 @@ function main() {
if (!confirmation) return; if (!confirmation) return;
if (confirmation.value && confirmation.value.length > password.maxLength) { if (confirmation.value && confirmation.value.length > password.maxLength) {
confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format()); confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength));
} else if (password.value && password.value !== confirmation.value) { } else if (password.value && password.value !== confirmation.value) {
confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format()); confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
} else { } else {
confirmation.setCustomValidity(''); confirmation.setCustomValidity('');
} }
@ -162,10 +178,10 @@ function main() {
if (statusEl.dataset.spoiler === 'expanded') { if (statusEl.dataset.spoiler === 'expanded') {
statusEl.dataset.spoiler = 'folded'; statusEl.dataset.spoiler = 'folded';
this.textContent = (new IntlMessageFormat(messages['status.show_more'] || 'Show more', locale)).format(); this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format();
} else { } else {
statusEl.dataset.spoiler = 'expanded'; statusEl.dataset.spoiler = 'expanded';
this.textContent = (new IntlMessageFormat(messages['status.show_less'] || 'Show less', locale)).format(); this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format();
} }
return false; return false;
@ -173,7 +189,7 @@ function main() {
[].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => { [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => {
const statusEl = spoilerLink.parentNode.parentNode; const statusEl = spoilerLink.parentNode.parentNode;
const message = (statusEl.dataset.spoiler === 'expanded') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more'); const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format(); spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
}); });
}); });