valtech-components 2.0.833 → 2.0.834

package/fesm2022/valtech-components.mjs

@@ -53,7 +53,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.833';
+const VERSION = '2.0.834';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -4342,6 +4342,16 @@ const VALTECH_DEFAULT_CONTENT = {
             passwordChangedSuccess: '¡Contraseña actualizada!',
             errorCurrentPasswordWrong: 'La contraseña actual es incorrecta',
             errorSamePassword: 'La nueva contraseña debe ser diferente a la actual',
+            // Set password (cuenta OAuth-only)
+            setPasswordTitle: 'Crear contraseña',
+            setPasswordDescription: 'Tu cuenta usa inicio de sesión social. Crea una contraseña para entrar también con tu correo.',
+            setPasswordSubmit: 'Crear contraseña',
+            setPasswordConfirmTitle: '¿Crear contraseña?',
+            setPasswordConfirmMessage: 'Podrás iniciar sesión con tu correo y contraseña, además de tu cuenta social. No perderás el acceso social.',
+            setPasswordConfirmOk: 'Crear contraseña',
+            setPasswordConfirmCancel: 'Cancelar',
+            passwordSetSuccess: '¡Contraseña creada!',
+            errorPasswordAlreadySet: 'Esta cuenta ya tiene una contraseña.',
             // Legal
             legalPrefix: 'Utilizamos los servicios de',
             legalSuffix: 'para ofrecerte una experiencia segura. Al iniciar sesión, aceptas nuestros',
@@ -4432,6 +4442,16 @@ const VALTECH_DEFAULT_CONTENT = {
             passwordChangedSuccess: 'Password updated!',
             errorCurrentPasswordWrong: 'Current password is incorrect',
             errorSamePassword: 'New password must be different from the current one',
+            // Set password (OAuth-only account)
+            setPasswordTitle: 'Create password',
+            setPasswordDescription: 'Your account uses social sign-in. Create a password to also sign in with your email.',
+            setPasswordSubmit: 'Create password',
+            setPasswordConfirmTitle: 'Create password?',
+            setPasswordConfirmMessage: 'You will be able to sign in with your email and password, in addition to your social account. You will not lose social access.',
+            setPasswordConfirmOk: 'Create password',
+            setPasswordConfirmCancel: 'Cancel',
+            passwordSetSuccess: 'Password created!',
+            errorPasswordAlreadySet: 'This account already has a password.',
             // Legal
             legalPrefix: 'We use the services of',
             legalSuffix: 'to offer you a secure experience. By signing in, you accept our',
@@ -20518,7 +20538,7 @@ function isPublicEndpoint(request, authPrefix) {
         '/logout',
         '/mfa/verify', // Solo durante login
     ];
-    return publicEndpoints.some((endpoint) => request.url.includes(`${authPrefix}${endpoint}`));
+    return publicEndpoints.some(endpoint => request.url.includes(`${authPrefix}${endpoint}`));
 }
 /**
  * Verifica si la request es a un endpoint que NO debe reintentar refresh en 401.
@@ -20527,6 +20547,9 @@ function isNoRefreshEndpoint(request, authPrefix) {
     // Endpoints que no deben intentar refresh en 401:
     // - Públicos: signin, signup, refresh, logout
     // - MFA: verify (durante login), confirm (401 = código incorrecto), disable (401 = contraseña incorrecta)
+    // - change-password: 401 = contraseña actual incorrecta, NO token expirado.
+    //   Sin esta exclusión, el retry tras refresh vuelve a dar 401 y el
+    //   catchError de handle401Error dispara logout.
     const noRefreshEndpoints = [
         '/signin',
         '/signup',
@@ -20535,8 +20558,9 @@ function isNoRefreshEndpoint(request, authPrefix) {
         '/mfa/verify',
         '/mfa/confirm',
         '/mfa/disable',
+        '/change-password',
     ];
-    return noRefreshEndpoints.some((endpoint) => request.url.includes(`${authPrefix}${endpoint}`));
+    return noRefreshEndpoints.some(endpoint => request.url.includes(`${authPrefix}${endpoint}`));
 }
 /**
  * Maneja errores 401 refrescando el token.
@@ -20545,10 +20569,10 @@ function handle401Error(request, next, authService) {
     if (!isRefreshing) {
         isRefreshing = true;
         refreshTokenSubject.next(null);
-        return authService.refreshAccessToken().pipe(switchMap((response) => {
+        return authService.refreshAccessToken().pipe(switchMap(response => {
             refreshTokenSubject.next(response.accessToken);
             return next(addAuthHeader(request, response.accessToken));
-        }), catchError((error) => {
+        }), catchError(error => {
             authService.logout();
             return throwError(() => error);
         }), finalize(() => {
@@ -20556,7 +20580,7 @@ function handle401Error(request, next, authService) {
         }));
     }
     // Esperar a que termine el refresco en curso
-    return refreshTokenSubject.pipe(filter((token) => token !== null), take(1), switchMap((token) => next(addAuthHeader(request, token))));
+    return refreshTokenSubject.pipe(filter((token) => token !== null), take(1), switchMap(token => next(addAuthHeader(request, token))));
 }
 
 /**
@@ -28924,16 +28948,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }], ctorParameters: () => [{ type: i2.ToastController }] });
 
 /**
- * `val-change-password-modal` — modal para que un usuario autenticado cambie
- * su contraseña. Análogo al modal de "recuperar contraseña" del `val-login`,
- * pero para una sesión activa (vista de seguridad / settings).
+ * `val-change-password-modal` — modal de gestión de contraseña para un usuario
+ * autenticado. Análogo al modal de "recuperar contraseña" del `val-login`.
  *
- * Self-contained: inyecta `AuthService` y llama `changePassword()` directo —
- * la app solo controla la visibilidad y reacciona a los eventos.
+ * Es dual-mode: al abrirse consulta `AuthService.checkHasPassword()` y se adapta:
+ *  - **change** — el user ya tiene contraseña → pide actual + nueva →
+ *    `changePassword()`.
+ *  - **set** — el user es OAuth-only (sin contraseña) → pide solo la nueva,
+ *    pide confirmación explícita (no pierde el acceso social, es aditivo) →
+ *    `setPasswordForOAuthUser()`.
  *
- * El gate de apertura lo controla el padre vía `[isOpen]`. El componente emite
- * `changed` al éxito y `dismissed` cuando el user cierra el modal — el padre
- * pone `isOpen` en `false` en ambos casos.
+ * Self-contained: inyecta `AuthService` y llama el endpoint directo — la app
+ * solo controla `[isOpen]` y reacciona a `(changed)` / `(dismissed)`.
  *
  * i18n: usa el namespace compartido `_auth` (mismas claves que `val-login`).
  *
@@ -28947,10 +28973,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 class ChangePasswordModalComponent {
+    /**
+     * Controla la visibilidad del modal. Lo decide el componente padre. Cada vez
+     * que pasa de cerrado a abierto se resuelve el modo (change vs set).
+     */
+    set isOpen(value) {
+        const opening = value && !this._isOpen;
+        this._isOpen = value;
+        if (opening) {
+            this.resolveMode();
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
     constructor() {
-        /** Controla la visibilidad del modal. Lo decide el componente padre. */
-        this.isOpen = false;
-        /** Emite al cambiar la contraseña con éxito. El padre debe cerrar el modal. */
+        this._isOpen = false;
+        /** Emite al cambiar/crear la contraseña con éxito. El padre cierra el modal. */
         this.changed = new EventEmitter();
         /** Emite cuando el user cierra el modal (botón X o backdrop). */
         this.dismissed = new EventEmitter();
@@ -28958,65 +28997,112 @@ class ChangePasswordModalComponent {
         this.toast = inject(ToastService);
         this.i18n = inject(I18nService);
         this.i18nHelper = inject(InputI18nHelper);
+        this.confirmDialog = inject(ConfirmationDialogService);
+        this._mode = signal('loading');
+        /** Modo actual — `loading` mientras se consulta `checkHasPassword()`. */
+        this.mode = this._mode.asReadonly();
         this._formState = signal(ComponentStates.ENABLED);
-        this.formProps = computed(() => this.i18nHelper.resolveForm({
-            nameKey: 'changePasswordTitle',
-            i18nNamespace: '_auth',
-            sections: [
-                {
-                    name: this.t('changePasswordDescription'),
-                    order: 0,
-                    fields: [
+        this.formProps = computed(() => {
+            if (this._mode() === 'set') {
+                return this.i18nHelper.resolveForm({
+                    nameKey: 'setPasswordTitle',
+                    i18nNamespace: '_auth',
+                    sections: [
                         {
-                            type: InputType.PASSWORD,
-                            name: 'currentPassword',
-                            token: 'change-current-password',
-                            labelKey: 'currentPassword',
-                            hint: '',
-                            placeholderKey: 'passwordPlaceholder',
-                            errorKeys: {
-                                required: 'currentPasswordRequired',
-                            },
-                            validators: [Validators.required],
+                            name: this.t('setPasswordDescription'),
                             order: 0,
-                            state: ComponentStates.ENABLED,
-                        },
-                        {
-                            type: InputType.PASSWORD,
-                            name: 'newPassword',
-                            token: 'change-new-password',
-                            labelKey: 'newPassword',
-                            hintKey: 'newPasswordHint',
-                            placeholderKey: 'passwordPlaceholder',
-                            errorKeys: {
-                                required: 'passwordRequired',
-                                minlength: 'passwordMinLength',
-                            },
-                            validators: [Validators.required, Validators.minLength(8)],
-                            order: 1,
-                            state: ComponentStates.ENABLED,
+                            fields: [this.newPasswordField(0)],
                         },
                     ],
+                    actions: {
+                        ...SolidDefaultBlock('', 'submit'),
+                        token: 'set-submit',
+                        textKey: 'setPasswordSubmit',
+                    },
+                    state: this._formState(),
+                });
+            }
+            return this.i18nHelper.resolveForm({
+                nameKey: 'changePasswordTitle',
+                i18nNamespace: '_auth',
+                sections: [
+                    {
+                        name: this.t('changePasswordDescription'),
+                        order: 0,
+                        fields: [
+                            {
+                                type: InputType.PASSWORD,
+                                name: 'currentPassword',
+                                token: 'change-current-password',
+                                labelKey: 'currentPassword',
+                                hint: '',
+                                placeholderKey: 'passwordPlaceholder',
+                                errorKeys: {
+                                    required: 'currentPasswordRequired',
+                                },
+                                validators: [Validators.required],
+                                order: 0,
+                                state: ComponentStates.ENABLED,
+                            },
+                            this.newPasswordField(1),
+                        ],
+                    },
+                ],
+                actions: {
+                    ...SolidDefaultBlock('', 'submit'),
+                    token: 'change-submit',
+                    textKey: 'changePasswordSubmit',
                 },
-            ],
-            actions: {
-                ...SolidDefaultBlock('', 'submit'),
-                token: 'change-submit',
-                textKey: 'changePasswordSubmit',
-            },
-            state: this._formState(),
-        }));
+                state: this._formState(),
+            });
+        });
         addIcons({ closeOutline });
     }
     /** Traduce una clave del namespace `_auth`. */
     t(key) {
         return this.i18n.t(key, '_auth');
     }
+    /** Campo "nueva contraseña" — compartido por ambos modos. */
+    newPasswordField(order) {
+        return {
+            type: InputType.PASSWORD,
+            name: 'newPassword',
+            token: 'change-new-password',
+            labelKey: 'newPassword',
+            hintKey: 'newPasswordHint',
+            placeholderKey: 'passwordPlaceholder',
+            errorKeys: {
+                required: 'passwordRequired',
+                minlength: 'passwordMinLength',
+            },
+            validators: [Validators.required, Validators.minLength(8)],
+            order,
+            state: ComponentStates.ENABLED,
+        };
+    }
     /** Cierre iniciado por el user (X / backdrop). */
     close() {
         this.dismissed.emit();
     }
-    submitHandler(event) {
+    /** Consulta si el user ya tiene contraseña para elegir el modo del modal. */
+    resolveMode() {
+        this._mode.set('loading');
+        this._formState.set(ComponentStates.ENABLED);
+        this.auth.checkHasPassword().subscribe({
+            next: res => this._mode.set(res.hasPassword ? 'change' : 'set'),
+            // Fallback conservador: ante un fallo, asumir flujo de cambio normal.
+            error: () => this._mode.set('change'),
+        });
+    }
+    async submitHandler(event) {
+        if (this._mode() === 'set') {
+            await this.handleSetPassword(event);
+            return;
+        }
+        this.handleChangePassword(event);
+    }
+    /** Flujo normal: el user tiene contraseña y la cambia. */
+    handleChangePassword(event) {
         const currentPassword = event.fields['currentPassword'];
         const newPassword = event.fields['newPassword'];
         if (!currentPassword || !newPassword) {
@@ -29036,6 +29122,39 @@ class ChangePasswordModalComponent {
             },
         });
     }
+    /**
+     * Flujo OAuth-only: el user no tiene contraseña. Antes de crearla pide
+     * confirmación explícita — es un cambio de cuenta, aunque aditivo (conserva
+     * el acceso social).
+     */
+    async handleSetPassword(event) {
+        const newPassword = event.fields['newPassword'];
+        if (!newPassword) {
+            this.showToast(this.t('completeAllFields'));
+            return;
+        }
+        const result = await this.confirmDialog.confirm({
+            title: this.t('setPasswordConfirmTitle'),
+            message: this.t('setPasswordConfirmMessage'),
+            confirmButton: { text: this.t('setPasswordConfirmOk'), role: 'confirm' },
+            cancelButton: { text: this.t('setPasswordConfirmCancel'), role: 'cancel' },
+        });
+        if (!result.confirmed) {
+            return;
+        }
+        this._formState.set(ComponentStates.WORKING);
+        this.auth.setPasswordForOAuthUser(newPassword).subscribe({
+            next: () => {
+                this._formState.set(ComponentStates.ENABLED);
+                this.showToast(this.t('passwordSetSuccess'));
+                this.changed.emit();
+            },
+            error: err => {
+                this._formState.set(ComponentStates.ENABLED);
+                this.showToast(this.resolveError(err));
+            },
+        });
+    }
     /** Mapea los códigos de error del backend a mensajes del namespace `_auth`. */
     resolveError(err) {
         const code = err?.code;
@@ -29044,6 +29163,8 @@ class ChangePasswordModalComponent {
                 return this.t('errorCurrentPasswordWrong');
             case 'AUTHV2_SAME_PASSWORD':
                 return this.t('errorSamePassword');
+            case 'AUTHV2_PASSWORD_ALREADY_SET':
+                return this.t('errorPasswordAlreadySet');
             default:
                 return this.t('errorGeneric');
         }
@@ -29052,11 +29173,11 @@ class ChangePasswordModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"close()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"close()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonModal, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"close()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}\n"] }]
+            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonModal, IonSpinner, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"close()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{
                 type: Input
             }], changed: [{