@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-auth-register.mjs

@@ -0,0 +1,457 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, computed, contentChild, inject, input, output, signal } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { Button } from "@masmarino/gabarit/button";
+import { GbtInput } from "@masmarino/gabarit/input";
+import { Skeleton } from "@masmarino/gabarit/skeleton";
+import { Alert } from "@masmarino/gabarit/alert";
+import { EmptyState } from "@masmarino/gabarit/empty-state";
+import { AUTH_PORT, AuthFooter, AuthFooterLink, AuthPanel, DEFAULT_REGISTER_LABELS, MIN_PASSWORD_LENGTH, USERNAME_PATTERN, accountName, authLabels, classifyRegisterFailure, emailProblem, focusAfterRender, focusNow, passwordProblem, usernameProblem } from "@masmarino/gabarit/auth";
+import { MfaEnrollment } from "@masmarino/gabarit/mfa-enrollment";
+let nextId = 0;
+var AuthRegister = class AuthRegister {
+	auth = inject(AUTH_PORT);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	minPasswordLength = input(MIN_PASSWORD_LENGTH, ...ngDevMode ? [{ debugName: "minPasswordLength" }] : /* istanbul ignore next */ []);
+	usernamePattern = input(USERNAME_PATTERN, ...ngDevMode ? [{ debugName: "usernamePattern" }] : /* istanbul ignore next */ []);
+	registered = output();
+	signIn = output();
+	text = authLabels("register", DEFAULT_REGISTER_LABELS, this.labels);
+	signInLink = contentChild(AuthFooterLink, ...ngDevMode ? [{ debugName: "signInLink" }] : /* istanbul ignore next */ []);
+	id = `gbt-register-${nextId++}`;
+	passwordHint = computed(() => this.text().passwordHint(this.minPasswordLength()), ...ngDevMode ? [{ debugName: "passwordHint" }] : /* istanbul ignore next */ []);
+	skeletonFields = [
+		{
+			name: "username",
+			hint: true
+		},
+		{
+			name: "email",
+			hint: false
+		},
+		{
+			name: "password",
+			hint: true
+		}
+	];
+	registration = signal("loading", ...ngDevMode ? [{ debugName: "registration" }] : /* istanbul ignore next */ []);
+	username = signal("", ...ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []);
+	email = signal("", ...ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []);
+	password = signal("", ...ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	submitting = signal(false, ...ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []);
+	attempted = signal(false, ...ngDevMode ? [{ debugName: "attempted" }] : /* istanbul ignore next */ []);
+	mfaToken = signal(null, ...ngDevMode ? [{ debugName: "mfaToken" }] : /* istanbul ignore next */ []);
+	passkeysAvailable = signal(false, ...ngDevMode ? [{ debugName: "passkeysAvailable" }] : /* istanbul ignore next */ []);
+	heading = computed(() => {
+		if (this.mfaToken() !== null) return this.text().enrollmentHeading;
+		return this.registration() === "open" ? this.text().heading : "";
+	}, ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	intro = computed(() => this.mfaToken() === null && this.registration() === "open" ? this.text().intro : "", ...ngDevMode ? [{ debugName: "intro" }] : /* istanbul ignore next */ []);
+	createdName = computed(() => accountName(this.username()), ...ngDevMode ? [{ debugName: "createdName" }] : /* istanbul ignore next */ []);
+	enrollmentExpired = signal(false, ...ngDevMode ? [{ debugName: "enrollmentExpired" }] : /* istanbul ignore next */ []);
+	createdMessage = computed(() => (this.enrollmentExpired() ? this.text().enrollmentExpired : "") + this.text().createdMessage, ...ngDevMode ? [{ debugName: "createdMessage" }] : /* istanbul ignore next */ []);
+	usernameFieldError = computed(() => {
+		if (!this.attempted()) return null;
+		const problem = usernameProblem(this.username(), this.usernamePattern());
+		return problem === "empty" ? this.text().usernameEmpty : problem === "invalid" ? this.text().usernameInvalid : null;
+	}, ...ngDevMode ? [{ debugName: "usernameFieldError" }] : /* istanbul ignore next */ []);
+	emailFieldError = computed(() => {
+		if (!this.attempted()) return null;
+		const problem = emailProblem(this.email());
+		return problem === "empty" ? this.text().emailEmpty : problem === "invalid" ? this.text().emailInvalid : null;
+	}, ...ngDevMode ? [{ debugName: "emailFieldError" }] : /* istanbul ignore next */ []);
+	passwordFieldError = computed(() => {
+		if (!this.attempted()) return null;
+		const min = this.minPasswordLength();
+		const problem = passwordProblem(this.password(), min);
+		return problem === "empty" ? this.text().passwordEmpty : problem === "too-short" ? this.text().passwordTooShort(min) : null;
+	}, ...ngDevMode ? [{ debugName: "passwordFieldError" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.auth.authConfig().pipe(takeUntilDestroyed()).subscribe({
+			next: (config) => {
+				this.passkeysAvailable.set(config.passkeysAvailable === true);
+				this.opened(config.registrationEnabled === true);
+			},
+			error: () => this.opened(true)
+		});
+	}
+	submit() {
+		if (this.submitting()) return;
+		this.error.set("");
+		this.attempted.set(true);
+		const username = this.username().trim();
+		const email = this.email().trim();
+		const firstWrong = usernameProblem(username, this.usernamePattern()) ? "username" : emailProblem(email) ? "email" : passwordProblem(this.password(), this.minPasswordLength()) ? "password" : null;
+		if (firstWrong) {
+			focusNow(this.host, `#${this.id}-${firstWrong}`);
+			return;
+		}
+		this.submitting.set(true);
+		this.auth.register(username, email, this.password()).subscribe({
+			next: (res) => {
+				this.password.set("");
+				this.submitting.set(false);
+				if (res.token) this.registered.emit();
+				else if (res.mfaToken) this.mfaToken.set(res.mfaToken);
+				else this.fail(this.text().failed, "password");
+			},
+			error: (err) => {
+				this.submitting.set(false);
+				this.failed(classifyRegisterFailure(err));
+			}
+		});
+	}
+	enrolled(token) {
+		this.auth.setToken(token);
+		this.mfaToken.set(null);
+		this.registered.emit();
+	}
+	enrollmentInterrupted(expired) {
+		this.mfaToken.set(null);
+		this.enrollmentExpired.set(expired);
+		this.registration.set("created");
+		focusAfterRender(this.host, this.injector, "h1");
+	}
+	opened(open) {
+		this.registration.set(open ? "open" : "closed");
+		focusAfterRender(this.host, this.injector, open ? `#${this.id}-username` : "h1");
+	}
+	failed(failure) {
+		const text = this.text();
+		switch (failure) {
+			case "disabled":
+				this.password.set("");
+				this.opened(false);
+				return;
+			case "username-invalid":
+				this.fail(text.invalid, "username");
+				return;
+			case "email-invalid":
+				this.fail(text.invalid, "email");
+				return;
+			case "password-weak":
+				this.fail(text.invalid, "password");
+				return;
+			case "invalid":
+				this.fail(text.invalid, "alert");
+				return;
+			case "username-reserved":
+				this.fail(text.reserved, "username");
+				return;
+			case "username-taken":
+				this.fail(text.taken, "username");
+				return;
+			case "email-taken":
+				this.fail(text.taken, "email");
+				return;
+			case "rate-limited":
+				this.fail(text.tooManyAttempts, "password");
+				return;
+			default: this.fail(text.failed, "password");
+		}
+	}
+	fail(message, focusSuffix) {
+		this.error.set(message);
+		focusAfterRender(this.host, this.injector, `#${this.id}-${focusSuffix}`);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AuthRegister,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: AuthRegister,
+		isStandalone: true,
+		selector: "gbt-auth-register",
+		inputs: {
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minPasswordLength: {
+				classPropertyName: "minPasswordLength",
+				publicName: "minPasswordLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			usernamePattern: {
+				classPropertyName: "usernamePattern",
+				publicName: "usernamePattern",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			registered: "registered",
+			signIn: "signIn"
+		},
+		queries: [{
+			propertyName: "signInLink",
+			first: true,
+			predicate: AuthFooterLink,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<gbt-auth-panel [heading]=\"heading()\" [intro]=\"intro()\" [wide]=\"mfaToken() !== null\">\n  <ng-container ngProjectAs=\"[auth-backdrop]\"><ng-content select=\"[auth-backdrop]\" /></ng-container>\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @if (mfaToken() !== null) {\n    <gbt-mfa-enrollment\n      [mfaToken]=\"mfaToken()!\"\n      [passkeysAvailable]=\"passkeysAvailable()\"\n      (completed)=\"enrolled($event)\"\n      (cancelled)=\"enrollmentInterrupted(false)\"\n      (expired)=\"enrollmentInterrupted(true)\"\n    />\n  } @else if (registration() === 'loading') {\n    <span class=\"sr-only\" role=\"status\">{{ text().loading }}</span>\n    <div class=\"gbt-auth-register__loading\" aria-busy=\"true\" aria-hidden=\"true\">\n      <div class=\"gbt-auth-register__loading-title\">\n        <gbt-skeleton width=\"9rem\" height=\"1.5rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-intro\">\n        <gbt-skeleton width=\"85%\" height=\"0.875rem\" />\n        <gbt-skeleton width=\"60%\" height=\"0.875rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-form\">\n        @for (field of skeletonFields; track field.name) {\n          <div class=\"gbt-auth-register__loading-field\">\n            <div class=\"gbt-auth-register__loading-label\">\n              <gbt-skeleton width=\"6rem\" height=\"0.75rem\" />\n            </div>\n            <gbt-skeleton\n              class=\"gbt-auth-register__loading-input\"\n              width=\"100%\"\n              height=\"var(--gbt-auth-register-input-height)\"\n            />\n            @if (field.hint) {\n              <div class=\"gbt-auth-register__loading-hint\">\n                <gbt-skeleton width=\"55%\" height=\"0.625rem\" />\n              </div>\n            }\n          </div>\n        }\n        <gbt-skeleton class=\"gbt-auth-register__loading-submit\" width=\"100%\" height=\"2.75rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-footer\">\n        <gbt-skeleton width=\"12rem\" height=\"0.875rem\" />\n      </div>\n    </div>\n  } @else if (registration() === 'closed') {\n    <gbt-empty-state\n      class=\"gbt-auth-panel__status\"\n      icon=\"lock\"\n      [headingLevel]=\"1\"\n      headingFocusable\n      [heading]=\"text().closedHeading\"\n      [message]=\"text().closedMessage\"\n    >\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        size=\"large\"\n        [text]=\"text().signIn\"\n        (clicked)=\"signIn.emit()\"\n      />\n    </gbt-empty-state>\n  } @else if (registration() === 'created') {\n    <gbt-empty-state\n      class=\"gbt-auth-panel__status gbt-auth-panel__status--success\"\n      icon=\"circle-check\"\n      [headingLevel]=\"1\"\n      headingFocusable\n      [heading]=\"text().createdHeading\"\n      [message]=\"createdMessage()\"\n    >\n      @if (createdName()) {\n        <p class=\"gbt-auth-register__created-name\">\n          {{ text().createdName }} <strong>{{ createdName() }}</strong>\n        </p>\n      }\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        size=\"large\"\n        [text]=\"text().signIn\"\n        (clicked)=\"signIn.emit()\"\n      />\n    </gbt-empty-state>\n  } @else {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\" novalidate>\n      @if (error()) {\n        <gbt-alert\n          [attr.id]=\"id + '-alert'\"\n          tabindex=\"-1\"\n          variant=\"error\"\n          appearance=\"subtle\"\n          iconAlign=\"start\"\n          >{{ error() }}</gbt-alert\n        >\n      }\n\n      <gbt-input\n        [id]=\"id + '-username'\"\n        name=\"username\"\n        autocomplete=\"username\"\n        [label]=\"text().username\"\n        [hint]=\"text().usernameHint\"\n        [errorMessage]=\"usernameFieldError()\"\n        [ngModel]=\"username()\"\n        (ngModelChange)=\"username.set($event)\"\n      />\n\n      <gbt-input\n        [id]=\"id + '-email'\"\n        type=\"email\"\n        name=\"email\"\n        autocomplete=\"email\"\n        [label]=\"text().email\"\n        [errorMessage]=\"emailFieldError()\"\n        [ngModel]=\"email()\"\n        (ngModelChange)=\"email.set($event)\"\n      />\n\n      <gbt-input\n        [id]=\"id + '-password'\"\n        type=\"password\"\n        name=\"password\"\n        autocomplete=\"new-password\"\n        [label]=\"text().password\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [hint]=\"passwordHint()\"\n        [errorMessage]=\"passwordFieldError()\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"password.set($event)\"\n      />\n\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        type=\"submit\"\n        size=\"large\"\n        [text]=\"text().submit\"\n        [loading]=\"submitting()\"\n        [loadingLabel]=\"text().submitting\"\n      />\n    </form>\n\n    @if (signInLink()) {\n      <gbt-auth-footer [text]=\"text().signInPrompt\"\n        ><ng-content select=\"[gbtAuthFooterLink]\"\n      /></gbt-auth-footer>\n    }\n  }\n</gbt-auth-panel>\n",
+		styles: [".gbt-auth-register__loading{display:flex;flex-direction:column;gap:0}.gbt-auth-register__loading gbt-skeleton{display:block}.gbt-auth-register__loading-title{display:flex;align-items:center;justify-content:center;height:1.75rem}.gbt-auth-register__loading-intro{display:flex;flex-direction:column;align-items:center;gap:.4375rem;margin:.25rem 0 1.5rem;padding:.21875rem 0}.gbt-auth-register__loading-form{display:flex;flex-direction:column;gap:1rem}.gbt-auth-register__loading-field{display:flex;flex-direction:column;gap:.375rem}.gbt-auth-register__loading-label{display:flex;align-items:center;height:1rem}.gbt-auth-register__loading-hint{display:flex;align-items:center;height:1.25rem;margin-top:-.125rem}.gbt-auth-register__loading-submit{margin-top:.5rem}.gbt-auth-register__loading-footer{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:3.3125rem;margin:1.5rem 0 -.5rem;padding-top:.5rem;border-top:1px solid var(--gbt-hairline)}:host{--gbt-auth-register-input-height: var(--gbt-control-height-md)}@media(max-width:480px){:host{--gbt-auth-register-input-height: 2.75rem}}.gbt-auth-register__created-name{box-sizing:border-box;width:fit-content;max-width:100%;margin:0 auto 1rem;padding:.5rem .875rem;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:var(--bg-panel);color:var(--text-secondary);font-size:.875rem;line-height:1.4;overflow-wrap:anywhere}.gbt-auth-register__created-name strong{color:var(--text-primary);font-weight:600}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				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.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "gbt-button, a[gbtButton]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"text",
+					"iconName",
+					"ariaLabel",
+					"loading",
+					"loadingLabel",
+					"disabled",
+					"pressed",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaHaspopup",
+					"block",
+					"iconOnly"
+				],
+				outputs: ["clicked"]
+			},
+			{
+				kind: "component",
+				type: GbtInput,
+				selector: "gbt-input",
+				inputs: [
+					"id",
+					"label",
+					"type",
+					"required",
+					"disabled",
+					"placeholder",
+					"errorMessage",
+					"autocomplete",
+					"hint",
+					"hideLabel",
+					"size",
+					"mono",
+					"leadingIcon",
+					"inputmode",
+					"spellcheck",
+					"autocapitalize",
+					"enterkeyhint",
+					"maxlength",
+					"min",
+					"max",
+					"combobox",
+					"showPasswordLabel",
+					"hidePasswordLabel"
+				],
+				outputs: ["committed"]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "gbt-skeleton",
+				inputs: [
+					"variant",
+					"width",
+					"height"
+				]
+			},
+			{
+				kind: "component",
+				type: Alert,
+				selector: "gbt-alert",
+				inputs: [
+					"variant",
+					"dismissible",
+					"closeLabel",
+					"live",
+					"heading",
+					"size",
+					"appearance",
+					"iconAlign"
+				],
+				outputs: ["dismissed"]
+			},
+			{
+				kind: "component",
+				type: AuthFooter,
+				selector: "gbt-auth-footer",
+				inputs: [
+					"text",
+					"href",
+					"linkText"
+				]
+			},
+			{
+				kind: "component",
+				type: AuthPanel,
+				selector: "gbt-auth-panel",
+				inputs: [
+					"heading",
+					"intro",
+					"wide"
+				]
+			},
+			{
+				kind: "component",
+				type: EmptyState,
+				selector: "gbt-empty-state",
+				inputs: [
+					"illustration",
+					"heading",
+					"message",
+					"icon",
+					"size",
+					"tone",
+					"headingLevel",
+					"headingId",
+					"headingFocusable"
+				]
+			},
+			{
+				kind: "component",
+				type: MfaEnrollment,
+				selector: "gbt-mfa-enrollment",
+				inputs: [
+					"mfaToken",
+					"passkeysAvailable",
+					"labels"
+				],
+				outputs: [
+					"completed",
+					"cancelled",
+					"expired"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AuthRegister,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-auth-register",
+			standalone: true,
+			imports: [
+				FormsModule,
+				Button,
+				GbtInput,
+				Skeleton,
+				Alert,
+				AuthFooter,
+				AuthPanel,
+				EmptyState,
+				MfaEnrollment
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<gbt-auth-panel [heading]=\"heading()\" [intro]=\"intro()\" [wide]=\"mfaToken() !== null\">\n  <ng-container ngProjectAs=\"[auth-backdrop]\"><ng-content select=\"[auth-backdrop]\" /></ng-container>\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @if (mfaToken() !== null) {\n    <gbt-mfa-enrollment\n      [mfaToken]=\"mfaToken()!\"\n      [passkeysAvailable]=\"passkeysAvailable()\"\n      (completed)=\"enrolled($event)\"\n      (cancelled)=\"enrollmentInterrupted(false)\"\n      (expired)=\"enrollmentInterrupted(true)\"\n    />\n  } @else if (registration() === 'loading') {\n    <span class=\"sr-only\" role=\"status\">{{ text().loading }}</span>\n    <div class=\"gbt-auth-register__loading\" aria-busy=\"true\" aria-hidden=\"true\">\n      <div class=\"gbt-auth-register__loading-title\">\n        <gbt-skeleton width=\"9rem\" height=\"1.5rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-intro\">\n        <gbt-skeleton width=\"85%\" height=\"0.875rem\" />\n        <gbt-skeleton width=\"60%\" height=\"0.875rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-form\">\n        @for (field of skeletonFields; track field.name) {\n          <div class=\"gbt-auth-register__loading-field\">\n            <div class=\"gbt-auth-register__loading-label\">\n              <gbt-skeleton width=\"6rem\" height=\"0.75rem\" />\n            </div>\n            <gbt-skeleton\n              class=\"gbt-auth-register__loading-input\"\n              width=\"100%\"\n              height=\"var(--gbt-auth-register-input-height)\"\n            />\n            @if (field.hint) {\n              <div class=\"gbt-auth-register__loading-hint\">\n                <gbt-skeleton width=\"55%\" height=\"0.625rem\" />\n              </div>\n            }\n          </div>\n        }\n        <gbt-skeleton class=\"gbt-auth-register__loading-submit\" width=\"100%\" height=\"2.75rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-footer\">\n        <gbt-skeleton width=\"12rem\" height=\"0.875rem\" />\n      </div>\n    </div>\n  } @else if (registration() === 'closed') {\n    <gbt-empty-state\n      class=\"gbt-auth-panel__status\"\n      icon=\"lock\"\n      [headingLevel]=\"1\"\n      headingFocusable\n      [heading]=\"text().closedHeading\"\n      [message]=\"text().closedMessage\"\n    >\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        size=\"large\"\n        [text]=\"text().signIn\"\n        (clicked)=\"signIn.emit()\"\n      />\n    </gbt-empty-state>\n  } @else if (registration() === 'created') {\n    <gbt-empty-state\n      class=\"gbt-auth-panel__status gbt-auth-panel__status--success\"\n      icon=\"circle-check\"\n      [headingLevel]=\"1\"\n      headingFocusable\n      [heading]=\"text().createdHeading\"\n      [message]=\"createdMessage()\"\n    >\n      @if (createdName()) {\n        <p class=\"gbt-auth-register__created-name\">\n          {{ text().createdName }} <strong>{{ createdName() }}</strong>\n        </p>\n      }\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        size=\"large\"\n        [text]=\"text().signIn\"\n        (clicked)=\"signIn.emit()\"\n      />\n    </gbt-empty-state>\n  } @else {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\" novalidate>\n      @if (error()) {\n        <gbt-alert\n          [attr.id]=\"id + '-alert'\"\n          tabindex=\"-1\"\n          variant=\"error\"\n          appearance=\"subtle\"\n          iconAlign=\"start\"\n          >{{ error() }}</gbt-alert\n        >\n      }\n\n      <gbt-input\n        [id]=\"id + '-username'\"\n        name=\"username\"\n        autocomplete=\"username\"\n        [label]=\"text().username\"\n        [hint]=\"text().usernameHint\"\n        [errorMessage]=\"usernameFieldError()\"\n        [ngModel]=\"username()\"\n        (ngModelChange)=\"username.set($event)\"\n      />\n\n      <gbt-input\n        [id]=\"id + '-email'\"\n        type=\"email\"\n        name=\"email\"\n        autocomplete=\"email\"\n        [label]=\"text().email\"\n        [errorMessage]=\"emailFieldError()\"\n        [ngModel]=\"email()\"\n        (ngModelChange)=\"email.set($event)\"\n      />\n\n      <gbt-input\n        [id]=\"id + '-password'\"\n        type=\"password\"\n        name=\"password\"\n        autocomplete=\"new-password\"\n        [label]=\"text().password\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [hint]=\"passwordHint()\"\n        [errorMessage]=\"passwordFieldError()\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"password.set($event)\"\n      />\n\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        type=\"submit\"\n        size=\"large\"\n        [text]=\"text().submit\"\n        [loading]=\"submitting()\"\n        [loadingLabel]=\"text().submitting\"\n      />\n    </form>\n\n    @if (signInLink()) {\n      <gbt-auth-footer [text]=\"text().signInPrompt\"\n        ><ng-content select=\"[gbtAuthFooterLink]\"\n      /></gbt-auth-footer>\n    }\n  }\n</gbt-auth-panel>\n",
+			styles: [".gbt-auth-register__loading{display:flex;flex-direction:column;gap:0}.gbt-auth-register__loading gbt-skeleton{display:block}.gbt-auth-register__loading-title{display:flex;align-items:center;justify-content:center;height:1.75rem}.gbt-auth-register__loading-intro{display:flex;flex-direction:column;align-items:center;gap:.4375rem;margin:.25rem 0 1.5rem;padding:.21875rem 0}.gbt-auth-register__loading-form{display:flex;flex-direction:column;gap:1rem}.gbt-auth-register__loading-field{display:flex;flex-direction:column;gap:.375rem}.gbt-auth-register__loading-label{display:flex;align-items:center;height:1rem}.gbt-auth-register__loading-hint{display:flex;align-items:center;height:1.25rem;margin-top:-.125rem}.gbt-auth-register__loading-submit{margin-top:.5rem}.gbt-auth-register__loading-footer{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:3.3125rem;margin:1.5rem 0 -.5rem;padding-top:.5rem;border-top:1px solid var(--gbt-hairline)}:host{--gbt-auth-register-input-height: var(--gbt-control-height-md)}@media(max-width:480px){:host{--gbt-auth-register-input-height: 2.75rem}}.gbt-auth-register__created-name{box-sizing:border-box;width:fit-content;max-width:100%;margin:0 auto 1rem;padding:.5rem .875rem;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:var(--bg-panel);color:var(--text-secondary);font-size:.875rem;line-height:1.4;overflow-wrap:anywhere}.gbt-auth-register__created-name strong{color:var(--text-primary);font-weight:600}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		minPasswordLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minPasswordLength",
+				required: false
+			}]
+		}],
+		usernamePattern: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "usernamePattern",
+				required: false
+			}]
+		}],
+		registered: [{
+			type: i0.Output,
+			args: ["registered"]
+		}],
+		signIn: [{
+			type: i0.Output,
+			args: ["signIn"]
+		}],
+		signInLink: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => AuthFooterLink), { isSignal: true }]
+		}]
+	}
+});
+export { AuthRegister };
+
+//# sourceMappingURL=masmarino-gabarit-auth-register.mjs.map

package/fesm2022/masmarino-gabarit-auth-register.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-auth-register.mjs","names":[],"sources":["../../../projects/gabarit/auth-register/register.ts","../../../projects/gabarit/auth-register/register.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Injector,\n  computed,\n  contentChild,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core'\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop'\nimport { FormsModule } from '@angular/forms'\nimport { Button } from '@masmarino/gabarit/button'\nimport { GbtInput } from '@masmarino/gabarit/input'\nimport { Skeleton } from '@masmarino/gabarit/skeleton'\nimport { Alert } from '@masmarino/gabarit/alert'\nimport { EmptyState } from '@masmarino/gabarit/empty-state'\nimport { DEFAULT_REGISTER_LABELS, type RegisterLabels, authLabels } from '@masmarino/gabarit/auth'\nimport { AuthFooter, AuthFooterLink } from '@masmarino/gabarit/auth'\nimport { AuthPanel } from '@masmarino/gabarit/auth'\nimport { MfaEnrollment } from '@masmarino/gabarit/mfa-enrollment'\nimport { AUTH_PORT } from '@masmarino/gabarit/auth'\nimport { type RegisterFailure, classifyRegisterFailure } from '@masmarino/gabarit/auth'\nimport {\n  MIN_PASSWORD_LENGTH,\n  USERNAME_PATTERN,\n  accountName,\n  emailProblem,\n  passwordProblem,\n  usernameProblem,\n} from '@masmarino/gabarit/auth'\nimport { focusAfterRender, focusNow } from '@masmarino/gabarit/auth'\n\ntype Registration = 'loading' | 'open' | 'closed' | 'created'\n\nlet nextId = 0\n\n@Component({\n  selector: 'gbt-auth-register',\n  standalone: true,\n  imports: [\n    FormsModule,\n    Button,\n    GbtInput,\n    Skeleton,\n    Alert,\n    AuthFooter,\n    AuthPanel,\n    EmptyState,\n    MfaEnrollment,\n  ],\n  templateUrl: './register.html',\n  styleUrl: './register.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AuthRegister {\n  private readonly auth = inject(AUTH_PORT)\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef)\n  private readonly injector = inject(Injector)\n\n  labels = input<Partial<RegisterLabels>>({})\n  minPasswordLength = input(MIN_PASSWORD_LENGTH)\n  usernamePattern = input<RegExp>(USERNAME_PATTERN)\n  registered = output<void>()\n  signIn = output<void>()\n\n  protected readonly text = authLabels('register', DEFAULT_REGISTER_LABELS, this.labels)\n  protected readonly signInLink = contentChild(AuthFooterLink)\n  protected readonly id = `gbt-register-${nextId++}`\n  protected readonly passwordHint = computed(() =>\n    this.text().passwordHint(this.minPasswordLength()),\n  )\n  protected readonly skeletonFields = [\n    { name: 'username', hint: true },\n    { name: 'email', hint: false },\n    { name: 'password', hint: true },\n  ]\n\n  registration = signal<Registration>('loading')\n  username = signal('')\n  email = signal('')\n  protected password = signal('')\n  error = signal('')\n  submitting = signal(false)\n  private attempted = signal(false)\n\n  protected mfaToken = signal<string | null>(null)\n  protected passkeysAvailable = signal(false)\n\n  protected heading = computed(() => {\n    if (this.mfaToken() !== null) {\n      return this.text().enrollmentHeading\n    }\n    return this.registration() === 'open' ? this.text().heading : ''\n  })\n  protected intro = computed(() =>\n    this.mfaToken() === null && this.registration() === 'open' ? this.text().intro : '',\n  )\n  protected createdName = computed(() => accountName(this.username()))\n  private enrollmentExpired = signal(false)\n  protected createdMessage = computed(\n    () =>\n      (this.enrollmentExpired() ? this.text().enrollmentExpired : '') + this.text().createdMessage,\n  )\n\n  protected usernameFieldError = computed(() => {\n    if (!this.attempted()) {\n      return null\n    }\n    const problem = usernameProblem(this.username(), this.usernamePattern())\n    return problem === 'empty'\n      ? this.text().usernameEmpty\n      : problem === 'invalid'\n        ? this.text().usernameInvalid\n        : null\n  })\n  protected emailFieldError = computed(() => {\n    if (!this.attempted()) {\n      return null\n    }\n    const problem = emailProblem(this.email())\n    return problem === 'empty'\n      ? this.text().emailEmpty\n      : problem === 'invalid'\n        ? this.text().emailInvalid\n        : null\n  })\n  protected passwordFieldError = computed(() => {\n    if (!this.attempted()) {\n      return null\n    }\n    const min = this.minPasswordLength()\n    const problem = passwordProblem(this.password(), min)\n    return problem === 'empty'\n      ? this.text().passwordEmpty\n      : problem === 'too-short'\n        ? this.text().passwordTooShort(min)\n        : null\n  })\n\n  constructor() {\n    this.auth\n      .authConfig()\n      .pipe(takeUntilDestroyed())\n      .subscribe({\n        next: (config) => {\n          this.passkeysAvailable.set(config.passkeysAvailable === true)\n          this.opened(config.registrationEnabled === true)\n        },\n        error: () => this.opened(true),\n      })\n  }\n\n  submit(): void {\n    if (this.submitting()) {\n      return\n    }\n    this.error.set('')\n    this.attempted.set(true)\n    const username = this.username().trim()\n    const email = this.email().trim()\n    const firstWrong = usernameProblem(username, this.usernamePattern())\n      ? 'username'\n      : emailProblem(email)\n        ? 'email'\n        : passwordProblem(this.password(), this.minPasswordLength())\n          ? 'password'\n          : null\n    if (firstWrong) {\n      focusNow(this.host, `#${this.id}-${firstWrong}`)\n      return\n    }\n    this.submitting.set(true)\n    this.auth.register(username, email, this.password()).subscribe({\n      next: (res) => {\n        this.password.set('')\n        this.submitting.set(false)\n        if (res.token) {\n          this.registered.emit()\n        } else if (res.mfaToken) {\n          this.mfaToken.set(res.mfaToken)\n        } else {\n          this.fail(this.text().failed, 'password')\n        }\n      },\n      error: (err: unknown) => {\n        this.submitting.set(false)\n        this.failed(classifyRegisterFailure(err))\n      },\n    })\n  }\n\n  enrolled(token: string): void {\n    this.auth.setToken(token)\n    this.mfaToken.set(null)\n    this.registered.emit()\n  }\n\n  enrollmentInterrupted(expired: boolean): void {\n    this.mfaToken.set(null)\n    this.enrollmentExpired.set(expired)\n    this.registration.set('created')\n    focusAfterRender(this.host, this.injector, 'h1')\n  }\n\n  private opened(open: boolean): void {\n    this.registration.set(open ? 'open' : 'closed')\n    focusAfterRender(this.host, this.injector, open ? `#${this.id}-username` : 'h1')\n  }\n\n  private failed(failure: RegisterFailure): void {\n    const text = this.text()\n    switch (failure) {\n      case 'disabled':\n        this.password.set('')\n        this.opened(false)\n        return\n      case 'username-invalid':\n        this.fail(text.invalid, 'username')\n        return\n      case 'email-invalid':\n        this.fail(text.invalid, 'email')\n        return\n      case 'password-weak':\n        this.fail(text.invalid, 'password')\n        return\n      case 'invalid':\n        this.fail(text.invalid, 'alert')\n        return\n      case 'username-reserved':\n        this.fail(text.reserved, 'username')\n        return\n      case 'username-taken':\n        this.fail(text.taken, 'username')\n        return\n      case 'email-taken':\n        this.fail(text.taken, 'email')\n        return\n      case 'rate-limited':\n        this.fail(text.tooManyAttempts, 'password')\n        return\n      default:\n        this.fail(text.failed, 'password')\n    }\n  }\n\n  private fail(message: string, focusSuffix: string): void {\n    this.error.set(message)\n    focusAfterRender(this.host, this.injector, `#${this.id}-${focusSuffix}`)\n  }\n}\n","<gbt-auth-panel [heading]=\"heading()\" [intro]=\"intro()\" [wide]=\"mfaToken() !== null\">\n  <ng-container ngProjectAs=\"[auth-backdrop]\"><ng-content select=\"[auth-backdrop]\" /></ng-container>\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @if (mfaToken() !== null) {\n    <gbt-mfa-enrollment\n      [mfaToken]=\"mfaToken()!\"\n      [passkeysAvailable]=\"passkeysAvailable()\"\n      (completed)=\"enrolled($event)\"\n      (cancelled)=\"enrollmentInterrupted(false)\"\n      (expired)=\"enrollmentInterrupted(true)\"\n    />\n  } @else if (registration() === 'loading') {\n    <span class=\"sr-only\" role=\"status\">{{ text().loading }}</span>\n    <div class=\"gbt-auth-register__loading\" aria-busy=\"true\" aria-hidden=\"true\">\n      <div class=\"gbt-auth-register__loading-title\">\n        <gbt-skeleton width=\"9rem\" height=\"1.5rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-intro\">\n        <gbt-skeleton width=\"85%\" height=\"0.875rem\" />\n        <gbt-skeleton width=\"60%\" height=\"0.875rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-form\">\n        @for (field of skeletonFields; track field.name) {\n          <div class=\"gbt-auth-register__loading-field\">\n            <div class=\"gbt-auth-register__loading-label\">\n              <gbt-skeleton width=\"6rem\" height=\"0.75rem\" />\n            </div>\n            <gbt-skeleton\n              class=\"gbt-auth-register__loading-input\"\n              width=\"100%\"\n              height=\"var(--gbt-auth-register-input-height)\"\n            />\n            @if (field.hint) {\n              <div class=\"gbt-auth-register__loading-hint\">\n                <gbt-skeleton width=\"55%\" height=\"0.625rem\" />\n              </div>\n            }\n          </div>\n        }\n        <gbt-skeleton class=\"gbt-auth-register__loading-submit\" width=\"100%\" height=\"2.75rem\" />\n      </div>\n      <div class=\"gbt-auth-register__loading-footer\">\n        <gbt-skeleton width=\"12rem\" height=\"0.875rem\" />\n      </div>\n    </div>\n  } @else if (registration() === 'closed') {\n    <gbt-empty-state\n      class=\"gbt-auth-panel__status\"\n      icon=\"lock\"\n      [headingLevel]=\"1\"\n      headingFocusable\n      [heading]=\"text().closedHeading\"\n      [message]=\"text().closedMessage\"\n    >\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        size=\"large\"\n        [text]=\"text().signIn\"\n        (clicked)=\"signIn.emit()\"\n      />\n    </gbt-empty-state>\n  } @else if (registration() === 'created') {\n    <gbt-empty-state\n      class=\"gbt-auth-panel__status gbt-auth-panel__status--success\"\n      icon=\"circle-check\"\n      [headingLevel]=\"1\"\n      headingFocusable\n      [heading]=\"text().createdHeading\"\n      [message]=\"createdMessage()\"\n    >\n      @if (createdName()) {\n        <p class=\"gbt-auth-register__created-name\">\n          {{ text().createdName }} <strong>{{ createdName() }}</strong>\n        </p>\n      }\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        size=\"large\"\n        [text]=\"text().signIn\"\n        (clicked)=\"signIn.emit()\"\n      />\n    </gbt-empty-state>\n  } @else {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\" novalidate>\n      @if (error()) {\n        <gbt-alert\n          [attr.id]=\"id + '-alert'\"\n          tabindex=\"-1\"\n          variant=\"error\"\n          appearance=\"subtle\"\n          iconAlign=\"start\"\n          >{{ error() }}</gbt-alert\n        >\n      }\n\n      <gbt-input\n        [id]=\"id + '-username'\"\n        name=\"username\"\n        autocomplete=\"username\"\n        [label]=\"text().username\"\n        [hint]=\"text().usernameHint\"\n        [errorMessage]=\"usernameFieldError()\"\n        [ngModel]=\"username()\"\n        (ngModelChange)=\"username.set($event)\"\n      />\n\n      <gbt-input\n        [id]=\"id + '-email'\"\n        type=\"email\"\n        name=\"email\"\n        autocomplete=\"email\"\n        [label]=\"text().email\"\n        [errorMessage]=\"emailFieldError()\"\n        [ngModel]=\"email()\"\n        (ngModelChange)=\"email.set($event)\"\n      />\n\n      <gbt-input\n        [id]=\"id + '-password'\"\n        type=\"password\"\n        name=\"password\"\n        autocomplete=\"new-password\"\n        [label]=\"text().password\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [hint]=\"passwordHint()\"\n        [errorMessage]=\"passwordFieldError()\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"password.set($event)\"\n      />\n\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        type=\"submit\"\n        size=\"large\"\n        [text]=\"text().submit\"\n        [loading]=\"submitting()\"\n        [loadingLabel]=\"text().submitting\"\n      />\n    </form>\n\n    @if (signInLink()) {\n      <gbt-auth-footer [text]=\"text().signInPrompt\"\n        ><ng-content select=\"[gbtAuthFooterLink]\"\n      /></gbt-auth-footer>\n    }\n  }\n</gbt-auth-panel>\n"],"mappings":"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"}