andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-07 14:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add smtp config, remove smtp and sms provider, console adaptations (#3792)

Browse Source 
* fix: add AddSMTPConfig to admin api

* addsmtpconfig

* fix: add RemoveSMTPConfig and RemoveSMSProvider to admin api

* update twilio, token fcn

* fix account switcher, twilio token set, cleanup dialog

* cleanup

* buttons

Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
2022-06-10 12:39:38 +02:00
committed by GitHub
co-authored by Livio Amstutz
parent ab7651fe26
commit 3500961fbb
29 changed files with 793 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/accounts-card/accounts-card.component.html
-2
View File
@@ -44,7 +44,6 @@
>{{ 'USER.STATE.' + session.authState | translate }}</span
>
</div>
<span class="fill-space"></span>
<mat-icon>keyboard_arrow_right</mat-icon>
</a>
<a class="row" (click)="selectNewAccount()">
@@ -54,7 +53,6 @@
<span class="col">
<span class="user-title">{{ 'USER.ADDACCOUNT' | translate }}</span>
</span>
<span class="fill-space"></span>
<mat-icon>keyboard_arrow_right</mat-icon>
</a>
</div>
console/src/app/modules/accounts-card/accounts-card.component.scss
+4 -4
View File
@@ -109,6 +109,7 @@
flex: 1;
display: flex;
flex-direction: column;
overflow-x: hidden;
.user-title {
font-weight: 500;
@@ -123,11 +124,14 @@
.loginname {
font-size: 0.8rem;
line-height: 1rem;
white-space: nowrap;
width: fit-content;
}
.loginname {
color: $secondary-text;
text-overflow: ellipsis;
overflow: hidden;
}
.state {
@@ -136,10 +140,6 @@
padding: 1px 0.5rem;
}
}
.fill-space {
flex: 1;
}
}
}
}
console/src/app/modules/policies/notification-settings/dialog-add-sms-provider/dialog-add-sms-provider.component.html
+4 -13
View File
@@ -2,20 +2,7 @@
<span>{{ provider === SMSProviderType.Twilio ? 'Twilio' : ('SETTING.SMS.ADDPROVIDER' | translate) }}</span>
</h1>
<div mat-dialog-content>
<!-- <p class="desc cnsl-secondary-text">{{ 'SETTING.SMS.ADDPROVIDERDESCRIPTION' | translate }}</p> -->
<!-- <cnsl-form-field class="form-field" label="Access Code" required="true">
<cnsl-label>{{ 'MFA.TYPE' | translate }}</cnsl-label>
<mat-select [(ngModel)]="provider">
<mat-option *ngFor="let prov of availableSMSProviders" [value]="prov">
<span *ngIf="prov === SMSProviderType.Twilio">Twilio</span>
</mat-option>
</mat-select>
</cnsl-form-field> -->
<form *ngIf="provider === SMSProviderType.Twilio" (ngSubmit)="closeDialogWithRequest()" [formGroup]="twilioForm">
<!-- <h2>Twilio</h2> -->
<cnsl-form-field class="sms-form-field" label="sid">
<cnsl-label>{{ 'SETTING.SMS.TWILIO.SID' | translate }}</cnsl-label>
<input cnslInput name="sid" formControlName="sid" />
@@ -30,6 +17,10 @@
<cnsl-label>{{ 'SETTING.SMS.TWILIO.SENDERNUMBER' | translate }}</cnsl-label>
<input cnslInput name="senderNumber" formControlName="senderNumber" />
</cnsl-form-field>
<button *ngIf="twilio" type="button" mat-stroked-button (click)="changeToken()">
{{ 'SETTING.SMS.TWILIO.CHANGETOKEN' | translate }}
</button>
</form>
</div>
<div mat-dialog-actions class="action">
console/src/app/modules/policies/notification-settings/dialog-add-sms-provider/dialog-add-sms-provider.component.ts
+70 -7
View File
@@ -1,7 +1,16 @@
import { Component, Inject } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AddSMSProviderTwilioRequest } from 'src/app/proto/generated/zitadel/admin_pb';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import {
AddSMSProviderTwilioRequest,
UpdateSMSProviderTwilioRequest,
UpdateSMSProviderTwilioTokenRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import { SMSProvider, TwilioConfig } from 'src/app/proto/generated/zitadel/settings_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ToastService } from 'src/app/services/toast.service';
import { PasswordDialogComponent } from '../password-dialog/password-dialog.component';
enum SMSProviderType {
Twilio = 1,
@@ -16,13 +25,18 @@ export class DialogAddSMSProviderComponent {
public SMSProviderType: any = SMSProviderType;
public availableSMSProviders: SMSProviderType[] = [SMSProviderType.Twilio];
public provider: SMSProviderType = SMSProviderType.Twilio;
public req: AddSMSProviderTwilioRequest = new AddSMSProviderTwilioRequest();
public req!: AddSMSProviderTwilioRequest | UpdateSMSProviderTwilioRequest;
public twilioForm!: FormGroup;
private smsProviders: SMSProvider.AsObject[] = [];
constructor(
private fb: FormBuilder,
private service: AdminService,
public dialogRef: MatDialogRef<DialogAddSMSProviderComponent>,
private toast: ToastService,
private dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.twilioForm = this.fb.group({
@@ -30,6 +44,11 @@ export class DialogAddSMSProviderComponent {
token: ['', [Validators.required]],
senderNumber: ['', [Validators.required]],
});
this.smsProviders = data.smsProviders;
if (!!this.twilio) {
this.twilioForm.patchValue(this.twilio);
}
}
public closeDialog(): void {
@@ -37,11 +56,46 @@ export class DialogAddSMSProviderComponent {
}
public closeDialogWithRequest(): void {
this.req.setSid(this.sid?.value);
this.req.setToken(this.token?.value);
this.req.setSenderNumber(this.senderNumber?.value);
if (!!this.twilio) {
this.req = new UpdateSMSProviderTwilioRequest();
this.dialogRef.close(this.req);
this.req.setSid(this.sid?.value);
this.req.setSenderNumber(this.senderNumber?.value);
this.dialogRef.close(this.req);
} else {
this.req = new AddSMSProviderTwilioRequest();
this.req.setSid(this.sid?.value);
this.req.setToken(this.token?.value);
this.req.setSenderNumber(this.senderNumber?.value);
this.dialogRef.close(this.req);
}
}
public changeToken(): void {
const dialogRef = this.dialog.open(PasswordDialogComponent, {
width: '400px',
data: {
i18nTitle: 'SETTING.SMS.TWILIO.SETTOKEN',
i18nLabel: 'SETTING.SMS.TWILIO.TOKEN',
},
});
dialogRef.afterClosed().subscribe((token: string) => {
if (token) {
const tokenReq = new UpdateSMSProviderTwilioTokenRequest();
tokenReq.setToken(token);
this.service
.updateSMSProviderTwilioToken(tokenReq)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.TOKENSET', true);
})
.catch((error) => {
this.toast.showError(error);
});
}
});
}
public get senderNumber(): AbstractControl | null {
@@ -55,4 +109,13 @@ export class DialogAddSMSProviderComponent {
public get sid(): AbstractControl | null {
return this.twilioForm.get('sid');
}
public get twilio(): TwilioConfig.AsObject | undefined {
const twilioProvider: SMSProvider.AsObject | undefined = this.smsProviders.find((p) => p.twilio);
if (twilioProvider && !!twilioProvider.twilio) {
return twilioProvider.twilio;
} else {
return undefined;
}
}
}
console/src/app/modules/policies/notification-settings/notification-settings.component.html
+3 -2
View File
@@ -39,8 +39,9 @@
<button
class="set-password-btn"
[disabled]="(['iam.write'] | hasRole | async) === false"
[disabled]="(['iam.write'] | hasRole | async) === false || !hasSMTPConfig"
(click)="setSMTPPassword()"
type="button"
mat-stroked-button
>
{{ 'SETTING.SMTP.SETPASSWORD' | translate }}
@@ -77,7 +78,7 @@
></span>
<span class="fill-space"></span>
<button [disabled]="(['iam.write'] | hasRole | async) === false" mat-icon-button (click)="addSMSProvider()">
<button [disabled]="(['iam.write'] | hasRole | async) === false" mat-icon-button (click)="editSMSProvider()">
<i class="las la-pen"></i>
</button>
</div>
console/src/app/modules/policies/notification-settings/notification-settings.component.ts
+73 -29
View File
@@ -3,10 +3,12 @@ import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/fo
import { MatDialog } from '@angular/material/dialog';
import { take } from 'rxjs';
import {
AddSMSProviderTwilioRequest,
UpdateSMTPConfigPasswordRequest,
UpdateSMTPConfigPasswordResponse,
UpdateSMTPConfigRequest,
AddSMSProviderTwilioRequest,
AddSMTPConfigRequest,
UpdateSMSProviderTwilioRequest,
UpdateSMTPConfigPasswordRequest,
UpdateSMTPConfigPasswordResponse,
UpdateSMTPConfigRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import { DebugNotificationProvider, SMSProvider, SMSProviderConfigState } from 'src/app/proto/generated/zitadel/settings_pb';
import { AdminService } from 'src/app/services/admin.service';
@@ -16,7 +18,7 @@ import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
import { DialogAddSMSProviderComponent } from './dialog-add-sms-provider/dialog-add-sms-provider.component';
import { SMTPPasswordDialogComponent } from './smtp-password-dialog/smtp-password-dialog.component';
import { PasswordDialogComponent } from './password-dialog/password-dialog.component';
@Component({
selector: 'cnsl-notification-settings',
@@ -39,6 +41,8 @@ export class NotificationSettingsComponent implements OnInit {
public SMSProviderConfigState: any = SMSProviderConfigState;
public InfoSectionType: any = InfoSectionType;
public hasSMTPConfig: boolean = false;
// show available providers
constructor(
@@ -76,6 +80,7 @@ export class NotificationSettingsComponent implements OnInit {
.then((smtpConfig) => {
this.smtpLoading = false;
if (smtpConfig.smtpConfig) {
this.hasSMTPConfig = true;
this.form.patchValue(smtpConfig.smtpConfig);
}
})
@@ -83,6 +88,7 @@ export class NotificationSettingsComponent implements OnInit {
this.smtpLoading = false;
if (error && error.code === 5) {
console.log(error);
this.hasSMTPConfig = false;
}
});
@@ -109,9 +115,8 @@ export class NotificationSettingsComponent implements OnInit {
this.logNotificationProvider = logNotificationProvider.provider;
}
})
.catch((error) => {
.catch(() => {
this.logProviderLoading = false;
this.toast.showError(error);
});
this.fileProviderLoading = true;
@@ -123,23 +128,35 @@ export class NotificationSettingsComponent implements OnInit {
this.fileNotificationProvider = fileNotificationProvider.provider;
}
})
.catch((error) => {
.catch(() => {
this.fileProviderLoading = false;
this.toast.showError(error);
});
}
private updateData(): Promise<UpdateSMTPConfigPasswordResponse.AsObject> | any {
const req = new UpdateSMTPConfigRequest();
req.setHost(this.host?.value ?? '');
req.setSenderAddress(this.senderAddress?.value ?? '');
req.setSenderName(this.senderName?.value ?? '');
req.setTls(this.tls?.value ?? false);
req.setUser(this.user?.value ?? '');
if (this.hasSMTPConfig) {
const req = new UpdateSMTPConfigRequest();
req.setHost(this.host?.value ?? '');
req.setSenderAddress(this.senderAddress?.value ?? '');
req.setSenderName(this.senderName?.value ?? '');
req.setTls(this.tls?.value ?? false);
req.setUser(this.user?.value ?? '');
return this.service.updateSMTPConfig(req).catch((error) => {
this.toast.showError(error);
});
return this.service.updateSMTPConfig(req).catch((error) => {
this.toast.showError(error);
});
} else {
const req = new AddSMTPConfigRequest();
req.setHost(this.host?.value ?? '');
req.setSenderAddress(this.senderAddress?.value ?? '');
req.setSenderName(this.senderName?.value ?? '');
req.setTls(this.tls?.value ?? false);
req.setUser(this.user?.value ?? '');
return this.service.addSMTPConfig(req).catch((error) => {
this.toast.showError(error);
});
}
}
public savePolicy(): void {
@@ -158,28 +175,46 @@ export class NotificationSettingsComponent implements OnInit {
}
}
public addSMSProvider(): void {
public editSMSProvider(): void {
const dialogRef = this.dialog.open(DialogAddSMSProviderComponent, {
width: '400px',
data: {
smsProviders: this.smsProviders,
},
});
dialogRef.afterClosed().subscribe((req: AddSMSProviderTwilioRequest) => {
dialogRef.afterClosed().subscribe((req: AddSMSProviderTwilioRequest | UpdateSMSProviderTwilioRequest) => {
if (req) {
this.service
.addSMSProviderTwilio(req)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.ADDED', true);
})
.catch((error) => {
this.toast.showError(error);
});
if (this.hasTwilio) {
this.service
.updateSMSProviderTwilio(req as UpdateSMSProviderTwilioRequest)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.ADDED', true);
})
.catch((error) => {
this.toast.showError(error);
});
} else {
this.service
.addSMSProviderTwilio(req as AddSMSProviderTwilioRequest)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.ADDED', true);
})
.catch((error) => {
this.toast.showError(error);
});
}
}
});
}
public setSMTPPassword(): void {
const dialogRef = this.dialog.open(SMTPPasswordDialogComponent, {
const dialogRef = this.dialog.open(PasswordDialogComponent, {
width: '400px',
data: {
i18nTitle: 'SETTING.SMTP.SETPASSWORD',
i18nLabel: 'SETTING.SMTP.PASSWORD',
},
});
dialogRef.afterClosed().subscribe((password: string) => {
@@ -222,4 +257,13 @@ export class NotificationSettingsComponent implements OnInit {
public get host(): AbstractControl | null {
return this.form.get('host');
}
public get hasTwilio(): boolean {
const twilioProvider: SMSProvider.AsObject | undefined = this.smsProviders.find((p) => p.twilio);
if (twilioProvider && !!twilioProvider.twilio) {
return true;
} else {
return false;
}
}
}
console/src/app/modules/policies/notification-settings/notification-settings.module.ts
+2 -2
View File
@@ -15,10 +15,10 @@ import { InfoSectionModule } from '../../info-section/info-section.module';
import { InputModule } from '../../input/input.module';
import { DialogAddSMSProviderComponent } from './dialog-add-sms-provider/dialog-add-sms-provider.component';
import { NotificationSettingsComponent } from './notification-settings.component';
import { SMTPPasswordDialogComponent } from './smtp-password-dialog/smtp-password-dialog.component';
import { PasswordDialogComponent } from './password-dialog/password-dialog.component';
@NgModule({
declarations: [NotificationSettingsComponent, DialogAddSMSProviderComponent, SMTPPasswordDialogComponent],
declarations: [NotificationSettingsComponent, DialogAddSMSProviderComponent, PasswordDialogComponent],
imports: [
CommonModule,
CardModule,
console/src/app/modules/policies/notification-settings/smtp-password-dialog/smtp-password-dialog.component.html → console/src/app/modules/policies/notification-settings/password-dialog/password-dialog.component.html
+2 -2
View File
@@ -1,9 +1,9 @@
<h1 mat-dialog-title>
<span>{{ 'SETTING.SMTP.SETPASSWORD' | translate }} {{ data?.number }}</span>
<span>{{ data.i18nTitle | translate }} {{ data?.number }}</span>
</h1>
<div mat-dialog-content>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'SETTING.SMTP.PASSWORD' | translate }}</cnsl-label>
<cnsl-label>{{ data.i18nLabel | translate }}</cnsl-label>
<input cnslInput [(ngModel)]="password" />
</cnsl-form-field>
</div>
console/src/app/modules/policies/notification-settings/smtp-password-dialog/smtp-password-dialog.component.scss → console/src/app/modules/policies/notification-settings/password-dialog/password-dialog.component.scss
View File
console/src/app/modules/policies/notification-settings/smtp-password-dialog/smtp-password-dialog.component.spec.ts → console/src/app/modules/policies/notification-settings/password-dialog/password-dialog.component.spec.ts
+6 -6
View File
@@ -1,19 +1,19 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { SMTPPasswordDialogComponent } from './smtp-password-dialog.component';
import { PasswordDialogComponent } from './password-dialog.component';
describe('CodeDialogComponent', () => {
let component: SMTPPasswordDialogComponent;
let fixture: ComponentFixture<SMTPPasswordDialogComponent>;
describe('PasswordDialogComponent', () => {
let component: PasswordDialogComponent;
let fixture: ComponentFixture<PasswordDialogComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [SMTPPasswordDialogComponent],
declarations: [PasswordDialogComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SMTPPasswordDialogComponent);
fixture = TestBed.createComponent(PasswordDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
console/src/app/modules/policies/notification-settings/password-dialog/password-dialog.component.ts
+16
View File
@@ -0,0 +1,16 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'cnsl-password-dialog',
templateUrl: './password-dialog.component.html',
styleUrls: ['./password-dialog.component.scss'],
})
export class PasswordDialogComponent {
public password: string = '';
constructor(public dialogRef: MatDialogRef<PasswordDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
closeDialog(password: string = ''): void {
this.dialogRef.close(password);
}
}
console/src/app/modules/policies/notification-settings/smtp-password-dialog/smtp-password-dialog.component.ts
-16
View File
@@ -1,16 +0,0 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'cnsl-smtp-password-dialog',
templateUrl: './smtp-password-dialog.component.html',
styleUrls: ['./smtp-password-dialog.component.scss'],
})
export class SMTPPasswordDialogComponent {
public password: string = '';
constructor(public dialogRef: MatDialogRef<SMTPPasswordDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
closeDialog(password: string = ''): void {
this.dialogRef.close(password);
}
}