typo3-typescript-sources 13.4.20

package/backend/form-engine/element/folder-element.ts

@@ -0,0 +1,66 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DocumentService from '@typo3/core/document-service';
+import { AbstractSortableSelectItems } from '@typo3/backend/form-engine/element/abstract-sortable-select-items';
+import { selector } from '@typo3/core/literals';
+
+class FolderSortableSelectItems extends AbstractSortableSelectItems {
+  public registerEventHandler(element: HTMLSelectElement): void {
+    this.registerSortableEventHandler(element);
+  }
+}
+
+/**
+ * Module: @typo3/backend/form-engine/element/folder-element
+ *
+ * Functionality for the folder element
+ *
+ * @example
+ * <typo3-formengine-element-folder recordFieldId="some-id">
+ *   ...
+ * </typo3-formengine-element-folder>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class FolderElement extends HTMLElement {
+  private recordField: HTMLSelectElement = null;
+
+  public async connectedCallback(): Promise<void> {
+    if (this.recordField !== null) {
+      // Element is already initialized, which means the component has been rendered before. Nothing to do here.
+      return;
+    }
+
+    const recordFieldId = this.getAttribute('recordFieldId');
+    if (recordFieldId === null) {
+      return;
+    }
+
+    await DocumentService.ready();
+    this.recordField = this.querySelector<HTMLSelectElement>(selector`#${recordFieldId}`);
+    if (!this.recordField) {
+      return;
+    }
+
+    this.registerEventHandler();
+  }
+
+  private registerEventHandler(): void {
+    const folderSortableSelectItems = new FolderSortableSelectItems();
+    folderSortableSelectItems.registerEventHandler(this.recordField);
+  }
+}
+
+window.customElements.define('typo3-formengine-element-folder', FolderElement);

package/backend/form-engine/element/group-element.ts

@@ -0,0 +1,47 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { AbstractSortableSelectItems } from './abstract-sortable-select-items';
+import DocumentService from '@typo3/core/document-service';
+import FormEngineSuggest from '../../form-engine-suggest';
+
+class GroupElement extends AbstractSortableSelectItems {
+  private element: HTMLSelectElement = null;
+
+  constructor(elementId: string) {
+    super();
+
+    DocumentService.ready().then((): void => {
+      this.element = <HTMLSelectElement>document.getElementById(elementId);
+      if (this.element === null) {
+        return;
+      }
+      this.registerEventHandler();
+      this.registerSuggest();
+    });
+  }
+
+  private registerEventHandler(): void {
+    this.registerSortableEventHandler(this.element);
+  }
+
+  private registerSuggest(): void {
+    let suggestField;
+    if ((suggestField = <HTMLInputElement>this.element.closest('.t3js-formengine-field-item').querySelector('.t3-form-suggest')) !== null) {
+      // tslint:disable-next-line:no-unused-expression
+      new FormEngineSuggest(suggestField);
+    }
+  }
+}
+
+export default GroupElement;

package/backend/form-engine/element/json-element.ts

@@ -0,0 +1,52 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DocumentService from '@typo3/core/document-service';
+import { Resizable } from './modifier/resizable';
+import { Tabbable } from './modifier/tabbable';
+
+/**
+ * Module: @typo3/backend/form-engine/element/json-element
+ *
+ * Functionality for the json element
+ *
+ * @example
+ * <typo3-formengine-element-json recordFieldId="some-id">
+ *   ...
+ * </typo3-formengine-element-json>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class JsonElement extends HTMLElement {
+  private element: HTMLTextAreaElement = null;
+
+  public async connectedCallback(): Promise<void> {
+    if (this.element !== null) {
+      // Element is already initialized, which means the component has been rendered before. Nothing to do here.
+      return;
+    }
+
+    await DocumentService.ready();
+    this.element = document.getElementById((this.getAttribute('recordFieldId') || '' as string)) as HTMLTextAreaElement;
+
+    if (!this.element) {
+      return;
+    }
+
+    Resizable.enable(this.element);
+    Tabbable.enable(this.element);
+  }
+}
+
+window.customElements.define('typo3-formengine-element-json', JsonElement);

package/backend/form-engine/element/link-element.ts

@@ -0,0 +1,121 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { selector } from '@typo3/core/literals';
+
+enum Selectors {
+  toggleSelector = '.t3js-form-field-link-explanation-toggle',
+  inputFieldSelector = '.t3js-form-field-link-input',
+  explanationSelector = '.t3js-form-field-link-explanation',
+  iconSelector = '.t3js-form-field-link-icon',
+  containerSelector = '.t3js-form-field-link',
+}
+
+/**
+ * Module: @typo3/backend/form-engine/element/link-element
+ *
+ * Functionality for the link element
+ *
+ * @example
+ * <typo3-formengine-element-link recordFieldId="some-id">
+ *   ...
+ * </typo3-formengine-element-link>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class LinkElement extends HTMLElement {
+  constructor() {
+    super();
+
+    this.addEventListener('click', (e: Event) => this.handleClick(e));
+    this.addEventListener('change', (e: Event) => this.handleChange(e));
+  }
+
+  private get element(): HTMLSelectElement {
+    const recordFieldId = this.getAttribute('recordFieldId');
+    if (recordFieldId === null) {
+      throw new Error('Missing recordFieldId attribute on <typo3-formengine-element-link>');
+    }
+
+    const element = this.querySelector<HTMLSelectElement>(selector`#${recordFieldId}`);
+    if (element === null) {
+      throw new Error(`recordFieldId #${recordFieldId} not found in <typo3-formengine-element-link>`);
+    }
+
+    return element;
+  }
+
+  private get container(): HTMLElement {
+    return this.element.closest<HTMLElement>(Selectors.containerSelector);
+  }
+
+  private get toggleSelector(): HTMLButtonElement {
+    return this.container.querySelector<HTMLButtonElement>(Selectors.toggleSelector);
+  }
+
+  private get explanationField(): HTMLInputElement {
+    return this.container.querySelector<HTMLInputElement>(Selectors.explanationSelector);
+  }
+
+  private get icon(): HTMLSpanElement {
+    return this.container.querySelector<HTMLSpanElement>(Selectors.iconSelector);
+  }
+
+  private handleClick(e: Event): void {
+    const initiator = e.target as Element;
+    const isToggleButton = initiator.closest(Selectors.toggleSelector) !== null;
+    if (isToggleButton) {
+      e.preventDefault();
+      const explanationHidden = this.explanationField.hasAttribute('hidden');
+      if (explanationHidden) {
+        this.showExplanation();
+      } else {
+        this.hideExplanation();
+      }
+    }
+  }
+
+  private handleChange(e: Event): void {
+    const initiator = e.target as Element;
+    const isInputField = initiator.closest(Selectors.inputFieldSelector) !== null;
+    if (isInputField) {
+      const explanationVisible = !this.explanationField.hasAttribute('hidden');
+      if (explanationVisible) {
+        this.hideExplanation();
+      }
+      this.disableToggle();
+      this.clearIcon();
+    }
+  }
+
+  private showExplanation(): void {
+    this.explanationField.removeAttribute('hidden');
+    this.element.setAttribute('hidden', '');
+  }
+
+  private hideExplanation(): void {
+    this.explanationField.setAttribute('hidden', '');
+    this.element.removeAttribute('hidden');
+  }
+
+  private disableToggle(): void {
+    this.toggleSelector.setAttribute('disabled', '');
+  }
+
+  private clearIcon(): void {
+    this.icon.replaceChildren();
+  }
+}
+
+window.customElements.define('typo3-formengine-element-link', LinkElement);

package/backend/form-engine/element/mfa-info-element.ts

@@ -0,0 +1,169 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+import Notification from '@typo3/backend/notification';
+import Modal from '@typo3/backend/modal';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import { selector } from '@typo3/core/literals';
+import { sudoModeInterceptor } from '@typo3/backend/security/sudo-mode-interceptor';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+interface FieldOptions {
+  userId: number,
+  tableName: string
+}
+
+interface Response {
+  success: boolean;
+  status: Array<Status>;
+  remaining: number;
+}
+
+interface Status {
+  title: string;
+  message: string;
+}
+
+enum Selectors {
+  deactivteProviderButton = '.t3js-deactivate-provider-button',
+  deactivteMfaButton = '.t3js-deactivate-mfa-button',
+  providerslist = '.t3js-mfa-active-providers-list',
+  mfaStatusLabel = '.t3js-mfa-status-label',
+}
+
+class MfaInfoElement {
+  private readonly options: FieldOptions = null;
+  private fullElement: HTMLElement = null;
+  private deactivteProviderButtons: NodeListOf<HTMLButtonElement> = null;
+  private deactivteMfaButton: HTMLButtonElement = null;
+  private providersList: HTMLUListElement = null;
+  private mfaStatusLabel: HTMLSpanElement = null;
+  private request: AjaxRequest = null;
+
+  constructor(selector: string, options: FieldOptions) {
+    this.options = options;
+    DocumentService.ready().then((document: Document): void => {
+      this.fullElement = document.querySelector(selector);
+      this.deactivteProviderButtons = this.fullElement.querySelectorAll(Selectors.deactivteProviderButton);
+      this.deactivteMfaButton = this.fullElement.querySelector(Selectors.deactivteMfaButton);
+      this.providersList = this.fullElement.querySelector(Selectors.providerslist);
+      this.mfaStatusLabel = this.fullElement.parentElement.querySelector(Selectors.mfaStatusLabel);
+      this.registerEvents();
+    });
+  }
+
+  private registerEvents(): void {
+    new RegularEvent('click', (e: Event): void => {
+      e.preventDefault();
+      this.prepareDeactivateRequest(this.deactivteMfaButton);
+    }).bindTo(this.deactivteMfaButton);
+
+    this.deactivteProviderButtons.forEach((buttonElement: HTMLButtonElement): void => {
+      new RegularEvent('click', (e: Event): void => {
+        e.preventDefault();
+        this.prepareDeactivateRequest(buttonElement);
+      }).bindTo(buttonElement);
+    });
+  }
+
+  private prepareDeactivateRequest(button: HTMLButtonElement): void {
+    const modal = Modal.show(
+      button.dataset.confirmationTitle || button.getAttribute('title') || 'Deactivate provider(s)',
+      button.dataset.confirmationContent || 'Are you sure you want to continue? This action cannot be undone and will be applied immediately!',
+      SeverityEnum.warning,
+      [
+        {
+          text: button.dataset.confirmationCancelText || 'Cancel',
+          active: true,
+          btnClass: 'btn-default',
+          name: 'cancel'
+        },
+        {
+          text: button.dataset.confirmationDeactivateText || 'Deactivate',
+          btnClass: 'btn-warning',
+          name: 'deactivate',
+          trigger: (): void => {
+            this.sendDeactivateRequest(button.dataset.provider);
+          }
+        }
+      ]
+    );
+
+    modal.addEventListener('button.clicked', (): void => {
+      modal.hideModal();
+    });
+  }
+
+  private sendDeactivateRequest(provider?: string): void {
+    if (this.request instanceof AjaxRequest) {
+      this.request.abort();
+    }
+    this.request = (new AjaxRequest(TYPO3.settings.ajaxUrls.mfa)).addMiddleware(sudoModeInterceptor);
+    this.request.post({
+      action: 'deactivate',
+      provider: provider,
+      userId: this.options.userId,
+      tableName: this.options.tableName
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const data: Response = await response.resolve();
+      if (data.status.length > 0) {
+        data.status.forEach((status: Status): void => {
+          if (data.success) {
+            Notification.success(status.title, status.message);
+          } else {
+            Notification.error(status.title, status.message);
+          }
+        });
+      }
+      if (!data.success) {
+        return;
+      }
+      if (provider === undefined || data.remaining === 0) {
+        this.deactivateMfa();
+        return;
+      }
+      if (this.providersList === null) {
+        return;
+      }
+      const providerEntry: HTMLLIElement = this.providersList.querySelector(selector`li#provider-${provider}`);
+      if (providerEntry === null) {
+        return;
+      }
+      providerEntry.remove();
+      const providerEntries: NodeListOf<HTMLLIElement> = this.providersList.querySelectorAll('li');
+      if (providerEntries.length === 0){
+        this.deactivateMfa();
+      }
+    }).finally((): void => {
+      this.request = null;
+    });
+  }
+
+  private deactivateMfa(): void {
+    this.deactivteMfaButton.classList.add('disabled');
+    this.deactivteMfaButton.setAttribute('disabled', 'disabled');
+    if (this.providersList !== null) {
+      this.providersList.remove();
+    }
+    if (this.mfaStatusLabel !== null) {
+      this.mfaStatusLabel.innerText = this.mfaStatusLabel.dataset.alternativeLabel;
+      this.mfaStatusLabel.classList.remove('badge-success');
+      this.mfaStatusLabel.classList.add('badge-danger');
+    }
+  }
+}
+
+export default MfaInfoElement;

package/backend/form-engine/element/modifier/resizable.ts

@@ -0,0 +1,27 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import autosize from 'autosize';
+
+/**
+ * Convert textarea so they grow when it is typed in.
+ */
+export class Resizable {
+
+  /**
+   * @param {HTMLTextAreaElement} textarea
+   */
+  public static enable(textarea: HTMLTextAreaElement): void {
+    autosize(textarea);
+  }
+}

package/backend/form-engine/element/modifier/tabbable.ts

@@ -0,0 +1,29 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Convert textarea to enable tab
+ */
+export class Tabbable {
+
+  /**
+   * @param {HTMLTextAreaElement} textarea
+   */
+  public static enable(textarea: HTMLTextAreaElement): void {
+    if (textarea.classList.contains('t3js-enable-tab')) {
+      import('taboverride').then(({ default: taboverride }): void => {
+        taboverride.set(textarea);
+      });
+    }
+  }
+}

package/backend/form-engine/element/online-media-form-element.ts

@@ -0,0 +1,65 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { customElement, property } from 'lit/decorators';
+import { LitElement, type TemplateResult, html } from 'lit';
+
+/**
+ * Module: @typo3/backend/form-engine/element/online-media-form-element
+ */
+@customElement('typo3-backend-formengine-online-media-form')
+export class OnlineMediaFormElement extends LitElement {
+  @property({ type: String }) placeholder: string;
+  @property({ type: String, attribute: 'help-text' }) allowedExtensionsHelpText: string;
+  @property({ type: String, attribute: 'extensions' }) allowedExtensions: string;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <form @submit="${ this.dispatchSubmitEvent }">
+        <div class="form-control-wrap">
+          <input type="text" class="form-control" name="online-media-url" placeholder="${this.placeholder}" required>
+          <div class="form-text">
+            ${this.allowedExtensionsHelpText}<br>
+            <ul class="badge-list">
+            ${this.allowedExtensions.split(',').map((ext: string) => html`
+              <li><span class="badge badge-success">${ext.trim().toUpperCase()}</span></li>
+            `)}
+            </ul>
+          </div>
+        </div>
+      </form>
+    `;
+  }
+
+  private dispatchSubmitEvent(e: SubmitEvent): void {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const submittedData = Object.fromEntries(formData);
+
+    this.dispatchEvent(new CustomEvent('typo3:formengine:online-media-added', {
+      detail: submittedData
+    }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-formengine-online-media-form': OnlineMediaFormElement;
+  }
+}

package/backend/form-engine/element/password-element.ts

@@ -0,0 +1,71 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DocumentService from '@typo3/core/document-service';
+import { selector } from '@typo3/core/literals';
+
+/**
+ * Module: @typo3/backend/form-engine/element/password-element
+ *
+ * Functionality for the password element
+ *
+ * @example
+ * <typo3-formengine-element-password recordFieldId="some-id" passwordPolicy="some-policy">
+ *   ...
+ * </typo3-formengine-element-password>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class PasswordElement extends HTMLElement {
+  private element: HTMLInputElement = null;
+  private passwordPolicyInfo: HTMLElement|null = null;
+  private passwordPolicySet: boolean = false;
+
+  public async connectedCallback(): Promise<void> {
+    if (this.element !== null) {
+      // Element is already initialized, which means the component has been rendered before. Nothing to do here.
+      return;
+    }
+
+    const recordFieldId = this.getAttribute('recordFieldId');
+    if (recordFieldId === null) {
+      return;
+    }
+
+    await DocumentService.ready();
+    this.element = this.querySelector<HTMLInputElement>(selector`#${recordFieldId}`);
+    if (!this.element) {
+      return;
+    }
+
+    this.passwordPolicyInfo = this.querySelector<HTMLElement>(selector`#password-policy-info-${this.element.id}`);
+    this.passwordPolicySet = (this.getAttribute('passwordPolicy') || '') !== '';
+
+    this.registerEventHandler();
+  }
+
+  private registerEventHandler(): void {
+    if (this.passwordPolicySet && this.passwordPolicyInfo !== null) {
+      this.element.addEventListener('focusin', (): void => {
+        this.passwordPolicyInfo.classList.remove('hidden');
+      });
+
+      this.element.addEventListener('focusout', (): void => {
+        this.passwordPolicyInfo.classList.add('hidden');
+      });
+    }
+  }
+}
+
+window.customElements.define('typo3-formengine-element-password', PasswordElement);