From 62bc36416f2d2defc77a501226afd0679b6ca252 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 27 Apr 2024 17:50:44 +0200 Subject: [PATCH 1/7] Get rid of `app/javascript/core` Have all flavors implement everything they need instead. --- app/controllers/concerns/theming_concern.rb | 1 - app/controllers/statuses_controller.rb | 2 +- app/javascript/core/admin.ts | 340 ------------------ app/javascript/core/auth.js | 3 - app/javascript/core/common.js | 6 - app/javascript/core/embed.ts | 41 --- app/javascript/core/settings.ts | 70 ---- app/javascript/core/theme.yml | 24 -- .../flavours/glitch/packs/admin.tsx | 331 +++++++++++++++++ .../flavours/glitch/packs/common.js | 1 + app/javascript/flavours/glitch/packs/inert.js | 4 + .../flavours/glitch/packs/mailer.js | 3 + .../flavours/glitch/packs/public.tsx | 103 ++++++ .../packs}/remote_interaction_helper.ts | 0 .../glitch/packs/two_factor_authentication.js | 119 ++++++ app/javascript/flavours/glitch/theme.yml | 36 +- app/javascript/flavours/vanilla/theme.yml | 12 +- app/javascript/packs/admin.tsx | 331 +++++++++++++++++ app/javascript/packs/common.js | 3 + app/javascript/{core => packs}/inert.js | 0 app/javascript/{core => packs}/mailer.js | 0 app/javascript/packs/public.tsx | 103 ++++++ .../packs/remote_interaction_helper.ts | 174 +++++++++ .../two_factor_authentication.js | 2 - app/lib/themes.rb | 6 - app/views/layouts/_theme.html.haml | 2 +- app/views/layouts/application.html.haml | 3 +- app/views/layouts/embedded.html.haml | 1 - app/views/layouts/error.html.haml | 1 - app/views/layouts/mailer.html.haml | 2 +- app/views/media/player.html.haml | 1 - .../remote_interaction_helper/index.html.haml | 2 +- config/webpack/configuration.js | 10 - config/webpack/shared.js | 5 +- 34 files changed, 1212 insertions(+), 530 deletions(-) delete mode 100644 app/javascript/core/admin.ts delete mode 100644 app/javascript/core/auth.js delete mode 100644 app/javascript/core/common.js delete mode 100644 app/javascript/core/embed.ts delete mode 100644 app/javascript/core/settings.ts delete mode 100644 app/javascript/core/theme.yml create mode 100644 app/javascript/flavours/glitch/packs/inert.js create mode 100644 app/javascript/flavours/glitch/packs/mailer.js rename app/javascript/{core => flavours/glitch/packs}/remote_interaction_helper.ts (100%) create mode 100644 app/javascript/flavours/glitch/packs/two_factor_authentication.js rename app/javascript/{core => packs}/inert.js (100%) rename app/javascript/{core => packs}/mailer.js (100%) create mode 100644 app/javascript/packs/remote_interaction_helper.ts rename app/javascript/{core => packs}/two_factor_authentication.js (99%) diff --git a/app/controllers/concerns/theming_concern.rb b/app/controllers/concerns/theming_concern.rb index 82a53dbf51..5d24001bbf 100644 --- a/app/controllers/concerns/theming_concern.rb +++ b/app/controllers/concerns/theming_concern.rb @@ -4,7 +4,6 @@ module ThemingConcern extend ActiveSupport::Concern def use_pack(pack_name) - @core = resolve_pack_with_common(Themes.instance.core, pack_name) @theme = resolve_pack_with_common(Themes.instance.flavour(current_flavour), pack_name, current_skin) end diff --git a/app/controllers/statuses_controller.rb b/app/controllers/statuses_controller.rb index 02fea13502..7f9127d3a6 100644 --- a/app/controllers/statuses_controller.rb +++ b/app/controllers/statuses_controller.rb @@ -41,7 +41,7 @@ class StatusesController < ApplicationController end def embed - use_pack 'embed' + use_pack 'public' return not_found if @status.hidden? || @status.reblog? expires_in 180, public: true diff --git a/app/javascript/core/admin.ts b/app/javascript/core/admin.ts deleted file mode 100644 index 0642affef0..0000000000 --- a/app/javascript/core/admin.ts +++ /dev/null @@ -1,340 +0,0 @@ -// This file will be loaded on admin pages, regardless of theme. - -import 'packs/public-path'; - -import Rails from '@rails/ujs'; - -import ready from '../mastodon/ready'; - -const setAnnouncementEndsAttributes = (target: HTMLInputElement) => { - const valid = target.value && target.validity.valid; - const element = document.querySelector( - 'input[type="datetime-local"]#announcement_ends_at', - ); - - if (!element) return; - - if (valid) { - element.classList.remove('optional'); - element.required = true; - element.min = target.value; - } else { - element.classList.add('optional'); - element.removeAttribute('required'); - element.removeAttribute('min'); - } -}; - -Rails.delegate( - document, - 'input[type="datetime-local"]#announcement_starts_at', - 'change', - ({ target }) => { - if (target instanceof HTMLInputElement) - setAnnouncementEndsAttributes(target); - }, -); - -const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]'; - -const showSelectAll = () => { - const selectAllMatchingElement = document.querySelector( - '.batch-table__select-all', - ); - selectAllMatchingElement?.classList.add('active'); -}; - -const hideSelectAll = () => { - const selectAllMatchingElement = document.querySelector( - '.batch-table__select-all', - ); - const hiddenField = document.querySelector( - 'input#select_all_matching', - ); - const selectedMsg = document.querySelector( - '.batch-table__select-all .selected', - ); - const notSelectedMsg = document.querySelector( - '.batch-table__select-all .not-selected', - ); - - selectAllMatchingElement?.classList.remove('active'); - selectedMsg?.classList.remove('active'); - notSelectedMsg?.classList.add('active'); - if (hiddenField) hiddenField.value = '0'; -}; - -Rails.delegate(document, '#batch_checkbox_all', 'change', ({ target }) => { - if (!(target instanceof HTMLInputElement)) return; - - const selectAllMatchingElement = document.querySelector( - '.batch-table__select-all', - ); - - document - .querySelectorAll(batchCheckboxClassName) - .forEach((content) => { - content.checked = target.checked; - }); - - if (selectAllMatchingElement) { - if (target.checked) { - showSelectAll(); - } else { - hideSelectAll(); - } - } -}); - -Rails.delegate(document, '.batch-table__select-all button', 'click', () => { - const hiddenField = document.querySelector( - '#select_all_matching', - ); - - if (!hiddenField) return; - - const active = hiddenField.value === '1'; - const selectedMsg = document.querySelector( - '.batch-table__select-all .selected', - ); - const notSelectedMsg = document.querySelector( - '.batch-table__select-all .not-selected', - ); - - if (!selectedMsg || !notSelectedMsg) return; - - if (active) { - hiddenField.value = '0'; - selectedMsg.classList.remove('active'); - notSelectedMsg.classList.add('active'); - } else { - hiddenField.value = '1'; - notSelectedMsg.classList.remove('active'); - selectedMsg.classList.add('active'); - } -}); - -Rails.delegate(document, batchCheckboxClassName, 'change', () => { - const checkAllElement = document.querySelector( - 'input#batch_checkbox_all', - ); - const selectAllMatchingElement = document.querySelector( - '.batch-table__select-all', - ); - - if (checkAllElement) { - const allCheckboxes = Array.from( - document.querySelectorAll(batchCheckboxClassName), - ); - checkAllElement.checked = allCheckboxes.every((content) => content.checked); - checkAllElement.indeterminate = - !checkAllElement.checked && - allCheckboxes.some((content) => content.checked); - - if (selectAllMatchingElement) { - if (checkAllElement.checked) { - showSelectAll(); - } else { - hideSelectAll(); - } - } - } -}); - -Rails.delegate( - document, - '.filter-subset--with-select select', - 'change', - ({ target }) => { - if (target instanceof HTMLSelectElement) target.form?.submit(); - }, -); - -const onDomainBlockSeverityChange = (target: HTMLSelectElement) => { - const rejectMediaDiv = document.querySelector( - '.input.with_label.domain_block_reject_media', - ); - const rejectReportsDiv = document.querySelector( - '.input.with_label.domain_block_reject_reports', - ); - - if (rejectMediaDiv && rejectMediaDiv instanceof HTMLElement) { - rejectMediaDiv.style.display = - target.value === 'suspend' ? 'none' : 'block'; - } - - if (rejectReportsDiv && rejectReportsDiv instanceof HTMLElement) { - rejectReportsDiv.style.display = - target.value === 'suspend' ? 'none' : 'block'; - } -}; - -Rails.delegate(document, '#domain_block_severity', 'change', ({ target }) => { - if (target instanceof HTMLSelectElement) onDomainBlockSeverityChange(target); -}); - -const onEnableBootstrapTimelineAccountsChange = (target: HTMLInputElement) => { - const bootstrapTimelineAccountsField = - document.querySelector( - '#form_admin_settings_bootstrap_timeline_accounts', - ); - - if (bootstrapTimelineAccountsField) { - bootstrapTimelineAccountsField.disabled = !target.checked; - if (target.checked) { - bootstrapTimelineAccountsField.parentElement?.classList.remove( - 'disabled', - ); - bootstrapTimelineAccountsField.parentElement?.parentElement?.classList.remove( - 'disabled', - ); - } else { - bootstrapTimelineAccountsField.parentElement?.classList.add('disabled'); - bootstrapTimelineAccountsField.parentElement?.parentElement?.classList.add( - 'disabled', - ); - } - } -}; - -Rails.delegate( - document, - '#form_admin_settings_enable_bootstrap_timeline_accounts', - 'change', - ({ target }) => { - if (target instanceof HTMLInputElement) - onEnableBootstrapTimelineAccountsChange(target); - }, -); - -const onChangeRegistrationMode = (target: HTMLSelectElement) => { - const enabled = target.value === 'approved'; - - document - .querySelectorAll( - '.form_admin_settings_registrations_mode .warning-hint', - ) - .forEach((warning_hint) => { - warning_hint.style.display = target.value === 'open' ? 'inline' : 'none'; - }); - - document - .querySelectorAll( - 'input#form_admin_settings_require_invite_text', - ) - .forEach((input) => { - input.disabled = !enabled; - if (enabled) { - let element: HTMLElement | null = input; - do { - element.classList.remove('disabled'); - element = element.parentElement; - } while (element && !element.classList.contains('fields-group')); - } else { - let element: HTMLElement | null = input; - do { - element.classList.add('disabled'); - element = element.parentElement; - } while (element && !element.classList.contains('fields-group')); - } - }); -}; - -const convertUTCDateTimeToLocal = (value: string) => { - const date = new Date(value + 'Z'); - const twoChars = (x: number) => x.toString().padStart(2, '0'); - return `${date.getFullYear()}-${twoChars(date.getMonth() + 1)}-${twoChars(date.getDate())}T${twoChars(date.getHours())}:${twoChars(date.getMinutes())}`; -}; - -function convertLocalDatetimeToUTC(value: string) { - const date = new Date(value); - const fullISO8601 = date.toISOString(); - return fullISO8601.slice(0, fullISO8601.indexOf('T') + 6); -} - -Rails.delegate( - document, - '#form_admin_settings_registrations_mode', - 'change', - ({ target }) => { - if (target instanceof HTMLSelectElement) onChangeRegistrationMode(target); - }, -); - -ready(() => { - const domainBlockSeveritySelect = document.querySelector( - 'select#domain_block_severity', - ); - if (domainBlockSeveritySelect) - onDomainBlockSeverityChange(domainBlockSeveritySelect); - - const enableBootstrapTimelineAccounts = - document.querySelector( - 'input#form_admin_settings_enable_bootstrap_timeline_accounts', - ); - if (enableBootstrapTimelineAccounts) - onEnableBootstrapTimelineAccountsChange(enableBootstrapTimelineAccounts); - - const registrationMode = document.querySelector( - 'select#form_admin_settings_registrations_mode', - ); - if (registrationMode) onChangeRegistrationMode(registrationMode); - - const checkAllElement = document.querySelector( - 'input#batch_checkbox_all', - ); - if (checkAllElement) { - const allCheckboxes = Array.from( - document.querySelectorAll(batchCheckboxClassName), - ); - checkAllElement.checked = allCheckboxes.every((content) => content.checked); - checkAllElement.indeterminate = - !checkAllElement.checked && - allCheckboxes.some((content) => content.checked); - } - - document - .querySelector('a#add-instance-button') - ?.addEventListener('click', (e) => { - const domain = document.querySelector( - 'input[type="text"]#by_domain', - )?.value; - - if (domain && e.target instanceof HTMLAnchorElement) { - const url = new URL(e.target.href); - url.searchParams.set('_domain', domain); - e.target.href = url.toString(); - } - }); - - document - .querySelectorAll('input[type="datetime-local"]') - .forEach((element) => { - if (element.value) { - element.value = convertUTCDateTimeToLocal(element.value); - } - if (element.placeholder) { - element.placeholder = convertUTCDateTimeToLocal(element.placeholder); - } - }); - - Rails.delegate(document, 'form', 'submit', ({ target }) => { - if (target instanceof HTMLFormElement) - target - .querySelectorAll('input[type="datetime-local"]') - .forEach((element) => { - if (element.value && element.validity.valid) { - element.value = convertLocalDatetimeToUTC(element.value); - } - }); - }); - - const announcementStartsAt = document.querySelector( - 'input[type="datetime-local"]#announcement_starts_at', - ); - if (announcementStartsAt) { - setAnnouncementEndsAttributes(announcementStartsAt); - } -}).catch((reason) => { - throw reason; -}); diff --git a/app/javascript/core/auth.js b/app/javascript/core/auth.js deleted file mode 100644 index d1d14d99e8..0000000000 --- a/app/javascript/core/auth.js +++ /dev/null @@ -1,3 +0,0 @@ -import 'packs/public-path'; -import './settings'; -import './two_factor_authentication'; diff --git a/app/javascript/core/common.js b/app/javascript/core/common.js deleted file mode 100644 index 1cee2f6036..0000000000 --- a/app/javascript/core/common.js +++ /dev/null @@ -1,6 +0,0 @@ -// This file will be loaded on all pages, regardless of theme. - -import 'packs/public-path'; -import 'font-awesome/css/font-awesome.css'; - -require.context('../images/', true); diff --git a/app/javascript/core/embed.ts b/app/javascript/core/embed.ts deleted file mode 100644 index 6766cd7788..0000000000 --- a/app/javascript/core/embed.ts +++ /dev/null @@ -1,41 +0,0 @@ -// This file will be loaded on embed pages, regardless of theme. - -import 'packs/public-path'; -import ready from '../mastodon/ready'; - -interface SetHeightMessage { - type: 'setHeight'; - id: string; - height: number; -} - -function isSetHeightMessage(data: unknown): data is SetHeightMessage { - if ( - data && - typeof data === 'object' && - 'type' in data && - data.type === 'setHeight' - ) - return true; - else return false; -} - -window.addEventListener('message', (e) => { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- typings are not correct, it can be null in very rare cases - if (!e.data || !isSetHeightMessage(e.data) || !window.parent) return; - - const data = e.data; - - ready(() => { - window.parent.postMessage( - { - type: 'setHeight', - id: data.id, - height: document.getElementsByTagName('html')[0].scrollHeight, - }, - '*', - ); - }).catch((e) => { - console.error('Error in setHeightMessage postMessage', e); - }); -}); diff --git a/app/javascript/core/settings.ts b/app/javascript/core/settings.ts deleted file mode 100644 index ea6a99ec80..0000000000 --- a/app/javascript/core/settings.ts +++ /dev/null @@ -1,70 +0,0 @@ -// This file will be loaded on settings pages, regardless of theme. - -import 'packs/public-path'; -import Rails from '@rails/ujs'; - -Rails.delegate( - document, - '#edit_profile input[type=file]', - 'change', - ({ target }) => { - if (!(target instanceof HTMLInputElement)) return; - - const avatar = document.querySelector( - `img#${target.id}-preview`, - ); - - if (!avatar) return; - - let file: File | undefined; - if (target.files) file = target.files[0]; - - const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; - - if (url) avatar.src = url; - }, -); - -Rails.delegate(document, '.input-copy input', 'click', ({ target }) => { - if (!(target instanceof HTMLInputElement)) return; - - target.focus(); - target.select(); - target.setSelectionRange(0, target.value.length); -}); - -Rails.delegate(document, '.input-copy button', 'click', ({ target }) => { - if (!(target instanceof HTMLButtonElement)) return; - - const input = target.parentNode?.querySelector( - '.input-copy__wrapper input', - ); - - if (!input) return; - - const oldReadOnly = input.readOnly; - - input.readOnly = false; - input.focus(); - input.select(); - input.setSelectionRange(0, input.value.length); - - try { - if (document.execCommand('copy')) { - input.blur(); - - const parent = target.parentElement; - - if (!parent) return; - parent.classList.add('copied'); - - setTimeout(() => { - parent.classList.remove('copied'); - }, 700); - } - } catch (err) { - console.error(err); - } - - input.readOnly = oldReadOnly; -}); diff --git a/app/javascript/core/theme.yml b/app/javascript/core/theme.yml deleted file mode 100644 index 12c23e2035..0000000000 --- a/app/javascript/core/theme.yml +++ /dev/null @@ -1,24 +0,0 @@ -# These packs will be loaded on every appropriate page, regardless of -# theme. -pack: - about: - admin: admin.ts - auth: auth.js - common: - filename: common.js - stylesheet: true - embed: embed.ts - error: - home: - inert: - filename: inert.js - stylesheet: true - mailer: - filename: mailer.js - stylesheet: true - modal: - public: - settings: settings.ts - sign_up: - share: - remote_interaction_helper: remote_interaction_helper.ts diff --git a/app/javascript/flavours/glitch/packs/admin.tsx b/app/javascript/flavours/glitch/packs/admin.tsx index e20e74b238..57a017ff7d 100644 --- a/app/javascript/flavours/glitch/packs/admin.tsx +++ b/app/javascript/flavours/glitch/packs/admin.tsx @@ -1,8 +1,265 @@ import 'packs/public-path'; import { createRoot } from 'react-dom/client'; +import Rails from '@rails/ujs'; + import ready from 'flavours/glitch/ready'; +const setAnnouncementEndsAttributes = (target: HTMLInputElement) => { + const valid = target.value && target.validity.valid; + const element = document.querySelector( + 'input[type="datetime-local"]#announcement_ends_at', + ); + + if (!element) return; + + if (valid) { + element.classList.remove('optional'); + element.required = true; + element.min = target.value; + } else { + element.classList.add('optional'); + element.removeAttribute('required'); + element.removeAttribute('min'); + } +}; + +Rails.delegate( + document, + 'input[type="datetime-local"]#announcement_starts_at', + 'change', + ({ target }) => { + if (target instanceof HTMLInputElement) + setAnnouncementEndsAttributes(target); + }, +); + +const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]'; + +const showSelectAll = () => { + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + selectAllMatchingElement?.classList.add('active'); +}; + +const hideSelectAll = () => { + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + const hiddenField = document.querySelector( + 'input#select_all_matching', + ); + const selectedMsg = document.querySelector( + '.batch-table__select-all .selected', + ); + const notSelectedMsg = document.querySelector( + '.batch-table__select-all .not-selected', + ); + + selectAllMatchingElement?.classList.remove('active'); + selectedMsg?.classList.remove('active'); + notSelectedMsg?.classList.add('active'); + if (hiddenField) hiddenField.value = '0'; +}; + +Rails.delegate(document, '#batch_checkbox_all', 'change', ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + + document + .querySelectorAll(batchCheckboxClassName) + .forEach((content) => { + content.checked = target.checked; + }); + + if (selectAllMatchingElement) { + if (target.checked) { + showSelectAll(); + } else { + hideSelectAll(); + } + } +}); + +Rails.delegate(document, '.batch-table__select-all button', 'click', () => { + const hiddenField = document.querySelector( + '#select_all_matching', + ); + + if (!hiddenField) return; + + const active = hiddenField.value === '1'; + const selectedMsg = document.querySelector( + '.batch-table__select-all .selected', + ); + const notSelectedMsg = document.querySelector( + '.batch-table__select-all .not-selected', + ); + + if (!selectedMsg || !notSelectedMsg) return; + + if (active) { + hiddenField.value = '0'; + selectedMsg.classList.remove('active'); + notSelectedMsg.classList.add('active'); + } else { + hiddenField.value = '1'; + notSelectedMsg.classList.remove('active'); + selectedMsg.classList.add('active'); + } +}); + +Rails.delegate(document, batchCheckboxClassName, 'change', () => { + const checkAllElement = document.querySelector( + 'input#batch_checkbox_all', + ); + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + + if (checkAllElement) { + const allCheckboxes = Array.from( + document.querySelectorAll(batchCheckboxClassName), + ); + checkAllElement.checked = allCheckboxes.every((content) => content.checked); + checkAllElement.indeterminate = + !checkAllElement.checked && + allCheckboxes.some((content) => content.checked); + + if (selectAllMatchingElement) { + if (checkAllElement.checked) { + showSelectAll(); + } else { + hideSelectAll(); + } + } + } +}); + +Rails.delegate( + document, + '.filter-subset--with-select select', + 'change', + ({ target }) => { + if (target instanceof HTMLSelectElement) target.form?.submit(); + }, +); + +const onDomainBlockSeverityChange = (target: HTMLSelectElement) => { + const rejectMediaDiv = document.querySelector( + '.input.with_label.domain_block_reject_media', + ); + const rejectReportsDiv = document.querySelector( + '.input.with_label.domain_block_reject_reports', + ); + + if (rejectMediaDiv && rejectMediaDiv instanceof HTMLElement) { + rejectMediaDiv.style.display = + target.value === 'suspend' ? 'none' : 'block'; + } + + if (rejectReportsDiv && rejectReportsDiv instanceof HTMLElement) { + rejectReportsDiv.style.display = + target.value === 'suspend' ? 'none' : 'block'; + } +}; + +Rails.delegate(document, '#domain_block_severity', 'change', ({ target }) => { + if (target instanceof HTMLSelectElement) onDomainBlockSeverityChange(target); +}); + +const onEnableBootstrapTimelineAccountsChange = (target: HTMLInputElement) => { + const bootstrapTimelineAccountsField = + document.querySelector( + '#form_admin_settings_bootstrap_timeline_accounts', + ); + + if (bootstrapTimelineAccountsField) { + bootstrapTimelineAccountsField.disabled = !target.checked; + if (target.checked) { + bootstrapTimelineAccountsField.parentElement?.classList.remove( + 'disabled', + ); + bootstrapTimelineAccountsField.parentElement?.parentElement?.classList.remove( + 'disabled', + ); + } else { + bootstrapTimelineAccountsField.parentElement?.classList.add('disabled'); + bootstrapTimelineAccountsField.parentElement?.parentElement?.classList.add( + 'disabled', + ); + } + } +}; + +Rails.delegate( + document, + '#form_admin_settings_enable_bootstrap_timeline_accounts', + 'change', + ({ target }) => { + if (target instanceof HTMLInputElement) + onEnableBootstrapTimelineAccountsChange(target); + }, +); + +const onChangeRegistrationMode = (target: HTMLSelectElement) => { + const enabled = target.value === 'approved'; + + document + .querySelectorAll( + '.form_admin_settings_registrations_mode .warning-hint', + ) + .forEach((warning_hint) => { + warning_hint.style.display = target.value === 'open' ? 'inline' : 'none'; + }); + + document + .querySelectorAll( + 'input#form_admin_settings_require_invite_text', + ) + .forEach((input) => { + input.disabled = !enabled; + if (enabled) { + let element: HTMLElement | null = input; + do { + element.classList.remove('disabled'); + element = element.parentElement; + } while (element && !element.classList.contains('fields-group')); + } else { + let element: HTMLElement | null = input; + do { + element.classList.add('disabled'); + element = element.parentElement; + } while (element && !element.classList.contains('fields-group')); + } + }); +}; + +const convertUTCDateTimeToLocal = (value: string) => { + const date = new Date(value + 'Z'); + const twoChars = (x: number) => x.toString().padStart(2, '0'); + return `${date.getFullYear()}-${twoChars(date.getMonth() + 1)}-${twoChars(date.getDate())}T${twoChars(date.getHours())}:${twoChars(date.getMinutes())}`; +}; + +function convertLocalDatetimeToUTC(value: string) { + const date = new Date(value); + const fullISO8601 = date.toISOString(); + return fullISO8601.slice(0, fullISO8601.indexOf('T') + 6); +} + +Rails.delegate( + document, + '#form_admin_settings_registrations_mode', + 'change', + ({ target }) => { + if (target instanceof HTMLSelectElement) onChangeRegistrationMode(target); + }, +); + async function mountReactComponent(element: Element) { const componentName = element.getAttribute('data-admin-component'); const stringProps = element.getAttribute('data-props'); @@ -29,6 +286,80 @@ async function mountReactComponent(element: Element) { } ready(() => { + const domainBlockSeveritySelect = document.querySelector( + 'select#domain_block_severity', + ); + if (domainBlockSeveritySelect) + onDomainBlockSeverityChange(domainBlockSeveritySelect); + + const enableBootstrapTimelineAccounts = + document.querySelector( + 'input#form_admin_settings_enable_bootstrap_timeline_accounts', + ); + if (enableBootstrapTimelineAccounts) + onEnableBootstrapTimelineAccountsChange(enableBootstrapTimelineAccounts); + + const registrationMode = document.querySelector( + 'select#form_admin_settings_registrations_mode', + ); + if (registrationMode) onChangeRegistrationMode(registrationMode); + + const checkAllElement = document.querySelector( + 'input#batch_checkbox_all', + ); + if (checkAllElement) { + const allCheckboxes = Array.from( + document.querySelectorAll(batchCheckboxClassName), + ); + checkAllElement.checked = allCheckboxes.every((content) => content.checked); + checkAllElement.indeterminate = + !checkAllElement.checked && + allCheckboxes.some((content) => content.checked); + } + + document + .querySelector('a#add-instance-button') + ?.addEventListener('click', (e) => { + const domain = document.querySelector( + 'input[type="text"]#by_domain', + )?.value; + + if (domain && e.target instanceof HTMLAnchorElement) { + const url = new URL(e.target.href); + url.searchParams.set('_domain', domain); + e.target.href = url.toString(); + } + }); + + document + .querySelectorAll('input[type="datetime-local"]') + .forEach((element) => { + if (element.value) { + element.value = convertUTCDateTimeToLocal(element.value); + } + if (element.placeholder) { + element.placeholder = convertUTCDateTimeToLocal(element.placeholder); + } + }); + + Rails.delegate(document, 'form', 'submit', ({ target }) => { + if (target instanceof HTMLFormElement) + target + .querySelectorAll('input[type="datetime-local"]') + .forEach((element) => { + if (element.value && element.validity.valid) { + element.value = convertLocalDatetimeToUTC(element.value); + } + }); + }); + + const announcementStartsAt = document.querySelector( + 'input[type="datetime-local"]#announcement_starts_at', + ); + if (announcementStartsAt) { + setAnnouncementEndsAttributes(announcementStartsAt); + } + document.querySelectorAll('[data-admin-component]').forEach((element) => { void mountReactComponent(element); }); diff --git a/app/javascript/flavours/glitch/packs/common.js b/app/javascript/flavours/glitch/packs/common.js index caad60a8c3..48e414909d 100644 --- a/app/javascript/flavours/glitch/packs/common.js +++ b/app/javascript/flavours/glitch/packs/common.js @@ -1,4 +1,5 @@ import 'packs/public-path'; +import 'font-awesome/css/font-awesome.css'; import Rails from '@rails/ujs'; import 'flavours/glitch/styles/index.scss'; diff --git a/app/javascript/flavours/glitch/packs/inert.js b/app/javascript/flavours/glitch/packs/inert.js new file mode 100644 index 0000000000..a5d7e548be --- /dev/null +++ b/app/javascript/flavours/glitch/packs/inert.js @@ -0,0 +1,4 @@ +/* Placeholder file to have `inert.scss` compiled by Webpack + This is used by the `wicg-inert` polyfill */ + +import '@/styles/inert.scss'; diff --git a/app/javascript/flavours/glitch/packs/mailer.js b/app/javascript/flavours/glitch/packs/mailer.js new file mode 100644 index 0000000000..28cbb906f5 --- /dev/null +++ b/app/javascript/flavours/glitch/packs/mailer.js @@ -0,0 +1,3 @@ +import '@/styles/mailer.scss'; + +require.context('@/icons'); diff --git a/app/javascript/flavours/glitch/packs/public.tsx b/app/javascript/flavours/glitch/packs/public.tsx index 1ecc3fa42f..db6edfdc98 100644 --- a/app/javascript/flavours/glitch/packs/public.tsx +++ b/app/javascript/flavours/glitch/packs/public.tsx @@ -34,6 +34,43 @@ const messages = defineMessages({ }, }); +interface SetHeightMessage { + type: 'setHeight'; + id: string; + height: number; +} + +function isSetHeightMessage(data: unknown): data is SetHeightMessage { + if ( + data && + typeof data === 'object' && + 'type' in data && + data.type === 'setHeight' + ) + return true; + else return false; +} + +window.addEventListener('message', (e) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- typings are not correct, it can be null in very rare cases + if (!e.data || !isSetHeightMessage(e.data) || !window.parent) return; + + const data = e.data; + + ready(() => { + window.parent.postMessage( + { + type: 'setHeight', + id: data.id, + height: document.getElementsByTagName('html')[0].scrollHeight, + }, + '*', + ); + }).catch((e) => { + console.error('Error in setHeightMessage postMessage', e); + }); +}); + function loaded() { const { messages: localeData } = getLocale(); @@ -285,6 +322,72 @@ function loaded() { }); } +Rails.delegate( + document, + '#edit_profile input[type=file]', + 'change', + ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + const avatar = document.querySelector( + `img#${target.id}-preview`, + ); + + if (!avatar) return; + + let file: File | undefined; + if (target.files) file = target.files[0]; + + const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; + + if (url) avatar.src = url; + }, +); + +Rails.delegate(document, '.input-copy input', 'click', ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + target.focus(); + target.select(); + target.setSelectionRange(0, target.value.length); +}); + +Rails.delegate(document, '.input-copy button', 'click', ({ target }) => { + if (!(target instanceof HTMLButtonElement)) return; + + const input = target.parentNode?.querySelector( + '.input-copy__wrapper input', + ); + + if (!input) return; + + const oldReadOnly = input.readOnly; + + input.readOnly = false; + input.focus(); + input.select(); + input.setSelectionRange(0, input.value.length); + + try { + if (document.execCommand('copy')) { + input.blur(); + + const parent = target.parentElement; + + if (!parent) return; + parent.classList.add('copied'); + + setTimeout(() => { + parent.classList.remove('copied'); + }, 700); + } + } catch (err) { + console.error(err); + } + + input.readOnly = oldReadOnly; +}); + const toggleSidebar = () => { const sidebar = document.querySelector('.sidebar ul'); const toggleButton = document.querySelector( diff --git a/app/javascript/core/remote_interaction_helper.ts b/app/javascript/flavours/glitch/packs/remote_interaction_helper.ts similarity index 100% rename from app/javascript/core/remote_interaction_helper.ts rename to app/javascript/flavours/glitch/packs/remote_interaction_helper.ts diff --git a/app/javascript/flavours/glitch/packs/two_factor_authentication.js b/app/javascript/flavours/glitch/packs/two_factor_authentication.js new file mode 100644 index 0000000000..8b606fcc7a --- /dev/null +++ b/app/javascript/flavours/glitch/packs/two_factor_authentication.js @@ -0,0 +1,119 @@ +import * as WebAuthnJSON from '@github/webauthn-json'; +import axios from 'axios'; + +import ready from 'flavours/glitch/ready'; +import 'regenerator-runtime/runtime'; + +function getCSRFToken() { + var CSRFSelector = document.querySelector('meta[name="csrf-token"]'); + if (CSRFSelector) { + return CSRFSelector.getAttribute('content'); + } else { + return null; + } +} + +function hideFlashMessages() { + Array.from(document.getElementsByClassName('flash-message')).forEach(function(flashMessage) { + flashMessage.classList.add('hidden'); + }); +} + +function callback(url, body) { + axios.post(url, JSON.stringify(body), { + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + 'X-CSRF-Token': getCSRFToken(), + }, + credentials: 'same-origin', + }).then(function(response) { + window.location.replace(response.data.redirect_path); + }).catch(function(error) { + if (error.response.status === 422) { + const errorMessage = document.getElementById('security-key-error-message'); + errorMessage.classList.remove('hidden'); + console.error(error.response.data.error); + } else { + console.error(error); + } + }); +} + +ready(() => { + if (!WebAuthnJSON.supported()) { + const unsupported_browser_message = document.getElementById('unsupported-browser-message'); + if (unsupported_browser_message) { + unsupported_browser_message.classList.remove('hidden'); + document.querySelector('.btn.js-webauthn').disabled = true; + } + } + + + const webAuthnCredentialRegistrationForm = document.getElementById('new_webauthn_credential'); + if (webAuthnCredentialRegistrationForm) { + webAuthnCredentialRegistrationForm.addEventListener('submit', (event) => { + event.preventDefault(); + + var nickname = event.target.querySelector('input[name="new_webauthn_credential[nickname]"]'); + if (nickname.value) { + axios.get('/settings/security_keys/options') + .then((response) => { + const credentialOptions = response.data; + + WebAuthnJSON.create({ 'publicKey': credentialOptions }).then((credential) => { + var params = { 'credential': credential, 'nickname': nickname.value }; + callback('/settings/security_keys', params); + }).catch((error) => { + const errorMessage = document.getElementById('security-key-error-message'); + errorMessage.classList.remove('hidden'); + console.error(error); + }); + }).catch((error) => { + console.error(error.response.data.error); + }); + } else { + nickname.focus(); + } + }); + } + + const webAuthnCredentialAuthenticationForm = document.getElementById('webauthn-form'); + if (webAuthnCredentialAuthenticationForm) { + webAuthnCredentialAuthenticationForm.addEventListener('submit', (event) => { + event.preventDefault(); + + axios.get('sessions/security_key_options') + .then((response) => { + const credentialOptions = response.data; + + WebAuthnJSON.get({ 'publicKey': credentialOptions }).then((credential) => { + var params = { 'user': { 'credential': credential } }; + callback('sign_in', params); + }).catch((error) => { + const errorMessage = document.getElementById('security-key-error-message'); + errorMessage.classList.remove('hidden'); + console.error(error); + }); + }).catch((error) => { + console.error(error.response.data.error); + }); + }); + + const otpAuthenticationForm = document.getElementById('otp-authentication-form'); + + const linkToOtp = document.getElementById('link-to-otp'); + linkToOtp.addEventListener('click', () => { + webAuthnCredentialAuthenticationForm.classList.add('hidden'); + otpAuthenticationForm.classList.remove('hidden'); + hideFlashMessages(); + }); + + const linkToWebAuthn = document.getElementById('link-to-webauthn'); + linkToWebAuthn.addEventListener('click', () => { + otpAuthenticationForm.classList.add('hidden'); + webAuthnCredentialAuthenticationForm.classList.remove('hidden'); + hideFlashMessages(); + }); + } +}); diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml index 1aa31df187..a037834e2b 100644 --- a/app/javascript/flavours/glitch/theme.yml +++ b/app/javascript/flavours/glitch/theme.yml @@ -1,26 +1,32 @@ # (REQUIRED) The location of the pack files. pack: admin: - - packs/admin.tsx - - packs/public.tsx - auth: packs/public.tsx + - admin.tsx + - public.tsx + auth: + - public.tsx + - two_factor_authentication.js common: - filename: packs/common.js + filename: common.js stylesheet: true - embed: packs/public.tsx - error: packs/error.js + error: error.js home: - filename: packs/home.js + filename: home.js preload: - flavours/glitch/async/compose - flavours/glitch/async/home_timeline - flavours/glitch/async/notifications + inert: + filename: inert.js + stylesheet: true mailer: - modal: - public: packs/public.tsx - settings: packs/public.tsx - sign_up: packs/sign_up.js - share: packs/share.jsx + filename: mailer.js + stylesheet: true + public: public.tsx + settings: public.tsx + sign_up: sign_up.js + share: share.jsx + remote_interaction_helper: remote_interaction_helper.ts # (OPTIONAL) The directory which contains localization files for # the flavour, relative to this directory. The contents of this @@ -35,6 +41,12 @@ inherit_locales: vanilla # or an array thereof. These are the full path from `app/javascript/`. screenshot: flavours/glitch/images/glitch-preview.png +# (OPTIONAL) The directory which contains the pack files. +# Defaults to this directory (`app/javascript/flavour/[flavour]`), +# but in the case of the vanilla Mastodon flavour the pack files are +# somewhere else. +pack_directory: app/javascript/flavours/glitch/packs + # (OPTIONAL) The directory which contains the pack files. # Defaults to the theme directory (`app/javascript/themes/[theme]`), # which should be sufficient for like 99% of use-cases lol. diff --git a/app/javascript/flavours/vanilla/theme.yml b/app/javascript/flavours/vanilla/theme.yml index 7c7df295d3..553a202379 100644 --- a/app/javascript/flavours/vanilla/theme.yml +++ b/app/javascript/flavours/vanilla/theme.yml @@ -3,11 +3,12 @@ pack: admin: - admin.tsx - public.tsx - auth: public.tsx + auth: + - public.tsx + - two_factor_authentication.js common: filename: common.js stylesheet: true - embed: public.tsx error: error.js home: filename: application.js @@ -15,12 +16,17 @@ pack: - features/compose - features/home_timeline - features/notifications + inert: + filename: inert.js + stylesheet: true mailer: - modal: + filename: mailer.js + stylesheet: true public: public.tsx settings: public.tsx sign_up: sign_up.js share: share.jsx + remote_interaction_helper: remote_interaction_helper.ts # (OPTIONAL) The directory which contains localization files for # the flavour, relative to this directory. diff --git a/app/javascript/packs/admin.tsx b/app/javascript/packs/admin.tsx index 13e740b190..9fee560565 100644 --- a/app/javascript/packs/admin.tsx +++ b/app/javascript/packs/admin.tsx @@ -1,8 +1,265 @@ import './public-path'; import { createRoot } from 'react-dom/client'; +import Rails from '@rails/ujs'; + import ready from '../mastodon/ready'; +const setAnnouncementEndsAttributes = (target: HTMLInputElement) => { + const valid = target.value && target.validity.valid; + const element = document.querySelector( + 'input[type="datetime-local"]#announcement_ends_at', + ); + + if (!element) return; + + if (valid) { + element.classList.remove('optional'); + element.required = true; + element.min = target.value; + } else { + element.classList.add('optional'); + element.removeAttribute('required'); + element.removeAttribute('min'); + } +}; + +Rails.delegate( + document, + 'input[type="datetime-local"]#announcement_starts_at', + 'change', + ({ target }) => { + if (target instanceof HTMLInputElement) + setAnnouncementEndsAttributes(target); + }, +); + +const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]'; + +const showSelectAll = () => { + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + selectAllMatchingElement?.classList.add('active'); +}; + +const hideSelectAll = () => { + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + const hiddenField = document.querySelector( + 'input#select_all_matching', + ); + const selectedMsg = document.querySelector( + '.batch-table__select-all .selected', + ); + const notSelectedMsg = document.querySelector( + '.batch-table__select-all .not-selected', + ); + + selectAllMatchingElement?.classList.remove('active'); + selectedMsg?.classList.remove('active'); + notSelectedMsg?.classList.add('active'); + if (hiddenField) hiddenField.value = '0'; +}; + +Rails.delegate(document, '#batch_checkbox_all', 'change', ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + + document + .querySelectorAll(batchCheckboxClassName) + .forEach((content) => { + content.checked = target.checked; + }); + + if (selectAllMatchingElement) { + if (target.checked) { + showSelectAll(); + } else { + hideSelectAll(); + } + } +}); + +Rails.delegate(document, '.batch-table__select-all button', 'click', () => { + const hiddenField = document.querySelector( + '#select_all_matching', + ); + + if (!hiddenField) return; + + const active = hiddenField.value === '1'; + const selectedMsg = document.querySelector( + '.batch-table__select-all .selected', + ); + const notSelectedMsg = document.querySelector( + '.batch-table__select-all .not-selected', + ); + + if (!selectedMsg || !notSelectedMsg) return; + + if (active) { + hiddenField.value = '0'; + selectedMsg.classList.remove('active'); + notSelectedMsg.classList.add('active'); + } else { + hiddenField.value = '1'; + notSelectedMsg.classList.remove('active'); + selectedMsg.classList.add('active'); + } +}); + +Rails.delegate(document, batchCheckboxClassName, 'change', () => { + const checkAllElement = document.querySelector( + 'input#batch_checkbox_all', + ); + const selectAllMatchingElement = document.querySelector( + '.batch-table__select-all', + ); + + if (checkAllElement) { + const allCheckboxes = Array.from( + document.querySelectorAll(batchCheckboxClassName), + ); + checkAllElement.checked = allCheckboxes.every((content) => content.checked); + checkAllElement.indeterminate = + !checkAllElement.checked && + allCheckboxes.some((content) => content.checked); + + if (selectAllMatchingElement) { + if (checkAllElement.checked) { + showSelectAll(); + } else { + hideSelectAll(); + } + } + } +}); + +Rails.delegate( + document, + '.filter-subset--with-select select', + 'change', + ({ target }) => { + if (target instanceof HTMLSelectElement) target.form?.submit(); + }, +); + +const onDomainBlockSeverityChange = (target: HTMLSelectElement) => { + const rejectMediaDiv = document.querySelector( + '.input.with_label.domain_block_reject_media', + ); + const rejectReportsDiv = document.querySelector( + '.input.with_label.domain_block_reject_reports', + ); + + if (rejectMediaDiv && rejectMediaDiv instanceof HTMLElement) { + rejectMediaDiv.style.display = + target.value === 'suspend' ? 'none' : 'block'; + } + + if (rejectReportsDiv && rejectReportsDiv instanceof HTMLElement) { + rejectReportsDiv.style.display = + target.value === 'suspend' ? 'none' : 'block'; + } +}; + +Rails.delegate(document, '#domain_block_severity', 'change', ({ target }) => { + if (target instanceof HTMLSelectElement) onDomainBlockSeverityChange(target); +}); + +const onEnableBootstrapTimelineAccountsChange = (target: HTMLInputElement) => { + const bootstrapTimelineAccountsField = + document.querySelector( + '#form_admin_settings_bootstrap_timeline_accounts', + ); + + if (bootstrapTimelineAccountsField) { + bootstrapTimelineAccountsField.disabled = !target.checked; + if (target.checked) { + bootstrapTimelineAccountsField.parentElement?.classList.remove( + 'disabled', + ); + bootstrapTimelineAccountsField.parentElement?.parentElement?.classList.remove( + 'disabled', + ); + } else { + bootstrapTimelineAccountsField.parentElement?.classList.add('disabled'); + bootstrapTimelineAccountsField.parentElement?.parentElement?.classList.add( + 'disabled', + ); + } + } +}; + +Rails.delegate( + document, + '#form_admin_settings_enable_bootstrap_timeline_accounts', + 'change', + ({ target }) => { + if (target instanceof HTMLInputElement) + onEnableBootstrapTimelineAccountsChange(target); + }, +); + +const onChangeRegistrationMode = (target: HTMLSelectElement) => { + const enabled = target.value === 'approved'; + + document + .querySelectorAll( + '.form_admin_settings_registrations_mode .warning-hint', + ) + .forEach((warning_hint) => { + warning_hint.style.display = target.value === 'open' ? 'inline' : 'none'; + }); + + document + .querySelectorAll( + 'input#form_admin_settings_require_invite_text', + ) + .forEach((input) => { + input.disabled = !enabled; + if (enabled) { + let element: HTMLElement | null = input; + do { + element.classList.remove('disabled'); + element = element.parentElement; + } while (element && !element.classList.contains('fields-group')); + } else { + let element: HTMLElement | null = input; + do { + element.classList.add('disabled'); + element = element.parentElement; + } while (element && !element.classList.contains('fields-group')); + } + }); +}; + +const convertUTCDateTimeToLocal = (value: string) => { + const date = new Date(value + 'Z'); + const twoChars = (x: number) => x.toString().padStart(2, '0'); + return `${date.getFullYear()}-${twoChars(date.getMonth() + 1)}-${twoChars(date.getDate())}T${twoChars(date.getHours())}:${twoChars(date.getMinutes())}`; +}; + +function convertLocalDatetimeToUTC(value: string) { + const date = new Date(value); + const fullISO8601 = date.toISOString(); + return fullISO8601.slice(0, fullISO8601.indexOf('T') + 6); +} + +Rails.delegate( + document, + '#form_admin_settings_registrations_mode', + 'change', + ({ target }) => { + if (target instanceof HTMLSelectElement) onChangeRegistrationMode(target); + }, +); + async function mountReactComponent(element: Element) { const componentName = element.getAttribute('data-admin-component'); const stringProps = element.getAttribute('data-props'); @@ -29,6 +286,80 @@ async function mountReactComponent(element: Element) { } ready(() => { + const domainBlockSeveritySelect = document.querySelector( + 'select#domain_block_severity', + ); + if (domainBlockSeveritySelect) + onDomainBlockSeverityChange(domainBlockSeveritySelect); + + const enableBootstrapTimelineAccounts = + document.querySelector( + 'input#form_admin_settings_enable_bootstrap_timeline_accounts', + ); + if (enableBootstrapTimelineAccounts) + onEnableBootstrapTimelineAccountsChange(enableBootstrapTimelineAccounts); + + const registrationMode = document.querySelector( + 'select#form_admin_settings_registrations_mode', + ); + if (registrationMode) onChangeRegistrationMode(registrationMode); + + const checkAllElement = document.querySelector( + 'input#batch_checkbox_all', + ); + if (checkAllElement) { + const allCheckboxes = Array.from( + document.querySelectorAll(batchCheckboxClassName), + ); + checkAllElement.checked = allCheckboxes.every((content) => content.checked); + checkAllElement.indeterminate = + !checkAllElement.checked && + allCheckboxes.some((content) => content.checked); + } + + document + .querySelector('a#add-instance-button') + ?.addEventListener('click', (e) => { + const domain = document.querySelector( + 'input[type="text"]#by_domain', + )?.value; + + if (domain && e.target instanceof HTMLAnchorElement) { + const url = new URL(e.target.href); + url.searchParams.set('_domain', domain); + e.target.href = url.toString(); + } + }); + + document + .querySelectorAll('input[type="datetime-local"]') + .forEach((element) => { + if (element.value) { + element.value = convertUTCDateTimeToLocal(element.value); + } + if (element.placeholder) { + element.placeholder = convertUTCDateTimeToLocal(element.placeholder); + } + }); + + Rails.delegate(document, 'form', 'submit', ({ target }) => { + if (target instanceof HTMLFormElement) + target + .querySelectorAll('input[type="datetime-local"]') + .forEach((element) => { + if (element.value && element.validity.valid) { + element.value = convertLocalDatetimeToUTC(element.value); + } + }); + }); + + const announcementStartsAt = document.querySelector( + 'input[type="datetime-local"]#announcement_starts_at', + ); + if (announcementStartsAt) { + setAnnouncementEndsAttributes(announcementStartsAt); + } + document.querySelectorAll('[data-admin-component]').forEach((element) => { void mountReactComponent(element); }); diff --git a/app/javascript/packs/common.js b/app/javascript/packs/common.js index 05dff8e494..9a889937c4 100644 --- a/app/javascript/packs/common.js +++ b/app/javascript/packs/common.js @@ -1,2 +1,5 @@ import './public-path'; +import 'font-awesome/css/font-awesome.css'; import 'styles/application.scss'; + +require.context('../images/', true); diff --git a/app/javascript/core/inert.js b/app/javascript/packs/inert.js similarity index 100% rename from app/javascript/core/inert.js rename to app/javascript/packs/inert.js diff --git a/app/javascript/core/mailer.js b/app/javascript/packs/mailer.js similarity index 100% rename from app/javascript/core/mailer.js rename to app/javascript/packs/mailer.js diff --git a/app/javascript/packs/public.tsx b/app/javascript/packs/public.tsx index 17befbd224..044faeb296 100644 --- a/app/javascript/packs/public.tsx +++ b/app/javascript/packs/public.tsx @@ -37,6 +37,43 @@ const messages = defineMessages({ }, }); +interface SetHeightMessage { + type: 'setHeight'; + id: string; + height: number; +} + +function isSetHeightMessage(data: unknown): data is SetHeightMessage { + if ( + data && + typeof data === 'object' && + 'type' in data && + data.type === 'setHeight' + ) + return true; + else return false; +} + +window.addEventListener('message', (e) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- typings are not correct, it can be null in very rare cases + if (!e.data || !isSetHeightMessage(e.data) || !window.parent) return; + + const data = e.data; + + ready(() => { + window.parent.postMessage( + { + type: 'setHeight', + id: data.id, + height: document.getElementsByTagName('html')[0].scrollHeight, + }, + '*', + ); + }).catch((e) => { + console.error('Error in setHeightMessage postMessage', e); + }); +}); + function loaded() { const { messages: localeData } = getLocale(); @@ -288,6 +325,72 @@ function loaded() { }); } +Rails.delegate( + document, + '#edit_profile input[type=file]', + 'change', + ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + const avatar = document.querySelector( + `img#${target.id}-preview`, + ); + + if (!avatar) return; + + let file: File | undefined; + if (target.files) file = target.files[0]; + + const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; + + if (url) avatar.src = url; + }, +); + +Rails.delegate(document, '.input-copy input', 'click', ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + target.focus(); + target.select(); + target.setSelectionRange(0, target.value.length); +}); + +Rails.delegate(document, '.input-copy button', 'click', ({ target }) => { + if (!(target instanceof HTMLButtonElement)) return; + + const input = target.parentNode?.querySelector( + '.input-copy__wrapper input', + ); + + if (!input) return; + + const oldReadOnly = input.readOnly; + + input.readOnly = false; + input.focus(); + input.select(); + input.setSelectionRange(0, input.value.length); + + try { + if (document.execCommand('copy')) { + input.blur(); + + const parent = target.parentElement; + + if (!parent) return; + parent.classList.add('copied'); + + setTimeout(() => { + parent.classList.remove('copied'); + }, 700); + } + } catch (err) { + console.error(err); + } + + input.readOnly = oldReadOnly; +}); + const toggleSidebar = () => { const sidebar = document.querySelector('.sidebar ul'); const toggleButton = document.querySelector( diff --git a/app/javascript/packs/remote_interaction_helper.ts b/app/javascript/packs/remote_interaction_helper.ts new file mode 100644 index 0000000000..d5834c6c3d --- /dev/null +++ b/app/javascript/packs/remote_interaction_helper.ts @@ -0,0 +1,174 @@ +/* + +This script is meant to to be used in an `iframe` with the sole purpose of doing webfinger queries +client-side without being restricted by a strict `connect-src` Content-Security-Policy directive. + +It communicates with the parent window through message events that are authenticated by origin, +and performs no other task. + +*/ + +import './public-path'; + +import axios from 'axios'; + +interface JRDLink { + rel: string; + template?: string; + href?: string; +} + +const isJRDLink = (link: unknown): link is JRDLink => + typeof link === 'object' && + link !== null && + 'rel' in link && + typeof link.rel === 'string' && + (!('template' in link) || typeof link.template === 'string') && + (!('href' in link) || typeof link.href === 'string'); + +const findLink = (rel: string, data: unknown): JRDLink | undefined => { + if ( + typeof data === 'object' && + data !== null && + 'links' in data && + data.links instanceof Array + ) { + return data.links.find( + (link): link is JRDLink => isJRDLink(link) && link.rel === rel, + ); + } else { + return undefined; + } +}; + +const findTemplateLink = (data: unknown) => + findLink('http://ostatus.org/schema/1.0/subscribe', data)?.template; + +const fetchInteractionURLSuccess = ( + uri_or_domain: string, + template: string, +) => { + window.parent.postMessage( + { + type: 'fetchInteractionURL-success', + uri_or_domain, + template, + }, + window.origin, + ); +}; + +const fetchInteractionURLFailure = () => { + window.parent.postMessage( + { + type: 'fetchInteractionURL-failure', + }, + window.origin, + ); +}; + +const isValidDomain = (value: string) => { + const url = new URL('https:///path'); + url.hostname = value; + return url.hostname === value; +}; + +// Attempt to find a remote interaction URL from a domain +const fromDomain = (domain: string) => { + const fallbackTemplate = `https://${domain}/authorize_interaction?uri={uri}`; + + axios + .get(`https://${domain}/.well-known/webfinger`, { + params: { resource: `https://${domain}` }, + }) + .then(({ data }) => { + const template = findTemplateLink(data); + fetchInteractionURLSuccess(domain, template ?? fallbackTemplate); + return; + }) + .catch(() => { + fetchInteractionURLSuccess(domain, fallbackTemplate); + }); +}; + +// Attempt to find a remote interaction URL from an arbitrary URL +const fromURL = (url: string) => { + const domain = new URL(url).host; + const fallbackTemplate = `https://${domain}/authorize_interaction?uri={uri}`; + + axios + .get(`https://${domain}/.well-known/webfinger`, { + params: { resource: url }, + }) + .then(({ data }) => { + const template = findTemplateLink(data); + fetchInteractionURLSuccess(url, template ?? fallbackTemplate); + return; + }) + .catch(() => { + fromDomain(domain); + }); +}; + +// Attempt to find a remote interaction URL from a `user@domain` string +const fromAcct = (acct: string) => { + acct = acct.replace(/^@/, ''); + + const segments = acct.split('@'); + + if (segments.length !== 2 || !segments[0] || !isValidDomain(segments[1])) { + fetchInteractionURLFailure(); + return; + } + + const domain = segments[1]; + const fallbackTemplate = `https://${domain}/authorize_interaction?uri={uri}`; + + axios + .get(`https://${domain}/.well-known/webfinger`, { + params: { resource: `acct:${acct}` }, + }) + .then(({ data }) => { + const template = findTemplateLink(data); + fetchInteractionURLSuccess(acct, template ?? fallbackTemplate); + return; + }) + .catch(() => { + // TODO: handle host-meta? + fromDomain(domain); + }); +}; + +const fetchInteractionURL = (uri_or_domain: string) => { + if (uri_or_domain === '') { + fetchInteractionURLFailure(); + } else if (/^https?:\/\//.test(uri_or_domain)) { + fromURL(uri_or_domain); + } else if (uri_or_domain.includes('@')) { + fromAcct(uri_or_domain); + } else { + fromDomain(uri_or_domain); + } +}; + +window.addEventListener('message', (event: MessageEvent) => { + // Check message origin + if ( + !window.origin || + window.parent !== event.source || + event.origin !== window.origin + ) { + return; + } + + if ( + event.data && + typeof event.data === 'object' && + 'type' in event.data && + event.data.type === 'fetchInteractionURL' && + 'uri_or_domain' in event.data && + typeof event.data.uri_or_domain === 'string' + ) { + fetchInteractionURL(event.data.uri_or_domain); + } +}); diff --git a/app/javascript/core/two_factor_authentication.js b/app/javascript/packs/two_factor_authentication.js similarity index 99% rename from app/javascript/core/two_factor_authentication.js rename to app/javascript/packs/two_factor_authentication.js index e76700a480..e77965c757 100644 --- a/app/javascript/core/two_factor_authentication.js +++ b/app/javascript/packs/two_factor_authentication.js @@ -1,5 +1,3 @@ -import 'packs/public-path'; - import * as WebAuthnJSON from '@github/webauthn-json'; import axios from 'axios'; diff --git a/app/lib/themes.rb b/app/lib/themes.rb index 45ba47780b..d7097e62c0 100644 --- a/app/lib/themes.rb +++ b/app/lib/themes.rb @@ -7,9 +7,6 @@ class Themes include Singleton def initialize - core = YAML.load_file(Rails.root.join('app', 'javascript', 'core', 'theme.yml')) - core['pack'] = {} unless core['pack'] - result = {} Rails.root.glob('app/javascript/flavours/*/theme.yml') do |pathname| data = YAML.load_file(pathname) @@ -61,12 +58,9 @@ class Themes result[name]['skin'][skin] = pack if skin != 'default' end - @core = core @conf = result end - attr_reader :core - def flavour(name) @conf[name] end diff --git a/app/views/layouts/_theme.html.haml b/app/views/layouts/_theme.html.haml index 2b40d408f2..7c21da3246 100644 --- a/app/views/layouts/_theme.html.haml +++ b/app/views/layouts/_theme.html.haml @@ -1,7 +1,7 @@ - if theme = render partial: 'layouts/theme', object: theme[:common] if theme[:pack] != 'common' && theme[:common] - if theme[:pack] - - pack_path = theme[:flavour] ? "flavours/#{theme[:flavour]}/#{theme[:pack]}" : "core/#{theme[:pack]}" + - pack_path = "flavours/#{theme[:flavour]}/#{theme[:pack]}" = javascript_pack_tag pack_path, crossorigin: 'anonymous' - if theme[:skin] - if !theme[:flavour] || theme[:skin] == 'default' diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 3e11e79052..b1b705669c 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -29,7 +29,7 @@ = javascript_pack_tag 'common', crossorigin: 'anonymous' -# Needed for the wicg-inert polyfill. It needs to be on it's own