[PM 2164] api-key component migration (#8562)

* api-key component migration

* api-key component migration

* api-key component migration

* api-key component migration
This commit is contained in:
vinith-kovan 2024-06-05 22:44:33 +05:30 committed by GitHub
parent 24fb3f71f1
commit 1cec69e377
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 126 additions and 138 deletions

View File

@ -216,31 +216,33 @@ export class AccountComponent {
};
async viewApiKey() {
await this.modalService.openViewRef(ApiKeyComponent, this.apiKeyModalRef, (comp) => {
comp.keyType = "organization";
comp.entityId = this.organizationId;
comp.postKey = this.organizationApiService.getOrCreateApiKey.bind(
this.organizationApiService,
);
comp.scope = "api.organization";
comp.grantType = "client_credentials";
comp.apiKeyTitle = "apiKey";
comp.apiKeyWarning = "apiKeyWarning";
comp.apiKeyDescription = "apiKeyDesc";
await ApiKeyComponent.open(this.dialogService, {
data: {
keyType: "organization",
entityId: this.organizationId,
postKey: this.organizationApiService.getOrCreateApiKey.bind(this.organizationApiService),
scope: "api.organization",
grantType: "client_credentials",
apiKeyTitle: "apiKey",
apiKeyWarning: "apiKeyWarning",
apiKeyDescription: "apiKeyDesc",
},
});
}
async rotateApiKey() {
await this.modalService.openViewRef(ApiKeyComponent, this.rotateApiKeyModalRef, (comp) => {
comp.keyType = "organization";
comp.isRotation = true;
comp.entityId = this.organizationId;
comp.postKey = this.organizationApiService.rotateApiKey.bind(this.organizationApiService);
comp.scope = "api.organization";
comp.grantType = "client_credentials";
comp.apiKeyTitle = "apiKey";
comp.apiKeyWarning = "apiKeyWarning";
comp.apiKeyDescription = "apiKeyRotateDesc";
await ApiKeyComponent.open(this.dialogService, {
data: {
keyType: "organization",
isRotation: true,
entityId: this.organizationId,
postKey: this.organizationApiService.rotateApiKey.bind(this.organizationApiService),
scope: "api.organization",
grantType: "client_credentials",
apiKeyTitle: "apiKey",
apiKeyWarning: "apiKeyWarning",
apiKeyDescription: "apiKeyRotateDesc",
},
});
}
}

View File

@ -1,72 +1,42 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="apiKeyTitle">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<form
class="modal-content"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
ngNativeValidate
>
<div class="modal-header">
<h1 class="modal-title" id="apiKeyTitle">{{ apiKeyTitle | i18n }}</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>{{ apiKeyDescription | i18n }}</p>
<app-user-verification
[(ngModel)]="masterPassword"
ngDefaultControl
name="secret"
*ngIf="!clientSecret"
>
</app-user-verification>
<app-callout type="warning" *ngIf="clientSecret">{{ apiKeyWarning | i18n }}</app-callout>
<app-callout
type="info"
title="{{ 'oauth2ClientCredentials' | i18n }}"
icon="bwi bwi-key"
*ngIf="clientSecret"
>
<p class="mb-1">
<strong>client_id:</strong><br />
<code>{{ clientId }}</code>
</p>
<p class="mb-1">
<strong>client_secret:</strong><br />
<code>{{ clientSecret }}</code>
</p>
<p class="mb-1">
<strong>scope:</strong><br />
<code>{{ scope }}</code>
</p>
<p class="mb-0">
<strong>grant_type:</strong><br />
<code>{{ grantType }}</code>
</p>
</app-callout>
</div>
<div class="modal-footer">
<button
type="submit"
class="btn btn-primary btn-submit"
[disabled]="form.loading"
*ngIf="!clientSecret"
>
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ (isRotation ? "rotateApiKey" : "viewApiKey") | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{ "close" | i18n }}
</button>
</div>
</form>
</div>
</div>
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog>
<span bitDialogTitle>{{ data.apiKeyTitle | i18n }}</span>
<div bitDialogContent>
<p bitTypography="body1">{{ data.apiKeyDescription | i18n }}</p>
<app-user-verification-form-input formControlName="masterPassword" *ngIf="!clientSecret">
</app-user-verification-form-input>
<app-callout type="warning" *ngIf="clientSecret">{{ data.apiKeyWarning | i18n }}</app-callout>
<app-callout
type="info"
title="{{ 'oauth2ClientCredentials' | i18n }}"
icon="bwi bwi-key"
*ngIf="clientSecret"
>
<p bitTypography="body1" class="tw-mb-1">
<strong>client_id:</strong><br />
<code>{{ clientId }}</code>
</p>
<p bitTypography="body1" class="tw-mb-1">
<strong>client_secret:</strong><br />
<code>{{ clientSecret }}</code>
</p>
<p bitTypography="body1" class="tw-mb-1">
<strong>scope:</strong><br />
<code>{{ data.scope }}</code>
</p>
<p bitTypography="body1" class="tw-mb-0">
<strong>grant_type:</strong><br />
<code>{{ data.grantType }}</code>
</p>
</app-callout>
</div>
<div bitDialogFooter>
<button type="submit" buttonType="primary" *ngIf="!clientSecret" bitButton bitFormButton>
<span>{{ (data.isRotation ? "rotateApiKey" : "viewApiKey") | i18n }}</span>
</button>
<button type="button" bitButton bitFormButton bitDialogClose>
{{ "close" | i18n }}
</button>
</div>
</bit-dialog>
</form>

View File

@ -1,46 +1,58 @@
import { Component } from "@angular/core";
import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
import { SecretVerificationRequest } from "@bitwarden/common/auth/models/request/secret-verification.request";
import { ApiKeyResponse } from "@bitwarden/common/auth/models/response/api-key.response";
import { Verification } from "@bitwarden/common/auth/types/verification";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { DialogService } from "@bitwarden/components";
@Component({
selector: "app-api-key",
templateUrl: "api-key.component.html",
})
export class ApiKeyComponent {
export type ApiKeyDialogData = {
keyType: string;
isRotation: boolean;
postKey: (entityId: string, request: SecretVerificationRequest) => Promise<ApiKeyResponse>;
isRotation?: boolean;
entityId: string;
postKey: (entityId: string, request: SecretVerificationRequest) => Promise<ApiKeyResponse>;
scope: string;
grantType: string;
apiKeyTitle: string;
apiKeyWarning: string;
apiKeyDescription: string;
masterPassword: Verification;
formPromise: Promise<ApiKeyResponse>;
};
@Component({
selector: "app-api-key",
templateUrl: "api-key.component.html",
})
export class ApiKeyComponent {
clientId: string;
clientSecret: string;
formGroup = this.formBuilder.group({
masterPassword: [null as Verification, [Validators.required]],
});
constructor(
@Inject(DIALOG_DATA) protected data: ApiKeyDialogData,
private formBuilder: FormBuilder,
private userVerificationService: UserVerificationService,
private logService: LogService,
) {}
async submit() {
try {
this.formPromise = this.userVerificationService
.buildRequest(this.masterPassword)
.then((request) => this.postKey(this.entityId, request));
const response = await this.formPromise;
this.clientSecret = response.apiKey;
this.clientId = `${this.keyType}.${this.entityId}`;
} catch (e) {
this.logService.error(e);
submit = async () => {
if (this.formGroup.invalid) {
this.formGroup.markAllAsTouched();
return;
}
}
const response = await this.userVerificationService
.buildRequest(this.formGroup.value.masterPassword)
.then((request) => this.data.postKey(this.data.entityId, request));
this.clientSecret = response.apiKey;
this.clientId = `${this.data.keyType}.${this.data.entityId}`;
};
/**
* Strongly typed helper to open a ApiKeyComponent
* @param dialogService Instance of the dialog service that will be used to open the dialog
* @param config Configuration for the dialog
*/
static open = (dialogService: DialogService, config: DialogConfig<ApiKeyDialogData>) => {
return dialogService.open(ApiKeyComponent, config);
};
}

View File

@ -1,9 +1,9 @@
import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
import { DialogService } from "@bitwarden/components";
import { ApiKeyComponent } from "./api-key.component";
@ -22,8 +22,8 @@ export class SecurityKeysComponent implements OnInit {
constructor(
private userVerificationService: UserVerificationService,
private stateService: StateService,
private modalService: ModalService,
private apiService: ApiService,
private dialogService: DialogService,
) {}
async ngOnInit() {
@ -32,30 +32,34 @@ export class SecurityKeysComponent implements OnInit {
async viewUserApiKey() {
const entityId = await this.stateService.getUserId();
await this.modalService.openViewRef(ApiKeyComponent, this.viewUserApiKeyModalRef, (comp) => {
comp.keyType = "user";
comp.entityId = entityId;
comp.postKey = this.apiService.postUserApiKey.bind(this.apiService);
comp.scope = "api";
comp.grantType = "client_credentials";
comp.apiKeyTitle = "apiKey";
comp.apiKeyWarning = "userApiKeyWarning";
comp.apiKeyDescription = "userApiKeyDesc";
await ApiKeyComponent.open(this.dialogService, {
data: {
keyType: "user",
entityId: entityId,
postKey: this.apiService.postUserApiKey.bind(this.apiService),
scope: "api",
grantType: "client_credentials",
apiKeyTitle: "apiKey",
apiKeyWarning: "userApiKeyWarning",
apiKeyDescription: "userApiKeyDesc",
},
});
}
async rotateUserApiKey() {
const entityId = await this.stateService.getUserId();
await this.modalService.openViewRef(ApiKeyComponent, this.rotateUserApiKeyModalRef, (comp) => {
comp.keyType = "user";
comp.isRotation = true;
comp.entityId = entityId;
comp.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
comp.scope = "api";
comp.grantType = "client_credentials";
comp.apiKeyTitle = "apiKey";
comp.apiKeyWarning = "userApiKeyWarning";
comp.apiKeyDescription = "apiKeyRotateDesc";
await ApiKeyComponent.open(this.dialogService, {
data: {
keyType: "user",
isRotation: true,
entityId: entityId,
postKey: this.apiService.postUserRotateApiKey.bind(this.apiService),
scope: "api",
grantType: "client_credentials",
apiKeyTitle: "apiKey",
apiKeyWarning: "userApiKeyWarning",
apiKeyDescription: "apiKeyRotateDesc",
},
});
}
}