mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-24 12:06:15 +01:00
[AC-2405] migrate SCIM component (#8781)
* migrating scim authentication component * migrating scim authentication component * migrating scim authentication component
This commit is contained in:
parent
588663f80f
commit
ca62f0cfa3
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user