|
|
|
@ -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()"> |
|
|
|
|
Igor Kulikov
2 years ago