[AC-2405] migrate SCIM component (#8781)

* migrating scim authentication component

* migrating scim authentication component

* migrating scim authentication component
This commit is contained in:
vinith-kovan 2024-05-22 18:04:48 +05:30 committed by GitHub
parent 588663f80f
commit ca62f0cfa3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 105 deletions

View File

@ -1,39 +1,21 @@
<app-header></app-header>
<p>{{ "scimDescription" | i18n }}</p>
<p bitTypography="body1">{{ "scimDescription" | i18n }}</p>
<div *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div>
<form
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
[formGroup]="formData"
*ngIf="!loading"
>
<div class="form-group">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="enabled"
[formControl]="enabled"
name="Enabled"
aria-describedby="scimEnabledCheckboxDescHelpText"
/>
<label class="form-check-label" for="enabled">{{ "scimEnabledCheckboxDesc" | i18n }}</label>
<div id="scimEnabledCheckboxDescHelpText">
<small class="form-text text-muted">{{ "scimEnabledCheckboxDescHelpText" | i18n }}</small>
</div>
</div>
</div>
<form [bitSubmit]="submit" [formGroup]="formData" *ngIf="!loading">
<bit-form-control>
<input type="checkbox" bitCheckbox [formControl]="enabled" />
<bit-label>{{ "scimEnabledCheckboxDesc" | i18n }}</bit-label>
<bit-hint>{{ "scimEnabledCheckboxDescHelpText" | i18n }}</bit-hint>
</bit-form-control>
<bit-form-field *ngIf="showScimSettings">
<bit-label>{{ "scimUrl" | i18n }}</bit-label>
<input bitInput type="text" formControlName="endpointUrl" />
@ -41,7 +23,7 @@
type="button"
bitSuffix
bitIconButton="bwi-clone"
(click)="copyScimUrl()"
[bitAction]="copyScimUrl"
[appA11yTitle]="'copyScimUrl' | i18n"
></button>
</bit-form-field>
@ -54,44 +36,32 @@
formControlName="clientSecret"
id="clientSecret"
/>
<ng-container>
<button
type="button"
bitSuffix
[disabled]="$any(rotateButton).loading"
[bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
(click)="toggleScimKey()"
[appA11yTitle]="'toggleVisibility' | i18n"
></button>
</ng-container>
<ng-container #rotateButton [appApiAction]="rotatePromise">
<!-- TODO: Convert to async actions -->
<button
[loading]="$any(rotateButton).loading"
type="button"
bitSuffix
bitIconButton="bwi-generate"
(click)="rotateScimKey()"
[appA11yTitle]="'rotateScimKey' | i18n"
></button>
</ng-container>
<button
type="button"
bitSuffix
[bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
[bitAction]="toggleScimKey"
[appA11yTitle]="'toggleVisibility' | i18n"
></button>
<button
type="button"
bitSuffix
bitIconButton="bwi-generate"
[bitAction]="rotateScimKey"
bitFormButton
[appA11yTitle]="'rotateScimKey' | i18n"
></button>
<button
type="button"
bitSuffix
bitIconButton="bwi-clone"
(click)="copyScimKey()"
[bitAction]="copyScimKey"
[appA11yTitle]="'copyScimKey' | i18n"
></button>
<bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
</bit-form-field>
<button
type="submit"
buttonType="primary"
bitButton
[loading]="form.loading"
[disabled]="form.loading"
>
<button type="submit" buttonType="primary" bitButton bitFormButton>
{{ "save" | i18n }}
</button>
</form>

View File

@ -14,7 +14,6 @@ import { OrganizationApiKeyRequest } from "@bitwarden/common/admin-console/model
import { OrganizationConnectionRequest } from "@bitwarden/common/admin-console/models/request/organization-connection.request";
import { ScimConfigRequest } from "@bitwarden/common/admin-console/models/request/scim-config.request";
import { OrganizationConnectionResponse } from "@bitwarden/common/admin-console/models/response/organization-connection.response";
import { ApiKeyResponse } from "@bitwarden/common/auth/models/response/api-key.response";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@ -29,8 +28,6 @@ export class ScimComponent implements OnInit {
loading = true;
organizationId: string;
existingConnectionId: string;
formPromise: Promise<OrganizationConnectionResponse<ScimConfigApi>>;
rotatePromise: Promise<ApiKeyResponse>;
enabled = new FormControl(false);
showScimSettings = false;
showScimKey = false;
@ -82,11 +79,11 @@ export class ScimComponent implements OnInit {
});
}
async copyScimUrl() {
copyScimUrl = async () => {
this.platformUtilsService.copyToClipboard(await this.getScimEndpointUrl());
}
};
async rotateScimKey() {
rotateScimKey = async () => {
const confirmed = await this.dialogService.openSimpleDialog({
title: { key: "rotateScimKey" },
content: { key: "rotateScimKeyWarning" },
@ -102,62 +99,50 @@ export class ScimComponent implements OnInit {
request.type = OrganizationApiKeyType.Scim;
request.masterPasswordHash = "N/A";
this.rotatePromise = this.organizationApiService.rotateApiKey(this.organizationId, request);
const response = await this.organizationApiService.rotateApiKey(this.organizationId, request);
this.formData.setValue({
endpointUrl: await this.getScimEndpointUrl(),
clientSecret: response.apiKey,
});
this.platformUtilsService.showToast("success", null, this.i18nService.t("scimApiKeyRotated"));
};
try {
const response = await this.rotatePromise;
this.formData.setValue({
endpointUrl: await this.getScimEndpointUrl(),
clientSecret: response.apiKey,
});
this.platformUtilsService.showToast("success", null, this.i18nService.t("scimApiKeyRotated"));
} catch {
// Logged by appApiAction, do nothing
}
this.rotatePromise = null;
}
async copyScimKey() {
copyScimKey = async () => {
this.platformUtilsService.copyToClipboard(this.formData.get("clientSecret").value);
}
};
async submit() {
try {
const request = new OrganizationConnectionRequest(
this.organizationId,
OrganizationConnectionType.Scim,
true,
new ScimConfigRequest(this.enabled.value),
submit = async () => {
const request = new OrganizationConnectionRequest(
this.organizationId,
OrganizationConnectionType.Scim,
true,
new ScimConfigRequest(this.enabled.value),
);
let response: OrganizationConnectionResponse<ScimConfigApi>;
if (this.existingConnectionId == null) {
response = await this.apiService.createOrganizationConnection(request, ScimConfigApi);
} else {
response = await this.apiService.updateOrganizationConnection(
request,
ScimConfigApi,
this.existingConnectionId,
);
if (this.existingConnectionId == null) {
this.formPromise = this.apiService.createOrganizationConnection(request, ScimConfigApi);
} else {
this.formPromise = this.apiService.updateOrganizationConnection(
request,
ScimConfigApi,
this.existingConnectionId,
);
}
const response = (await this.formPromise) as OrganizationConnectionResponse<ScimConfigApi>;
await this.setConnectionFormValues(response);
this.platformUtilsService.showToast("success", null, this.i18nService.t("scimSettingsSaved"));
} catch (e) {
// Logged by appApiAction, do nothing
}
this.formPromise = null;
}
await this.setConnectionFormValues(response);
this.platformUtilsService.showToast("success", null, this.i18nService.t("scimSettingsSaved"));
};
async getScimEndpointUrl() {
const env = await firstValueFrom(this.environmentService.environment$);
return env.getScimUrl() + "/" + this.organizationId;
}
toggleScimKey() {
toggleScimKey = () => {
this.showScimKey = !this.showScimKey;
document.getElementById("clientSecret").focus();
}
};
private async setConnectionFormValues(connection: OrganizationConnectionResponse<ScimConfigApi>) {
this.existingConnectionId = connection?.id;