@dereekb/dbx-firebase 13.12.2 → 13.12.4

package/fesm2022/dereekb-dbx-firebase.mjs

@@ -15,7 +15,7 @@ import * as i1 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { firebaseAuthErrorToReadableError, FIREBASE_AUTH_PASSWORD_MIN_LENGTH, FirebaseDevelopmentFunctions, ScheduledFunctionDevelopmentFunctionTypeEnum, clientFirebaseFirestoreContextFactory, SystemStateFirestoreCollections, NotificationFirestoreCollections, StorageFileFirestoreCollections, FIREBASE_DEVELOPMENT_FUNCTIONS_MAP_KEY, iterationQueryDocChangeWatcher, firebaseQuerySnapshotAccumulator, firebaseQueryItemAccumulator, firestoreModelKeysFromDocuments, firestoreModelIdsFromDocuments, documentReferencesFromDocuments, getDocumentSnapshots, getDataFromDocumentSnapshots, latestSnapshotsFromDocuments, dataFromDocumentSnapshots, loadDocumentsForKeys, loadDocumentsForDocumentReferences, loadDocumentsForIds, firestoreModelKeyCollectionTypePair, buildFirebaseCollectionTypeModelTypeMap, firestoreModelId, flatFirestoreModelKey, twoWayFlatFirestoreModelKey, FirestoreAccessorStreamMode, firestoreModelIdsFromKey, firestoreModelKeyPartPairs, firestoreModelKeyPairObject, documentDataWithIdAndKey, isClientFirebaseError, FIRESTORE_PERMISSION_DENIED_ERROR_CODE, inferKeyFromTwoWayFlatFirestoreModelKey, firestoreModelKeyParentKey, AppNotificationTemplateTypeInfoRecordService, NotificationFunctions, unreadNotificationItems, StorageFileFunctions, firestoreModelKey, storageFileIdentity, clientFirebaseStorageContextFactory } from '@dereekb/firebase';
 import * as i1$2 from '@dereekb/dbx-form';
-import { AbstractSyncForgeFormDirective, dbxForgeEmailField, DbxForgeFormComponentImportsModule, dbxForgeFormComponentProviders, DBX_FORGE_FORM_COMPONENT_TEMPLATE, AbstractConfigAsyncForgeFormDirective, dbxForgeUsernameLoginField, dbxForgeTextPasswordField, dbxForgeTextVerifyPasswordField, DbxActionFormDirective, DbxFormSourceDirective, dbxForgePickableChipField, filterPickableItemFieldValuesByLabel } from '@dereekb/dbx-form';
+import { AbstractSyncForgeFormDirective, dbxForgeEmailField, DbxForgeFormComponentImportsModule, dbxForgeFormComponentProviders, DBX_FORGE_FORM_COMPONENT_TEMPLATE, AbstractConfigAsyncForgeFormDirective, dbxForgeUsernameLoginField, dbxForgeTextPasswordField, dbxForgeTextVerifyPasswordField, DbxActionFormDirective, DbxFormSourceDirective, dbxForgeTextPasswordWithVerifyField, dbxForgeTextField, dbxForgePickableChipField, filterPickableItemFieldValuesByLabel } from '@dereekb/dbx-form';
 import { NgTemplateOutlet, DatePipe } from '@angular/common';
 import * as i1$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -1889,27 +1889,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }] });
 
 /**
- * Forge-based form component for completing a password reset, containing new password and verify password fields.
+ * Forge-based form component for completing a password reset.
+ *
+ * Renders New Password + Verify Password fields, and optionally a reset code field when {@link DbxFirebasePasswordResetFormConfig.showOobCodeInput} is true.
  */
-class DbxFirebasePasswordResetFormComponent extends AbstractSyncForgeFormDirective {
-    formConfig = {
-        fields: [
-            dbxForgeTextPasswordField({ minLength: FIREBASE_AUTH_PASSWORD_MIN_LENGTH }),
-            {
-                ...dbxForgeTextVerifyPasswordField(),
-                validators: [
-                    {
-                        type: 'custom',
-                        expression: 'fieldValue === formValue.password',
-                        kind: 'passwordMismatch'
-                    }
-                ],
-                validationMessages: {
-                    passwordMismatch: 'The passwords do not match.'
-                }
+class DbxFirebasePasswordResetFormComponent extends AbstractConfigAsyncForgeFormDirective {
+    formConfig$ = this.currentConfig$.pipe(map((config) => {
+        const showOobCodeInput = config?.showOobCodeInput ?? false;
+        const [passwordField, verifyPasswordField] = dbxForgeTextPasswordWithVerifyField({
+            password: {
+                label: 'New Password',
+                minLength: FIREBASE_AUTH_PASSWORD_MIN_LENGTH
             }
-        ]
-    };
+        });
+        const fields = [
+            ...(showOobCodeInput
+                ? [
+                    dbxForgeTextField({
+                        key: 'oobCode',
+                        label: 'Reset Code',
+                        required: true
+                    })
+                ]
+                : []),
+            passwordField,
+            verifyPasswordField
+        ];
+        return { fields };
+    }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebasePasswordResetFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFirebasePasswordResetFormComponent, isStandalone: true, selector: "dbx-firebase-password-reset-form", providers: dbxForgeFormComponentProviders(), usesInheritance: true, ngImport: i0, template: "<dbx-forge></dbx-forge>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: i1$2.DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1928,19 +1935,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 /**
  * Standalone component for completing a password reset.
  *
- * Reads an `oobCode` from input and presents a new password form.
+ * Reads an optional `oobCode` from input and presents a new password form.
+ * When no `oobCode` is supplied, the form additionally prompts the user to enter the reset code.
  * On submit, calls {@link DbxFirebaseAuthService.completePasswordReset} to finalize the reset.
  */
 class DbxFirebasePasswordResetComponent {
     dbxFirebaseAuthService = inject(DbxFirebaseAuthService);
     /**
      * The oobCode from the password reset email link.
+     *
+     * When omitted, the form prompts the user to enter the reset code.
      */
-    oobCode = input.required(...(ngDevMode ? [{ debugName: "oobCode" }] : /* istanbul ignore next */ []));
+    oobCode = input(...(ngDevMode ? [undefined, { debugName: "oobCode" }] : /* istanbul ignore next */ []));
     resetCompleteSignal = signal(false, ...(ngDevMode ? [{ debugName: "resetCompleteSignal" }] : /* istanbul ignore next */ []));
+    formConfigSignal = computed(() => ({
+        showOobCodeInput: !this.oobCode()
+    }), ...(ngDevMode ? [{ debugName: "formConfigSignal" }] : /* istanbul ignore next */ []));
     handleResetAction = (value) => {
+        const oobCode = this.oobCode() || value.oobCode;
         return from(this.dbxFirebaseAuthService.completePasswordReset({
-            oobCode: this.oobCode(),
+            oobCode: oobCode,
             newPassword: value.password
         })).pipe(tap({
             next: () => this.resetCompleteSignal.set(true),
@@ -1950,12 +1964,12 @@ class DbxFirebasePasswordResetComponent {
         }));
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebasePasswordResetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFirebasePasswordResetComponent, isStandalone: true, selector: "dbx-firebase-password-reset", inputs: { oobCode: { classPropertyName: "oobCode", publicName: "oobCode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-firebase-password-reset\" aria-live=\"polite\">\n  @if (resetCompleteSignal()) {\n    <div role=\"status\">\n      <p class=\"dbx-hint\">Your password has been reset successfully. You can now log in with your new password.</p>\n    </div>\n  } @else {\n    <ng-container dbxAction [dbxActionHandler]=\"handleResetAction\">\n      <dbx-firebase-password-reset-form dbxActionForm></dbx-firebase-password-reset-form>\n      <div class=\"dbx-flex\">\n        <dbx-button class=\"dbx-button-wide\" text=\"Reset Password\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      </div>\n      <dbx-error dbxActionError></dbx-error>\n    </ng-container>\n  }\n</div>\n", dependencies: [{ kind: "component", type: DbxFirebasePasswordResetFormComponent, selector: "dbx-firebase-password-reset-form" }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFirebasePasswordResetComponent, isStandalone: true, selector: "dbx-firebase-password-reset", inputs: { oobCode: { classPropertyName: "oobCode", publicName: "oobCode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-firebase-password-reset\" aria-live=\"polite\">\n  @if (resetCompleteSignal()) {\n    <div role=\"status\">\n      <p class=\"dbx-hint\">Your password has been reset successfully. You can now log in with your new password.</p>\n      <ng-content select=\"[success]\"></ng-content>\n    </div>\n  } @else {\n    <ng-container dbxAction [dbxActionHandler]=\"handleResetAction\">\n      <dbx-firebase-password-reset-form dbxActionForm [config]=\"formConfigSignal()\"></dbx-firebase-password-reset-form>\n      <div class=\"dbx-flex\">\n        <dbx-button class=\"dbx-button-wide\" text=\"Reset Password\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      </div>\n      <dbx-error dbxActionError>\n        <ng-content select=\"[error]\"></ng-content>\n      </dbx-error>\n      <ng-content></ng-content>\n    </ng-container>\n  }\n</div>\n", dependencies: [{ kind: "component", type: DbxFirebasePasswordResetFormComponent, selector: "dbx-firebase-password-reset-form" }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "directive", type: DbxActionErrorDirective, selector: "[dbxActionError]" }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebasePasswordResetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-firebase-password-reset', imports: [DbxFirebasePasswordResetFormComponent, DbxActionModule, DbxButtonComponent, DbxErrorComponent, DbxActionFormDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-firebase-password-reset\" aria-live=\"polite\">\n  @if (resetCompleteSignal()) {\n    <div role=\"status\">\n      <p class=\"dbx-hint\">Your password has been reset successfully. You can now log in with your new password.</p>\n    </div>\n  } @else {\n    <ng-container dbxAction [dbxActionHandler]=\"handleResetAction\">\n      <dbx-firebase-password-reset-form dbxActionForm></dbx-firebase-password-reset-form>\n      <div class=\"dbx-flex\">\n        <dbx-button class=\"dbx-button-wide\" text=\"Reset Password\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      </div>\n      <dbx-error dbxActionError></dbx-error>\n    </ng-container>\n  }\n</div>\n" }]
-        }], propDecorators: { oobCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "oobCode", required: true }] }] } });
+            args: [{ selector: 'dbx-firebase-password-reset', imports: [DbxFirebasePasswordResetFormComponent, DbxActionModule, DbxButtonComponent, DbxErrorComponent, DbxActionErrorDirective, DbxActionFormDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-firebase-password-reset\" aria-live=\"polite\">\n  @if (resetCompleteSignal()) {\n    <div role=\"status\">\n      <p class=\"dbx-hint\">Your password has been reset successfully. You can now log in with your new password.</p>\n      <ng-content select=\"[success]\"></ng-content>\n    </div>\n  } @else {\n    <ng-container dbxAction [dbxActionHandler]=\"handleResetAction\">\n      <dbx-firebase-password-reset-form dbxActionForm [config]=\"formConfigSignal()\"></dbx-firebase-password-reset-form>\n      <div class=\"dbx-flex\">\n        <dbx-button class=\"dbx-button-wide\" text=\"Reset Password\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      </div>\n      <dbx-error dbxActionError>\n        <ng-content select=\"[error]\"></ng-content>\n      </dbx-error>\n      <ng-content></ng-content>\n    </ng-container>\n  }\n</div>\n" }]
+        }], propDecorators: { oobCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "oobCode", required: false }] }] } });
 
 /**
  * Renders the configured terms of service component via dynamic injection from the login service.