@anarchitects/auth-angular 0.4.0 → 0.5.0

package/fesm2022/anarchitects-auth-angular-ui.mjs

@@ -1,22 +1,210 @@
 import { AnarchitectsUiForm } from '@anarchitects/forms-angular/ui';
 import * as i0 from '@angular/core';
-import { input, output, signal, ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 
-class AnarchitectsAuthUiLoginForm {
-    layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
-    layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
-    submitted = output();
-    formConfig = signal({
-        id: 'login',
+const readPayloadString = (input, key) => input.payload[key];
+const readStoredString = (key) => localStorage.getItem(key) || undefined;
+const matchFieldsRule = (sourceField, targetField) => ({
+    kind: 'matchFields',
+    sourceField,
+    targetField,
+    message: 'Passwords must match.',
+});
+const LOGIN_FORM_CONFIG = {
+    id: 'login',
+    version: 1,
+    fields: [
+        {
+            name: 'credential',
+            kind: 'string',
+            required: true,
+            minLength: 2,
+            maxLength: 100,
+            ui: { label: 'Email or Username' },
+        },
+        {
+            name: 'password',
+            kind: 'password',
+            required: true,
+            minLength: 6,
+            ui: { label: 'Password' },
+        },
+    ],
+};
+const REGISTER_FORM_CONFIG = {
+    id: 'register',
+    version: 1,
+    fields: [
+        {
+            name: 'userName',
+            kind: 'string',
+            ui: { label: 'Username' },
+            required: false,
+        },
+        { name: 'email', kind: 'email', ui: { label: 'Email' }, required: true },
+        {
+            name: 'password',
+            kind: 'password',
+            ui: { label: 'Password' },
+            required: true,
+        },
+        {
+            name: 'confirmPassword',
+            kind: 'password',
+            ui: { label: 'Confirm Password' },
+            required: true,
+        },
+    ],
+    validationRules: [matchFieldsRule('password', 'confirmPassword')],
+};
+const CHANGE_PASSWORD_FORM_CONFIG = {
+    id: 'change-password',
+    version: 1,
+    fields: [
+        {
+            name: 'currentPassword',
+            kind: 'password',
+            required: true,
+            minLength: 6,
+            ui: { label: 'Current Password' },
+        },
+        {
+            name: 'newPassword',
+            kind: 'password',
+            required: true,
+            minLength: 6,
+            ui: { label: 'New Password' },
+        },
+        {
+            name: 'confirmPassword',
+            kind: 'password',
+            required: true,
+            minLength: 6,
+            ui: { label: 'Confirm Password' },
+        },
+    ],
+    validationRules: [matchFieldsRule('newPassword', 'confirmPassword')],
+};
+const FORGOT_PASSWORD_FORM_CONFIG = {
+    id: 'forgot-password',
+    version: 1,
+    fields: [
+        {
+            name: 'email',
+            kind: 'email',
+            required: true,
+            ui: { label: 'Email' },
+        },
+    ],
+};
+const UPDATE_EMAIL_FORM_CONFIG = {
+    id: 'update-email',
+    version: 1,
+    fields: [
+        {
+            name: 'newEmail',
+            kind: 'email',
+            required: true,
+            ui: { label: 'New Email' },
+        },
+        {
+            name: 'password',
+            kind: 'password',
+            required: true,
+            minLength: 6,
+            ui: { label: 'Password' },
+        },
+    ],
+};
+const LOGOUT_FORM_CONFIG = {
+    id: 'logout',
+    version: 1,
+    fields: [
+        {
+            name: 'refreshToken',
+            kind: 'string',
+            required: false,
+            minLength: 1,
+            ui: { label: 'Refresh Token' },
+        },
+        {
+            name: 'accessToken',
+            kind: 'string',
+            required: false,
+            minLength: 1,
+            ui: { label: 'Access Token (optional)' },
+        },
+    ],
+};
+const REFRESH_TOKENS_FORM_CONFIG = {
+    id: 'refresh-tokens',
+    version: 1,
+    fields: [
+        {
+            name: 'refreshToken',
+            kind: 'string',
+            required: false,
+            minLength: 1,
+            ui: { label: 'Refresh Token' },
+        },
+    ],
+};
+const resolveToken = (input, fallbackToken) => readPayloadString(input, 'token') || fallbackToken;
+const loginFormBridge = {
+    resolveFormConfig: () => LOGIN_FORM_CONFIG,
+    mapSubmission: (input) => ({
+        credential: readPayloadString(input, 'credential'),
+        password: readPayloadString(input, 'password'),
+    }),
+};
+const registerFormBridge = {
+    resolveFormConfig: () => REGISTER_FORM_CONFIG,
+    mapSubmission: (input) => ({
+        userName: readPayloadString(input, 'userName'),
+        email: readPayloadString(input, 'email'),
+        password: readPayloadString(input, 'password'),
+        confirmPassword: readPayloadString(input, 'confirmPassword'),
+    }),
+};
+const activateUserFormBridge = {
+    resolveFormConfig: (context) => ({
+        id: 'activate-user',
         version: 1,
         fields: [
             {
-                name: 'credential',
+                name: 'token',
                 kind: 'string',
-                required: true,
-                minLength: 2,
-                maxLength: 100,
-                ui: { label: 'Email or Username' },
+                required: !context?.token,
+                minLength: 1,
+                ui: { label: 'Activation Token' },
+            },
+        ],
+    }),
+    mapSubmission: (input, context) => {
+        const token = resolveToken(input, context?.token);
+        if (!token) {
+            return undefined;
+        }
+        return { token };
+    },
+};
+const forgotPasswordFormBridge = {
+    resolveFormConfig: () => FORGOT_PASSWORD_FORM_CONFIG,
+    mapSubmission: (input) => ({
+        email: readPayloadString(input, 'email'),
+    }),
+};
+const resetPasswordFormBridge = {
+    resolveFormConfig: (context) => ({
+        id: 'reset-password',
+        version: 1,
+        fields: [
+            {
+                name: 'token',
+                kind: 'string',
+                required: !context?.token,
+                minLength: 1,
+                ui: { label: 'Reset Token' },
             },
             {
                 name: 'password',
@@ -25,13 +213,100 @@ class AnarchitectsAuthUiLoginForm {
                 minLength: 6,
                 ui: { label: 'Password' },
             },
+            {
+                name: 'confirmPassword',
+                kind: 'password',
+                required: true,
+                minLength: 6,
+                ui: { label: 'Confirm Password' },
+            },
+        ],
+        validationRules: [matchFieldsRule('password', 'confirmPassword')],
+    }),
+    mapSubmission: (input, context) => {
+        const token = resolveToken(input, context?.token);
+        if (!token) {
+            return undefined;
+        }
+        return {
+            token,
+            password: readPayloadString(input, 'password'),
+            confirmPassword: readPayloadString(input, 'confirmPassword'),
+        };
+    },
+};
+const verifyEmailFormBridge = {
+    resolveFormConfig: (context) => ({
+        id: 'verify-email',
+        version: 1,
+        fields: [
+            {
+                name: 'token',
+                kind: 'string',
+                required: !context?.token,
+                minLength: 1,
+                ui: { label: 'Verification Token' },
+            },
         ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    }),
+    mapSubmission: (input, context) => {
+        const token = resolveToken(input, context?.token);
+        if (!token) {
+            return undefined;
+        }
+        return { token };
+    },
+};
+const changePasswordFormBridge = {
+    resolveFormConfig: () => CHANGE_PASSWORD_FORM_CONFIG,
+    mapSubmission: (input) => ({
+        currentPassword: readPayloadString(input, 'currentPassword'),
+        newPassword: readPayloadString(input, 'newPassword'),
+        confirmPassword: readPayloadString(input, 'confirmPassword'),
+    }),
+};
+const updateEmailFormBridge = {
+    resolveFormConfig: () => UPDATE_EMAIL_FORM_CONFIG,
+    mapSubmission: (input) => ({
+        newEmail: readPayloadString(input, 'newEmail'),
+        password: readPayloadString(input, 'password'),
+    }),
+};
+const logoutFormBridge = {
+    resolveFormConfig: () => LOGOUT_FORM_CONFIG,
+    mapSubmission: (input) => {
+        const refreshToken = readPayloadString(input, 'refreshToken') || readStoredString('refreshToken');
+        const accessToken = readPayloadString(input, 'accessToken') || readStoredString('accessToken');
+        if (!refreshToken) {
+            return undefined;
+        }
+        return {
+            refreshToken,
+            ...(accessToken ? { accessToken } : {}),
+        };
+    },
+};
+const refreshTokensFormBridge = {
+    resolveFormConfig: () => REFRESH_TOKENS_FORM_CONFIG,
+    mapSubmission: (input) => {
+        const refreshToken = readPayloadString(input, 'refreshToken') || readStoredString('refreshToken');
+        if (!refreshToken) {
+            return undefined;
+        }
+        return { refreshToken };
+    },
+};
+
+class AnarchitectsAuthUiLoginForm {
+    layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
+    submitted = output();
+    formConfig = computed(() => loginFormBridge.resolveFormConfig(), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        this.submitted.emit({
-            credential: input.payload['credential'],
-            password: input.payload['password'],
-        });
+        const dto = loginFormBridge.mapSubmission(input);
+        if (dto) {
+            this.submitted.emit(dto);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiLoginForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiLoginForm, isStandalone: true, selector: "anarchitects-auth-ui-login-form", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-login-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-login-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -48,46 +323,12 @@ class AnarchitectsAuthUiRegisterForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = signal({
-        id: 'register',
-        version: 1,
-        fields: [
-            {
-                name: 'userName',
-                kind: 'string',
-                ui: { label: 'Username' },
-                required: false,
-            },
-            { name: 'email', kind: 'email', ui: { label: 'Email' }, required: true },
-            {
-                name: 'password',
-                kind: 'password',
-                ui: { label: 'Password' },
-                required: true,
-            },
-            {
-                name: 'confirmPassword',
-                kind: 'password',
-                ui: { label: 'Confirm Password' },
-                required: true,
-            },
-        ],
-        validationRules: [
-            {
-                kind: 'matchFields',
-                sourceField: 'password',
-                targetField: 'confirmPassword',
-                message: 'Passwords must match.',
-            },
-        ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => registerFormBridge.resolveFormConfig(), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        this.submitted.emit({
-            userName: input.payload['userName'],
-            email: input.payload['email'],
-            password: input.payload['password'],
-            confirmPassword: input.payload['confirmPassword'],
-        });
+        const dto = registerFormBridge.mapSubmission(input);
+        if (dto) {
+            this.submitted.emit(dto);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiRegisterForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiRegisterForm, isStandalone: true, selector: "anarchitects-auth-ui-register-form", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-register-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-register-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -105,25 +346,14 @@ class AnarchitectsAuthUiActivateUserForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = computed(() => ({
-        id: 'activate-user',
-        version: 1,
-        fields: [
-            {
-                name: 'token',
-                kind: 'string',
-                required: !this.token(),
-                minLength: 1,
-                ui: { label: 'Activation Token' },
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => activateUserFormBridge.resolveFormConfig({ token: this.token() }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        const token = input.payload['token'] || this.token();
-        if (!token) {
-            return;
+        const dto = activateUserFormBridge.mapSubmission(input, {
+            token: this.token(),
+        });
+        if (dto) {
+            this.submitted.emit(dto);
         }
-        this.submitted.emit({ token });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiActivateUserForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiActivateUserForm, isStandalone: true, selector: "anarchitects-auth-ui-activate-user-form", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-activate-user-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-activate-user-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -140,22 +370,12 @@ class AnarchitectsAuthUiForgotPasswordForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = signal({
-        id: 'forgot-password',
-        version: 1,
-        fields: [
-            {
-                name: 'email',
-                kind: 'email',
-                required: true,
-                ui: { label: 'Email' },
-            },
-        ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => forgotPasswordFormBridge.resolveFormConfig(), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        this.submitted.emit({
-            email: input.payload['email'],
-        });
+        const dto = forgotPasswordFormBridge.mapSubmission(input);
+        if (dto) {
+            this.submitted.emit(dto);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiForgotPasswordForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiForgotPasswordForm, isStandalone: true, selector: "anarchitects-auth-ui-forgot-password-form", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-forgot-password-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-forgot-password-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -173,51 +393,14 @@ class AnarchitectsAuthUiResetPasswordForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = computed(() => ({
-        id: 'reset-password',
-        version: 1,
-        fields: [
-            {
-                name: 'token',
-                kind: 'string',
-                required: !this.token(),
-                minLength: 1,
-                ui: { label: 'Reset Token' },
-            },
-            {
-                name: 'password',
-                kind: 'password',
-                required: true,
-                minLength: 6,
-                ui: { label: 'Password' },
-            },
-            {
-                name: 'confirmPassword',
-                kind: 'password',
-                required: true,
-                minLength: 6,
-                ui: { label: 'Confirm Password' },
-            },
-        ],
-        validationRules: [
-            {
-                kind: 'matchFields',
-                sourceField: 'password',
-                targetField: 'confirmPassword',
-                message: 'Passwords must match.',
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => resetPasswordFormBridge.resolveFormConfig({ token: this.token() }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        const token = input.payload['token'] || this.token();
-        if (!token) {
-            return;
-        }
-        this.submitted.emit({
-            token,
-            password: input.payload['password'],
-            confirmPassword: input.payload['confirmPassword'],
+        const dto = resetPasswordFormBridge.mapSubmission(input, {
+            token: this.token(),
         });
+        if (dto) {
+            this.submitted.emit(dto);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiResetPasswordForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiResetPasswordForm, isStandalone: true, selector: "anarchitects-auth-ui-reset-password-form", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-reset-password-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-reset-password-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -235,25 +418,14 @@ class AnarchitectsAuthUiVerifyEmailForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = computed(() => ({
-        id: 'verify-email',
-        version: 1,
-        fields: [
-            {
-                name: 'token',
-                kind: 'string',
-                required: !this.token(),
-                minLength: 1,
-                ui: { label: 'Verification Token' },
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => verifyEmailFormBridge.resolveFormConfig({ token: this.token() }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        const token = input.payload['token'] || this.token();
-        if (!token) {
-            return;
+        const dto = verifyEmailFormBridge.mapSubmission(input, {
+            token: this.token(),
+        });
+        if (dto) {
+            this.submitted.emit(dto);
         }
-        this.submitted.emit({ token });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiVerifyEmailForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiVerifyEmailForm, isStandalone: true, selector: "anarchitects-auth-ui-verify-email-form", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-verify-email-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-verify-email-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -270,47 +442,12 @@ class AnarchitectsAuthUiChangePasswordForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = signal({
-        id: 'change-password',
-        version: 1,
-        fields: [
-            {
-                name: 'currentPassword',
-                kind: 'password',
-                required: true,
-                minLength: 6,
-                ui: { label: 'Current Password' },
-            },
-            {
-                name: 'newPassword',
-                kind: 'password',
-                required: true,
-                minLength: 6,
-                ui: { label: 'New Password' },
-            },
-            {
-                name: 'confirmPassword',
-                kind: 'password',
-                required: true,
-                minLength: 6,
-                ui: { label: 'Confirm Password' },
-            },
-        ],
-        validationRules: [
-            {
-                kind: 'matchFields',
-                sourceField: 'newPassword',
-                targetField: 'confirmPassword',
-                message: 'Passwords must match.',
-            },
-        ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => changePasswordFormBridge.resolveFormConfig(), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        this.submitted.emit({
-            currentPassword: input.payload['currentPassword'],
-            newPassword: input.payload['newPassword'],
-            confirmPassword: input.payload['confirmPassword'],
-        });
+        const dto = changePasswordFormBridge.mapSubmission(input);
+        if (dto) {
+            this.submitted.emit(dto);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiChangePasswordForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiChangePasswordForm, isStandalone: true, selector: "anarchitects-auth-ui-change-password-form", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-change-password-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-change-password-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -327,30 +464,12 @@ class AnarchitectsAuthUiUpdateEmailForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = signal({
-        id: 'update-email',
-        version: 1,
-        fields: [
-            {
-                name: 'newEmail',
-                kind: 'email',
-                required: true,
-                ui: { label: 'New Email' },
-            },
-            {
-                name: 'password',
-                kind: 'password',
-                required: true,
-                minLength: 6,
-                ui: { label: 'Password' },
-            },
-        ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => updateEmailFormBridge.resolveFormConfig(), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        this.submitted.emit({
-            newEmail: input.payload['newEmail'],
-            password: input.payload['password'],
-        });
+        const dto = updateEmailFormBridge.mapSubmission(input);
+        if (dto) {
+            this.submitted.emit(dto);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiUpdateEmailForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiUpdateEmailForm, isStandalone: true, selector: "anarchitects-auth-ui-update-email-form", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-update-email-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-update-email-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -367,40 +486,12 @@ class AnarchitectsAuthUiLogoutForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = signal({
-        id: 'logout',
-        version: 1,
-        fields: [
-            {
-                name: 'refreshToken',
-                kind: 'string',
-                required: false,
-                minLength: 1,
-                ui: { label: 'Refresh Token' },
-            },
-            {
-                name: 'accessToken',
-                kind: 'string',
-                required: false,
-                minLength: 1,
-                ui: { label: 'Access Token (optional)' },
-            },
-        ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => logoutFormBridge.resolveFormConfig(), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        const refreshToken = input.payload['refreshToken'] ||
-            localStorage.getItem('refreshToken') ||
-            undefined;
-        const accessToken = input.payload['accessToken'] ||
-            localStorage.getItem('accessToken') ||
-            undefined;
-        if (!refreshToken) {
-            return;
+        const dto = logoutFormBridge.mapSubmission(input);
+        if (dto) {
+            this.submitted.emit(dto);
         }
-        this.submitted.emit({
-            refreshToken,
-            ...(accessToken ? { accessToken } : {}),
-        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiLogoutForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiLogoutForm, isStandalone: true, selector: "anarchitects-auth-ui-logout-form", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-logout-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-logout-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -417,27 +508,12 @@ class AnarchitectsAuthUiRefreshTokensForm {
     layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
     layoutOptions = input({}, ...(ngDevMode ? [{ debugName: "layoutOptions" }] : []));
     submitted = output();
-    formConfig = signal({
-        id: 'refresh-tokens',
-        version: 1,
-        fields: [
-            {
-                name: 'refreshToken',
-                kind: 'string',
-                required: false,
-                minLength: 1,
-                ui: { label: 'Refresh Token' },
-            },
-        ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => refreshTokensFormBridge.resolveFormConfig(), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     onSubmitted(input) {
-        const refreshToken = input.payload['refreshToken'] ||
-            localStorage.getItem('refreshToken') ||
-            undefined;
-        if (!refreshToken) {
-            return;
+        const dto = refreshTokensFormBridge.mapSubmission(input);
+        if (dto) {
+            this.submitted.emit(dto);
         }
-        this.submitted.emit({ refreshToken });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AnarchitectsAuthUiRefreshTokensForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: AnarchitectsAuthUiRefreshTokensForm, isStandalone: true, selector: "anarchitects-auth-ui-refresh-tokens-form", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, layoutOptions: { classPropertyName: "layoutOptions", publicName: "layoutOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, host: { attributes: { "attr.data-anx-component": "\"auth-ui-refresh-tokens-form\"" }, classAttribute: "anx-domain-component anx-auth-ui-refresh-tokens-form anx-stack" }, ngImport: i0, template: "<anarchitects-forms-ui-form\n  [config]=\"formConfig()\"\n  [layout]=\"layout()\"\n  [layoutOptions]=\"layoutOptions()\"\n  (submitted)=\"onSubmitted($event)\"\n>\n  <ng-content select=\"ng-template[anxTemplate]\"></ng-content>\n  <ng-content select=\"[anxSlot]\"></ng-content>\n</anarchitects-forms-ui-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: AnarchitectsUiForm, selector: "anarchitects-forms-ui-form", inputs: ["config", "runtimeValidators", "layout", "layoutOptions"], outputs: ["submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });