typo3-typescript-sources 13.4.20

package/beuser/permissions.ts

@@ -0,0 +1,291 @@
+/*
+ * 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 type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import RegularEvent from '@typo3/core/event/regular-event';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+
+/**
+ * Module: @typo3/beuser/permissions
+ * Javascript functions regarding the permissions module
+ */
+class Permissions {
+  private readonly options: any = {
+    containerSelector: '#typo3-permissionList',
+    editControllerSelector: '#PermissionControllerEdit',
+  };
+
+  private readonly ajaxUrl: string = TYPO3.settings.ajaxUrls.user_access_permissions;
+
+  constructor() {
+    this.initializeCheckboxGroups();
+    this.initializeEvents();
+  }
+
+  /**
+   * Changes the value of the permissions in the form
+   */
+  private static setPermissionCheckboxes(checknames: string, permissionValue: number): void {
+    const permissionCheckboxes: NodeListOf<HTMLInputElement> = document.querySelectorAll(`input[type="checkbox"][name^="${checknames}"]`);
+    for (const permissionCheckbox of permissionCheckboxes) {
+      const value = parseInt(permissionCheckbox.value, 10);
+      permissionCheckbox.checked = (permissionValue & value) === value;
+    }
+  }
+
+  /**
+   * checks for a change of the permissions in the form
+   */
+  private static updatePermissionValue(checknames: string, varname: string): void {
+    let permissionValue = 0;
+    const checkedPermissionCheckboxes: NodeListOf<HTMLInputElement> = document.querySelectorAll(`input[type="checkbox"][name^="${checknames}"]:checked`);
+    for (const permissionCheckbox of checkedPermissionCheckboxes) {
+      permissionValue |= parseInt(permissionCheckbox.value, 10);
+    }
+    document.forms.namedItem('editform')[varname].value = permissionValue | (checknames === 'check[perms_user]' ? 1 : 0);
+  }
+
+  /**
+   * Changes permissions by sending an AJAX request to the server
+   */
+  private setPermissions(element: HTMLElement): void {
+    const page = element.dataset.page;
+    const who = element.dataset.who;
+    const bits = element.dataset.bits;
+
+    (new AjaxRequest(this.ajaxUrl)).post({
+      page: page,
+      who: who,
+      permissions: element.dataset.permissions,
+      mode: element.dataset.mode,
+      bits: element.dataset.bits,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      const parentElement = element.parentElement;
+      parentElement.innerHTML = data;
+      const targetElement = parentElement.querySelector('button[data-bits="' + bits + '"]') as HTMLButtonElement;
+      targetElement.focus();
+    });
+  }
+
+  /**
+   * changes the flag to lock the editing on a page by sending an AJAX request
+   */
+  private toggleEditLock(element: HTMLElement): void {
+    const page = element.dataset.page;
+    (new AjaxRequest(this.ajaxUrl)).post({
+      action: 'toggle_edit_lock',
+      page: page,
+      editLockState: element.dataset.lockstate,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      const parentElement = element.parentElement;
+      element.outerHTML = data;
+      const targetElement = parentElement.querySelector('button[data-page="' + page + '"]') as HTMLButtonElement;
+      targetElement.focus();
+    });
+  }
+
+  /**
+   * Owner-related: Set the new owner of a page by executing an ajax call
+   */
+  private changeOwner(element: HTMLElement): void {
+    const page = element.dataset.page;
+    const container: HTMLElement = document.getElementById('o_' + page);
+
+    (new AjaxRequest(this.ajaxUrl)).post({
+      action: 'change_owner',
+      page: page,
+      ownerUid: element.dataset.owner,
+      newOwnerUid: (container.getElementsByTagName('select')[0] as HTMLSelectElement).value,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      // Replace content
+      container.outerHTML = await response.resolve();
+    });
+  }
+
+  /**
+   * Owner-related: load the selector for selecting
+   * the owner of a page by executing an ajax call
+   */
+  private showChangeOwnerSelector(element: HTMLElement): void {
+    const page = element.dataset.page;
+
+    (new AjaxRequest(this.ajaxUrl)).post({
+      action: 'show_change_owner_selector',
+      page: page,
+      ownerUid: element.dataset.owner,
+      username: element.dataset.username,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      // Replace content
+      document.getElementById('o_' + page).outerHTML = await response.resolve();
+    });
+  }
+
+  /**
+   * Owner-related: Update the HTML view and show the original owner
+   */
+  private restoreOwner(element: HTMLElement): void {
+    const page = element.dataset.page;
+    const username = element.dataset.username ?? element.dataset.ifNotSet;
+    const span = document.createElement('span');
+    span.setAttribute('id', `o_${page}`);
+
+    const buttonSelector = document.createElement('button');
+    buttonSelector.classList.add('ug_selector', 'changeowner', 'btn', 'btn-sm', 'btn-link');
+    buttonSelector.setAttribute('type', 'button');
+    buttonSelector.setAttribute('data-page', page);
+    buttonSelector.setAttribute('data-owner', element.dataset.owner);
+    buttonSelector.setAttribute('data-username', username);
+    buttonSelector.innerText = username;
+    span.appendChild(buttonSelector);
+
+    // Replace content
+    const container = document.getElementById('o_' + page);
+    container.parentNode.replaceChild(span, container);
+  }
+
+  /**
+   * Group-related: Update the HTML view and show the original group
+   */
+  private restoreGroup(element: HTMLElement): void {
+    const page = element.dataset.page;
+    const groupname = element.dataset.groupname ?? element.dataset.ifNotSet;
+    const span = document.createElement('span');
+    span.setAttribute('id', `g_${page}`);
+
+    const buttonSelector = document.createElement('button');
+    buttonSelector.classList.add('ug_selector', 'changegroup', 'btn', 'btn-sm', 'btn-link');
+    buttonSelector.setAttribute('type', 'button');
+    buttonSelector.setAttribute('data-page', page);
+    buttonSelector.setAttribute('data-group-id', element.dataset.groupId);
+    buttonSelector.setAttribute('data-groupname', groupname);
+    buttonSelector.innerText = groupname;
+    span.appendChild(buttonSelector);
+
+    // Replace content
+    const container = document.getElementById('g_' + page);
+    container.parentNode.replaceChild(span, container);
+  }
+
+  /**
+   * Group-related: Set the new group by executing an ajax call
+   */
+  private changeGroup(element: HTMLElement): void {
+    const page = element.dataset.page;
+    const container: HTMLElement = document.getElementById('g_' + page);
+
+    (new AjaxRequest(this.ajaxUrl)).post({
+      action: 'change_group',
+      page: page,
+      groupUid: element.dataset.groupId,
+      newGroupUid: (container.getElementsByTagName('select')[0] as HTMLSelectElement).value,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      // Replace content
+      container.outerHTML = await response.resolve();
+    });
+  }
+
+  /**
+   * Group-related: Load the selector by executing an ajax call
+   */
+  private showChangeGroupSelector(element: HTMLElement): void {
+    const page = element.dataset.page;
+    (new AjaxRequest(this.ajaxUrl)).post({
+      action: 'show_change_group_selector',
+      page: page,
+      groupUid: element.dataset.groupId,
+      groupname: element.dataset.groupname,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      // Replace content
+      document.getElementById('g_' + page).outerHTML = await response.resolve();
+    });
+  }
+
+  private initializeCheckboxGroups(): void {
+    const checkboxGroups: NodeListOf<HTMLInputElement> = document.querySelectorAll('[data-checkbox-group]');
+    checkboxGroups.forEach((checkboxGroupCheckbox): void => {
+      const permissionGroup = checkboxGroupCheckbox.dataset.checkboxGroup;
+      const permissionValue = parseInt(checkboxGroupCheckbox.value, 10);
+      Permissions.setPermissionCheckboxes(permissionGroup, permissionValue);
+    });
+  }
+
+  /**
+   * initializes events using deferred bound to document
+   * so AJAX reloads are no problem
+   */
+  private initializeEvents(): void {
+    const containerSelector = document.querySelector(this.options.containerSelector);
+    const editControllerSelector = document.querySelector(this.options.editControllerSelector);
+
+    if (containerSelector !== null) {
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.setPermissions(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.change-permission');
+
+      // Click event for lock state
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.toggleEditLock(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.editlock');
+
+      // Click event to change owner
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.showChangeOwnerSelector(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.changeowner');
+
+      // Click event to change group
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.showChangeGroupSelector(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.changegroup');
+
+      // Add click handler for restoring previous owner
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.restoreOwner(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.restoreowner');
+
+      // Add click handler for saving owner
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.changeOwner(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.saveowner');
+
+      // Add click handler for restoring previous group
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.restoreGroup(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.restoregroup');
+
+      // Add click handler for saving group
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        e.preventDefault();
+        this.changeGroup(currentTarget as HTMLElement);
+      }).delegateTo(containerSelector, '.savegroup');
+    }
+
+    if (editControllerSelector !== null) {
+      // Click events to change permissions (in template Edit.html)
+      new RegularEvent('click', (e: Event, currentTarget: Element): void => {
+        const args = (currentTarget as HTMLElement).dataset.checkChangePermissions.split(',').map((item: string) => item.trim());
+        Permissions.updatePermissionValue.apply(this, args);
+      }).delegateTo(editControllerSelector, '[data-check-change-permissions]');
+    }
+  }
+}
+
+export default new Permissions();

package/core/ajax/ajax-request-types.ts

@@ -0,0 +1,15 @@
+/*
+ * 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!
+ */
+
+export type RequestHandler = (request: Request) => Promise<Response>;
+export type RequestMiddleware = (request: Request, next: RequestHandler) => Promise<Response>;

package/core/ajax/ajax-request.ts

@@ -0,0 +1,202 @@
+/*
+ * 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 { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import { InputTransformer, type GenericKeyValue } from './input-transformer';
+import type { RequestMiddleware, RequestHandler } from '@typo3/core/ajax/ajax-request-types';
+
+/**
+ * @example send data as `Content-Type: multipart/form-data` (default)
+ * const request = new AjaxRequest('/endpoint');
+ * const response = request.post({item: { first: 'value'}});
+ * // sends `item[first]=value` in request body (analogous)
+ * // can be used like this server-side
+ * // `$value = ServerRequest::getParsedBody()['item']['first']`
+ *
+ * @example send data as `Content-Type: application/json` (must be set explicit)
+ * const request = new AjaxRequest('/endpoint');
+ * const response = request.post({item: { first: 'value'}});
+ * // sends `{"item":{"first":"value"}}` in request body
+ * // can be used like this server-side
+ * // `$value = json_decode((string)ServerRequest::getBody(), true)['item']['first']`
+ */
+class AjaxRequest {
+  private static readonly defaultOptions: RequestInit = {
+    credentials: 'same-origin'
+  };
+
+  private readonly url: URL;
+  private readonly abortController: AbortController;
+  private fetch: RequestHandler;
+
+  constructor(url: URL|string) {
+    this.url = url instanceof URL ? url : new URL(url, window.location.origin + window.location.pathname);
+    this.abortController = new AbortController();
+    this.fetch = (request: Request) => fetch(request);
+  }
+
+  /**
+   * Clones the AjaxRequest object, generates the final query string and uses it for the request
+   *
+   * @param {string|array|GenericKeyValue} data
+   * @return {AjaxRequest}
+   */
+  public withQueryArguments(data: string | Array<string> | GenericKeyValue | URLSearchParams): AjaxRequest {
+    const clone = this.clone();
+
+    if (!(data instanceof URLSearchParams)) {
+      data = new URLSearchParams(InputTransformer.toSearchParams(data));
+    }
+    for (const [key, value] of data.entries()) {
+      this.url.searchParams.append(key, value);
+    }
+    return clone;
+  }
+
+  /**
+   * Executes a regular GET request
+   *
+   * @param {RequestInit} init
+   * @return {Promise<Response>}
+   */
+  public async get(init: RequestInit = {}): Promise<AjaxResponse> {
+    const localDefaultOptions: RequestInit = {
+      method: 'GET',
+    };
+
+    const response = await this.send({ ...localDefaultOptions, ...init });
+    return new AjaxResponse(response);
+  }
+
+  /**
+   * Executes a (by default uncached) POST request
+   *
+   * @param {string | FormData | GenericKeyValue} data
+   * @param {RequestInit} init
+   * @return {Promise<Response>}
+   */
+  public async post(data: string | FormData | GenericKeyValue, init: RequestInit = {}): Promise<AjaxResponse> {
+    const localDefaultOptions: RequestInit = {
+      body: typeof data === 'string' || data instanceof FormData ? data : ( Object.keys(data).length ? InputTransformer.byHeader(data, init?.headers) : ''),
+      cache: 'no-cache',
+      method: 'POST',
+    };
+
+    const response = await this.send({ ...localDefaultOptions, ...init });
+    return new AjaxResponse(response);
+  }
+
+  /**
+   * Executes a (by default uncached) PUT request
+   *
+   * @param {string | FormData | GenericKeyValue} data
+   * @param {RequestInit} init
+   * @return {Promise<Response>}
+   */
+  public async put(data: string | FormData | GenericKeyValue, init: RequestInit = {}): Promise<AjaxResponse> {
+    const localDefaultOptions: RequestInit = {
+      body: typeof data === 'string' || data instanceof FormData ? data : InputTransformer.byHeader(data, init?.headers),
+      cache: 'no-cache',
+      method: 'PUT',
+    };
+
+    const response = await this.send({ ...localDefaultOptions, ...init });
+    return new AjaxResponse(response);
+  }
+
+  /**
+   * Executes a regular DELETE request
+   *
+   * @param {string | FormData | GenericKeyValue} data
+   * @param {RequestInit} init
+   * @return {Promise<Response>}
+   */
+  public async delete(data: string | FormData | GenericKeyValue = {}, init: RequestInit = {}): Promise<AjaxResponse> {
+    const localDefaultOptions: RequestInit = {
+      cache: 'no-cache',
+      method: 'DELETE',
+    };
+
+    if ((typeof data === 'string' && data.length > 0) || data instanceof FormData) {
+      localDefaultOptions.body = data;
+    } else if (typeof data === 'object' && Object.keys(data).length > 0) {
+      localDefaultOptions.body = InputTransformer.byHeader(data, init?.headers);
+    }
+
+    const response = await this.send({ ...localDefaultOptions, ...init });
+    return new AjaxResponse(response);
+  }
+
+  /**
+   * Aborts the current request by using the AbortController
+   */
+  public abort(): void {
+    this.abortController.abort();
+  }
+
+  /**
+   * Adds an outer middleware around the fetch invocation.
+   * Previous registered middlewares are handled after
+   * the one(s) that is/are added here.
+   *
+   * @param {RequestMiddleware | RequestMiddleware[]} middleware
+   * @return {AjaxRequest}
+   */
+  public addMiddleware(middleware: RequestMiddleware | RequestMiddleware[]): AjaxRequest {
+    if (Array.isArray(middleware)) {
+      middleware.forEach(middleware => this.addMiddleware(middleware));
+      return this;
+    }
+
+    const next = this.fetch;
+    this.fetch = (request: Request) => middleware(request, next);
+    return this;
+  }
+
+  /**
+   * Clones the current AjaxRequest object
+   *
+   * @return {AjaxRequest}
+   */
+  private clone(): AjaxRequest {
+    return Object.assign(Object.create(this), this);
+  }
+
+  /**
+   * Sends the requests by using the fetch API
+   *
+   * @param {RequestInit} init
+   * @return {Promise<Response>}
+   */
+  private async send(init: RequestInit = {}): Promise<Response> {
+    const response = await this.fetch(new Request(this.url, this.getMergedOptions(init)));
+    if (!response.ok) {
+      throw new AjaxResponse(response);
+    }
+    return response;
+  }
+
+  /**
+   * Merge the incoming RequestInit object with the pre-defined default options
+   *
+   * @param {RequestInit} init
+   * @return {RequestInit}
+   */
+  private getMergedOptions(init: RequestInit): RequestInit {
+    const { signal, ...initOptions } = init;
+    signal?.addEventListener('abort', () => this.abortController.abort());
+    return { ...AjaxRequest.defaultOptions, ...initOptions, signal: this.abortController.signal };
+  }
+}
+
+export default AjaxRequest;

package/core/ajax/ajax-response.ts

@@ -0,0 +1,57 @@
+/*
+ * 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 type SimpleResponseInterface from './simple-response-interface';
+
+export class AjaxResponse {
+  public readonly response: Response;
+  private resolvedBody: string | any;
+
+  constructor(response: Response) {
+    this.response = response;
+  }
+
+  public async resolve(expectedType?: string): Promise<string | any> {
+    // streams can only be read once
+    // (otherwise response would have to be cloned)
+    if (typeof this.resolvedBody !== 'undefined') {
+      return this.resolvedBody;
+    }
+    const contentType: string = this.response.headers.get('Content-Type') ?? '';
+    if (expectedType === 'json' || contentType.startsWith('application/json')) {
+      this.resolvedBody = await this.response.json();
+    } else {
+      this.resolvedBody = await this.response.text();
+    }
+    return this.resolvedBody;
+  }
+
+  public raw(): Response {
+    return this.response;
+  }
+
+  /**
+   * Dereferences response data from current `window` scope. A dereferenced
+   * response (`SimpleResponseInterface`) can be used in events or messages
+   * for broadcasting to other windows/frames.
+   */
+  public async dereference(): Promise<SimpleResponseInterface> {
+    const headers = new Map<string, string>();
+    this.response.headers.forEach((value: string, name: string) => headers.set(name, value));
+    return {
+      status: this.response.status,
+      headers: headers,
+      body: await this.resolve()
+    } as SimpleResponseInterface;
+  }
+}

package/core/ajax/input-transformer.ts

@@ -0,0 +1,92 @@
+/*
+ * 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!
+ */
+
+export type GenericKeyValue = { [key: string]: any};
+
+export class InputTransformer {
+  /**
+   * Transforms data by its incoming headers
+   *
+   * @param data
+   * @param headers
+   */
+  public static byHeader(data: GenericKeyValue, headers: GenericKeyValue = {}): FormData | string {
+    if ('Content-Type' in headers && headers['Content-Type'].includes('application/json')) {
+      return JSON.stringify(data);
+    }
+
+    return InputTransformer.toFormData(data);
+  }
+
+  /**
+   * Transforms the incoming object to a flat FormData object used for POST and PUT
+   *
+   * @param {GenericKeyValue} data
+   * @return {FormData}
+   */
+  public static toFormData(data: GenericKeyValue): FormData {
+    const flattenedData = InputTransformer.filter(InputTransformer.flattenObject(data));
+    const formData = new FormData();
+    for (const [key, value] of Object.entries(flattenedData)) {
+      formData.set(key, value);
+    }
+
+    return formData;
+  }
+
+  /**
+   * Transforms the incoming object to a flat URLSearchParams object used for GET
+   *
+   * @param {string | Array<string> | GenericKeyValue} data
+   * @return {string}
+   */
+  public static toSearchParams(data: string | Array<string> | GenericKeyValue): string {
+    if (typeof data === 'string') {
+      return data;
+    }
+
+    if (data instanceof Array) {
+      return data.join('&');
+    }
+
+    const flattenedData = InputTransformer.filter(InputTransformer.flattenObject(data));
+    const searchParams = new URLSearchParams();
+    for (const [key, value] of Object.entries(flattenedData)) {
+      searchParams.set(key, value);
+    }
+
+    return decodeURI(searchParams.toString());
+  }
+
+  private static flattenObject(obj: GenericKeyValue, prefix: string = ''): GenericKeyValue {
+    return Object.keys(obj).reduce((accumulator: GenericKeyValue, currentValue: any) => {
+      const objPrefix = prefix.length ? prefix + '[' : '';
+      const objSuffix = prefix.length ? ']' : '';
+      if (typeof obj[currentValue] === 'object' && obj[currentValue] !== null) {
+        Object.assign(accumulator, InputTransformer.flattenObject(obj[currentValue], objPrefix + currentValue + objSuffix));
+      } else {
+        accumulator[objPrefix + currentValue + objSuffix] = obj[currentValue];
+      }
+      return accumulator;
+    }, {});
+  }
+
+  private static filter(obj: GenericKeyValue): GenericKeyValue {
+    Object.keys(obj).forEach((key: string): void => {
+      if (typeof obj[key] === 'undefined') {
+        delete obj[key];
+      }
+    });
+    return obj;
+  }
+}

package/core/ajax/simple-response-interface.ts

@@ -0,0 +1,5 @@
+export default interface SimpleResponseInterface {
+  status: number;
+  headers: Map<string, string>;
+  body: string | unknown;
+}