mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-30 19:12:16 +00:00
fix(console): SMS provider (#3949)
fix: console twilio Co-authored-by: Livio Spring <[email protected]>
This commit is contained in:
co-authored by
Livio Spring
parent
aed7010508
commit
3855ec2ab5
+1
-1
@@ -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>
|
||||
|
||||
+18
-6
@@ -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) {
|
||||
|
||||
+24
-1
@@ -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>
|
||||
|
||||
+1
@@ -49,6 +49,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 350px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
|
||||
+63
-16
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user