tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Flex layout replacements. Switch to tailwind.css.

pull/11838/head
Igor Kulikov 2 years ago
parent
c5c732446e
commit
fc18c1f2e5
15 changed files with 128 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
  2. 4
      ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
  3. 6
      ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
  4. 4
      ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
  5. 10
      ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
  6. 12
      ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
  7. 75
      ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
  8. 4
      ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
  9. 4
      ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
  10. 14
      ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
  11. 22
      ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
  12. 52
      ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
  13. 4
      ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
  14. 10
      ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
  15. 34
      ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html

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

@ -17,7 +17,7 @@
--> -->
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2 translate>device.add-device-text</h2> <h2 translate>device.add-device-text</h2>
<span fxFlex></span> <span class="flex-1"></span>
<div [tb-help]="'devices'"></div> <div [tb-help]="'devices'"></div>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
@ -103,7 +103,7 @@
<button mat-stroked-button *ngIf="selectedIndex > 0" <button mat-stroked-button *ngIf="selectedIndex > 0"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="previousStep()">{{ 'action.back' | translate }}</button> (click)="previousStep()">{{ 'action.back' | translate }}</button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-stroked-button <button mat-stroked-button
color="primary" color="primary"
*ngIf="showNext" *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()"> <form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ assignToCustomerTitle | translate }}</h2> <h2>{{ assignToCustomerTitle | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -39,7 +39,7 @@
</tb-entity-list> </tb-entity-list>
</fieldset> </fieldset>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [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()"> <form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>{{ assignToEdgeTitle | translate }}</h2> <h2>{{ assignToEdgeTitle | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -39,7 +39,7 @@
</tb-entity-list> </tb-entity-list>
</fieldset> </fieldset>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
style="margin-right: 20px;" style="margin-right: 20px;"
type="button" 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()"> <form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ assignToCustomerTitle | translate }}</h2> <h2>{{ assignToCustomerTitle | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -38,7 +38,7 @@
</tb-entity-autocomplete> </tb-entity-autocomplete>
</fieldset> </fieldset>
</div> </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" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [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 appearance="outlined" class="settings-card">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<div fxLayout="row"> <div class="flex flex-row">
<span class="mat-headline-5" translate>admin.general-settings</span> <span class="mat-headline-5" translate>admin.general-settings</span>
</div> </div>
</mat-card-title> </mat-card-title>
@ -44,7 +44,7 @@
</div> </div>
</div> </div>
</fieldset> </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" <button mat-button color="primary"
[disabled]="generalSettings.pristine" [disabled]="generalSettings.pristine"
(click)="discardGeneralSettings()" (click)="discardGeneralSettings()"
@ -96,11 +96,11 @@
{{ 'admin.device-connectivity.' + protocol | translate }} {{ 'admin.device-connectivity.' + protocol | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div class="tb-form-row column-xs no-border no-padding tb-standard-fields"> <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> <mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/> <input matInput formControlName="host"/>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex> <mat-form-field class="flex-1">
<mat-label translate>admin.device-connectivity.port</mat-label> <mat-label translate>admin.device-connectivity.port</mat-label>
<input matInput type="number" min="0" max="65535" formControlName="port"/> <input matInput type="number" min="0" max="65535" formControlName="port"/>
<mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')"> <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
@ -114,7 +114,7 @@
</div> </div>
</div> </div>
</ng-template> </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" <button mat-button color="primary"
[disabled]="deviceConnectivitySettingsForm.pristine" [disabled]="deviceConnectivitySettingsForm.pristine"
(click)="discardDeviceConnectivitySettings()" (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-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </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;"> <mat-card-content style="padding-top: 16px;">
<form [formGroup]="homeSettings" (ngSubmit)="save()"> <form [formGroup]="homeSettings" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<section class="tb-default-dashboard" fxFlex fxLayout="column"> <section class="tb-default-dashboard flex flex-1 flex-col">
<section fxFlex fxLayout="column" fxLayout.gt-sm="row"> <section class="flex flex-1 flex-col gt-sm:flex-row">
<tb-dashboard-autocomplete <tb-dashboard-autocomplete
fxFlex class="flex-1"
label="{{ 'dashboard.home-dashboard' | translate }}" label="{{ 'dashboard.home-dashboard' | translate }}"
formControlName="dashboardId" formControlName="dashboardId"
[dashboardsScope]="'tenant'" [dashboardsScope]="'tenant'"
[selectFirstDashboard]="false" [selectFirstDashboard]="false"
></tb-dashboard-autocomplete> ></tb-dashboard-autocomplete>
<mat-checkbox fxFlex formControlName="hideDashboardToolbar"> <mat-checkbox class="flex-1" formControlName="hideDashboardToolbar">
{{ 'dashboard.home-dashboard-hide-toolbar' | translate }} {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
</mat-checkbox> </mat-checkbox>
</section> </section>
</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" <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || homeSettings.invalid || !homeSettings.dirty"
type="submit">{{'action.save' | translate}} type="submit">{{'action.save' | translate}}
</button> </button>

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

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

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

@ -72,7 +72,7 @@
</div> </div>
<mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded"> <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded">
<mat-expansion-panel-header> <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 admin.oauth2.advanced-settings
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
@ -235,7 +235,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex" <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> <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
<input matInput formControlName="tenantNamePattern" <input matInput formControlName="tenantNamePattern"
[required]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'"> [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. 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" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')" (click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage"> [class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }} {{'common.open-details-page' | translate }}
</button> </button>
<button mat-raised-button color="primary" fxFlex.xs <button mat-raised-button color="primary" class="xs:flex-1"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')" (click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit"> [class.!hidden]="hideDelete() || isEdit">
{{ 'queue.delete' | translate }} {{ 'queue.delete' | translate }}
</button> </button>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<button mat-raised-button <button mat-raised-button
ngxClipboard ngxClipboard
(cbOnSuccess)="onQueueIdCopied($event)" (cbOnSuccess)="onQueueIdCopied($event)"
[cbContent]="entity?.id?.id" [cbContent]="entity?.id?.id"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>queue.copyId</span> <span translate>queue.copyId</span>
</button> </button>
</div> </div>
</div> </div>
<div class="mat-padding" fxLayout="column" [formGroup]="entityForm"> <div class="mat-padding flex flex-col" [formGroup]="entityForm">
<tb-queue-form <tb-queue-form
[newQueue]="isAdd" [newQueue]="isAdd"
[systemQueue]="true" [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. 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" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')" (click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage"> [class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }} {{'common.open-details-page' | translate }}
</button> </button>
<button mat-raised-button color="primary" fxFlex.xs <button mat-raised-button color="primary" class="xs:flex-1"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'downloadResource')" (click)="onEntityAction($event, 'downloadResource')"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
{{ 'resource.download' | translate }} {{ 'resource.download' | translate }}
</button> </button>
<button mat-raised-button color="primary" fxFlex.xs <button mat-raised-button color="primary" class="xs:flex-1"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')" (click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit"> [class.!hidden]="hideDelete() || isEdit">
{{ 'resource.delete' | translate }} {{ 'resource.delete' | translate }}
</button> </button>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<button mat-raised-button <button mat-raised-button
ngxClipboard ngxClipboard
(cbOnSuccess)="onResourceIdCopied()" (cbOnSuccess)="onResourceIdCopied()"
[cbContent]="entity?.id?.id" [cbContent]="entity?.id?.id"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>resource.copyId</span> <span translate>resource.copyId</span>
</button> </button>
</div> </div>
</div> </div>
<div class="mat-padding" fxLayout="column"> <div class="mat-padding flex flex-col">
<form [formGroup]="entityForm"> <form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit"> <fieldset [disabled]="(isLoading$ | async) || !isEdit">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
@ -80,8 +80,8 @@
[existingFileName]="entityForm.get('fileName')?.value" [existingFileName]="entityForm.get('fileName')?.value"
(fileNameChanged)="entityForm?.get('fileName').patchValue($event)"> (fileNameChanged)="entityForm?.get('fileName').patchValue($event)">
</tb-file-input> </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"> <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 fxFlex> <mat-form-field class="flex-1">
<mat-label translate>resource.file-name</mat-label> <mat-label translate>resource.file-name</mat-label>
<input matInput formControlName="fileName" type="text"> <input matInput formControlName="fileName" type="text">
</mat-form-field> </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> <mat-card-title>
<span class="mat-headline-5" translate>admin.security-settings</span> <span class="mat-headline-5" translate>admin.security-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="securitySettings"></div> <div tb-help="securitySettings"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -89,8 +89,8 @@
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>admin.password-policy</legend> <legend class="group-title" translate>admin.password-policy</legend>
<section formGroupName="passwordPolicy"> <section formGroupName="passwordPolicy">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-password-length</mat-label> <mat-label translate>admin.minimum-password-length</mat-label>
<input matInput type="number" <input matInput type="number"
formControlName="minimumLength" formControlName="minimumLength"
@ -108,7 +108,7 @@
{{ 'admin.minimum-password-length-range' | translate }} {{ 'admin.minimum-password-length-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.maximum-password-length</mat-label>
<input matInput type="number" formControlName="maximumLength" step="1" min="6"/> <input matInput type="number" formControlName="maximumLength" step="1" min="6"/>
<mat-hint></mat-hint> <mat-hint></mat-hint>
@ -120,8 +120,8 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-uppercase-letters</mat-label> <mat-label translate>admin.minimum-uppercase-letters</mat-label>
<input matInput type="number" <input matInput type="number"
formControlName="minimumUppercaseLetters" formControlName="minimumUppercaseLetters"
@ -132,7 +132,7 @@
{{ 'admin.minimum-uppercase-letters-range' | translate }} {{ 'admin.minimum-uppercase-letters-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.minimum-lowercase-letters</mat-label>
<input matInput type="number" <input matInput type="number"
formControlName="minimumLowercaseLetters" formControlName="minimumLowercaseLetters"
@ -144,8 +144,8 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.minimum-digits</mat-label> <mat-label translate>admin.minimum-digits</mat-label>
<input matInput type="number" <input matInput type="number"
formControlName="minimumDigits" formControlName="minimumDigits"
@ -155,7 +155,7 @@
{{ 'admin.minimum-digits-range' | translate }} {{ 'admin.minimum-digits-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.minimum-special-characters</mat-label>
<input matInput type="number" <input matInput type="number"
formControlName="minimumSpecialCharacters" formControlName="minimumSpecialCharacters"
@ -167,8 +167,8 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.password-expiration-period-days</mat-label> <mat-label translate>admin.password-expiration-period-days</mat-label>
<input matInput type="number" <input matInput type="number"
formControlName="passwordExpirationPeriodDays" formControlName="passwordExpirationPeriodDays"
@ -179,7 +179,7 @@
{{ 'admin.password-expiration-period-days-range' | translate }} {{ 'admin.password-expiration-period-days-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.password-reuse-frequency-days</mat-label>
<input matInput type="number" <input matInput type="number"
formControlName="passwordReuseFrequencyDays" formControlName="passwordReuseFrequencyDays"
@ -191,11 +191,11 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-checkbox fxFlex formControlName="allowWhitespaces" style="margin-bottom: 16px"> <mat-checkbox class="flex-1" formControlName="allowWhitespaces" style="margin-bottom: 16px">
<mat-label translate>admin.allow-whitespace</mat-label> <mat-label translate>admin.allow-whitespace</mat-label>
</mat-checkbox> </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}}"> <mat-label tb-hint-tooltip-icon="{{'admin.force-reset-password-if-no-valid-hint' | translate}}">
{{'admin.force-reset-password-if-no-valid' | translate}} {{'admin.force-reset-password-if-no-valid' | translate}}
</mat-label> </mat-label>
@ -203,7 +203,7 @@
</div> </div>
</section> </section>
</fieldset> </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" <button mat-button color="primary"
[disabled]="securitySettingsFormGroup.pristine" [disabled]="securitySettingsFormGroup.pristine"
(click)="discardSetting()" (click)="discardSetting()"
@ -222,21 +222,21 @@
<mat-card-title> <mat-card-title>
<span class="mat-headline-5" translate>admin.jwt.security-settings</span> <span class="mat-headline-5" translate>admin.jwt.security-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="jwtSecuritySettings"></div> <div tb-help="jwtSecuritySettings"></div>
</mat-card-header> </mat-card-header>
<mat-card-content style="padding-top: 16px;"> <mat-card-content style="padding-top: 16px;">
<form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off"> <form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
<fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px"> <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px"> <div class="flex flex-row gap-2 xs:flex-col">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.jwt.issuer-name</mat-label> <mat-label translate>admin.jwt.issuer-name</mat-label>
<input matInput required formControlName="tokenIssuer"/> <input matInput required formControlName="tokenIssuer"/>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')"> <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')">
{{ 'admin.jwt.issuer-name-required' | translate }} {{ 'admin.jwt.issuer-name-required' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.jwt.signings-key</mat-label>
<input matInput (focus)="markAsTouched()" required formControlName="tokenSigningKey"/> <input matInput (focus)="markAsTouched()" required formControlName="tokenSigningKey"/>
<button type="button" <button type="button"
@ -259,8 +259,8 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px"> <div class="flex flex-row gap-2 xs:flex-col">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.jwt.expiration-time</mat-label> <mat-label translate>admin.jwt.expiration-time</mat-label>
<input matInput type="number" required <input matInput type="number" required
formControlName="tokenExpirationTime" formControlName="tokenExpirationTime"
@ -276,7 +276,7 @@
{{ 'admin.jwt.expiration-time-min' | translate }} {{ 'admin.jwt.expiration-time-min' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.jwt.refresh-expiration-time</mat-label>
<input matInput type="number" required <input matInput type="number" required
formControlName="refreshTokenExpTime" formControlName="refreshTokenExpTime"
@ -296,7 +296,7 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </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" <button mat-button color="primary"
[disabled]="jwtSecuritySettingsFormGroup.pristine" [disabled]="jwtSecuritySettingsFormGroup.pristine"
(click)="discardJwtSetting()" (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;"> <form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2 translate>admin.send-test-sms</h2> <h2 translate>admin.send-test-sms</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="close()" (click)="close()"
type="button"> type="button">
@ -47,7 +47,7 @@
</mat-form-field> </mat-form-field>
</fieldset> </fieldset>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [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> <mat-card-title>
<span class="mat-headline-5" translate>admin.sms-provider-settings</span> <span class="mat-headline-5" translate>admin.sms-provider-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="smsProviderSettings"></div> <div tb-help="smsProviderSettings"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -32,7 +32,7 @@
required required
formControlName="configuration"> formControlName="configuration">
</tb-sms-provider-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" <button mat-raised-button type="button"
[disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()"> [disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
{{'admin.send-test-sms' | translate}} {{'admin.send-test-sms' | translate}}
@ -50,7 +50,7 @@
<mat-card-title> <mat-card-title>
<span class="mat-headline-5" translate>admin.slack-settings</span> <span class="mat-headline-5" translate>admin.slack-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="slackSettings"></div> <div tb-help="slackSettings"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -66,7 +66,7 @@
<mat-card-title> <mat-card-title>
<span class="mat-headline-5" translate>admin.mobile-settings</span> <span class="mat-headline-5" translate>admin.mobile-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<!-- <div tb-help="mobileSettings"></div>--> <!-- <div tb-help="mobileSettings"></div>-->
</mat-card-header> </mat-card-header>
<mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()"> <mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()">
@ -79,7 +79,7 @@
(fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)"> (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
</tb-file-input> </tb-file-input>
</mat-card-content> </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" <button mat-button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
type="submit">{{'action.save' | translate}} 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> <mat-card-title>
<span class="mat-headline-5" translate>admin.2fa.2fa</span> <span class="mat-headline-5" translate>admin.2fa.2fa</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="twoFactorAuthentication"></div> <div tb-help="twoFactorAuthentication"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <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"> <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 class="provider" [formGroupName]="i">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center"> <mat-panel-title class="flex items-center justify-start">
<mat-slide-toggle <mat-slide-toggle
(mousedown)="toggleExtensionPanel($event, i, provider.get('enable').value)" (mousedown)="toggleExtensionPanel($event, i, provider.get('enable').value)"
formControlName="enable"> formControlName="enable">
@ -48,7 +48,7 @@
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<ng-container [ngSwitch]="provider.get('providerType').value"> <ng-container [ngSwitch]="provider.get('providerType').value">
<ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP"> <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> <mat-label translate>admin.2fa.issuer-name</mat-label>
<input matInput formControlName="issuerName" required> <input matInput formControlName="issuerName" required>
<mat-error *ngIf="provider.get('issuerName').hasError('required') || <mat-error *ngIf="provider.get('issuerName').hasError('required') ||
@ -58,8 +58,8 @@
</mat-form-field> </mat-form-field>
</ng-container> </ng-container>
<div *ngSwitchCase="twoFactorAuthProviderType.SMS" <div *ngSwitchCase="twoFactorAuthProviderType.SMS"
fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.verification-message-template</mat-label> <mat-label translate>admin.2fa.verification-message-template</mat-label>
<input matInput formControlName="smsVerificationMessageTemplate" required> <input matInput formControlName="smsVerificationMessageTemplate" required>
<mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')"> <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
@ -70,7 +70,7 @@
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required> <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')"> <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@ -83,7 +83,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngSwitchCase="twoFactorAuthProviderType.EMAIL"> <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> <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required> <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')"> <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@ -96,7 +96,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngSwitchCase="twoFactorAuthProviderType.BACKUP_CODE"> <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> <mat-label translate>admin.2fa.number-of-codes</mat-label>
<input matInput formControlName="codesQuantity" type="number" step="1" min="1" required> <input matInput formControlName="codesQuantity" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('codesQuantity').hasError('required')"> <mat-error *ngIf="provider.get('codesQuantity').hasError('required')">
@ -116,8 +116,8 @@
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>admin.2fa.verification-limitations</legend> <legend class="group-title" translate>admin.2fa.verification-limitations</legend>
<div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="input-row flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label> <mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
<input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="60"> <input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="60">
<mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('required')"> <mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('required')">
@ -128,7 +128,7 @@
{{ 'admin.2fa.total-allowed-time-for-verification-pattern' | translate }} {{ 'admin.2fa.total-allowed-time-for-verification-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.2fa.retry-verification-code-period</mat-label>
<input matInput required formControlName="minVerificationCodeSendPeriod" type="number" step="1" min="5"> <input matInput required formControlName="minVerificationCodeSendPeriod" type="number" step="1" min="5">
<mat-error *ngIf="twoFaFormGroup.get('minVerificationCodeSendPeriod').hasError('required')"> <mat-error *ngIf="twoFaFormGroup.get('minVerificationCodeSendPeriod').hasError('required')">
@ -139,7 +139,7 @@
{{ 'admin.2fa.retry-verification-code-period-pattern' | translate }} {{ 'admin.2fa.retry-verification-code-period-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <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"> <input matInput formControlName="maxVerificationFailuresBeforeUserLockout" type="number" step="1" min="0" max="65535">
<mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern') <mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern')
@ -152,7 +152,7 @@
<mat-expansion-panel class="provider"> <mat-expansion-panel class="provider">
<mat-expansion-panel-header> <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)" <mat-slide-toggle (mousedown)="toggleExtensionPanel($event, providersForm.length, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
formControlName="verificationCodeCheckRateLimitEnable"> formControlName="verificationCodeCheckRateLimitEnable">
</mat-slide-toggle> </mat-slide-toggle>
@ -160,8 +160,8 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.2fa.number-of-checking-attempts</mat-label> <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1"> <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')"> <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
@ -172,7 +172,7 @@
{{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }} {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1"> <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')"> <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
@ -188,7 +188,7 @@
</mat-expansion-panel> </mat-expansion-panel>
</fieldset> </fieldset>
</div> </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" <button mat-button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty" [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
type="submit"> type="submit">

Write Preview
Loading…
Cancel
Save