@mintplayer/ng-spark 22.30.0 → 22.32.0

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

@@ -0,0 +1,2023 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+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 { TranslateKeyPipe } from "@mintplayer/ng-spark/auth/pipes";
+import { HttpClient } from "@angular/common/http";
+import * as i1 from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { firstValueFrom } from "rxjs";
+import { Color } from "@mintplayer/ng-bootstrap";
+import { BsAlertComponent } from "@mintplayer/ng-bootstrap/alert";
+import { BsCheckboxComponent } from "@mintplayer/ng-bootstrap/checkbox";
+import { BsFormComponent, BsFormControlDirective } from "@mintplayer/ng-bootstrap/form";
+import { BsInputGroupComponent } from "@mintplayer/ng-bootstrap/input-group";
+import { BsSelectComponent, BsSelectOption, BsSelectValueAccessor } from "@mintplayer/ng-bootstrap/select";
+import { BsSpinnerComponent } from "@mintplayer/ng-bootstrap/spinner";
+function accountMessages(result) {
+	if (result.success) return [];
+	if (result.errors) {
+		const messages = Object.values(result.errors).flat().filter((m) => !!m);
+		if (messages.length) return messages;
+	}
+	if (result.error) return [`auth.accountError.${result.error}`];
+	if (result.status === 404) return ["auth.accountUnavailable"];
+	return ["auth.accountFailed"];
+}
+function fieldMessages(result, field) {
+	if (!result?.errors) return [];
+	const key = Object.keys(result.errors).find((k) => k.toLowerCase() === field.toLowerCase());
+	return key ? result.errors[key] : [];
+}
+const passwordSignIn = (c) => c.localCredentials !== "Disabled";
+const PAGES = [
+	{
+		key: "profile",
+		label: "auth.profileTitle"
+	},
+	{
+		key: "changePassword",
+		label: "auth.changePasswordTitle",
+		server: passwordSignIn
+	},
+	{
+		key: "twoFactorSetup",
+		label: "auth.twoFactorSetupTitle",
+		server: (c) => passwordSignIn(c) && c.twoFactor === true
+	},
+	{
+		key: "externalLogins",
+		label: "auth.externalLoginsTitle",
+		server: (c) => c.externalLogins === true
+	},
+	{
+		key: "passkeys",
+		label: "auth.passkeysTitle",
+		server: (c) => c.passkeys === true && passkeysSupported()
+	},
+	{
+		key: "personalData",
+		label: "auth.personalDataTitle"
+	}
+];
+var SparkAccountOverviewComponent = class SparkAccountOverviewComponent {
+	auth = inject(SparkAuthService);
+	paths = inject(SPARK_AUTH_ROUTE_PATHS, { optional: true }) ?? {};
+	capabilities = signal(null, ...ngDevMode ? [{ debugName: "capabilities" }] : /* istanbul ignore next */ []);
+	pages = computed(() => {
+		const capabilities = this.capabilities();
+		return PAGES.filter((page) => !!this.paths[page.key]).filter((page) => !page.server || capabilities !== null && page.server(capabilities)).map((page) => ({
+			...page,
+			path: this.paths[page.key]
+		}));
+	}, ...ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []);
+	accountLinks = inject(SPARK_ACCOUNT_OVERVIEW_LINKS, { optional: true }) ?? [];
+	extraLinks = computed(() => {
+		const lang = currentLanguage();
+		return this.accountLinks.map((link) => ({
+			key: link.key,
+			path: link.path,
+			label: link.label[lang] ?? link.label["en"] ?? Object.values(link.label)[0] ?? link.key
+		}));
+	}, ...ngDevMode ? [{ debugName: "extraLinks" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.auth.capabilities().then((capabilities) => this.capabilities.set(capabilities)).catch(() => {});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkAccountOverviewComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkAccountOverviewComponent,
+		isStandalone: true,
+		selector: "spark-account-overview",
+		ngImport: i0,
+		template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header>
+          <h3 class="mb-0">{{ 'auth.accountTitle' | t }}</h3>
+          @if (auth.user(); as user) {
+            <small class="spark-account-user text-muted text-break">{{ user.userName }}</small>
+            @if (user.email && user.email !== user.userName) {
+              <small class="spark-account-email text-muted text-break d-block">{{ user.email }}</small>
+            }
+          }
+        </bs-card-header>
+        <div class="p-4">
+          <ul class="list-unstyled mb-0">
+            @for (page of pages(); track page.key) {
+              <li class="py-1"><a class="spark-account-link" [routerLink]="page.path">{{ page.label | t }}</a></li>
+            }
+            @for (link of extraLinks(); track link.key) {
+              <li class="py-1"><a class="spark-account-link" [routerLink]="link.path">{{ link.label }}</a></li>
+            }
+          </ul>
+        </div>
+      </bs-card>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "component",
+				type: BsCardComponent,
+				selector: "bs-card",
+				inputs: ["color", "outline"]
+			},
+			{
+				kind: "component",
+				type: BsCardHeaderComponent,
+				selector: "bs-card-header",
+				inputs: ["color", "navStyle"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkAccountOverviewComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-account-overview",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				RouterLink,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header>
+          <h3 class="mb-0">{{ 'auth.accountTitle' | t }}</h3>
+          @if (auth.user(); as user) {
+            <small class="spark-account-user text-muted text-break">{{ user.userName }}</small>
+            @if (user.email && user.email !== user.userName) {
+              <small class="spark-account-email text-muted text-break d-block">{{ user.email }}</small>
+            }
+          }
+        </bs-card-header>
+        <div class="p-4">
+          <ul class="list-unstyled mb-0">
+            @for (page of pages(); track page.key) {
+              <li class="py-1"><a class="spark-account-link" [routerLink]="page.path">{{ page.label | t }}</a></li>
+            }
+            @for (link of extraLinks(); track link.key) {
+              <li class="py-1"><a class="spark-account-link" [routerLink]="link.path">{{ link.label }}</a></li>
+            }
+          </ul>
+        </div>
+      </bs-card>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var SparkAccountProfileComponent = class SparkAccountProfileComponent {
+	auth = inject(SparkAuthService);
+	http = inject(HttpClient);
+	colors = Color;
+	profileFields = [...inject(SPARK_ACCOUNT_PROFILE_FIELDS, { optional: true }) ?? []].map((field, index) => ({
+		field,
+		index
+	})).sort((a, b) => (a.field.order ?? Infinity) - (b.field.order ?? Infinity) || a.index - b.index).map((x) => x.field);
+	form = new FormGroup({
+		userName: new FormControl("", { nonNullable: true }),
+		preferredCulture: new FormControl("", { nonNullable: true }),
+		fields: new FormGroup({})
+	});
+	emailForm = new FormGroup({ newEmail: new FormControl("", { nonNullable: true }) });
+	loading = signal(true, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	saved = signal(false, ...ngDevMode ? [{ debugName: "saved" }] : /* istanbul ignore next */ []);
+	messages = signal([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	lastResult = signal(null, ...ngDevMode ? [{ debugName: "lastResult" }] : /* istanbul ignore next */ []);
+	email = signal(null, ...ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []);
+	emailConfirmed = signal(null, ...ngDevMode ? [{ debugName: "emailConfirmed" }] : /* istanbul ignore next */ []);
+	emailSent = signal(false, ...ngDevMode ? [{ debugName: "emailSent" }] : /* istanbul ignore next */ []);
+	emailMessages = signal([], ...ngDevMode ? [{ debugName: "emailMessages" }] : /* istanbul ignore next */ []);
+	emailChangeAllowed = signal(false, ...ngDevMode ? [{ debugName: "emailChangeAllowed" }] : /* istanbul ignore next */ []);
+	languages = signal([], ...ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []);
+	storedCulture = signal(null, ...ngDevMode ? [{ debugName: "storedCulture" }] : /* istanbul ignore next */ []);
+	cultureOptions = computed(() => {
+		const options = this.languages();
+		const stored = this.storedCulture();
+		return stored && !options.some((o) => o.value.toLowerCase() === stored.toLowerCase()) ? [...options, {
+			value: stored,
+			label: stored
+		}] : options;
+	}, ...ngDevMode ? [{ debugName: "cultureOptions" }] : /* istanbul ignore next */ []);
+	userNameErrors = computed(() => {
+		const result = this.lastResult();
+		if (!result?.errors) return [];
+		return Object.entries(result.errors).filter(([key]) => key.toLowerCase().includes("username")).flatMap(([, messages]) => messages);
+	}, ...ngDevMode ? [{ debugName: "userNameErrors" }] : /* istanbul ignore next */ []);
+	constructor() {
+		for (const field of this.profileFields) this.form.controls.fields.addControl(field.name, new FormControl(field.type === "checkbox" ? false : null));
+		this.load();
+	}
+	isInlineError(key) {
+		const lowered = key.toLowerCase();
+		return lowered === "preferredculture" || lowered.includes("username") || this.profileFields.some((f) => f.name.toLowerCase() === lowered);
+	}
+	fieldErrors(name) {
+		return fieldMessages(this.lastResult(), name);
+	}
+	async load() {
+		this.loading.set(true);
+		const [profile, info] = await Promise.all([
+			this.auth.profile(),
+			this.auth.accountInfo(),
+			this.loadLanguages(),
+			this.auth.capabilities().then((capabilities) => this.emailChangeAllowed.set(capabilities.emailChange === true)).catch(() => {})
+		]);
+		if (profile.success && profile.value) this.apply(profile.value);
+		else this.messages.set(accountMessages(profile));
+		if (info.success && info.value) {
+			this.email.set(info.value.email);
+			this.emailConfirmed.set(info.value.isEmailConfirmed);
+		} else if (profile.value) this.email.set(profile.value.email);
+		this.loading.set(false);
+	}
+	async loadLanguages() {
+		try {
+			const culture = await firstValueFrom(this.http.get("/spark/culture"));
+			const lang = globalThis.__sparkCurrentLanguage?.() ?? "en";
+			this.languages.set(Object.entries(culture.languages ?? {}).map(([value, label]) => ({
+				value,
+				label: label?.[lang] ?? label?.["en"] ?? Object.values(label ?? {})[0] ?? value
+			})));
+		} catch {}
+	}
+	apply(profile) {
+		this.storedCulture.set(profile.preferredCulture);
+		this.form.controls.userName.setValue(profile.userName ?? "");
+		this.form.controls.preferredCulture.setValue(profile.preferredCulture ?? "");
+		for (const field of this.profileFields) {
+			const key = Object.keys(profile.fields ?? {}).find((k) => k.toLowerCase() === field.name.toLowerCase());
+			const value = key ? profile.fields[key] : null;
+			this.form.controls.fields.controls[field.name]?.setValue(field.type === "checkbox" ? value === true : value ?? null);
+		}
+	}
+	async save() {
+		this.saved.set(false);
+		this.busy.set(true);
+		this.messages.set([]);
+		this.lastResult.set(null);
+		try {
+			const value = this.form.getRawValue();
+			const result = await this.auth.updateProfile({
+				userName: value.userName.trim() || null,
+				preferredCulture: value.preferredCulture || null,
+				...this.profileFields.length ? { fields: { ...value.fields } } : {}
+			});
+			this.lastResult.set(result);
+			if (result.success && result.value) {
+				this.apply(result.value);
+				this.saved.set(true);
+			} else this.messages.set(result.errors ? Object.entries(result.errors).filter(([key]) => !this.isInlineError(key)).flatMap(([, messages]) => messages) : accountMessages(result));
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	async changeEmail() {
+		const newEmail = this.emailForm.controls.newEmail.value.trim();
+		this.emailSent.set(false);
+		this.emailMessages.set([]);
+		if (!newEmail) return;
+		this.busy.set(true);
+		try {
+			const result = await this.auth.changeEmail(newEmail);
+			if (result.success) {
+				this.emailSent.set(true);
+				this.emailForm.reset();
+			} else this.emailMessages.set(accountMessages(result));
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkAccountProfileComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkAccountProfileComponent,
+		isStandalone: true,
+		selector: "spark-account-profile",
+		ngImport: i0,
+		template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.profileTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else {
+            @for (message of messages(); track message) {
+              <bs-alert [type]="colors.danger" class="mb-3 d-block spark-account-error">{{ message | t }}</bs-alert>
+            }
+            @if (saved()) {
+              <bs-alert [type]="colors.success" class="mb-3 d-block spark-account-saved">{{ 'auth.profileSaved' | t }}</bs-alert>
+            }
+
+            <bs-form>
+              <form [formGroup]="form" (ngSubmit)="save()">
+                <div class="mb-3">
+                  <label for="userName" class="form-label">{{ 'auth.userName' | t }}</label>
+                  <input type="text" id="userName" formControlName="userName" autocomplete="username" />
+                  @for (message of userNameErrors(); track message) {
+                    <div class="text-danger small">{{ message | t }}</div>
+                  }
+                </div>
+
+                <div class="mb-3">
+                  <label for="preferredCulture" class="form-label">{{ 'auth.preferredCulture' | t }}</label>
+                  <bs-select id="preferredCulture" formControlName="preferredCulture" class="w-100">
+                    <option [ngValue]="''">{{ 'auth.preferredCultureDefault' | t }}</option>
+                    @for (culture of cultureOptions(); track culture.value) {
+                      <option [ngValue]="culture.value">{{ culture.label }}</option>
+                    }
+                  </bs-select>
+                  <small class="text-muted">{{ 'auth.preferredCultureHint' | t }}</small>
+                  @for (message of fieldErrors('PreferredCulture'); track message) {
+                    <div class="text-danger small">{{ message | t }}</div>
+                  }
+                </div>
+
+                <div formGroupName="fields">
+                  @for (field of profileFields; track field.name) {
+                    <div class="mb-3 spark-profile-field">
+                      @if (field.type === 'checkbox') {
+                        <bs-checkbox [type]="'checkbox'" [formControlName]="field.name" [name]="field.name">{{ field.label | t }}</bs-checkbox>
+                      } @else {
+                        <label [for]="'field-' + field.name" class="form-label">{{ field.label | t }}</label>
+                        @switch (field.type) {
+                          @case ('textarea') {
+                            <textarea [id]="'field-' + field.name" [formControlName]="field.name" rows="3"
+                                      [attr.maxlength]="field.maxLength ?? null" [required]="!!field.required"></textarea>
+                          }
+                          @case ('select') {
+                            <bs-select [id]="'field-' + field.name" [formControlName]="field.name" class="w-100">
+                              @if (!field.required) {
+                                <option [ngValue]="null"></option>
+                              }
+                              @for (option of field.options ?? []; track option.value) {
+                                <option [ngValue]="option.value">{{ option.label | t }}</option>
+                              }
+                            </bs-select>
+                          }
+                          @default {
+                            <input [type]="field.type ?? 'text'" [id]="'field-' + field.name" [formControlName]="field.name"
+                                   [attr.maxlength]="field.maxLength ?? null" [required]="!!field.required" />
+                          }
+                        }
+                      }
+                      @if (field.hint) {
+                        <small class="text-muted">{{ field.hint | t }}</small>
+                      }
+                      @for (message of fieldErrors(field.name); track message) {
+                        <div class="text-danger small">{{ message | t }}</div>
+                      }
+                    </div>
+                  }
+                </div>
+
+                <button type="submit" class="btn btn-primary" [disabled]="busy()">
+                  @if (busy()) { <bs-spinner class="me-1" /> }
+                  {{ 'auth.saveProfile' | t }}
+                </button>
+              </form>
+            </bs-form>
+
+            <hr class="my-4" />
+
+            <h5>{{ 'auth.email' | t }}</h5>
+            <p class="spark-current-email">
+              {{ email() }}
+              @if (emailConfirmed() === false) {
+                <span class="text-warning ms-2">{{ 'auth.emailNotConfirmed' | t }}</span>
+              }
+            </p>
+            @if (emailMessages().length) {
+              @for (message of emailMessages(); track message) {
+                <bs-alert [type]="colors.danger" class="mb-3 d-block">{{ message | t }}</bs-alert>
+              }
+            }
+            @if (emailSent()) {
+              <bs-alert [type]="colors.info" class="mb-3 d-block spark-email-sent">{{ 'auth.emailChangeSent' | t }}</bs-alert>
+            }
+            <!-- Opt-in on the server (SparkEmailChange.Enabled); hidden until it says so. -->
+            @if (emailChangeAllowed()) {
+              <bs-form>
+                <form [formGroup]="emailForm" (ngSubmit)="changeEmail()">
+                  <label for="newEmail" class="form-label">{{ 'auth.newEmail' | t }}</label>
+                  <bs-input-group>
+                    <input type="email" id="newEmail" formControlName="newEmail" autocomplete="email" />
+                    <button type="submit" class="btn btn-outline-primary" [disabled]="busy()">{{ 'auth.changeEmail' | t }}</button>
+                  </bs-input-group>
+                </form>
+              </bs-form>
+            }
+          }
+        </div>
+      </bs-card>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.NgSelectOption,
+				selector: "option",
+				inputs: ["ngValue", "value"]
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgSelectMultipleOption,
+				selector: "option",
+				inputs: ["ngValue", "value"]
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.RequiredValidator,
+				selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+				inputs: ["required"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupName,
+				selector: "[formGroupName]",
+				inputs: ["formGroupName"]
+			},
+			{
+				kind: "component",
+				type: BsAlertComponent,
+				selector: "bs-alert",
+				inputs: [
+					"type",
+					"announce",
+					"isVisible"
+				],
+				outputs: ["isVisibleChange", "afterOpenedOrClosed"]
+			},
+			{
+				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: "directive",
+				type: BsFormControlDirective,
+				selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)"
+			},
+			{
+				kind: "component",
+				type: BsInputGroupComponent,
+				selector: "bs-input-group",
+				inputs: ["size"]
+			},
+			{
+				kind: "component",
+				type: BsSelectComponent,
+				selector: "bs-select",
+				inputs: [
+					"identifier",
+					"size",
+					"multiple",
+					"numberVisible",
+					"disabled"
+				]
+			},
+			{
+				kind: "directive",
+				type: BsSelectValueAccessor,
+				selector: "bs-select",
+				inputs: ["compareWith"]
+			},
+			{
+				kind: "directive",
+				type: BsSelectOption,
+				selector: "option",
+				inputs: ["ngValue", "value"]
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkAccountProfileComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-account-profile",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ReactiveFormsModule,
+				BsAlertComponent,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				BsCheckboxComponent,
+				BsFormComponent,
+				BsFormControlDirective,
+				BsInputGroupComponent,
+				BsSelectComponent,
+				BsSelectValueAccessor,
+				BsSelectOption,
+				BsSpinnerComponent,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.profileTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else {
+            @for (message of messages(); track message) {
+              <bs-alert [type]="colors.danger" class="mb-3 d-block spark-account-error">{{ message | t }}</bs-alert>
+            }
+            @if (saved()) {
+              <bs-alert [type]="colors.success" class="mb-3 d-block spark-account-saved">{{ 'auth.profileSaved' | t }}</bs-alert>
+            }
+
+            <bs-form>
+              <form [formGroup]="form" (ngSubmit)="save()">
+                <div class="mb-3">
+                  <label for="userName" class="form-label">{{ 'auth.userName' | t }}</label>
+                  <input type="text" id="userName" formControlName="userName" autocomplete="username" />
+                  @for (message of userNameErrors(); track message) {
+                    <div class="text-danger small">{{ message | t }}</div>
+                  }
+                </div>
+
+                <div class="mb-3">
+                  <label for="preferredCulture" class="form-label">{{ 'auth.preferredCulture' | t }}</label>
+                  <bs-select id="preferredCulture" formControlName="preferredCulture" class="w-100">
+                    <option [ngValue]="''">{{ 'auth.preferredCultureDefault' | t }}</option>
+                    @for (culture of cultureOptions(); track culture.value) {
+                      <option [ngValue]="culture.value">{{ culture.label }}</option>
+                    }
+                  </bs-select>
+                  <small class="text-muted">{{ 'auth.preferredCultureHint' | t }}</small>
+                  @for (message of fieldErrors('PreferredCulture'); track message) {
+                    <div class="text-danger small">{{ message | t }}</div>
+                  }
+                </div>
+
+                <div formGroupName="fields">
+                  @for (field of profileFields; track field.name) {
+                    <div class="mb-3 spark-profile-field">
+                      @if (field.type === 'checkbox') {
+                        <bs-checkbox [type]="'checkbox'" [formControlName]="field.name" [name]="field.name">{{ field.label | t }}</bs-checkbox>
+                      } @else {
+                        <label [for]="'field-' + field.name" class="form-label">{{ field.label | t }}</label>
+                        @switch (field.type) {
+                          @case ('textarea') {
+                            <textarea [id]="'field-' + field.name" [formControlName]="field.name" rows="3"
+                                      [attr.maxlength]="field.maxLength ?? null" [required]="!!field.required"></textarea>
+                          }
+                          @case ('select') {
+                            <bs-select [id]="'field-' + field.name" [formControlName]="field.name" class="w-100">
+                              @if (!field.required) {
+                                <option [ngValue]="null"></option>
+                              }
+                              @for (option of field.options ?? []; track option.value) {
+                                <option [ngValue]="option.value">{{ option.label | t }}</option>
+                              }
+                            </bs-select>
+                          }
+                          @default {
+                            <input [type]="field.type ?? 'text'" [id]="'field-' + field.name" [formControlName]="field.name"
+                                   [attr.maxlength]="field.maxLength ?? null" [required]="!!field.required" />
+                          }
+                        }
+                      }
+                      @if (field.hint) {
+                        <small class="text-muted">{{ field.hint | t }}</small>
+                      }
+                      @for (message of fieldErrors(field.name); track message) {
+                        <div class="text-danger small">{{ message | t }}</div>
+                      }
+                    </div>
+                  }
+                </div>
+
+                <button type="submit" class="btn btn-primary" [disabled]="busy()">
+                  @if (busy()) { <bs-spinner class="me-1" /> }
+                  {{ 'auth.saveProfile' | t }}
+                </button>
+              </form>
+            </bs-form>
+
+            <hr class="my-4" />
+
+            <h5>{{ 'auth.email' | t }}</h5>
+            <p class="spark-current-email">
+              {{ email() }}
+              @if (emailConfirmed() === false) {
+                <span class="text-warning ms-2">{{ 'auth.emailNotConfirmed' | t }}</span>
+              }
+            </p>
+            @if (emailMessages().length) {
+              @for (message of emailMessages(); track message) {
+                <bs-alert [type]="colors.danger" class="mb-3 d-block">{{ message | t }}</bs-alert>
+              }
+            }
+            @if (emailSent()) {
+              <bs-alert [type]="colors.info" class="mb-3 d-block spark-email-sent">{{ 'auth.emailChangeSent' | t }}</bs-alert>
+            }
+            <!-- Opt-in on the server (SparkEmailChange.Enabled); hidden until it says so. -->
+            @if (emailChangeAllowed()) {
+              <bs-form>
+                <form [formGroup]="emailForm" (ngSubmit)="changeEmail()">
+                  <label for="newEmail" class="form-label">{{ 'auth.newEmail' | t }}</label>
+                  <bs-input-group>
+                    <input type="email" id="newEmail" formControlName="newEmail" autocomplete="email" />
+                    <button type="submit" class="btn btn-outline-primary" [disabled]="busy()">{{ 'auth.changeEmail' | t }}</button>
+                  </bs-input-group>
+                </form>
+              </bs-form>
+            }
+          }
+        </div>
+      </bs-card>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var SparkChangePasswordComponent = class SparkChangePasswordComponent {
+	auth = inject(SparkAuthService);
+	colors = Color;
+	form = new FormGroup({
+		currentPassword: new FormControl("", { nonNullable: true }),
+		newPassword: new FormControl("", {
+			nonNullable: true,
+			validators: [Validators.required]
+		}),
+		confirmPassword: new FormControl("", {
+			nonNullable: true,
+			validators: [Validators.required]
+		})
+	});
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	saved = signal(false, ...ngDevMode ? [{ debugName: "saved" }] : /* istanbul ignore next */ []);
+	messages = signal([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	async submit() {
+		this.saved.set(false);
+		const { currentPassword, newPassword, confirmPassword } = this.form.getRawValue();
+		if (!newPassword) {
+			this.messages.set(["auth.newPasswordRequired"]);
+			return;
+		}
+		if (newPassword !== confirmPassword) {
+			this.messages.set(["auth.passwordMismatch"]);
+			return;
+		}
+		this.busy.set(true);
+		this.messages.set([]);
+		try {
+			const result = await this.auth.setPassword(newPassword, currentPassword || null);
+			if (result.success) {
+				this.saved.set(true);
+				this.form.reset();
+			} else this.messages.set(accountMessages(result));
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkChangePasswordComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkChangePasswordComponent,
+		isStandalone: true,
+		selector: "spark-change-password",
+		ngImport: i0,
+		template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.changePasswordTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @for (message of messages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-account-error">{{ message | t }}</bs-alert>
+          }
+          @if (saved()) {
+            <bs-alert [type]="colors.success" class="mb-3 d-block spark-account-saved">{{ 'auth.passwordChanged' | t }}</bs-alert>
+          }
+          <bs-form>
+            <form [formGroup]="form" (ngSubmit)="submit()">
+              <div class="mb-3">
+                <label for="currentPassword" class="form-label">{{ 'auth.currentPassword' | t }}</label>
+                <input type="password" id="currentPassword" formControlName="currentPassword" autocomplete="current-password" />
+                <small class="text-muted">{{ 'auth.currentPasswordHint' | t }}</small>
+              </div>
+              <div class="mb-3">
+                <label for="newPassword" class="form-label">{{ 'auth.newPassword' | t }}</label>
+                <input type="password" id="newPassword" formControlName="newPassword" autocomplete="new-password" />
+              </div>
+              <div class="mb-3">
+                <label for="confirmPassword" class="form-label">{{ 'auth.confirmPassword' | t }}</label>
+                <input type="password" id="confirmPassword" formControlName="confirmPassword" autocomplete="new-password" />
+              </div>
+              <button type="submit" class="btn btn-primary" [disabled]="busy()">
+                @if (busy()) { <bs-spinner class="me-1" /> }
+                {{ 'auth.savePassword' | t }}
+              </button>
+            </form>
+          </bs-form>
+        </div>
+      </bs-card>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "component",
+				type: BsAlertComponent,
+				selector: "bs-alert",
+				inputs: [
+					"type",
+					"announce",
+					"isVisible"
+				],
+				outputs: ["isVisibleChange", "afterOpenedOrClosed"]
+			},
+			{
+				kind: "component",
+				type: BsCardComponent,
+				selector: "bs-card",
+				inputs: ["color", "outline"]
+			},
+			{
+				kind: "component",
+				type: BsCardHeaderComponent,
+				selector: "bs-card-header",
+				inputs: ["color", "navStyle"]
+			},
+			{
+				kind: "component",
+				type: BsFormComponent,
+				selector: "bs-form",
+				inputs: ["action", "method"],
+				outputs: ["submitted"]
+			},
+			{
+				kind: "directive",
+				type: BsFormControlDirective,
+				selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)"
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkChangePasswordComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-change-password",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ReactiveFormsModule,
+				BsAlertComponent,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				BsFormComponent,
+				BsFormControlDirective,
+				BsSpinnerComponent,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.changePasswordTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @for (message of messages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-account-error">{{ message | t }}</bs-alert>
+          }
+          @if (saved()) {
+            <bs-alert [type]="colors.success" class="mb-3 d-block spark-account-saved">{{ 'auth.passwordChanged' | t }}</bs-alert>
+          }
+          <bs-form>
+            <form [formGroup]="form" (ngSubmit)="submit()">
+              <div class="mb-3">
+                <label for="currentPassword" class="form-label">{{ 'auth.currentPassword' | t }}</label>
+                <input type="password" id="currentPassword" formControlName="currentPassword" autocomplete="current-password" />
+                <small class="text-muted">{{ 'auth.currentPasswordHint' | t }}</small>
+              </div>
+              <div class="mb-3">
+                <label for="newPassword" class="form-label">{{ 'auth.newPassword' | t }}</label>
+                <input type="password" id="newPassword" formControlName="newPassword" autocomplete="new-password" />
+              </div>
+              <div class="mb-3">
+                <label for="confirmPassword" class="form-label">{{ 'auth.confirmPassword' | t }}</label>
+                <input type="password" id="confirmPassword" formControlName="confirmPassword" autocomplete="new-password" />
+              </div>
+              <button type="submit" class="btn btn-primary" [disabled]="busy()">
+                @if (busy()) { <bs-spinner class="me-1" /> }
+                {{ 'auth.savePassword' | t }}
+              </button>
+            </form>
+          </bs-form>
+        </div>
+      </bs-card>
+    </div>
+  `
+		}]
+	}]
+});
+var SparkTwoFactorSetupComponent = class SparkTwoFactorSetupComponent {
+	auth = inject(SparkAuthService);
+	translation = inject(SparkAuthTranslationService);
+	colors = Color;
+	form = new FormGroup({ code: new FormControl("", { nonNullable: true }) });
+	loading = signal(true, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	messages = signal([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	state = signal(null, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	authenticator = signal(null, ...ngDevMode ? [{ debugName: "authenticator" }] : /* istanbul ignore next */ []);
+	recoveryCodes = signal([], ...ngDevMode ? [{ debugName: "recoveryCodes" }] : /* istanbul ignore next */ []);
+	qrDataUrl = computed(() => {
+		const svg = this.authenticator()?.qrCodeSvg;
+		return svg ? "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg) : null;
+	}, ...ngDevMode ? [{ debugName: "qrDataUrl" }] : /* istanbul ignore next */ []);
+	bypassForm = new FormGroup({ code: new FormControl("", { nonNullable: true }) });
+	bypassCapability = signal(false, ...ngDevMode ? [{ debugName: "bypassCapability" }] : /* istanbul ignore next */ []);
+	bypass = signal(null, ...ngDevMode ? [{ debugName: "bypass" }] : /* istanbul ignore next */ []);
+	bypassPending = signal(false, ...ngDevMode ? [{ debugName: "bypassPending" }] : /* istanbul ignore next */ []);
+	bypassOffered = computed(() => this.bypassCapability() && this.bypass() !== null && this.state()?.isTwoFactorEnabled === true, ...ngDevMode ? [{ debugName: "bypassOffered" }] : /* istanbul ignore next */ []);
+	bypassChecked = computed(() => this.bypass() === true || this.bypassPending(), ...ngDevMode ? [{ debugName: "bypassChecked" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.refresh();
+		Promise.resolve().then(() => this.auth.capabilities()).then((capabilities) => {
+			this.bypassCapability.set(capabilities?.externalLoginTwoFactorBypass === true);
+			if (this.bypassCapability()) return this.loadBypass();
+		}).catch(() => {});
+	}
+	async loadBypass() {
+		const result = await this.auth.externalLoginTwoFactor();
+		this.bypass.set(result.success && result.value ? result.value.bypass : null);
+	}
+	async toggleBypass(on) {
+		if (on) {
+			if (this.bypass() !== true) this.bypassPending.set(true);
+			return;
+		}
+		if (this.bypassPending()) {
+			this.bypassPending.set(false);
+			this.bypassForm.reset();
+			return;
+		}
+		if (this.bypass() !== true) return;
+		await this.saveBypass(false);
+	}
+	async confirmBypass() {
+		const code = this.bypassForm.controls.code.value.replace(/\s|-/g, "");
+		if (!code) {
+			this.messages.set(["auth.enterCodeError"]);
+			return;
+		}
+		await this.saveBypass(true, code);
+	}
+	async saveBypass(bypass, code) {
+		this.busy.set(true);
+		this.messages.set([]);
+		try {
+			const result = await this.auth.setExternalLoginTwoFactor(bypass, code);
+			if (result.success && result.value) {
+				this.bypass.set(result.value.bypass);
+				this.bypassPending.set(false);
+				this.bypassForm.reset();
+			} else this.messages.set(result.status === 400 && !result.errors ? ["auth.invalidCode"] : accountMessages(result));
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	formatKey(key) {
+		return key.replace(/(.{4})/g, "$1 ").trim();
+	}
+	async refresh() {
+		this.loading.set(true);
+		const state = await this.auth.twoFactor();
+		await this.applyState(state);
+		this.loading.set(false);
+	}
+	async enable() {
+		const code = this.form.controls.code.value.replace(/\s|-/g, "");
+		if (!code) {
+			this.messages.set(["auth.enterCodeError"]);
+			return;
+		}
+		await this.run({
+			enable: true,
+			twoFactorCode: code
+		});
+		if (this.state()?.isTwoFactorEnabled) this.form.reset();
+	}
+	async disable() {
+		if (!confirm(this.translation.t("auth.confirmDisableTwoFactor"))) return;
+		await this.run({ enable: false });
+	}
+	async regenerateRecoveryCodes() {
+		await this.run({ resetRecoveryCodes: true });
+	}
+	async forgetMachine() {
+		await this.run({ forgetMachine: true });
+		const state = this.state();
+		if (state?.isMachineRemembered && this.messages().length === 0) this.state.set({
+			...state,
+			isMachineRemembered: false
+		});
+	}
+	async resetKey() {
+		if (!confirm(this.translation.t("auth.confirmResetAuthenticator"))) return;
+		await this.run({ resetSharedKey: true });
+	}
+	async run(request) {
+		this.busy.set(true);
+		this.messages.set([]);
+		try {
+			await this.applyState(await this.auth.twoFactor(request));
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	async applyState(result) {
+		if (!result.success || !result.value) {
+			this.messages.set(result.status === 400 && !result.errors ? ["auth.invalidCode"] : accountMessages(result));
+			return;
+		}
+		const wasEnabled = this.state()?.isTwoFactorEnabled;
+		this.state.set(result.value);
+		this.recoveryCodes.set(result.value.recoveryCodes ?? []);
+		if (this.bypassCapability() && wasEnabled !== void 0 && wasEnabled !== result.value.isTwoFactorEnabled) {
+			this.bypassPending.set(false);
+			this.loadBypass();
+		}
+		if (result.value.isTwoFactorEnabled) {
+			this.authenticator.set(null);
+			return;
+		}
+		const uri = await this.auth.authenticatorUri();
+		this.authenticator.set(uri.success && uri.value ? uri.value : null);
+		if (!uri.success) this.messages.set(accountMessages(uri));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkTwoFactorSetupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkTwoFactorSetupComponent,
+		isStandalone: true,
+		selector: "spark-two-factor-setup",
+		ngImport: i0,
+		template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.twoFactorSetupTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @for (message of messages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-account-error">{{ message | t }}</bs-alert>
+          }
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else if (state(); as s) {
+            @if (recoveryCodes().length) {
+              <bs-alert [type]="colors.warning" class="mb-3 d-block spark-recovery-codes">
+                <p class="mb-2">{{ 'auth.recoveryCodesShownOnce' | t }}</p>
+                <div class="d-flex flex-wrap gap-3 font-monospace">
+                  @for (code of recoveryCodes(); track code) { <span>{{ code }}</span> }
+                </div>
+              </bs-alert>
+            }
+
+            @if (s.isTwoFactorEnabled) {
+              <p class="spark-2fa-enabled">{{ 'auth.twoFactorEnabled' | t }}</p>
+              <p class="text-muted">{{ 'auth.recoveryCodesLeft' | t }}: {{ s.recoveryCodesLeft }}</p>
+              <div class="d-flex flex-wrap gap-2">
+                <button type="button" class="btn btn-outline-primary spark-2fa-new-codes" [disabled]="busy()" (click)="regenerateRecoveryCodes()">
+                  {{ 'auth.newRecoveryCodes' | t }}
+                </button>
+                @if (s.isMachineRemembered) {
+                  <button type="button" class="btn btn-outline-secondary" [disabled]="busy()" (click)="forgetMachine()">
+                    {{ 'auth.forgetBrowser' | t }}
+                  </button>
+                }
+                <button type="button" class="btn btn-outline-warning" [disabled]="busy()" (click)="resetKey()">
+                  {{ 'auth.resetAuthenticator' | t }}
+                </button>
+                <button type="button" class="btn btn-outline-danger spark-2fa-disable" [disabled]="busy()" (click)="disable()">
+                  {{ 'auth.disableTwoFactor' | t }}
+                </button>
+              </div>
+
+              @if (bypassOffered()) {
+                <hr class="my-4" />
+                <div class="spark-2fa-external-bypass">
+                  <bs-form>
+                    <bs-checkbox [type]="'checkbox'" [name]="'externalTwoFactorBypass'" [isToggled]="bypassChecked()"
+                                 (isToggledChange)="toggleBypass($event === true)">
+                      {{ 'auth.externalTwoFactorBypassLabel' | t }}
+                    </bs-checkbox>
+                  </bs-form>
+                  <small class="text-muted d-block">{{ 'auth.externalTwoFactorBypassHint' | t }}</small>
+                  @if (bypassPending()) {
+                    <bs-form>
+                      <form [formGroup]="bypassForm" (ngSubmit)="confirmBypass()" class="d-flex gap-2 align-items-end mt-2">
+                        <div class="flex-grow-1">
+                          <label for="bypassCode" class="form-label">{{ 'auth.code' | t }}</label>
+                          <input type="text" id="bypassCode" formControlName="code" inputmode="numeric" autocomplete="one-time-code" maxlength="8" />
+                        </div>
+                        <button type="submit" class="btn btn-primary spark-2fa-bypass-confirm" [disabled]="busy()">{{ 'auth.verify' | t }}</button>
+                        <button type="button" class="btn btn-outline-secondary spark-2fa-bypass-cancel" [disabled]="busy()" (click)="toggleBypass(false)">{{ 'common.cancel' | t }}</button>
+                      </form>
+                    </bs-form>
+                  }
+                </div>
+              }
+            } @else {
+              <p>{{ 'auth.twoFactorSetupIntro' | t }}</p>
+              @if (qrDataUrl(); as qr) {
+                <div class="text-center my-3">
+                  <img class="spark-2fa-qr" [src]="qr" width="200" height="200" [attr.alt]="'auth.qrCodeAlt' | t" />
+                </div>
+              }
+              @if (authenticator(); as a) {
+                <p class="text-muted small mb-1">{{ 'auth.manualKey' | t }}</p>
+                <p class="font-monospace spark-2fa-key">{{ formatKey(a.sharedKey) }}</p>
+              }
+              <bs-form>
+                <form [formGroup]="form" (ngSubmit)="enable()" class="d-flex gap-2 align-items-end">
+                  <div class="flex-grow-1">
+                    <label for="twoFactorCode" class="form-label">{{ 'auth.code' | t }}</label>
+                    <input type="text" id="twoFactorCode" formControlName="code" inputmode="numeric" autocomplete="one-time-code" maxlength="8" />
+                  </div>
+                  <button type="submit" class="btn btn-primary spark-2fa-enable" [disabled]="busy()">{{ 'auth.enableTwoFactor' | t }}</button>
+                </form>
+              </bs-form>
+            }
+          }
+        </div>
+      </bs-card>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.MaxLengthValidator,
+				selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+				inputs: ["maxlength"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "component",
+				type: BsAlertComponent,
+				selector: "bs-alert",
+				inputs: [
+					"type",
+					"announce",
+					"isVisible"
+				],
+				outputs: ["isVisibleChange", "afterOpenedOrClosed"]
+			},
+			{
+				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: "directive",
+				type: BsFormControlDirective,
+				selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)"
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkTwoFactorSetupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-two-factor-setup",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ReactiveFormsModule,
+				BsAlertComponent,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				BsCheckboxComponent,
+				BsFormComponent,
+				BsFormControlDirective,
+				BsSpinnerComponent,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.twoFactorSetupTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @for (message of messages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-account-error">{{ message | t }}</bs-alert>
+          }
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else if (state(); as s) {
+            @if (recoveryCodes().length) {
+              <bs-alert [type]="colors.warning" class="mb-3 d-block spark-recovery-codes">
+                <p class="mb-2">{{ 'auth.recoveryCodesShownOnce' | t }}</p>
+                <div class="d-flex flex-wrap gap-3 font-monospace">
+                  @for (code of recoveryCodes(); track code) { <span>{{ code }}</span> }
+                </div>
+              </bs-alert>
+            }
+
+            @if (s.isTwoFactorEnabled) {
+              <p class="spark-2fa-enabled">{{ 'auth.twoFactorEnabled' | t }}</p>
+              <p class="text-muted">{{ 'auth.recoveryCodesLeft' | t }}: {{ s.recoveryCodesLeft }}</p>
+              <div class="d-flex flex-wrap gap-2">
+                <button type="button" class="btn btn-outline-primary spark-2fa-new-codes" [disabled]="busy()" (click)="regenerateRecoveryCodes()">
+                  {{ 'auth.newRecoveryCodes' | t }}
+                </button>
+                @if (s.isMachineRemembered) {
+                  <button type="button" class="btn btn-outline-secondary" [disabled]="busy()" (click)="forgetMachine()">
+                    {{ 'auth.forgetBrowser' | t }}
+                  </button>
+                }
+                <button type="button" class="btn btn-outline-warning" [disabled]="busy()" (click)="resetKey()">
+                  {{ 'auth.resetAuthenticator' | t }}
+                </button>
+                <button type="button" class="btn btn-outline-danger spark-2fa-disable" [disabled]="busy()" (click)="disable()">
+                  {{ 'auth.disableTwoFactor' | t }}
+                </button>
+              </div>
+
+              @if (bypassOffered()) {
+                <hr class="my-4" />
+                <div class="spark-2fa-external-bypass">
+                  <bs-form>
+                    <bs-checkbox [type]="'checkbox'" [name]="'externalTwoFactorBypass'" [isToggled]="bypassChecked()"
+                                 (isToggledChange)="toggleBypass($event === true)">
+                      {{ 'auth.externalTwoFactorBypassLabel' | t }}
+                    </bs-checkbox>
+                  </bs-form>
+                  <small class="text-muted d-block">{{ 'auth.externalTwoFactorBypassHint' | t }}</small>
+                  @if (bypassPending()) {
+                    <bs-form>
+                      <form [formGroup]="bypassForm" (ngSubmit)="confirmBypass()" class="d-flex gap-2 align-items-end mt-2">
+                        <div class="flex-grow-1">
+                          <label for="bypassCode" class="form-label">{{ 'auth.code' | t }}</label>
+                          <input type="text" id="bypassCode" formControlName="code" inputmode="numeric" autocomplete="one-time-code" maxlength="8" />
+                        </div>
+                        <button type="submit" class="btn btn-primary spark-2fa-bypass-confirm" [disabled]="busy()">{{ 'auth.verify' | t }}</button>
+                        <button type="button" class="btn btn-outline-secondary spark-2fa-bypass-cancel" [disabled]="busy()" (click)="toggleBypass(false)">{{ 'common.cancel' | t }}</button>
+                      </form>
+                    </bs-form>
+                  }
+                </div>
+              }
+            } @else {
+              <p>{{ 'auth.twoFactorSetupIntro' | t }}</p>
+              @if (qrDataUrl(); as qr) {
+                <div class="text-center my-3">
+                  <img class="spark-2fa-qr" [src]="qr" width="200" height="200" [attr.alt]="'auth.qrCodeAlt' | t" />
+                </div>
+              }
+              @if (authenticator(); as a) {
+                <p class="text-muted small mb-1">{{ 'auth.manualKey' | t }}</p>
+                <p class="font-monospace spark-2fa-key">{{ formatKey(a.sharedKey) }}</p>
+              }
+              <bs-form>
+                <form [formGroup]="form" (ngSubmit)="enable()" class="d-flex gap-2 align-items-end">
+                  <div class="flex-grow-1">
+                    <label for="twoFactorCode" class="form-label">{{ 'auth.code' | t }}</label>
+                    <input type="text" id="twoFactorCode" formControlName="code" inputmode="numeric" autocomplete="one-time-code" maxlength="8" />
+                  </div>
+                  <button type="submit" class="btn btn-primary spark-2fa-enable" [disabled]="busy()">{{ 'auth.enableTwoFactor' | t }}</button>
+                </form>
+              </bs-form>
+            }
+          }
+        </div>
+      </bs-card>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var SparkExternalLoginsComponent = class SparkExternalLoginsComponent {
+	auth = inject(SparkAuthService);
+	router = inject(Router);
+	presentations = inject(SPARK_EXTERNAL_PROVIDERS, { optional: true }) ?? [];
+	colors = Color;
+	loading = signal(true, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	errorKey = signal("", ...ngDevMode ? [{ debugName: "errorKey" }] : /* istanbul ignore next */ []);
+	logins = signal(null, ...ngDevMode ? [{ debugName: "logins" }] : /* istanbul ignore next */ []);
+	linkPending = computed(() => this.auth.externalLoginPending(), ...ngDevMode ? [{ debugName: "linkPending" }] : /* istanbul ignore next */ []);
+	errorIsNotice = computed(() => this.errorKey() === "auth.externalLoginError.link_confirmation_sent", ...ngDevMode ? [{ debugName: "errorIsNotice" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const returned = this.auth.takeExternalLoginResult();
+		if (returned) this.showLinkError(returned);
+		this.refresh();
+	}
+	showLinkError(error) {
+		if (error === "popup_closed") return;
+		this.errorKey.set(`auth.externalLoginError.${error ?? "link_failed"}`);
+	}
+	presentation(scheme) {
+		return this.presentations.find((p) => p.scheme.toLowerCase() === scheme.toLowerCase());
+	}
+	iconFor(scheme) {
+		return this.presentation(scheme)?.iconClass;
+	}
+	nameFor(scheme, serverName) {
+		return this.presentation(scheme)?.displayName ?? serverName ?? scheme;
+	}
+	async refresh() {
+		this.loading.set(true);
+		try {
+			this.logins.set(await this.auth.externalLogins());
+		} catch {
+			this.errorKey.set("auth.externalLoginsUnavailable");
+		} finally {
+			this.loading.set(false);
+		}
+	}
+	async link(provider) {
+		this.errorKey.set("");
+		const result = await this.auth.linkProvider(provider, { returnUrl: this.router.url });
+		if (!result.success) this.showLinkError(result.error);
+		await this.refresh();
+	}
+	async unlink(provider, providerKey) {
+		this.errorKey.set("");
+		this.busy.set(true);
+		try {
+			const result = await this.auth.unlinkProvider(provider, providerKey);
+			if (!result.success) this.errorKey.set(`auth.unlinkError.${result.error ?? "unlink_failed"}`);
+			await this.refresh();
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkExternalLoginsComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkExternalLoginsComponent,
+		isStandalone: true,
+		selector: "spark-external-logins",
+		ngImport: i0,
+		template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.externalLoginsTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @if (errorKey()) {
+            <bs-alert [type]="errorIsNotice() ? colors.info : colors.danger" class="mb-3 d-block spark-account-error">{{ errorKey() | t }}</bs-alert>
+          }
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else if (logins(); as l) {
+            @for (login of l.linked; track login.provider + login.providerKey) {
+              <div class="d-flex align-items-center justify-content-between border-bottom py-2 spark-linked-login">
+                <span>
+                  @if (iconFor(login.provider); as icon) { <i [class]="icon" class="me-2"></i> }
+                  {{ nameFor(login.provider, login.displayName) }}
+                </span>
+                <button type="button" class="btn btn-outline-danger btn-sm" [disabled]="busy() || !login.canUnlink"
+                        [attr.title]="login.canUnlink ? null : ('auth.lastCredentialHint' | t)"
+                        (click)="unlink(login.provider, login.providerKey)">
+                  {{ 'auth.removeLogin' | t }}
+                </button>
+              </div>
+            } @empty {
+              <p class="text-muted">{{ 'auth.noLinkedLogins' | t }}</p>
+            }
+
+            @if (l.available.length) {
+              <h5 class="mt-4">{{ 'auth.addLogin' | t }}</h5>
+              <div class="d-flex flex-wrap gap-2">
+                @for (provider of l.available; track provider.provider) {
+                  <button type="button" class="btn btn-outline-primary spark-available-login" [disabled]="busy() || linkPending()" (click)="link(provider.provider)">
+                    @if (iconFor(provider.provider); as icon) { <i [class]="icon" class="me-2"></i> }
+                    {{ nameFor(provider.provider, provider.displayName) }}
+                  </button>
+                }
+              </div>
+              @if (linkPending()) {
+                <div class="text-center mt-3 spark-link-pending"><bs-spinner /></div>
+              }
+            }
+          }
+        </div>
+      </bs-card>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: BsAlertComponent,
+				selector: "bs-alert",
+				inputs: [
+					"type",
+					"announce",
+					"isVisible"
+				],
+				outputs: ["isVisibleChange", "afterOpenedOrClosed"]
+			},
+			{
+				kind: "component",
+				type: BsCardComponent,
+				selector: "bs-card",
+				inputs: ["color", "outline"]
+			},
+			{
+				kind: "component",
+				type: BsCardHeaderComponent,
+				selector: "bs-card-header",
+				inputs: ["color", "navStyle"]
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkExternalLoginsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-external-logins",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				BsAlertComponent,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				BsSpinnerComponent,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.externalLoginsTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          @if (errorKey()) {
+            <bs-alert [type]="errorIsNotice() ? colors.info : colors.danger" class="mb-3 d-block spark-account-error">{{ errorKey() | t }}</bs-alert>
+          }
+          @if (loading()) {
+            <div class="text-center"><bs-spinner /></div>
+          } @else if (logins(); as l) {
+            @for (login of l.linked; track login.provider + login.providerKey) {
+              <div class="d-flex align-items-center justify-content-between border-bottom py-2 spark-linked-login">
+                <span>
+                  @if (iconFor(login.provider); as icon) { <i [class]="icon" class="me-2"></i> }
+                  {{ nameFor(login.provider, login.displayName) }}
+                </span>
+                <button type="button" class="btn btn-outline-danger btn-sm" [disabled]="busy() || !login.canUnlink"
+                        [attr.title]="login.canUnlink ? null : ('auth.lastCredentialHint' | t)"
+                        (click)="unlink(login.provider, login.providerKey)">
+                  {{ 'auth.removeLogin' | t }}
+                </button>
+              </div>
+            } @empty {
+              <p class="text-muted">{{ 'auth.noLinkedLogins' | t }}</p>
+            }
+
+            @if (l.available.length) {
+              <h5 class="mt-4">{{ 'auth.addLogin' | t }}</h5>
+              <div class="d-flex flex-wrap gap-2">
+                @for (provider of l.available; track provider.provider) {
+                  <button type="button" class="btn btn-outline-primary spark-available-login" [disabled]="busy() || linkPending()" (click)="link(provider.provider)">
+                    @if (iconFor(provider.provider); as icon) { <i [class]="icon" class="me-2"></i> }
+                    {{ nameFor(provider.provider, provider.displayName) }}
+                  </button>
+                }
+              </div>
+              @if (linkPending()) {
+                <div class="text-center mt-3 spark-link-pending"><bs-spinner /></div>
+              }
+            }
+          }
+        </div>
+      </bs-card>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var SparkPersonalDataComponent = class SparkPersonalDataComponent {
+	auth = inject(SparkAuthService);
+	router = inject(Router);
+	config = inject(SPARK_AUTH_CONFIG);
+	colors = Color;
+	form = new FormGroup({
+		password: new FormControl("", { nonNullable: true }),
+		confirm: new FormControl(false, { nonNullable: true })
+	});
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	downloadMessages = signal([], ...ngDevMode ? [{ debugName: "downloadMessages" }] : /* istanbul ignore next */ []);
+	deleteMessages = signal([], ...ngDevMode ? [{ debugName: "deleteMessages" }] : /* istanbul ignore next */ []);
+	hasPassword = signal(null, ...ngDevMode ? [{ debugName: "hasPassword" }] : /* istanbul ignore next */ []);
+	async ngOnInit() {
+		try {
+			const result = await this.auth.personalData();
+			const flag = result.success ? result.value?.account?.hasPassword : void 0;
+			this.hasPassword.set(typeof flag === "boolean" ? flag : null);
+		} catch {
+			this.hasPassword.set(null);
+		}
+	}
+	async download() {
+		this.busy.set(true);
+		this.downloadMessages.set([]);
+		try {
+			const result = await this.auth.personalData();
+			if (!result.success) {
+				this.downloadMessages.set(accountMessages(result));
+				return;
+			}
+			const blob = new Blob([JSON.stringify(result.value, null, 2)], { type: "application/json" });
+			const url = URL.createObjectURL(blob);
+			const anchor = document.createElement("a");
+			anchor.href = url;
+			anchor.download = "personal-data.json";
+			anchor.click();
+			URL.revokeObjectURL(url);
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	async deleteAccount() {
+		if (!this.form.controls.confirm.value) return;
+		this.busy.set(true);
+		this.deleteMessages.set([]);
+		try {
+			const result = await this.auth.deleteAccount(this.form.controls.password.value || null);
+			if (result.success) {
+				await this.router.navigateByUrl(this.config.defaultRedirectUrl);
+				return;
+			}
+			this.deleteMessages.set(accountMessages(result));
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkPersonalDataComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkPersonalDataComponent,
+		isStandalone: true,
+		selector: "spark-personal-data",
+		ngImport: i0,
+		template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.personalDataTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          <p>{{ 'auth.personalDataDescription' | t }}</p>
+          @for (message of downloadMessages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block">{{ message | t }}</bs-alert>
+          }
+          <button type="button" class="btn btn-outline-primary spark-download-data" [disabled]="busy()" (click)="download()">
+            {{ 'auth.downloadPersonalData' | t }}
+          </button>
+
+          <hr class="my-4" />
+
+          <h5 class="text-danger">{{ 'auth.deleteAccountTitle' | t }}</h5>
+          <p>{{ 'auth.deleteAccountDescription' | t }}</p>
+          @for (message of deleteMessages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-delete-error">{{ message | t }}</bs-alert>
+          }
+          <bs-form>
+            <form [formGroup]="form" (ngSubmit)="deleteAccount()">
+              @if (hasPassword() !== false) {
+                <div class="mb-3">
+                  <label for="deletePassword" class="form-label">{{ 'auth.password' | t }}</label>
+                  <input type="password" id="deletePassword" formControlName="password" autocomplete="current-password" />
+                  <small class="text-muted">{{ 'auth.deletePasswordHint' | t }}</small>
+                </div>
+              } @else {
+                <p class="text-muted spark-delete-recent-sign-in">{{ 'auth.deleteRecentSignIn' | t }}</p>
+              }
+              <div class="mb-3">
+                <bs-checkbox [type]="'checkbox'" formControlName="confirm" [name]="'confirmDelete'">{{ 'auth.deleteAccountConfirm' | t }}</bs-checkbox>
+              </div>
+              <button type="submit" class="btn btn-danger spark-delete-account" [disabled]="busy() || !form.controls.confirm.value">
+                @if (busy()) { <bs-spinner class="me-1" /> }
+                {{ 'auth.deleteAccount' | t }}
+              </button>
+            </form>
+          </bs-form>
+        </div>
+      </bs-card>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "component",
+				type: BsAlertComponent,
+				selector: "bs-alert",
+				inputs: [
+					"type",
+					"announce",
+					"isVisible"
+				],
+				outputs: ["isVisibleChange", "afterOpenedOrClosed"]
+			},
+			{
+				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: "directive",
+				type: BsFormControlDirective,
+				selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)"
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkPersonalDataComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-personal-data",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ReactiveFormsModule,
+				BsAlertComponent,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				BsCheckboxComponent,
+				BsFormComponent,
+				BsFormControlDirective,
+				BsSpinnerComponent,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="d-flex justify-content-center">
+      <bs-card style="width: 100%; max-width: 640px;">
+        <bs-card-header><h3 class="mb-0">{{ 'auth.personalDataTitle' | t }}</h3></bs-card-header>
+        <div class="p-4">
+          <p>{{ 'auth.personalDataDescription' | t }}</p>
+          @for (message of downloadMessages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block">{{ message | t }}</bs-alert>
+          }
+          <button type="button" class="btn btn-outline-primary spark-download-data" [disabled]="busy()" (click)="download()">
+            {{ 'auth.downloadPersonalData' | t }}
+          </button>
+
+          <hr class="my-4" />
+
+          <h5 class="text-danger">{{ 'auth.deleteAccountTitle' | t }}</h5>
+          <p>{{ 'auth.deleteAccountDescription' | t }}</p>
+          @for (message of deleteMessages(); track message) {
+            <bs-alert [type]="colors.danger" class="mb-3 d-block spark-delete-error">{{ message | t }}</bs-alert>
+          }
+          <bs-form>
+            <form [formGroup]="form" (ngSubmit)="deleteAccount()">
+              @if (hasPassword() !== false) {
+                <div class="mb-3">
+                  <label for="deletePassword" class="form-label">{{ 'auth.password' | t }}</label>
+                  <input type="password" id="deletePassword" formControlName="password" autocomplete="current-password" />
+                  <small class="text-muted">{{ 'auth.deletePasswordHint' | t }}</small>
+                </div>
+              } @else {
+                <p class="text-muted spark-delete-recent-sign-in">{{ 'auth.deleteRecentSignIn' | t }}</p>
+              }
+              <div class="mb-3">
+                <bs-checkbox [type]="'checkbox'" formControlName="confirm" [name]="'confirmDelete'">{{ 'auth.deleteAccountConfirm' | t }}</bs-checkbox>
+              </div>
+              <button type="submit" class="btn btn-danger spark-delete-account" [disabled]="busy() || !form.controls.confirm.value">
+                @if (busy()) { <bs-spinner class="me-1" /> }
+                {{ 'auth.deleteAccount' | t }}
+              </button>
+            </form>
+          </bs-form>
+        </div>
+      </bs-card>
+    </div>
+  `
+		}]
+	}]
+});
+export { SparkAccountOverviewComponent, SparkAccountProfileComponent, SparkChangePasswordComponent, SparkExternalLoginsComponent, SparkPersonalDataComponent, SparkTwoFactorSetupComponent, accountMessages, fieldMessages };
+
+//# sourceMappingURL=mintplayer-ng-spark-auth-account.mjs.map