fix(console): SMS provider (#3949)

fix: console twilio

Co-authored-by: Livio Spring <[email protected]>
This commit is contained in:
Max Peintner
2022-07-22 11:23:13 +00:00
committed by GitHub
co-authored by Livio Spring
parent aed7010508
commit 3855ec2ab5
11 changed files with 368 additions and 214 deletions
@@ -8,7 +8,7 @@
<input cnslInput name="sid" formControlName="sid" />
</cnsl-form-field>
<cnsl-form-field class="sms-form-field" label="Token">
<cnsl-form-field *ngIf="token" class="sms-form-field" label="Token">
<cnsl-label>{{ 'SETTING.SMS.TWILIO.TOKEN' | translate }}</cnsl-label>
<input cnslInput name="token" formControlName="token" />
</cnsl-form-field>
@@ -1,10 +1,10 @@
import { Component, Inject } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import {
AddSMSProviderTwilioRequest,
UpdateSMSProviderTwilioRequest,
UpdateSMSProviderTwilioTokenRequest,
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';
@@ -41,13 +41,14 @@ export class DialogAddSMSProviderComponent {
) {
this.twilioForm = this.fb.group({
sid: ['', [Validators.required]],
token: ['', [Validators.required]],
senderNumber: ['', [Validators.required]],
});
this.smsProviders = data.smsProviders;
if (!!this.twilio) {
this.twilioForm.patchValue(this.twilio);
} else {
this.twilioForm.addControl('token', new FormControl('', Validators.required));
}
}
@@ -82,14 +83,16 @@ export class DialogAddSMSProviderComponent {
});
dialogRef.afterClosed().subscribe((token: string) => {
if (token) {
if (token && this.twilioProvider?.id) {
const tokenReq = new UpdateSMSProviderTwilioTokenRequest();
tokenReq.setToken(token);
tokenReq.setId(this.twilioProvider.id);
this.service
.updateSMSProviderTwilioToken(tokenReq)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.TOKENSET', true);
this.dialogRef.close();
})
.catch((error) => {
this.toast.showError(error);
@@ -110,6 +113,15 @@ export class DialogAddSMSProviderComponent {
return this.twilioForm.get('sid');
}
public get twilioProvider(): SMSProvider.AsObject | undefined {
const twilioProvider: SMSProvider.AsObject | undefined = this.smsProviders.find((p) => p.twilio);
if (twilioProvider) {
return twilioProvider;
} else {
return undefined;
}
}
public get twilio(): TwilioConfig.AsObject | undefined {
const twilioProvider: SMSProvider.AsObject | undefined = this.smsProviders.find((p) => p.twilio);
if (twilioProvider && !!twilioProvider.twilio) {
@@ -75,9 +75,32 @@
active: twilio?.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_ACTIVE,
inactive: twilio?.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_INACTIVE
}"
></span>
>{{ 'SETTING.SMS.SMSPROVIDERSTATE.' + twilio?.state | translate }}</span
>
<span class="fill-space"></span>
<button
*ngIf="twilio && twilio.id"
[disabled]="(['iam.write'] | hasRole | async) === false"
mat-stroked-button
(click)="toggleSMSProviderState(twilio.id)"
>
<span *ngIf="twilio.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_ACTIVE">{{
'ACTIONS.DEACTIVATE' | translate
}}</span>
<span *ngIf="twilio.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_INACTIVE">{{
'ACTIONS.ACTIVATE' | translate
}}</span>
</button>
<button
*ngIf="twilio && twilio.id"
color="warn"
[disabled]="(['iam.write'] | hasRole | async) === false"
mat-icon-button
(click)="removeSMSProvider(twilio.id)"
>
<i class="las la-trash"></i>
</button>
<button [disabled]="(['iam.write'] | hasRole | async) === false" mat-icon-button (click)="editSMSProvider()">
<i class="las la-pen"></i>
</button>
@@ -49,6 +49,7 @@
display: flex;
flex-direction: row;
align-items: center;
width: 350px;
.title {
font-size: 16px;
@@ -3,12 +3,12 @@ import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } fro
import { MatDialog } from '@angular/material/dialog';
import { take } from 'rxjs';
import {
AddSMSProviderTwilioRequest,
AddSMTPConfigRequest,
UpdateSMSProviderTwilioRequest,
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,6 +16,7 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
import { DialogAddSMSProviderComponent } from './dialog-add-sms-provider/dialog-add-sms-provider.component';
import { PasswordDialogComponent } from './password-dialog/password-dialog.component';
@@ -185,11 +186,12 @@ export class NotificationSettingsComponent implements OnInit {
dialogRef.afterClosed().subscribe((req: AddSMSProviderTwilioRequest | UpdateSMSProviderTwilioRequest) => {
if (req) {
if (this.hasTwilio) {
if (!!this.twilio) {
this.service
.updateSMSProviderTwilio(req as UpdateSMSProviderTwilioRequest)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.ADDED', true);
this.fetchData();
})
.catch((error) => {
this.toast.showError(error);
@@ -199,6 +201,7 @@ export class NotificationSettingsComponent implements OnInit {
.addSMSProviderTwilio(req as AddSMSProviderTwilioRequest)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.ADDED', true);
this.fetchData();
})
.catch((error) => {
this.toast.showError(error);
@@ -234,6 +237,59 @@ export class NotificationSettingsComponent implements OnInit {
});
}
public toggleSMSProviderState(id: string): void {
const provider = this.smsProviders.find((p) => p.id === id);
if (provider) {
if (provider.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_ACTIVE) {
this.service
.deactivateSMSProvider(id)
.then(() => {
this.toast.showInfo('SETTING.SMS.DEACTIVATED', true);
this.fetchData();
})
.catch((error) => {
this.toast.showError(error);
});
} else if (provider.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_INACTIVE) {
this.service
.activateSMSProvider(id)
.then(() => {
this.toast.showInfo('SETTING.SMS.ACTIVATED', true);
this.fetchData();
})
.catch((error) => {
this.toast.showError(error);
});
}
}
}
public removeSMSProvider(id: string): void {
const dialogRef = this.dialog.open(WarnDialogComponent, {
data: {
confirmKey: 'ACTIONS.DELETE',
cancelKey: 'ACTIONS.CANCEL',
titleKey: 'SETTING.SMS.REMOVEPROVIDER',
descriptionKey: 'SETTING.SMS.REMOVEPROVIDER_DESC',
},
width: '400px',
});
dialogRef.afterClosed().subscribe((resp) => {
if (resp) {
this.service
.removeSMSProvider(id)
.then(() => {
this.toast.showInfo('SETTING.SMS.TWILIO.REMOVED', true);
this.fetchData();
})
.catch((error) => {
this.toast.showError(error);
});
}
});
}
public get twilio(): SMSProvider.AsObject | undefined {
return this.smsProviders.find((p) => p.twilio);
}
@@ -257,13 +313,4 @@ 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;
}
}
}
@@ -13,6 +13,7 @@ import { CardModule } from '../../card/card.module';
import { FormFieldModule } from '../../form-field/form-field.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { InputModule } from '../../input/input.module';
import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
import { DialogAddSMSProviderComponent } from './dialog-add-sms-provider/dialog-add-sms-provider.component';
import { NotificationSettingsComponent } from './notification-settings.component';
import { PasswordDialogComponent } from './password-dialog/password-dialog.component';
@@ -31,6 +32,7 @@ import { PasswordDialogComponent } from './password-dialog/password-dialog.compo
InputModule,
MatIconModule,
FormFieldModule,
WarnDialogModule,
MatSelectModule,
MatProgressSpinnerModule,
MatSelectModule,