@mintplayer/ng-spark 22.33.0 → 22.35.0

package/fesm2022/mintplayer-ng-spark-auth-account.mjs

@@ -4,7 +4,7 @@ import { Router, RouterLink } from "@angular/router";
 import { BsCardComponent, BsCardHeaderComponent } from "@mintplayer/ng-bootstrap/card";
 import { SparkAuthService, SparkAuthTranslationService } from "@mintplayer/ng-spark/auth/core";
 import { currentLanguage } from "@mintplayer/ng-spark/models";
-import { SPARK_ACCOUNT_OVERVIEW_LINKS, SPARK_ACCOUNT_PROFILE_FIELDS, SPARK_AUTH_CONFIG, SPARK_AUTH_ROUTE_PATHS, SPARK_EXTERNAL_PROVIDERS, passkeysSupported } from "@mintplayer/ng-spark/auth/models";
+import { SPARK_ACCOUNT_OVERVIEW_LINKS, SPARK_ACCOUNT_PROFILE_FIELDS, SPARK_AUTH_CONFIG, SPARK_AUTH_ROUTE_PATHS, SPARK_EXTERNAL_PROVIDERS, passkeysSupported, sparkAgentCanWrite } from "@mintplayer/ng-spark/auth/models";
 import { TranslateKeyPipe } from "@mintplayer/ng-spark/auth/pipes";
 import { HttpClient } from "@angular/common/http";
 import * as i1 from "@angular/forms";
@@ -17,6 +17,8 @@ import { BsFormComponent, BsFormControlDirective } from "@mintplayer/ng-bootstra
 import { BsInputGroupComponent } from "@mintplayer/ng-bootstrap/input-group";
 import { BsSelectComponent, BsSelectOption, BsSelectValueAccessor } from "@mintplayer/ng-bootstrap/select";
 import { BsSpinnerComponent } from "@mintplayer/ng-bootstrap/spinner";
+import { NgTemplateOutlet } from "@angular/common";
+import { BsBadgeComponent } from "@mintplayer/ng-bootstrap/badge";
 function accountMessages(result) {
 	if (result.success) return [];
 	if (result.errors) {
@@ -2018,6 +2020,578 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-export { SparkAccountOverviewComponent, SparkAccountProfileComponent, SparkChangePasswordComponent, SparkExternalLoginsComponent, SparkPersonalDataComponent, SparkTwoFactorSetupComponent, accountMessages, fieldMessages };
+var SparkConnectedAgentsComponent = class SparkConnectedAgentsComponent {
+	auth = inject(SparkAuthService);
+	translation = inject(SparkAuthTranslationService);
+	colors = Color;
+	loading = signal(true, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	overview = signal(null, ...ngDevMode ? [{ debugName: "overview" }] : /* istanbul ignore next */ []);
+	messages = signal([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	editing = signal(null, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
+	creating = signal(false, ...ngDevMode ? [{ debugName: "creating" }] : /* istanbul ignore next */ []);
+	draft = signal({
+		changes: false,
+		types: null
+	}, ...ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []);
+	tokenName = signal("", ...ngDevMode ? [{ debugName: "tokenName" }] : /* istanbul ignore next */ []);
+	tokenDays = signal(90, ...ngDevMode ? [{ debugName: "tokenDays" }] : /* istanbul ignore next */ []);
+	createdToken = signal(null, ...ngDevMode ? [{ debugName: "createdToken" }] : /* istanbul ignore next */ []);
+	draftValid = computed(() => this.draft().types === null || this.draft().types.length > 0, ...ngDevMode ? [{ debugName: "draftValid" }] : /* istanbul ignore next */ []);
+	tokenValid = computed(() => {
+		const max = this.overview()?.maxTokenLifetimeDays ?? 365;
+		const days = this.tokenDays();
+		return this.draftValid() && this.tokenName().trim().length > 0 && Number.isInteger(days) && days >= 1 && days <= max;
+	}, ...ngDevMode ? [{ debugName: "tokenValid" }] : /* istanbul ignore next */ []);
+	canWrite = sparkAgentCanWrite;
+	async ngOnInit() {
+		await this.load();
+	}
+	async load() {
+		this.loading.set(true);
+		const result = await this.auth.agentGrants();
+		if (result.success && result.value) this.overview.set(result.value);
+		else {
+			this.overview.set(null);
+			this.messages.set(accountMessages(result));
+		}
+		this.loading.set(false);
+	}
+	edit(grant) {
+		this.creating.set(false);
+		this.messages.set([]);
+		this.draft.set({
+			changes: sparkAgentCanWrite(grant.permissions),
+			types: grant.types?.map((t) => t.name) ?? null
+		});
+		this.editing.set(grant.key);
+	}
+	startToken() {
+		this.editing.set(null);
+		this.messages.set([]);
+		this.createdToken.set(null);
+		this.tokenName.set("");
+		this.tokenDays.set(this.overview()?.defaultTokenLifetimeDays ?? 90);
+		this.draft.set({
+			changes: false,
+			types: null
+		});
+		this.creating.set(true);
+	}
+	setChanges(changes) {
+		this.draft.update((d) => ({
+			...d,
+			changes
+		}));
+	}
+	setEverything(everything) {
+		this.draft.update((d) => ({
+			...d,
+			types: everything ? null : []
+		}));
+	}
+	setType(type, chosen) {
+		this.draft.update((d) => {
+			const types = (d.types ?? []).filter((name) => name !== type.name);
+			return {
+				...d,
+				types: chosen ? [...types, type.name] : types
+			};
+		});
+	}
+	async save(grant) {
+		const choice = this.draft();
+		await this.run(() => this.auth.updateAgentGrant({
+			key: grant.key,
+			permissions: this.permission(choice),
+			types: this.types(choice)
+		}), () => this.editing.set(null));
+	}
+	async createToken() {
+		const choice = this.draft();
+		this.busy.set(true);
+		this.messages.set([]);
+		try {
+			const result = await this.auth.createAgentToken({
+				name: this.tokenName().trim(),
+				expiresInDays: this.tokenDays(),
+				permissions: this.permission(choice),
+				types: this.types(choice)
+			});
+			if (!result.success || !result.value) {
+				this.messages.set(accountMessages(result));
+				return;
+			}
+			this.creating.set(false);
+			await this.load();
+			this.createdToken.set(result.value.token);
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	async revoke(grant) {
+		if (!confirm(this.translation.t("auth.agentConfirmRevoke"))) return;
+		await this.run(() => this.auth.revokeAgentGrant(grant.key));
+	}
+	async revokeApplication(app) {
+		if (!confirm(this.translation.t("auth.agentConfirmRevoke"))) return;
+		await this.run(() => this.auth.revokeConnectedApplication(app.source, app.id));
+	}
+	typeLabels(types) {
+		const labels = new Map((this.overview()?.types ?? []).map((t) => [t.name, t.label]));
+		return types.map((t) => labels.get(t.name) ?? t.name).join(", ");
+	}
+	date(iso) {
+		return iso ? new Date(iso).toLocaleDateString() : "";
+	}
+	value(event) {
+		return event.target.value;
+	}
+	copy(token) {
+		navigator.clipboard?.writeText(token);
+	}
+	permission(choice) {
+		return choice.changes ? "Read, Write" : "Read";
+	}
+	types(choice) {
+		if (choice.types === null) return null;
+		const exposed = new Map((this.overview()?.types ?? []).map((t) => [t.name, t]));
+		return choice.types.map((name) => ({
+			name,
+			permissions: choice.changes && sparkAgentCanWrite(exposed.get(name)?.permissions) ? "Read, Write" : "Read"
+		}));
+	}
+	async run(call, after) {
+		this.busy.set(true);
+		this.messages.set([]);
+		try {
+			const result = await call();
+			if (!result.success) {
+				this.messages.set(accountMessages(result));
+				return;
+			}
+			after?.();
+			this.createdToken.set(null);
+			await this.load();
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkConnectedAgentsComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkConnectedAgentsComponent,
+		isStandalone: true,
+		selector: "spark-connected-agents",
+		ngImport: i0,
+		template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 760px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.agentsTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          <p class="text-muted">{{ 'auth.agentsDescription' | t }}</p>
+          @for (message of messages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-agents-error">{{ message | t }}</bs-alert>
+          }
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else if (overview(); as data) {
+            @for (grant of data.grants; track grant.key) {
+              <section class="border rounded p-3 mb-3 spark-agent-grant" [attr.data-key]="grant.key">
+                <div class="d-flex flex-wrap align-items-center gap-2">
+                  <h5 class="mb-0 text-break spark-agent-name">{{ grant.name || grant.clientId || grant.key }}</h5>
+                  <bs-badge [type]="colors.secondary">{{ 'auth.agentKind.' + grant.kind | t }}</bs-badge>
+                  @if (grant.kind === 'ExternalAuthorizationServer') {
+                    <bs-badge [type]="colors.info" class="spark-agent-issuer" [title]="'auth.agentIssuer' | t">{{ grant.issuer }}</bs-badge>
+                  } @else if (grant.kind !== 'PersonalAccessToken') {
+                    @if (grant.verifiedHost) {
+                      <bs-badge [type]="colors.success" class="spark-agent-verified">{{ grant.verifiedHost }}</bs-badge>
+                    } @else {
+                      <bs-badge [type]="colors.warning" class="spark-agent-unverified">{{ 'auth.agentUnverified' | t }}</bs-badge>
+                    }
+                  }
+                  @if (grant.status !== 'active') {
+                    <bs-badge [type]="colors.danger" class="spark-agent-status">{{ 'auth.agentStatus.' + grant.status | t }}</bs-badge>
+                  }
+                </div>
+                <small class="text-muted d-block mt-1 spark-agent-dates">
+                  {{ 'auth.agentCreated' | t }} {{ date(grant.createdAt) }} ·
+                  @if (grant.lastUsedAt) { {{ 'auth.agentLastUsed' | t }} {{ date(grant.lastUsedAt) }} } @else { {{ 'auth.agentNeverUsed' | t }} }
+                  @if (grant.expiresAt) { · {{ 'auth.agentExpires' | t }} {{ date(grant.expiresAt) }} }
+                </small>
+
+                @if (editing() === grant.key) {
+                  <bs-form class="d-block mt-3">
+                    @if (canWrite(grant.maxPermissions)) {
+                      <bs-checkbox [type]="'checkbox'" [name]="'changes-' + grant.key" [isToggled]="draft().changes"
+                                   (isToggledChange)="setChanges($event === true)">{{ 'auth.agentAllowChanges' | t }}</bs-checkbox>
+                    }
+                    <ng-container *ngTemplateOutlet="typePicker" />
+                  </bs-form>
+                  <div class="d-flex gap-2 mt-3">
+                    <button type="button" class="btn btn-primary btn-sm spark-agent-save" [disabled]="busy() || !draftValid()" (click)="save(grant)">{{ 'auth.agentSave' | t }}</button>
+                    <button type="button" class="btn btn-outline-secondary btn-sm" [disabled]="busy()" (click)="editing.set(null)">{{ 'auth.agentCancel' | t }}</button>
+                  </div>
+                } @else {
+                  <div class="mt-2 spark-agent-scope">
+                    <span>{{ (canWrite(grant.permissions) ? 'auth.agentReadAndChanges' : 'auth.agentReadOnly') | t }}</span> ·
+                    @if (grant.types === null) {
+                      <span>{{ 'auth.agentEverything' | t }}</span>
+                    } @else {
+                      <span>{{ typeLabels(grant.types) }}</span>
+                    }
+                  </div>
+                  <div class="d-flex flex-wrap gap-2 mt-3">
+                    <!-- A disconnected external agent (by the user or a security-stamp change) is allowed again by an edit. -->
+                    @if (grant.status === 'active' || grant.status === 'disconnected') {
+                      <button type="button" class="btn btn-outline-primary btn-sm spark-agent-edit" [disabled]="busy()" (click)="edit(grant)">{{ 'auth.agentEdit' | t }}</button>
+                    }
+                    @if (grant.status !== 'disconnected') {
+                      <button type="button" class="btn btn-danger btn-sm spark-agent-revoke" [disabled]="busy()" (click)="revoke(grant)">
+                        {{ (grant.kind === 'PersonalAccessToken' ? 'auth.agentRevokeToken' : 'auth.agentDisconnect') | t }}
+                      </button>
+                    }
+                  </div>
+                }
+              </section>
+            } @empty {
+              <p class="text-muted spark-agents-empty">{{ 'auth.agentsNone' | t }}</p>
+            }
+
+            @if (data.personalAccessTokens) {
+              <hr class="my-4" />
+              <h5>{{ 'auth.agentTokenTitle' | t }}</h5>
+              <p class="text-muted">{{ 'auth.agentTokenDescription' | t }}</p>
+              @if (createdToken(); as token) {
+                <bs-alert [type]="colors.warning" class="mb-3 d-block spark-agent-token-created">
+                  <strong>{{ 'auth.agentTokenShownOnce' | t }}</strong>
+                  <code class="d-block text-break my-2 spark-agent-token">{{ token }}</code>
+                  <button type="button" class="btn btn-sm btn-outline-dark" (click)="copy(token)">{{ 'auth.agentTokenCopy' | t }}</button>
+                </bs-alert>
+              }
+              @if (creating()) {
+                <bs-form class="d-block">
+                  <div class="mb-3">
+                    <label for="sparkAgentTokenName" class="form-label">{{ 'auth.agentTokenName' | t }}</label>
+                    <input id="sparkAgentTokenName" type="text" maxlength="100" [value]="tokenName()" (input)="tokenName.set(value($event))" />
+                  </div>
+                  <div class="mb-3">
+                    <label for="sparkAgentTokenDays" class="form-label">{{ 'auth.agentTokenDays' | t }}</label>
+                    <input id="sparkAgentTokenDays" type="number" min="1" [max]="data.maxTokenLifetimeDays" [value]="tokenDays()" (input)="tokenDays.set(+value($event))" />
+                  </div>
+                  @if (canWrite(data.tokenPermissions)) {
+                    <bs-checkbox [type]="'checkbox'" [name]="'changes-new'" [isToggled]="draft().changes"
+                                 (isToggledChange)="setChanges($event === true)">{{ 'auth.agentAllowChanges' | t }}</bs-checkbox>
+                  }
+                  <ng-container *ngTemplateOutlet="typePicker" />
+                </bs-form>
+                <div class="d-flex gap-2 mt-3">
+                  <button type="button" class="btn btn-primary spark-agent-token-create" [disabled]="busy() || !tokenValid()" (click)="createToken()">{{ 'auth.agentTokenCreate' | t }}</button>
+                  <button type="button" class="btn btn-outline-secondary" [disabled]="busy()" (click)="creating.set(false)">{{ 'auth.agentCancel' | t }}</button>
+                </div>
+              } @else {
+                <button type="button" class="btn btn-outline-primary spark-agent-token-new" [disabled]="busy()" (click)="startToken()">{{ 'auth.agentTokenNew' | t }}</button>
+              }
+            }
+
+            @if (data.applications.length) {
+              <hr class="my-4" />
+              <h5>{{ 'auth.agentApplicationsTitle' | t }}</h5>
+              @for (app of data.applications; track app.source + '|' + app.id) {
+                <section class="border rounded p-3 mb-2 d-flex justify-content-between align-items-start gap-2 spark-contributed-app">
+                  <div class="text-break">
+                    <strong>{{ app.name }}</strong>
+                    @if (app.description) { <small class="text-muted d-block">{{ app.description }}</small> }
+                    @if (app.lastUsedAt) { <small class="text-muted d-block">{{ 'auth.agentLastUsed' | t }} {{ date(app.lastUsedAt) }}</small> }
+                  </div>
+                  <button type="button" class="btn btn-danger btn-sm" [disabled]="busy()" (click)="revokeApplication(app)">{{ 'auth.agentDisconnect' | t }}</button>
+                </section>
+              }
+            }
+          }
+
+          <ng-template #typePicker>
+            <div class="mt-2">
+              <bs-checkbox [type]="'checkbox'" [name]="'everything'" [isToggled]="draft().types === null"
+                           (isToggledChange)="setEverything($event === true)">{{ 'auth.agentEverything' | t }}</bs-checkbox>
+              @if (draft().types !== null) {
+                @for (type of overview()?.types ?? []; track type.name) {
+                  <div class="ms-4 spark-agent-type" [attr.data-type]="type.name">
+                    <bs-checkbox [type]="'checkbox'" [name]="'type-' + type.name" [isToggled]="draft().types!.includes(type.name)"
+                                 (isToggledChange)="setType(type, $event === true)">{{ type.label }}</bs-checkbox>
+                    @if (type.queries.length) { <small class="text-muted d-block ms-4">{{ type.queries.join(', ') }}</small> }
+                  </div>
+                } @empty {
+                  <small class="text-muted d-block ms-4">{{ 'auth.agentNoTypes' | t }}</small>
+                }
+              }
+            </div>
+          </ng-template>
+        </div>
+      </bs-card>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: BsAlertComponent,
+				selector: "bs-alert",
+				inputs: [
+					"type",
+					"announce",
+					"isVisible"
+				],
+				outputs: ["isVisibleChange", "afterOpenedOrClosed"]
+			},
+			{
+				kind: "component",
+				type: BsBadgeComponent,
+				selector: "bs-badge",
+				inputs: [
+					"type",
+					"unit",
+					"decorative"
+				]
+			},
+			{
+				kind: "component",
+				type: BsCardComponent,
+				selector: "bs-card",
+				inputs: ["color", "outline"]
+			},
+			{
+				kind: "component",
+				type: BsCardHeaderComponent,
+				selector: "bs-card-header",
+				inputs: ["color", "navStyle"]
+			},
+			{
+				kind: "component",
+				type: BsCheckboxComponent,
+				selector: "bs-checkbox",
+				inputs: [
+					"type",
+					"isToggled",
+					"indeterminate",
+					"name",
+					"value",
+					"group"
+				],
+				outputs: ["isToggledChange", "indeterminateChange"]
+			},
+			{
+				kind: "component",
+				type: BsFormComponent,
+				selector: "bs-form",
+				inputs: ["action", "method"],
+				outputs: ["submitted"]
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkConnectedAgentsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-connected-agents",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				BsAlertComponent,
+				BsBadgeComponent,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				BsCheckboxComponent,
+				BsFormComponent,
+				BsSpinnerComponent,
+				NgTemplateOutlet,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 760px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.agentsTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          <p class="text-muted">{{ 'auth.agentsDescription' | t }}</p>
+          @for (message of messages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-agents-error">{{ message | t }}</bs-alert>
+          }
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else if (overview(); as data) {
+            @for (grant of data.grants; track grant.key) {
+              <section class="border rounded p-3 mb-3 spark-agent-grant" [attr.data-key]="grant.key">
+                <div class="d-flex flex-wrap align-items-center gap-2">
+                  <h5 class="mb-0 text-break spark-agent-name">{{ grant.name || grant.clientId || grant.key }}</h5>
+                  <bs-badge [type]="colors.secondary">{{ 'auth.agentKind.' + grant.kind | t }}</bs-badge>
+                  @if (grant.kind === 'ExternalAuthorizationServer') {
+                    <bs-badge [type]="colors.info" class="spark-agent-issuer" [title]="'auth.agentIssuer' | t">{{ grant.issuer }}</bs-badge>
+                  } @else if (grant.kind !== 'PersonalAccessToken') {
+                    @if (grant.verifiedHost) {
+                      <bs-badge [type]="colors.success" class="spark-agent-verified">{{ grant.verifiedHost }}</bs-badge>
+                    } @else {
+                      <bs-badge [type]="colors.warning" class="spark-agent-unverified">{{ 'auth.agentUnverified' | t }}</bs-badge>
+                    }
+                  }
+                  @if (grant.status !== 'active') {
+                    <bs-badge [type]="colors.danger" class="spark-agent-status">{{ 'auth.agentStatus.' + grant.status | t }}</bs-badge>
+                  }
+                </div>
+                <small class="text-muted d-block mt-1 spark-agent-dates">
+                  {{ 'auth.agentCreated' | t }} {{ date(grant.createdAt) }} ·
+                  @if (grant.lastUsedAt) { {{ 'auth.agentLastUsed' | t }} {{ date(grant.lastUsedAt) }} } @else { {{ 'auth.agentNeverUsed' | t }} }
+                  @if (grant.expiresAt) { · {{ 'auth.agentExpires' | t }} {{ date(grant.expiresAt) }} }
+                </small>
+
+                @if (editing() === grant.key) {
+                  <bs-form class="d-block mt-3">
+                    @if (canWrite(grant.maxPermissions)) {
+                      <bs-checkbox [type]="'checkbox'" [name]="'changes-' + grant.key" [isToggled]="draft().changes"
+                                   (isToggledChange)="setChanges($event === true)">{{ 'auth.agentAllowChanges' | t }}</bs-checkbox>
+                    }
+                    <ng-container *ngTemplateOutlet="typePicker" />
+                  </bs-form>
+                  <div class="d-flex gap-2 mt-3">
+                    <button type="button" class="btn btn-primary btn-sm spark-agent-save" [disabled]="busy() || !draftValid()" (click)="save(grant)">{{ 'auth.agentSave' | t }}</button>
+                    <button type="button" class="btn btn-outline-secondary btn-sm" [disabled]="busy()" (click)="editing.set(null)">{{ 'auth.agentCancel' | t }}</button>
+                  </div>
+                } @else {
+                  <div class="mt-2 spark-agent-scope">
+                    <span>{{ (canWrite(grant.permissions) ? 'auth.agentReadAndChanges' : 'auth.agentReadOnly') | t }}</span> ·
+                    @if (grant.types === null) {
+                      <span>{{ 'auth.agentEverything' | t }}</span>
+                    } @else {
+                      <span>{{ typeLabels(grant.types) }}</span>
+                    }
+                  </div>
+                  <div class="d-flex flex-wrap gap-2 mt-3">
+                    <!-- A disconnected external agent (by the user or a security-stamp change) is allowed again by an edit. -->
+                    @if (grant.status === 'active' || grant.status === 'disconnected') {
+                      <button type="button" class="btn btn-outline-primary btn-sm spark-agent-edit" [disabled]="busy()" (click)="edit(grant)">{{ 'auth.agentEdit' | t }}</button>
+                    }
+                    @if (grant.status !== 'disconnected') {
+                      <button type="button" class="btn btn-danger btn-sm spark-agent-revoke" [disabled]="busy()" (click)="revoke(grant)">
+                        {{ (grant.kind === 'PersonalAccessToken' ? 'auth.agentRevokeToken' : 'auth.agentDisconnect') | t }}
+                      </button>
+                    }
+                  </div>
+                }
+              </section>
+            } @empty {
+              <p class="text-muted spark-agents-empty">{{ 'auth.agentsNone' | t }}</p>
+            }
+
+            @if (data.personalAccessTokens) {
+              <hr class="my-4" />
+              <h5>{{ 'auth.agentTokenTitle' | t }}</h5>
+              <p class="text-muted">{{ 'auth.agentTokenDescription' | t }}</p>
+              @if (createdToken(); as token) {
+                <bs-alert [type]="colors.warning" class="mb-3 d-block spark-agent-token-created">
+                  <strong>{{ 'auth.agentTokenShownOnce' | t }}</strong>
+                  <code class="d-block text-break my-2 spark-agent-token">{{ token }}</code>
+                  <button type="button" class="btn btn-sm btn-outline-dark" (click)="copy(token)">{{ 'auth.agentTokenCopy' | t }}</button>
+                </bs-alert>
+              }
+              @if (creating()) {
+                <bs-form class="d-block">
+                  <div class="mb-3">
+                    <label for="sparkAgentTokenName" class="form-label">{{ 'auth.agentTokenName' | t }}</label>
+                    <input id="sparkAgentTokenName" type="text" maxlength="100" [value]="tokenName()" (input)="tokenName.set(value($event))" />
+                  </div>
+                  <div class="mb-3">
+                    <label for="sparkAgentTokenDays" class="form-label">{{ 'auth.agentTokenDays' | t }}</label>
+                    <input id="sparkAgentTokenDays" type="number" min="1" [max]="data.maxTokenLifetimeDays" [value]="tokenDays()" (input)="tokenDays.set(+value($event))" />
+                  </div>
+                  @if (canWrite(data.tokenPermissions)) {
+                    <bs-checkbox [type]="'checkbox'" [name]="'changes-new'" [isToggled]="draft().changes"
+                                 (isToggledChange)="setChanges($event === true)">{{ 'auth.agentAllowChanges' | t }}</bs-checkbox>
+                  }
+                  <ng-container *ngTemplateOutlet="typePicker" />
+                </bs-form>
+                <div class="d-flex gap-2 mt-3">
+                  <button type="button" class="btn btn-primary spark-agent-token-create" [disabled]="busy() || !tokenValid()" (click)="createToken()">{{ 'auth.agentTokenCreate' | t }}</button>
+                  <button type="button" class="btn btn-outline-secondary" [disabled]="busy()" (click)="creating.set(false)">{{ 'auth.agentCancel' | t }}</button>
+                </div>
+              } @else {
+                <button type="button" class="btn btn-outline-primary spark-agent-token-new" [disabled]="busy()" (click)="startToken()">{{ 'auth.agentTokenNew' | t }}</button>
+              }
+            }
+
+            @if (data.applications.length) {
+              <hr class="my-4" />
+              <h5>{{ 'auth.agentApplicationsTitle' | t }}</h5>
+              @for (app of data.applications; track app.source + '|' + app.id) {
+                <section class="border rounded p-3 mb-2 d-flex justify-content-between align-items-start gap-2 spark-contributed-app">
+                  <div class="text-break">
+                    <strong>{{ app.name }}</strong>
+                    @if (app.description) { <small class="text-muted d-block">{{ app.description }}</small> }
+                    @if (app.lastUsedAt) { <small class="text-muted d-block">{{ 'auth.agentLastUsed' | t }} {{ date(app.lastUsedAt) }}</small> }
+                  </div>
+                  <button type="button" class="btn btn-danger btn-sm" [disabled]="busy()" (click)="revokeApplication(app)">{{ 'auth.agentDisconnect' | t }}</button>
+                </section>
+              }
+            }
+          }
+
+          <ng-template #typePicker>
+            <div class="mt-2">
+              <bs-checkbox [type]="'checkbox'" [name]="'everything'" [isToggled]="draft().types === null"
+                           (isToggledChange)="setEverything($event === true)">{{ 'auth.agentEverything' | t }}</bs-checkbox>
+              @if (draft().types !== null) {
+                @for (type of overview()?.types ?? []; track type.name) {
+                  <div class="ms-4 spark-agent-type" [attr.data-type]="type.name">
+                    <bs-checkbox [type]="'checkbox'" [name]="'type-' + type.name" [isToggled]="draft().types!.includes(type.name)"
+                                 (isToggledChange)="setType(type, $event === true)">{{ type.label }}</bs-checkbox>
+                    @if (type.queries.length) { <small class="text-muted d-block ms-4">{{ type.queries.join(', ') }}</small> }
+                  </div>
+                } @empty {
+                  <small class="text-muted d-block ms-4">{{ 'auth.agentNoTypes' | t }}</small>
+                }
+              }
+            </div>
+          </ng-template>
+        </div>
+      </bs-card>
+    </div>
+  `
+		}]
+	}]
+});
+export { SparkAccountOverviewComponent, SparkAccountProfileComponent, SparkChangePasswordComponent, SparkConnectedAgentsComponent, SparkExternalLoginsComponent, SparkPersonalDataComponent, SparkTwoFactorSetupComponent, accountMessages, fieldMessages };
 
 //# sourceMappingURL=mintplayer-ng-spark-auth-account.mjs.map