dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flex layout replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-16 16:01:51 +03:00
parent c5c732446e
commit fc18c1f2e5
15 changed files with 128 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
View File

@ -17,7 +17,7 @@
-->
<mat-toolbar color="primary">
<h2 translate>device.add-device-text</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<div [tb-help]="'devices'"></div>
<button mat-icon-button
(click)="cancel()"
@ -103,7 +103,7 @@
<button mat-stroked-button *ngIf="selectedIndex > 0"
[disabled]="(isLoading$ | async)"
(click)="previousStep()">{{ 'action.back' | translate }}</button>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-stroked-button
color="primary"
*ngIf="showNext"

4
ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
<mat-toolbar color="primary">
<h2>{{ assignToCustomerTitle | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -39,7 +39,7 @@
</tb-entity-list>
</fieldset>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

6
ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
View File

@ -16,9 +16,9 @@
-->
<form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar class="flex flex-row" color="primary">
<h2>{{ assignToEdgeTitle | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -39,7 +39,7 @@
</tb-entity-list>
</fieldset>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"

4
ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
<mat-toolbar color="primary">
<h2>{{ assignToCustomerTitle | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -38,7 +38,7 @@
</tb-entity-autocomplete>
</fieldset>
</div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<div mat-dialog-actions class="flex flex-row items-center justify-end">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

10
ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
View File

@ -18,7 +18,7 @@
<mat-card appearance="outlined" class="settings-card">
<mat-card-header>
<mat-card-title>
<div fxLayout="row">
<div class="flex flex-row">
<span class="mat-headline-5" translate>admin.general-settings</span>
</div>
</mat-card-title>
@ -44,7 +44,7 @@
</div>
</div>
</fieldset>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
<div class="flex flex-row flex-wrap items-center justify-end gap-2">
<button mat-button color="primary"
[disabled]="generalSettings.pristine"
(click)="discardGeneralSettings()"
@ -96,11 +96,11 @@
{{ 'admin.device-connectivity.' + protocol | translate }}
</mat-slide-toggle>
<div class="tb-form-row column-xs no-border no-padding tb-standard-fields">
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label translate>admin.device-connectivity.port</mat-label>
<input matInput type="number" min="0" max="65535" formControlName="port"/>
<mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
@ -114,7 +114,7 @@
</div>
</div>
</ng-template>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
<div class="flex flex-row flex-wrap items-center justify-end gap-2">
<button mat-button color="primary"
[disabled]="deviceConnectivitySettingsForm.pristine"
(click)="discardDeviceConnectivitySettings()"

12
ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
View File

@ -24,25 +24,25 @@
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
<mat-card-content style="padding-top: 16px;">
<form [formGroup]="homeSettings" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async">
<section class="tb-default-dashboard" fxFlex fxLayout="column">
<section fxFlex fxLayout="column" fxLayout.gt-sm="row">
<section class="tb-default-dashboard flex flex-1 flex-col">
<section class="flex flex-1 flex-col gt-sm:flex-row">
<tb-dashboard-autocomplete
fxFlex
class="flex-1"
label="{{ 'dashboard.home-dashboard' | translate }}"
formControlName="dashboardId"
[dashboardsScope]="'tenant'"
[selectFirstDashboard]="false"
></tb-dashboard-autocomplete>
<mat-checkbox fxFlex formControlName="hideDashboardToolbar">
<mat-checkbox class="flex-1" formControlName="hideDashboardToolbar">
{{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
</mat-checkbox>
</section>
</section>
<div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
<div class="flex w-full flex-row flex-wrap items-center justify-end">
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || homeSettings.invalid || !homeSettings.dirty"
type="submit">{{'action.save' | translate}}
</button>

75
ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
View File

@ -21,7 +21,7 @@
<mat-card-title>
<span class="mat-headline-5" translate>admin.outgoing-mail-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="outgoingMailSettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -49,7 +49,7 @@
<mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center" translate>
<mat-panel-title class="flex items-center justify-start" translate>
admin.connection-settings
</mat-panel-title>
</mat-expansion-panel-header>
@ -62,15 +62,15 @@
</mat-option>
</mat-select>
</mat-form-field>
<div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="10px">
<mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
<div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2.5">
<mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
<mat-label translate>admin.smtp-host</mat-label>
<input matInput formControlName="smtpHost" placeholder="localhost" required/>
<mat-error *ngIf="mailSettings.get('smtpHost').hasError('required')">
{{ 'admin.smtp-host-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
<mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
<mat-label translate>admin.smtp-port</mat-label>
<input matInput #smtpPortInput formControlName="smtpPort" placeholder="25" maxlength="5" required/>
<mat-hint align="end">{{smtpPortInput.value?.length || 0}}/5</mat-hint>
@ -93,10 +93,10 @@
{{ 'admin.timeout-invalid' | translate }}
</mat-error>
</mat-form-field>
<mat-slide-toggle fxFlex formControlName="enableTls" style="display: block; padding-bottom: 22px;">
<mat-slide-toggle class="flex-1" formControlName="enableTls" style="display: block; padding-bottom: 22px;">
{{ 'admin.enable-tls' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('enableTls').value">
<mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('enableTls').value">
<mat-label translate>admin.tls-version</mat-label>
<mat-select formControlName="tlsVersion">
<mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">
@ -108,15 +108,15 @@
{{ 'admin.enable-proxy' | translate }}
</mat-slide-toggle>
<div *ngIf="mailSettings.get('enableProxy').value">
<div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
<mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
<div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
<mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
<mat-label translate>admin.proxy-host</mat-label>
<input matInput required formControlName="proxyHost">
<mat-error *ngIf="mailSettings.get('proxyHost').hasError('required')">
{{ 'admin.proxy-host-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
<mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
<mat-label translate>admin.proxy-port</mat-label>
<input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
<mat-error *ngIf="mailSettings.get('proxyPort').hasError('required')">
@ -129,12 +129,12 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.proxy-user</mat-label>
<input matInput formControlName="proxyUser">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.proxy-password</mat-label>
<input matInput type="password" formControlName="proxyPassword" autocomplete="new-proxy-password">
<tb-toggle-password matSuffix></tb-toggle-password>
@ -144,19 +144,19 @@
</ng-template>
</mat-expansion-panel>
<fieldset class="fields-group" fxLayout="column">
<fieldset class="fields-group flex flex-col">
<legend class="group-title" translate>admin.oauth2.authentication</legend>
<mat-form-field class="mat-block">
<mat-label translate>common.username</mat-label>
<input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
autocomplete="new-username"/>
</mat-form-field>
<div fxLayoutAlign="space-between center" style="height: 50px; padding-bottom: 20px" [fxHide]="mailSettings.get('providerId').value === 'SENDGRID'">
<div class="flex items-center justify-between" style="height: 50px; padding-bottom: 20px" [class.!hidden]="mailSettings.get('providerId').value === 'SENDGRID'">
<mat-button-toggle-group class="tb-notification-unread-toggle-group"
style="width: 250px;"
formControlName="enableOauth2">
<mat-button-toggle fxFlex [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
<mat-button-toggle fxFlex [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
<mat-button-toggle class="flex-1" [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
<mat-button-toggle class="flex-1" [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
</mat-button-toggle-group>
<div class="details-buttons" *ngIf="helpLink && mailSettings.get('enableOauth2').value">
<div [tb-help]="helpLink"></div>
@ -174,8 +174,8 @@
</mat-form-field>
</section>
<section *ngIf="mailSettings.get('enableOauth2').value">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.oauth2.client-id</mat-label>
<input matInput formControlName="clientId" required>
<mat-error *ngIf="mailSettings.get('clientId').hasError('required')">
@ -186,7 +186,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.oauth2.client-secret</mat-label>
<input matInput formControlName="clientSecret" required>
<mat-error *ngIf="mailSettings.get('clientSecret').hasError('required')">
@ -198,7 +198,7 @@
</mat-form-field>
</div>
<mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
<mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
<mat-label translate>admin.oauth2.microsoft-tenant-id</mat-label>
<input matInput formControlName="providerTenantId" required>
<mat-error *ngIf="mailSettings.get('providerTenantId').hasError('required')">
@ -207,13 +207,13 @@
</mat-form-field>
<mat-expansion-panel class="mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
<mat-expansion-panel-header>
<mat-panel-description fxLayoutAlign="end" translate>
<mat-panel-description class="flex items-stretch justify-end" translate>
tenant-profile.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.oauth2.authorization-uri</mat-label>
<input matInput formControlName="authUri" required>
<button mat-icon-button matSuffix
@ -229,7 +229,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.oauth2.token-uri</mat-label>
<input matInput formControlName="tokenUri" required>
<button mat-icon-button matSuffix
@ -245,7 +245,7 @@
</mat-error>
</mat-form-field>
</div>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.oauth2.scope</mat-label>
<mat-chip-grid #scopeList>
<mat-chip-row *ngFor="let scope of mailSettings.get('scope').value; let k = index; trackBy: trackByParams"
@ -265,12 +265,12 @@
</ng-template>
</mat-expansion-panel>
<fieldset class="fields-group" fxLayout="column">
<fieldset class="fields-group flex flex-col">
<legend class="group-title" translate>admin.oauth2.redirect-uri</legend>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
<div fxLayout="column" fxFlex.sm="60" fxFlex.gt-sm="50" [formGroup]="domainForm">
<div fxLayout="row" fxLayout.xs="column" fxLayout.md="column" fxLayoutGap="8px" fxLayoutGap.md="0px">
<mat-form-field fxFlex="30" fxFlex.md fxFlex.xs class="mat-block">
<div class="flex flex-1 flex-row gap-2 xs:flex-col">
<div class="flex flex-col sm:max-w-60% sm:flex-full gt-sm:max-w-50% gt-sm:flex-full" [formGroup]="domainForm">
<div class="flex flex-row gap-2 xs:flex-col md:flex-col md:gap-0">
<mat-form-field class="mat-block max-w-30% flex-full xs:max-w-full xs:flex-1 md:max-w-full md:flex-1">
<mat-label translate>admin.oauth2.protocol</mat-label>
<mat-select formControlName="scheme">
<mat-option *ngFor="let protocol of protocols" [value]="protocol">
@ -278,7 +278,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.domain-name</mat-label>
<input matInput formControlName="name" required>
<mat-error *ngIf="domainForm.get('name').hasError('pattern')">
@ -294,8 +294,8 @@
</mat-error>
</div>
<div fxFlex fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-1 flex-col">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.oauth2.redirect-uri-template</mat-label>
<input matInput formControlName="redirectUri" readonly>
<tb-copy-button
@ -311,10 +311,7 @@
</div>
</fieldset>
</section>
<section fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign.gt-xs="space-between center"
style="padding-bottom: 12px"
<section class="flex flex-row pb-3 xs:flex-col gt-xs:items-center gt-xs:justify-between"
*ngIf="mailSettings.get('enableOauth2').value">
<div>
<span class="token-status" translate>admin.oauth2.access-token-status</span>
@ -329,7 +326,7 @@
</button>
</section>
</fieldset>
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
<div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
<button mat-raised-button type="button"
[disabled]="(isLoading$ | async) || mailSettings.get('enableOauth2').value ? mailSettings.invalid || domainForm.invalid || (mailSettings.dirty || domainForm.dirty) : mailSettings.invalid"
(click)="sendTestMail()">

4
ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
View File

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 850px;max-height: 100vh">
<mat-toolbar color="primary">
<h2>{{ 'admin.oauth2.add-client' | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<div [tb-help]="helpLinkId()"></div>
<button mat-icon-button
(click)="cancel()"
@ -32,7 +32,7 @@
<div mat-dialog-content style="padding: 0">
<tb-client createNewDialog #clientComponent></tb-client>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
type="button"
cdkFocusInitial

4
ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
View File

@ -72,7 +72,7 @@
</div>
<mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center" translate>
<mat-panel-title class="flex items-center justify-start" translate>
admin.oauth2.advanced-settings
</mat-panel-title>
</mat-expansion-panel-header>
@ -235,7 +235,7 @@
</mat-select>
</mat-form-field>
<mat-form-field class="flex"
[fxShow]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
[class.!hidden]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value !== 'CUSTOM'">
<mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
<input matInput formControlName="tenantNamePattern"
[required]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">

14
ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
View File

@ -15,31 +15,31 @@
limitations under the License.
-->
<div class="tb-details-buttons" fxLayout.xs="column">
<div class="tb-details-buttons xs:flex xs:flex-col">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage">
[class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }}
</button>
<button mat-raised-button color="primary" fxFlex.xs
<button mat-raised-button color="primary" class="xs:flex-1"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit">
[class.!hidden]="hideDelete() || isEdit">
{{ 'queue.delete' | translate }}
</button>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onQueueIdCopied($event)"
[cbContent]="entity?.id?.id"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>queue.copyId</span>
</button>
</div>
</div>
<div class="mat-padding" fxLayout="column" [formGroup]="entityForm">
<div class="mat-padding flex flex-col" [formGroup]="entityForm">
<tb-queue-form
[newQueue]="isAdd"
[systemQueue]="true"

22
ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
View File

@ -15,37 +15,37 @@
limitations under the License.
-->
<div class="tb-details-buttons" fxLayout.xs="column">
<div class="tb-details-buttons xs:flex xs:flex-col">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage">
[class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }}
</button>
<button mat-raised-button color="primary" fxFlex.xs
<button mat-raised-button color="primary" class="xs:flex-1"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'downloadResource')"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
{{ 'resource.download' | translate }}
</button>
<button mat-raised-button color="primary" fxFlex.xs
<button mat-raised-button color="primary" class="xs:flex-1"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit">
[class.!hidden]="hideDelete() || isEdit">
{{ 'resource.delete' | translate }}
</button>
<div fxLayout="row" fxLayout.xs="column">
<div class="flex flex-row xs:flex-col">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onResourceIdCopied()"
[cbContent]="entity?.id?.id"
[fxShow]="!isEdit">
[class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>resource.copyId</span>
</button>
</div>
</div>
<div class="mat-padding" fxLayout="column">
<div class="mat-padding flex flex-col">
<form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit">
<mat-form-field class="mat-block">
@ -80,8 +80,8 @@
[existingFileName]="entityForm.get('fileName')?.value"
(fileNameChanged)="entityForm?.get('fileName').patchValue($event)">
</tb-file-input>
<div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
<mat-form-field fxFlex>
<div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>resource.file-name</mat-label>
<input matInput formControlName="fileName" type="text">
</mat-form-field>

52
ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
View File

@ -20,7 +20,7 @@
<mat-card-title>
<span class="mat-headline-5" translate>admin.security-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="securitySettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -89,8 +89,8 @@
<fieldset class="fields-group">
<legend class="group-title" translate>admin.password-policy</legend>
<section formGroupName="passwordPolicy">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-password-length</mat-label>
<input matInput type="number"
formControlName="minimumLength"
@ -108,7 +108,7 @@
{{ 'admin.minimum-password-length-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
<mat-label translate>admin.maximum-password-length</mat-label>
<input matInput type="number" formControlName="maximumLength" step="1" min="6"/>
<mat-hint></mat-hint>
@ -120,8 +120,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-uppercase-letters</mat-label>
<input matInput type="number"
formControlName="minimumUppercaseLetters"
@ -132,7 +132,7 @@
{{ 'admin.minimum-uppercase-letters-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-lowercase-letters</mat-label>
<input matInput type="number"
formControlName="minimumLowercaseLetters"
@ -144,8 +144,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-digits</mat-label>
<input matInput type="number"
formControlName="minimumDigits"
@ -155,7 +155,7 @@
{{ 'admin.minimum-digits-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-special-characters</mat-label>
<input matInput type="number"
formControlName="minimumSpecialCharacters"
@ -167,8 +167,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.password-expiration-period-days</mat-label>
<input matInput type="number"
formControlName="passwordExpirationPeriodDays"
@ -179,7 +179,7 @@
{{ 'admin.password-expiration-period-days-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.password-reuse-frequency-days</mat-label>
<input matInput type="number"
formControlName="passwordReuseFrequencyDays"
@ -191,11 +191,11 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-checkbox fxFlex formControlName="allowWhitespaces" style="margin-bottom: 16px">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-checkbox class="flex-1" formControlName="allowWhitespaces" style="margin-bottom: 16px">
<mat-label translate>admin.allow-whitespace</mat-label>
</mat-checkbox>
<mat-checkbox fxFlex formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
<mat-checkbox class="flex-1" formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
<mat-label tb-hint-tooltip-icon="{{'admin.force-reset-password-if-no-valid-hint' | translate}}">
{{'admin.force-reset-password-if-no-valid' | translate}}
</mat-label>
@ -203,7 +203,7 @@
</div>
</section>
</fieldset>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap" style="margin-top: 16px">
<div class="flex flex-row flex-wrap items-center justify-end gap-2" style="margin-top: 16px">
<button mat-button color="primary"
[disabled]="securitySettingsFormGroup.pristine"
(click)="discardSetting()"
@ -222,21 +222,21 @@
<mat-card-title>
<span class="mat-headline-5" translate>admin.jwt.security-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="jwtSecuritySettings"></div>
</mat-card-header>
<mat-card-content style="padding-top: 16px;">
<form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
<fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
<div class="flex flex-row gap-2 xs:flex-col">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.jwt.issuer-name</mat-label>
<input matInput required formControlName="tokenIssuer"/>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')">
{{ 'admin.jwt.issuer-name-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.jwt.signings-key</mat-label>
<input matInput (focus)="markAsTouched()" required formControlName="tokenSigningKey"/>
<button type="button"
@ -259,8 +259,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row gap-2 xs:flex-col">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.jwt.expiration-time</mat-label>
<input matInput type="number" required
formControlName="tokenExpirationTime"
@ -276,7 +276,7 @@
{{ 'admin.jwt.expiration-time-min' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.jwt.refresh-expiration-time</mat-label>
<input matInput type="number" required
formControlName="refreshTokenExpTime"
@ -296,7 +296,7 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
<div class="flex flex-row flex-wrap items-center justify-end gap-2">
<button mat-button color="primary"
[disabled]="jwtSecuritySettingsFormGroup.pristine"
(click)="discardJwtSetting()"

4
ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
<mat-toolbar color="primary">
<h2 translate>admin.send-test-sms</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="close()"
type="button">
@ -47,7 +47,7 @@
</mat-form-field>
</fieldset>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

10
ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
View File

@ -20,7 +20,7 @@
<mat-card-title>
<span class="mat-headline-5" translate>admin.sms-provider-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="smsProviderSettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -32,7 +32,7 @@
required
formControlName="configuration">
</tb-sms-provider-configuration>
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
<div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
<button mat-raised-button type="button"
[disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
{{'admin.send-test-sms' | translate}}
@ -50,7 +50,7 @@
<mat-card-title>
<span class="mat-headline-5" translate>admin.slack-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="slackSettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -66,7 +66,7 @@
<mat-card-title>
<span class="mat-headline-5" translate>admin.mobile-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<!-- <div tb-help="mobileSettings"></div>-->
</mat-card-header>
<mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()">
@ -79,7 +79,7 @@
(fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
</tb-file-input>
</mat-card-content>
<mat-card-actions fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
<mat-card-actions class="flex items-center justify-end xs:flex-col xs:items-stretch">
<button mat-button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
type="submit">{{'action.save' | translate}}

34
ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
View File

@ -21,7 +21,7 @@
<mat-card-title>
<span class="mat-headline-5" translate>admin.2fa.2fa</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="twoFactorAuthentication"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -36,7 +36,7 @@
<ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
<mat-expansion-panel class="provider" [formGroupName]="i">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center">
<mat-panel-title class="flex items-center justify-start">
<mat-slide-toggle
(mousedown)="toggleExtensionPanel($event, i, provider.get('enable').value)"
formControlName="enable">
@ -48,7 +48,7 @@
<ng-template matExpansionPanelContent>
<ng-container [ngSwitch]="provider.get('providerType').value">
<ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.issuer-name</mat-label>
<input matInput formControlName="issuerName" required>
<mat-error *ngIf="provider.get('issuerName').hasError('required') ||
@ -58,8 +58,8 @@
</mat-form-field>
</ng-container>
<div *ngSwitchCase="twoFactorAuthProviderType.SMS"
fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.verification-message-template</mat-label>
<input matInput formControlName="smsVerificationMessageTemplate" required>
<mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
@ -70,7 +70,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@ -83,7 +83,7 @@
</mat-form-field>
</div>
<div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@ -96,7 +96,7 @@
</mat-form-field>
</div>
<div *ngSwitchCase="twoFactorAuthProviderType.BACKUP_CODE">
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.number-of-codes</mat-label>
<input matInput formControlName="codesQuantity" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('codesQuantity').hasError('required')">
@ -116,8 +116,8 @@
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>admin.2fa.verification-limitations</legend>
<div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="input-row flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
<input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="60">
<mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('required')">
@ -128,7 +128,7 @@
{{ 'admin.2fa.total-allowed-time-for-verification-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.retry-verification-code-period</mat-label>
<input matInput required formControlName="minVerificationCodeSendPeriod" type="number" step="1" min="5">
<mat-error *ngIf="twoFaFormGroup.get('minVerificationCodeSendPeriod').hasError('required')">
@ -139,7 +139,7 @@
{{ 'admin.2fa.retry-verification-code-period-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.max-verification-failures-before-user-lockout</mat-label>
<input matInput formControlName="maxVerificationFailuresBeforeUserLockout" type="number" step="1" min="0" max="65535">
<mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern')
@ -152,7 +152,7 @@
<mat-expansion-panel class="provider">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center">
<mat-panel-title class="flex items-center justify-start">
<mat-slide-toggle (mousedown)="toggleExtensionPanel($event, providersForm.length, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
formControlName="verificationCodeCheckRateLimitEnable">
</mat-slide-toggle>
@ -160,8 +160,8 @@
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
@ -172,7 +172,7 @@
{{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
@ -188,7 +188,7 @@
</mat-expansion-panel>
</fieldset>
</div>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="flex flex-row items-center justify-end gap-2">
<button mat-button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
type="submit">