diff --git a/cms-ui/apps/admin-ui/e2e/api-tokens.spec.ts b/cms-ui/apps/admin-ui/e2e/api-tokens.spec.ts new file mode 100644 index 0000000000..1fbc6d62aa --- /dev/null +++ b/cms-ui/apps/admin-ui/e2e/api-tokens.spec.ts @@ -0,0 +1,239 @@ +import { + createClient, + EntityImporter, + findNotification, + findTableAction, + GroupImportData, + IMPORT_ID, + IMPORT_TYPE, + IMPORT_TYPE_GROUP, + IMPORT_TYPE_USER, + ImportPermissions, + loginWithForm, + matchRequest, + navigateToApp, + openContext, + TestSize, + UserImportData, +} from '@gentics/e2e-utils'; +import { expect, Page, test } from '@playwright/test'; +import { cloneWithSymbols } from '@gentics/common'; +import { AccessControlledType, GcmsPermission, LoginResponse } from '@gentics/cms-models'; + +const API_MODAL = 'gtx-api-tokens-modal'; +const API_CREATE_MODAL = 'gtx-api-tokens-create-modal'; +const BASE_GROUP: GroupImportData = { + [IMPORT_TYPE]: IMPORT_TYPE_GROUP, + [IMPORT_ID]: 'apiTokenMaintenance_group_base', + name: 'apiTokenMaintenance_base', + description: 'Api-Token-Maintenance: Base', + permissions: [], +}; + +const TEST_USER: UserImportData = { + [IMPORT_TYPE]: IMPORT_TYPE_USER, + [IMPORT_ID]: 'apiTokenMaintenance_user_test', + + email: 'test@example.com', + firstName: 'Content-Maintenance', + lastName: 'Test', + group: BASE_GROUP, + + login: 'apiTokenMaintenance_test', + password: 'foobar2026', +}; + +test.describe('Api Tokens', () => { + + const IMPORTER = new EntityImporter(); + let login: LoginResponse; + + test.beforeAll(async ({ request }) => { + await test.step('Client Setup', async () => { + IMPORTER.setApiContext(request); + await IMPORTER.clearClient(); + }); + + await test.step('Test Bootstrapping', async () => { + await IMPORTER.cleanupTest(); + await IMPORTER.bootstrapSuite(TestSize.MINIMAL); + }); + }); + + test.beforeEach(async ({ page, request, context }) => { + await test.step('Client Setup', async () => { + IMPORTER.setApiContext(request); + await context.clearCookies(); + await IMPORTER.clearClient(); + }); + + await test.step('Common Test Setup', async () => { + await IMPORTER.cleanupTest(); + await IMPORTER.syncPackages(TestSize.MINIMAL); + await IMPORTER.setupTest(TestSize.MINIMAL); + }); + + await navigateToApp(page); + + await setupWithPermissions(IMPORTER, login, page, [ + { + type: AccessControlledType.ADMIN, + perms: [ + { type: GcmsPermission.SET_PERMISSION, value: true }, + ], + }, + ]); + }); + + test('should show api modal', async ({ page }) => { + await openApiTokenModal(page); + + const table = page.locator(API_MODAL).locator('gtx-manage-api-tokens-table'); + + await expect(table).toBeVisible(); + }); + + test('should show api creation modal', async ({ page }) => { + await openApiTokenModal(page); + + await openApiTokenCreateModal(page); + + await expect(page.locator(API_CREATE_MODAL)).toBeVisible(); + }); + + test('can save when form is valid', async ({ page }) => { + await openApiTokenModal(page); + + await openApiTokenCreateModal(page); + + const form = page.locator(API_CREATE_MODAL).locator('form'); + + await expect(form).toBeVisible(); + + const submitBtn = page.locator(API_CREATE_MODAL).locator('.modal-footer').locator('[data-action="confirm"]'); + + await expect(submitBtn.locator('button')).toBeDisabled(); + + // fill only name, keep date empty + const nameInput = form.locator('input[type="text"]'); + await nameInput.fill('Test'); + + await expect(submitBtn.locator('button')).toBeEnabled(); + + const dateInput = form.locator('input[type="date"]'); + + // fill with date from yesterday + const yesterday = new Date(); + yesterday.setDate(yesterday.getDate() - 1); + + await dateInput.fill(yesterday.toISOString().split('T')[0]); + + await expect(submitBtn.locator('button')).toBeDisabled(); + + // fill with date from tomorrow + const tomorrow = new Date(); + tomorrow.setDate(tomorrow.getDate() + 1); + + await dateInput.fill(tomorrow.toISOString().split('T')[0]); + + await expect(submitBtn.locator('button')).toBeEnabled(); + + await submitBtn.click(); + + await expect(page.locator('.success-message')).toBeVisible(); + await expect(findNotification(page, 'api-token-create-success')).toBeVisible(); + await expect(page.locator('.success-message').locator('.content')).toHaveText(/\S+/); + }); + + test('can delete Api Tokens', async ({ page }) => { + await addEntries(login, page, 1); + await openApiTokenModal(page); + + const table = page.locator(API_MODAL).locator('gtx-manage-api-tokens-table'); + + await expect(table).toBeVisible(); + + const row = table.locator('.data-row').first(); + + const deleteButton = findTableAction(row, 'delete'); + + await deleteButton.click(); + + await expect(page.locator('[data-action="api-token-delete"]')).toBeVisible(); + + await page.locator('[data-action="api-token-delete"]').click(); + + await expect(findNotification(page, 'api-token-delete-success')).toBeVisible(); + + await expect(row).not.toBeAttached(); + }); + + test('can delete multiple Api Tokens', async ({ page }) => { + await addEntries(login, page, 2); + await openApiTokenModal(page); + + const table = page.locator(API_MODAL).locator('gtx-manage-api-tokens-table'); + + await expect(table).toBeVisible(); + + const row = table.locator('.header-row'); + + await row.locator('gtx-checkbox').click(); + + await findTableAction(row, 'delete').click(); + + await expect(page.locator('[data-action="api-token-delete"]')).toBeVisible(); + + await page.locator('[data-action="api-token-delete"]').click(); + + await expect(findNotification(page, 'api-token-delete-success')).toBeVisible(); + + await expect(table.locator('.data-row')).toHaveCount(0); + }); + +}); + +async function openApiTokenModal(page: Page) { + await page.locator('gtx-user-menu .toggle-button').click(); + const menu = page.locator('gtx-user-menu'); + const dropdown = await openContext(menu.locator('.user-name gtx-dropdown-list')); + await dropdown.locator('[data-action="manage-api-tokens"]').click(); +} + +async function openApiTokenCreateModal(page: Page) { + const modalTable = page.locator(API_MODAL).locator('gtx-manage-api-tokens-table'); + const createNewBtn = modalTable.locator('[data-action="create"]'); + await createNewBtn.click(); +} + +async function addEntries(login: LoginResponse, page: Page, amount: number) { + const client = await createClient({ + context: page.context().request, + isPageContext: true, + }); + + client.sid = login?.sid ?? null; + + for (let i = 0; i < amount; i++) { + await client.admin.addApiTokens({ name: `token ${i + 1}` }).send(); + } +} + +async function setupWithPermissions(importer: EntityImporter, login: LoginResponse, page: Page, permissions: ImportPermissions[]): Promise { + await test.step('Test User Setup', async () => { + const TEST_GROUP = cloneWithSymbols(BASE_GROUP); + TEST_GROUP.permissions = permissions; + + await importer.importData([ + TEST_GROUP, + TEST_USER, + ]); + }); + + await test.step('Open ADMIN-UI', async () => { + await navigateToApp(page); + const loginReq = page.waitForResponse(matchRequest('POST', '/rest/auth/login')); + await loginWithForm(page, TEST_USER); + login = await (await loginReq).json(); + }); +} diff --git a/cms-ui/apps/admin-ui/public/i18n/de.json b/cms-ui/apps/admin-ui/public/i18n/de.json index 778be2e825..ab32a74cc4 100644 --- a/cms-ui/apps/admin-ui/public/i18n/de.json +++ b/cms-ui/apps/admin-ui/public/i18n/de.json @@ -753,7 +753,7 @@ "change_password_label": "Passwort ändern", "log_in": "Anmelden", "log_out": "Abmelden", - "logged_in_as": "'Angemeldet als {{name}}'", + "logged_in_as": "'Angemeldet als ", "password": "Passwort", "user_name": "Benutzername", "confirm_delete": "Nochmals klicken um zu löschen", diff --git a/cms-ui/apps/admin-ui/public/i18n/en.json b/cms-ui/apps/admin-ui/public/i18n/en.json index b3039a8c80..1bacb18221 100644 --- a/cms-ui/apps/admin-ui/public/i18n/en.json +++ b/cms-ui/apps/admin-ui/public/i18n/en.json @@ -753,7 +753,7 @@ "change_password_label": "Change password", "log_in": "Log In", "log_out": "Log out", - "logged_in_as": "'Logged in as {{name}}'", + "logged_in_as": "'Logged in as ", "password": "Password", "user_name": "User Name", "confirm_delete": "Click again to confirm delete", diff --git a/cms-ui/apps/admin-ui/src/app/app.component.html b/cms-ui/apps/admin-ui/src/app/app.component.html index d1fb8729f3..549910a51f 100644 --- a/cms-ui/apps/admin-ui/src/app/app.component.html +++ b/cms-ui/apps/admin-ui/src/app/app.component.html @@ -42,6 +42,7 @@ (toggle)="userMenuOpened = $event" (setLanguage)="setLanguageConfirmation($event)" (showPasswordModal)="onShowPasswordModal()" + (logout)="onLogoutClick()" > ; - @SelectState(state => state.auth.isLoggedIn) + @SelectState((state) => state.auth.isLoggedIn) isLoggedIn$: Observable; - @SelectState(state => state.messages.unread.length) + @SelectState((state) => state.messages.unread.length) unreadMessageCount$: Observable; activitiesCount$: Observable; @@ -112,11 +113,11 @@ export class AppComponent implements OnDestroy, OnInit { this.entityManager.init(); - this.showLoginSpinner$ = this.appState.select(state => state.auth).pipe( - map(auth => auth.loggingIn || auth.loggingOut), + this.showLoginSpinner$ = this.appState.select((state) => state.auth).pipe( + map((auth) => auth.loggingIn || auth.loggingOut), ); - this.keycloakSignOut$ = this.appState.select(state => state.features.global[Feature.KEYCLOAK_SIGNOUT]); + this.keycloakSignOut$ = this.appState.select((state) => state.features.global[Feature.KEYCLOAK_SIGNOUT]); this.authOps.validateSessionFromLocalStorage(); @@ -134,7 +135,7 @@ export class AppComponent implements OnDestroy, OnInit { }); this.message.poll(); - this.currentLanguage$ = this.appState.select(state => state.ui.language); + this.currentLanguage$ = this.appState.select((state) => state.ui.language); selectLoginEventOrIsLoggedIn(this.appState).pipe( takeUntil(this.stopper.stopper$), @@ -146,27 +147,27 @@ export class AppComponent implements OnDestroy, OnInit { this.usersnapService.init(); this.activitiesCount$ = this.activityManager.activities$.pipe( - map(tasks => tasks.length), + map((tasks) => tasks.length), ); this.activitiesPending$ = this.activityManager.activities$.pipe( - map(tasks => tasks.some(task => task.inProgress)), + map((tasks) => tasks.some((task) => task.inProgress)), ); - this.currentUser$ = this.appState.select(state => state.auth).pipe( - filter(auth => auth.isLoggedIn), - map(auth => auth.user), + this.currentUser$ = this.appState.select((state) => state.auth).pipe( + filter((auth) => auth.isLoggedIn), + map((auth) => auth.user), first(), ); - this.cmpVersion$ = this.appState.select(state => state.ui.cmpVersion); - this.uiVersion$ = this.appState.select(state => state.ui.uiVersion); - this.featureHideManual$ = this.appState.select(state => state.features.global[Feature.HIDE_MANUAL] || false); + this.cmpVersion$ = this.appState.select((state) => state.ui.cmpVersion); + this.uiVersion$ = this.appState.select((state) => state.ui.uiVersion); + this.featureHideManual$ = this.appState.select((state) => state.features.global[Feature.HIDE_MANUAL] || false); this.isLoggedIn$.pipe( - filter(loggedIn => loggedIn), + filter((loggedIn) => loggedIn), switchMap(() => this.nodeOperations.getAll()), - ).subscribe(nodes => { + ).subscribe((nodes) => { this.loadedNodes = nodes; this.changeDetector.markForCheck(); }); @@ -177,7 +178,7 @@ export class AppComponent implements OnDestroy, OnInit { } onLogoutClick(): void { - this.keycloakSignOut$.pipe(first()).subscribe(singleSignOut => { + this.keycloakSignOut$.pipe(first()).subscribe((singleSignOut) => { this.authOps.logout(this.appState.now.auth.sid) .then(() => { if (singleSignOut) { @@ -195,8 +196,8 @@ export class AppComponent implements OnDestroy, OnInit { setLanguageConfirmation(language: GcmsUiLanguage): void { this.modalService.fromComponent(ConfirmReloadModalComponent, { closeOnOverlayClick: false }) - .then(modal => modal.open()) - .then(value => { + .then((modal) => modal.open()) + .then((value) => { if (value) { this.languageHandler.setActiveUiLanguage(language).subscribe(() => { this.appState.dispatch(new SetBackendLanguage(language)); @@ -218,7 +219,7 @@ export class AppComponent implements OnDestroy, OnInit { onShowPasswordModal(): void { this.modalService.fromComponent(ChangePasswordModalComponent) - .then(modal => modal.open()) + .then((modal) => modal.open()) .catch(this.errorHandler.catch); } @@ -235,9 +236,9 @@ export class AppComponent implements OnDestroy, OnInit { type: AccessControlledType.AUTO_UPDATE, permissions: GcmsPermission.READ, }).pipe( - switchMap(perm => perm ? - this.adminOps.getCmsUpdates(true) : - of(null), + switchMap((perm) => perm + ? this.adminOps.getCmsUpdates(true) + : of(null), ), ), diff --git a/cms-ui/apps/admin-ui/src/app/features/mesh-browser/components/mesh-browser-editor/mesh-browser-editor.component.html b/cms-ui/apps/admin-ui/src/app/features/mesh-browser/components/mesh-browser-editor/mesh-browser-editor.component.html index 96f0b077d2..cbb5a2884f 100644 --- a/cms-ui/apps/admin-ui/src/app/features/mesh-browser/components/mesh-browser-editor/mesh-browser-editor.component.html +++ b/cms-ui/apps/admin-ui/src/app/features/mesh-browser/components/mesh-browser-editor/mesh-browser-editor.component.html @@ -19,7 +19,7 @@

UUID
- {{ 'mesh.api_token_from' | gtxI18n:{ user: displayName } }}

- + >
diff --git a/cms-ui/apps/admin-ui/src/app/mesh/components/index.ts b/cms-ui/apps/admin-ui/src/app/mesh/components/index.ts index ac645ca5b3..dec9fd2f32 100644 --- a/cms-ui/apps/admin-ui/src/app/mesh/components/index.ts +++ b/cms-ui/apps/admin-ui/src/app/mesh/components/index.ts @@ -1,5 +1,4 @@ export * from './copy-token-modal/copy-token-modal.component'; -export * from './copy-value/copy-value.component'; export * from './login-gate/login-gate.component'; export * from './manage-tag-families-modal/manage-tag-families-modal.component'; export * from './management-tabs/management-tabs.component'; diff --git a/cms-ui/apps/admin-ui/src/app/mesh/mesh.module.ts b/cms-ui/apps/admin-ui/src/app/mesh/mesh.module.ts index 356bc51f40..db8c9ad1ea 100644 --- a/cms-ui/apps/admin-ui/src/app/mesh/mesh.module.ts +++ b/cms-ui/apps/admin-ui/src/app/mesh/mesh.module.ts @@ -5,7 +5,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { CopyTokenModal, - CopyValueComponent, LoginGateComponent, ManageTagFamiliesModal, ManagementComponent, @@ -75,7 +74,6 @@ import { const COMPONENTS: Type[] = [ CopyTokenModal, - CopyValueComponent, LoginGateComponent, ManageTagFamiliesModal, ManagementComponent, diff --git a/cms-ui/libs/cms-components/src/lib/cms-components.module.ts b/cms-ui/libs/cms-components/src/lib/cms-components.module.ts index ad4d969c82..13b8d4f675 100644 --- a/cms-ui/libs/cms-components/src/lib/cms-components.module.ts +++ b/cms-ui/libs/cms-components/src/lib/cms-components.module.ts @@ -6,8 +6,13 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core'; import * as DE_TRANSLATIONS from '../public/i18n/de.json'; import * as EN_TRANSLATIONS from '../public/i18n/en.json'; import { + ApiTokensCreateFormComponent, + ApiTokensCreateModalComponent, + ApiTokensModalComponent, + ApiTokensTableComponent, AppVersionLabelComponent, BrowseBoxComponent, + CopyValueComponent, I18nInputComponent, I18nPanelGroupComponent, I18nSelectComponent, @@ -60,6 +65,11 @@ const COMPONENTS: any[] = [ UserMenuComponent, UserMenuToggleComponent, VersionModalComponent, + ApiTokensModalComponent, + ApiTokensTableComponent, + ApiTokensCreateModalComponent, + ApiTokensCreateFormComponent, + CopyValueComponent, ]; const DIRECTIVES: Type[] = [ diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.html b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.html new file mode 100644 index 0000000000..7c186acc64 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.html @@ -0,0 +1,17 @@ +
+
+ + +
+
\ No newline at end of file diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.scss b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.scss new file mode 100644 index 0000000000..5331b771a4 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.scss @@ -0,0 +1,11 @@ +:host { + .date-input { + padding: 0.3em 0.5rem; + width: 100%; + + input[type="date"] { + display: block; + padding: 0.3em; + } + } +} \ No newline at end of file diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.ts b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.ts new file mode 100644 index 0000000000..575a743968 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-form/api-tokens-create-form.component.ts @@ -0,0 +1,73 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; +import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { EditableApiToken } from '@gentics/cms-models'; +import { BaseFormPropertiesComponent, FormProperties, futureDateValidator, generateFormProvider, generateValidatorProvider } from '@gentics/ui-core'; + +@Component({ + selector: 'gtx-api-tokens-create-form', + templateUrl: './api-tokens-create-form.component.html', + styleUrls: ['./api-tokens-create-form.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + generateFormProvider(ApiTokensCreateFormComponent), + generateValidatorProvider(ApiTokensCreateFormComponent), + ], + standalone: false, +}) +export class ApiTokensCreateFormComponent extends BaseFormPropertiesComponent { + @Input() + control: FormControl; + + @Input() + readonly apiTokenNames: Array; + + @Output() + validChange = new EventEmitter(); + + constructor( + changeDetector: ChangeDetectorRef, + ) { + super(changeDetector); + } + + override ngOnInit(): void { + super.ngOnInit(); + + this.subscriptions.push( + this.form.statusChanges.subscribe(() => { + this.validChange.emit(this.form.valid); + }), + ); + + this.form.valueChanges.subscribe((value) => { + this.control.setValue(value as EditableApiToken, { + emitEvent: false, + }); + }); + } + + protected override createForm(): FormGroup> { + return new FormGroup>({ + name: new FormControl(this.safeValue('name'), { + validators: [Validators.required, this.uniqueNameValidator], + }), + expires: new FormControl(null, { + validators: [futureDateValidator], + }), + }); + } + + protected override configureForm(_value: EditableApiToken, _loud?: boolean): void {} + + protected override assembleValue(value: EditableApiToken): EditableApiToken { + return value; + } + + private readonly uniqueNameValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + if (!control.value) { + return null; + } + + return this.apiTokenNames.includes(control.value) ? { uniqueName: true } : null; + }; +} diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.html b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.html new file mode 100644 index 0000000000..3d473f197c --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.html @@ -0,0 +1,43 @@ + +
+ @if(createdToken() !== null) { +

{{ 'api_token.token_created' | gtxI18n }}

+
+

{{ 'api_token.token_store' | gtxI18n }}

+ +
+ } @else { +

{{ 'api_token.new' | gtxI18n }}

+ + } +
+
+ @if(createdToken() === null) { + + {{ 'modal.create_button' | gtxI18n }} + + } + + @if(createdToken() === null) { + {{ 'common.cancel_button' | gtxI18n }} + } @else { + {{ 'common.close_button' | gtxI18n }} + } + +
\ No newline at end of file diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.scss b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.scss new file mode 100644 index 0000000000..6f5ce9464d --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.scss @@ -0,0 +1,16 @@ +:host { + .success-message { + padding-top: 10px; + text-align: center; + + .copy-icon { + vertical-align: bottom; + cursor: pointer; + } + } + + gtx-button.loading { + pointer-events: none; + opacity: 0.3; + } +} \ No newline at end of file diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.ts b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.ts new file mode 100644 index 0000000000..611c7fd270 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-create-modal/api-tokens-create-modal.component.ts @@ -0,0 +1,87 @@ +import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { EditableApiToken } from '@gentics/cms-models'; +import { GCMSRestClientService } from '@gentics/cms-rest-client-angular'; +import { IModalDialog } from '@gentics/ui-core'; +import { I18nNotificationService } from '../../providers'; + +@Component({ + selector: 'gtx-api-tokens-create-modal', + templateUrl: './api-tokens-create-modal.component.html', + styleUrls: ['./api-tokens-create-modal.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, +}) +export class ApiTokensCreateModalComponent implements IModalDialog { + public readonly createdToken = signal(null); + public readonly loading = signal(false); + public formvalid = false; + public apiTokenNames: Array; + public control: FormControl = new FormControl({ + name: '', + expires: null, + }); + + constructor( + protected api: GCMSRestClientService, + protected notification: I18nNotificationService, + ) {} + + public saveForm(): void { + this.loading.set(true); + this.addApiToken(); + } + + public isFormVaid(valid: boolean): void { + this.formvalid = valid; + } + + closeFn = (): void => {}; + cancelFn = (): void => {}; + + registerCloseFn(close: (val?: any) => void): void { + this.closeFn = close; + } + + registerCancelFn(cancel: (val?: any) => void): void { + this.cancelFn = cancel; + } + + public closeModal(): void { + this.closeFn(); + } + + private addApiToken(): void { + const { name, expires } = this.control.getRawValue(); + + const submitData = { + name, + ...(expires !== null ? { expires: this.dateToDateNumberString(expires) } : {}), + }; + + this.loading.set(true); + + this.api.admin.addApiTokens(submitData) + .subscribe({ + next: (newToken) => { + const name = newToken.data.name; + this.createdToken.set(newToken.token); + console.log(newToken); + + this.notification.show({ + type: 'success', + message: 'shared.item_created', + id: 'api-token-create-success', + translationParams: { + name, + }, + }); + }, + complete: () => this.loading.set(false), + }); + } + + private dateToDateNumberString(dateString: string): string { + return Math.floor(new Date(dateString).getTime() / 1000).toString(); + } +} diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-modal/api-tokens-modal.component.html b/cms-ui/libs/cms-components/src/lib/components/api-tokens-modal/api-tokens-modal.component.html new file mode 100644 index 0000000000..ff4aa652f3 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-modal/api-tokens-modal.component.html @@ -0,0 +1,12 @@ +
+ +
+
+ + {{ 'common.close_button' | gtxI18n }} + +
diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-modal/api-tokens-modal.component.ts b/cms-ui/libs/cms-components/src/lib/components/api-tokens-modal/api-tokens-modal.component.ts new file mode 100644 index 0000000000..3117f114d4 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-modal/api-tokens-modal.component.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; +import { IModalDialog } from '@gentics/ui-core'; + +@Component({ + selector: 'gtx-api-tokens-modal', + templateUrl: './api-tokens-modal.component.html', + standalone: false, +}) +export class ApiTokensModalComponent implements IModalDialog { + closeFn = (): void => {}; + cancelFn = (): void => {}; + + registerCloseFn(close: (val?: any) => void): void { + this.closeFn = close; + } + + registerCancelFn(cancel: (val?: any) => void): void { + this.cancelFn = cancel; + } +} diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.html b/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.html new file mode 100644 index 0000000000..a14d8f056f --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.html @@ -0,0 +1,53 @@ +

{{ 'api_token.tokens' | gtxI18n }}

+
+ + add {{ 'api_token.new' | gtxI18n }} + +
+
+ +
+ + {{ value == null ? '' : (value ? 'check' : 'close') }} + + + + {{ value | gtxI18nDate:'date' }} + + \ No newline at end of file diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.scss b/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.scss new file mode 100644 index 0000000000..919136be23 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.scss @@ -0,0 +1,9 @@ +:host { + .entity-table-actions-bar { + padding: 1rem 0; + } + + .entity-table-selection { + padding-bottom: 1rem; + } +} \ No newline at end of file diff --git a/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.ts b/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.ts new file mode 100644 index 0000000000..a00c653de2 --- /dev/null +++ b/cms-ui/libs/cms-components/src/lib/components/api-tokens-table/api-tokens-table.component.ts @@ -0,0 +1,216 @@ +import { Component, OnInit, signal } from '@angular/core'; +import { ModalService, TableAction, TableActionClickEvent, TableColumn, TableRow, TableSelectAllType } from '@gentics/ui-core'; +import { forkJoin, map } from 'rxjs'; +import { GCMSRestClientService } from '@gentics/cms-rest-client-angular'; +import { I18nNotificationService, I18nService } from '../../providers'; +import { ApiTokensCreateModalComponent } from '../api-tokens-create-modal/api-tokens-create-modal.component'; + +interface ApiTokenBo { + tmpId: string; + name: string; + cdate: Date; + expires: Date; + lastUsed: Date; + valid: boolean; +} + +const ACTION_DELETE = 'delete'; + +@Component({ + selector: 'gtx-manage-api-tokens-table', + templateUrl: './api-tokens-table.component.html', + styleUrls: ['./api-tokens-table.component.scss'], + standalone: false, +}) +export class ApiTokensTableComponent implements OnInit { + public readonly TableSelectAllType = TableSelectAllType; + public readonly rows = signal[]>([]); + public readonly page = signal(1); + public readonly totalCount = signal(999); + public readonly sortBy = signal('cdate'); + public readonly sortOrder = signal('desc'); + public perPage = 10; + public columns = []; + public actions: TableAction[] = [ + { + id: ACTION_DELETE, + enabled: true, + icon: 'delete', + label: this.i18n.instant('editor.tagtype_delete_label'), + type: 'alert', + single: true, + multiple: true, + }, + ]; + + public apiTokenSelection: string[] = []; + + constructor( + private client: GCMSRestClientService, + private modalService: ModalService, + private i18n: I18nService, + protected api: GCMSRestClientService, + protected notification: I18nNotificationService, + ) {} + + ngOnInit(): void { + this.columns = [ + { + id: 'name', + label: this.i18n.instant('role.name'), + fieldPath: 'name', + sortable: true, + }, + { + id: 'cdate', + label: this.i18n.instant('common.cdate'), + fieldPath: 'cdate', + sortable: true, + }, + { + id: 'expires', + label: this.i18n.instant('api_token.expires_at'), + fieldPath: 'expires', + sortable: true, + }, + { + id: 'lastUsed', + label: this.i18n.instant('api_token.last_used'), + fieldPath: 'lastUsed', + sortable: true, + }, + { + id: 'valid', + label: this.i18n.instant('license.status_VALID'), + fieldPath: 'valid', + }, + ]; + + this.refreshData(); + } + + public changePage(page: number): void { + this.page.set(page); + this.refreshData(); + } + + private refreshData(): void { + const sort = this.sortOrder() === 'asc' ? `+${this.sortBy()}` : `-${this.sortBy()}`; + this.client.admin.getApiTokens(this.perPage, this.page(), sort) + .pipe( + map((res) => { + this.totalCount.set(res.numItems); + return res.items.map((token) => ({ + id: `${token.id}`, + item: { + tmpId: `${token.id}`, + name: token.name, + cdate: new Date(token.cdate * 1000), + expires: token.expires === 0 ? '' : new Date(token.expires * 1000), + lastUsed: token.lastUsed === 0 ? '' : new Date(token.lastUsed * 1000), + valid: token.valid, + }, + } as TableRow)); + }), + ) + .subscribe({ + next: (tokens) => { + this.rows.set(tokens); + }, + }); + } + + public handleCreateButton(): void { + this.onShowApiTokenCreateModal(); + } + + public handleAction(event: TableActionClickEvent): void { + if (event.actionId !== ACTION_DELETE || (!event.selection && !event.item)) { + return; + } + + const tokenIds = event.selection + ? this.apiTokenSelection + : [this.rows().find((e) => e.item.tmpId === event.item.tmpId)?.id]; + + this.onShowApiTokenDeleteModal(tokenIds); + } + + private onShowApiTokenCreateModal(): void { + this.modalService.fromComponent(ApiTokensCreateModalComponent, { + onClose: () => { + this.refreshData(); + }, + }, { + apiTokenNames: this.rows().map((e) => e.item.name), + }) + .then((modal) => modal.open()) + .catch((error) => console.log(error)); + } + + private async onShowApiTokenDeleteModal(ids: Array): Promise { + const dialog = await this.modalService.dialog({ + title: this.i18n.instant('api_token.delete'), + body: this.i18n.instant('api_token.delete_warning'), + buttons: [ + { + label: this.i18n.instant('common.cancel_button'), + type: 'secondary', + returnValue: false, + }, + { + label: this.i18n.instant('shared.confirm_button'), + id: 'api-token-delete', + type: 'alert', + returnValue: true, + }, + ], + }); + const doDelete = await dialog.open(); + + if (doDelete) { + this.deleteApiTokens(ids); + } + } + + public updateSelection(selections: Array): void { + this.apiTokenSelection = selections; + } + + public updateSortOrder(order: string): void { + this.sortOrder.set(order); + this.refreshData(); + } + + public updateSortBy(sortBy: string): void { + this.sortBy.set(sortBy); + this.refreshData(); + } + + private deleteApiTokens(ids: Array): void { + forkJoin( + ids.map((id) => this.api.admin.deleteApiTokens(id)), + ).subscribe({ + next: () => { + const name = this.rows() + .filter((row) => ids.includes(row.item.tmpId)) + .map((row) => row.item.name) + .join(', '); + + this.notification.show({ + type: 'success', + message: 'shared.item_singular_deleted', + id: 'api-token-delete-success', + translationParams: { + name, + }, + }); + + this.refreshData(); + }, + error: (err) => { + console.error(err); + }, + }); + } +} diff --git a/cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.cy.ts b/cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.cy.ts similarity index 100% rename from cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.cy.ts rename to cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.cy.ts diff --git a/cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.html b/cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.html similarity index 100% rename from cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.html rename to cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.html diff --git a/cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.scss b/cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.scss similarity index 97% rename from cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.scss rename to cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.scss index f44f3e12ac..aebdbf0e14 100644 --- a/cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.scss +++ b/cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.scss @@ -1,4 +1,4 @@ -@import "variables"; +@import "../../../styles/variables"; :host { user-select: none; diff --git a/cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.ts b/cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.ts similarity index 97% rename from cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.ts rename to cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.ts index 922bb6a250..bd14ba2fc8 100644 --- a/cms-ui/apps/admin-ui/src/app/mesh/components/copy-value/copy-value.component.ts +++ b/cms-ui/libs/cms-components/src/lib/components/copy-value/copy-value.component.ts @@ -10,11 +10,11 @@ import { cancelEvent } from '@gentics/common'; import { BaseComponent } from '@gentics/ui-core'; @Component({ - selector: 'gtx-mesh-copy-value', + selector: 'gtx-copy-value', templateUrl: './copy-value.component.html', styleUrls: ['./copy-value.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + standalone: false, }) export class CopyValueComponent extends BaseComponent implements OnDestroy { diff --git a/cms-ui/libs/cms-components/src/lib/components/index.ts b/cms-ui/libs/cms-components/src/lib/components/index.ts index 7ba1ffd36e..c82df75cdf 100644 --- a/cms-ui/libs/cms-components/src/lib/components/index.ts +++ b/cms-ui/libs/cms-components/src/lib/components/index.ts @@ -12,3 +12,8 @@ export * from './string-list/string-list.component'; export * from './user-menu-toggle/user-menu-toggle.component'; export * from './user-menu/user-menu.component'; export * from './versions-modal/versions-modal.component'; +export * from './api-tokens-modal/api-tokens-modal.component'; +export * from './api-tokens-table/api-tokens-table.component'; +export * from './api-tokens-create-modal/api-tokens-create-modal.component'; +export * from './api-tokens-create-form/api-tokens-create-form.component'; +export * from './copy-value/copy-value.component'; diff --git a/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.tpl.html b/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.component.html similarity index 73% rename from cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.tpl.html rename to cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.component.html index 494488ebb7..045e9c98f1 100644 --- a/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.tpl.html +++ b/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.component.html @@ -33,19 +33,20 @@
- - - - - - more_vert - - + + + + + more_vert + - + {{ 'user.change_password_label' | gtxI18n }} + + {{ 'api_token.management' | gtxI18n }} +
diff --git a/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.component.ts b/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.component.ts index c05e8c73d1..6837238b25 100644 --- a/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.component.ts +++ b/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.component.ts @@ -1,12 +1,16 @@ import { ChangeDetectionStrategy, Component, + ErrorHandler, EventEmitter, Input, Output, } from '@angular/core'; + import { GcmsUiLanguage } from '@gentics/cms-integration-api-models'; import { I18nLanguage, Raw, User } from '@gentics/cms-models'; +import { ModalService } from '@gentics/ui-core'; +import { ApiTokensModalComponent } from '../api-tokens-modal/api-tokens-modal.component'; /** * The right-hand side menu for user information and settings. @@ -51,10 +55,10 @@ import { I18nLanguage, Raw, User } from '@gentics/cms-models'; */ @Component({ selector: 'gtx-user-menu', - templateUrl: './user-menu.tpl.html', + templateUrl: './user-menu.component.html', styleUrls: ['./user-menu.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + standalone: false, }) export class UserMenuComponent { /** If TRUE, this user menu is rendered as open. */ @@ -74,6 +78,11 @@ export class UserMenuComponent { /** On event user clicks showPasswordModal button. */ @Output() showPasswordModal = new EventEmitter(); + constructor( + private modalService: ModalService, + private errorHandler: ErrorHandler, + ) {} + getUserName(): string { return this.user ? this.user.firstName + ' ' + this.user.lastName : ''; } @@ -89,4 +98,10 @@ export class UserMenuComponent { showPasswordModalClicked(): void { this.showPasswordModal.emit(); } + + showApiTokensModalClicked(): void { + this.modalService.fromComponent(ApiTokensModalComponent) + .then((modal) => modal.open()) + .catch(this.errorHandler.handleError); + } } diff --git a/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.scss b/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.scss index f9ab32f36b..563d8baf0e 100644 --- a/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.scss +++ b/cms-ui/libs/cms-components/src/lib/components/user-menu/user-menu.scss @@ -24,6 +24,10 @@ .user-name { margin-bottom: 10px; + + strong { + cursor: pointer; + } } .description { color: $gtx-color-dark-gray; diff --git a/cms-ui/libs/cms-components/src/public/i18n/de.json b/cms-ui/libs/cms-components/src/public/i18n/de.json index ab381110f6..8edf7a6d28 100644 --- a/cms-ui/libs/cms-components/src/public/i18n/de.json +++ b/cms-ui/libs/cms-components/src/public/i18n/de.json @@ -228,5 +228,16 @@ "keycloak_not_available": "Beim Zugriff auf Keycloak ist etwas schief gelaufen. Es wird stattdessen die Anmeldung ohne Single Sign-On verwendet.", "keycloak_invalid_config": "Die konfiguration für Keycloak ist nicht valide. Es wird stattdessen die Anmeldung ohne Single Sign-On verwendet.", "keycloak_unknown_error": "Ein unerwarteter Fehler ist bei der Keycloak überprüfung aufgetreten. Es wird stattdessen die Anmeldung ohne Single Sign-On verwendet." + }, + "api_token" : { + "management": "Api Tokens verwalten", + "new": "Api Token erstellen", + "tokens": "Api Tokens", + "expires_at": "Gültig bis", + "last_used": "Zuletzt verwendet", + "token_created": "Token erstellt", + "token_store": "Bitte bewahren Sie ihn gut auf, man kann ihn nicht noch mal ansehen.", + "delete": "Api Token löschen", + "delete_warning": "Dieser Vorgang ist unwiderruflich" } } diff --git a/cms-ui/libs/cms-components/src/public/i18n/en.json b/cms-ui/libs/cms-components/src/public/i18n/en.json index 6a728d3a03..a5fc5cc72d 100644 --- a/cms-ui/libs/cms-components/src/public/i18n/en.json +++ b/cms-ui/libs/cms-components/src/public/i18n/en.json @@ -227,5 +227,16 @@ "keycloak_not_available": "Something went wrong while accessing Keycloak. Using login without Single Sign-On instead.", "keycloak_invalid_config": "The configuration for Keycloak is invalid. Using login without Single Sign-On instead.", "keycloak_unknown_error": "An unexpected error occurred while checking Keycloak availability. Using login without Single Sign-On instead." + }, + "api_token" : { + "management": "Manage Api Tokens", + "new": "Add new Api Token", + "tokens": "Api Tokens", + "expires_at": "Expires at", + "last_used": "Last used", + "token_created": "Token created", + "token_store": "Please store safely, it's not possible to get it again", + "delete": "Delete Api Token", + "delete_warning": "This action is permanent" } } diff --git a/cms-ui/libs/cms-models/src/lib/api-token.ts b/cms-ui/libs/cms-models/src/lib/api-token.ts new file mode 100644 index 0000000000..56e96f45db --- /dev/null +++ b/cms-ui/libs/cms-models/src/lib/api-token.ts @@ -0,0 +1,24 @@ +/** + * An Api Token object as returned from the /admin/token endpoint: + */ + +export interface ApiToken { + token: string; + data: ApiTokenData; +} + +export interface ApiTokenData { + token: string; + id: number; + userId: number; + name: string; + cdate: number; + expires: number; + lastUsed: number; + valid: boolean; +} + +export type EditableApiToken = { + name: ApiTokenData['name']; + expires?: string; +}; diff --git a/cms-ui/libs/cms-models/src/lib/index.ts b/cms-ui/libs/cms-models/src/lib/index.ts index 2ac5977457..d59fb5da7f 100644 --- a/cms-ui/libs/cms-models/src/lib/index.ts +++ b/cms-ui/libs/cms-models/src/lib/index.ts @@ -60,4 +60,5 @@ export * from './type-util'; export * from './user'; export * from './usersnap'; export * from './version'; +export * from './api-token'; diff --git a/cms-ui/libs/cms-models/src/lib/request.ts b/cms-ui/libs/cms-models/src/lib/request.ts index c27e70ca6c..fbf6bb5e36 100644 --- a/cms-ui/libs/cms-models/src/lib/request.ts +++ b/cms-ui/libs/cms-models/src/lib/request.ts @@ -36,6 +36,7 @@ import { TagmapEntry } from './tagmap-entry'; import { Template } from './template'; import { Raw } from './type-util'; import { User } from './user'; +import { ApiToken, EditableApiToken } from './api-token'; export interface ElasticSearchQuery { query: BoolQuery; @@ -2503,3 +2504,13 @@ export interface PushLicenseRequest { crIds?: number[]; all?: boolean; } + +// API TOKENS ///////////////////////////////////////////////////////////////////////////////////////////////////// + +export interface ApiTokenListOptions extends BaseListOptionsWithPaging {} + +/** + * Request object used to add an api token for the + * `/admin/token` endpoint. + */ +export interface ApiTokenCreateRequest extends EditableApiToken {} diff --git a/cms-ui/libs/cms-models/src/lib/response.ts b/cms-ui/libs/cms-models/src/lib/response.ts index d572b910d1..1c74b990e0 100644 --- a/cms-ui/libs/cms-models/src/lib/response.ts +++ b/cms-ui/libs/cms-models/src/lib/response.ts @@ -52,6 +52,7 @@ import { Raw } from './type-util'; import { User } from './user'; import { UsersnapSettings } from './usersnap'; import { NodeVersionInfo, Variant } from './version'; +import { ApiToken, ApiTokenData } from './api-token'; // GENERIC RESPONSE ////////////////////////////////////////////////////////////////////////////////////////////////////////////// @@ -1533,3 +1534,8 @@ export interface KeycloakConfiguration { 'resource': string; 'showSSOButton': boolean; } + +// API TOKENS ///////////////////////////////////////////////////////////////////////////////////////////////////// + +export interface ApiTokenResponse extends Response, ApiTokenData {} +export interface ApiTokenCreateResponse extends Response, ApiToken {} diff --git a/cms-ui/libs/cms-rest-client/src/lib/abstracts.ts b/cms-ui/libs/cms-rest-client/src/lib/abstracts.ts index b72f19ecf6..86cecab4d7 100644 --- a/cms-ui/libs/cms-rest-client/src/lib/abstracts.ts +++ b/cms-ui/libs/cms-rest-client/src/lib/abstracts.ts @@ -382,6 +382,9 @@ import { VersionResponse, WastebinDeleteOptions, WastebinRestoreOptions, + ApiTokenCreateRequest, + ApiTokenResponse, + ApiTokenCreateResponse, } from '@gentics/cms-models'; import { LoginResponse as MeshLoginResponse, @@ -414,6 +417,10 @@ export interface AbstractAdminAPI extends BasicAPI { getPublishQueue: () => PublishQueue; modifyPublishQueue: (body: ContentMaintenanceActionRequest) => Response; + + getApiTokens: (pageSize?: number, page?: number, sort?: string) => ListResponse; + addApiTokens: (body: ApiTokenCreateRequest) => ApiTokenCreateResponse; + deleteApiTokens: (id: string) => void; } export interface AbstractAuthenticationAPI extends BasicAPI { diff --git a/cms-ui/libs/cms-rest-client/src/lib/client.ts b/cms-ui/libs/cms-rest-client/src/lib/client.ts index 93db0cdfa6..0a88147f9b 100644 --- a/cms-ui/libs/cms-rest-client/src/lib/client.ts +++ b/cms-ui/libs/cms-rest-client/src/lib/client.ts @@ -222,6 +222,10 @@ export class GCMSRestClient implements GCMSRootAPI { getPublishQueue: () => this.executeMappedJsonRequest(GET, '/admin/content/publishqueue'), modifyPublishQueue: (body) => this.executeMappedJsonRequest(POST, '/admin/content/publishqueue', body), + + getApiTokens: (pageSize: number = 10, page: number = 1, sort: string = '-cdate') => this.executeMappedJsonRequest(GET, `/admin/token?pageSize=${pageSize}&page=${page}&sort=${sort}`), + addApiTokens: (body) => this.executeMappedJsonRequest(POST, '/admin/token/', body), + deleteApiTokens: (id) => this.executeMappedJsonRequest(DELETE, `/admin/token/${id}`), } as const; public auth: GCMSAuthenticationAPI = { diff --git a/cms-ui/libs/ui-core/src/lib/utils/forms.ts b/cms-ui/libs/ui-core/src/lib/utils/forms.ts index 0fa50abde1..617edb022f 100644 --- a/cms-ui/libs/ui-core/src/lib/utils/forms.ts +++ b/cms-ui/libs/ui-core/src/lib/utils/forms.ts @@ -1,4 +1,4 @@ -import type { AbstractControl, Validators } from '@angular/forms'; +import type { AbstractControl, ValidationErrors, Validators } from '@angular/forms'; import { FormGroup, UntypedFormGroup, ValidatorFn } from '@angular/forms'; import { FormChangePropagation, @@ -206,3 +206,17 @@ function asRegExp(pattern: string | RegExp): null | { str: string; regex: RegExp return { str, regex }; } + +export function futureDateValidator(control: AbstractControl): ValidationErrors | null { + if (!control.value) { + return null; + } + + const selected = new Date(control.value); + selected.setHours(0, 0, 0, 0); + + const today = new Date(); + today.setHours(0, 0, 0, 0); + + return selected > today ? null : { futureDate: true }; +};