Add feature `When the user change personal info, the confirmation modal appear`

modules/account/src/Volo.Abp.Account.Application.Contracts/Volo/Abp/Account/Localization/Resources/en.json

@@ -34,6 +34,8 @@
     "DisplayName:PhoneNumber": "Phone number",
     "PersonalSettings": "Personal settings",
     "PersonalSettingsSaved": "Personal settings saved",
+    "PersonalSettingsChangedConfirmationModalTitle": "Personal info changed",
+    "PersonalSettingsChangedConfirmationModalDescription": "If you want to apply these changes, you have to login. Do you want to log out?",
     "PasswordChanged": "Password changed",
     "NewPasswordConfirmFailed": "Please confirm the new password.",
     "Manage": "Manage",

modules/account/src/Volo.Abp.Account.Application.Contracts/Volo/Abp/Account/Localization/Resources/tr.json

@@ -34,6 +34,8 @@
     "DisplayName:PhoneNumber": "Telefon numarası",
     "PersonalSettings": "Kişisel ayarlar",
     "PersonalSettingsSaved": "Kişisel ayarlar kaydedildi",
+    "PersonalSettingsChangedConfirmationModalTitle": "Personal info changed",
+    "PersonalSettingsChangedConfirmationModalDescription": "If you want to apply these changes, you have to login. Do you want to log out?",
     "PasswordChanged": "Şifre değiştirildi",
     "NewPasswordConfirmFailed": "Lütfen yeni şifreyi onaylayın.",
     "Manage": "Manage",

npm/ng-packs/packages/account/src/lib/account.module.ts

@@ -15,6 +15,7 @@ import { accountConfigOptionsFactory } from './utils/factory-utils';
 import { AuthenticationFlowGuard } from './guards/authentication-flow.guard';
 import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
 import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
+import { RE_LOGIN_CONFIRMATION_TOKEN } from './tokens';
 
 const declarations = [
   LoginComponent,
@@ -49,6 +50,10 @@ export class AccountModule {
           useFactory: accountConfigOptionsFactory,
           deps: [ACCOUNT_CONFIG_OPTIONS],
         },
+        {
+          provide: RE_LOGIN_CONFIRMATION_TOKEN,
+          useValue: options.isPersonalSettingsChangedConfirmationActive ?? true,
+        },
       ],
     };
   }

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts

@@ -1,10 +1,12 @@
-import { ProfileService } from '@abp/ng.account.core/proxy';
-import { ToasterService } from '@abp/ng.theme.shared';
-import { Component, OnInit } from '@angular/core';
+import { ProfileDto, ProfileService } from '@abp/ng.account.core/proxy';
+import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { finalize } from 'rxjs/operators';
+import { finalize, filter } from 'rxjs/operators';
 import { Account } from '../../models/account';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
+import { AuthService } from '@abp/ng.core';
+import { RE_LOGIN_CONFIRMATION_TOKEN } from '../../tokens';
 
 const { maxLength, required, email } = Validators;
 
@@ -22,12 +24,17 @@ export class PersonalSettingsComponent
   form: FormGroup;
 
   inProgress: boolean;
+  private profile: ProfileDto;
 
   constructor(
     private fb: FormBuilder,
     private toasterService: ToasterService,
     private profileService: ProfileService,
     private manageProfileState: ManageProfileStateService,
+    private readonly authService: AuthService,
+    private confirmationService: ConfirmationService,
+    @Inject(RE_LOGIN_CONFIRMATION_TOKEN)
+    private isPersonalSettingsChangedConfirmationActive: boolean,
   ) {}
 
   ngOnInit() {
@@ -35,18 +42,19 @@ export class PersonalSettingsComponent
   }
 
   buildForm() {
-    const profile = this.manageProfileState.getProfile();
+    this.profile = this.manageProfileState.getProfile();
     this.form = this.fb.group({
-      userName: [profile.userName, [required, maxLength(256)]],
-      email: [profile.email, [required, email, maxLength(256)]],
-      name: [profile.name || '', [maxLength(64)]],
-      surname: [profile.surname || '', [maxLength(64)]],
-      phoneNumber: [profile.phoneNumber || '', [maxLength(16)]],
+      userName: [this.profile.userName, [required, maxLength(256)]],
+      email: [this.profile.email, [required, email, maxLength(256)]],
+      name: [this.profile.name || '', [maxLength(64)]],
+      surname: [this.profile.surname || '', [maxLength(64)]],
+      phoneNumber: [this.profile.phoneNumber || '', [maxLength(16)]],
     });
   }
 
   submit() {
     if (this.form.invalid) return;
+    const isLogOutConfirmMessageVisible = this.isLogoutConfirmMessageActive();
     this.inProgress = true;
     this.profileService
       .update(this.form.value)
@@ -54,6 +62,39 @@ export class PersonalSettingsComponent
       .subscribe(profile => {
         this.manageProfileState.setProfile(profile);
         this.toasterService.success('AbpAccount::PersonalSettingsSaved', 'Success', { life: 5000 });
+        if (isLogOutConfirmMessageVisible) {
+          this.showLogoutConfirmMessage();
+        }
       });
   }
+
+  isDataSame(oldValue, newValue) {
+    return Object.entries(oldValue).some(([key, value]) => {
+      if (key in newValue) {
+        return value !== newValue[key];
+      }
+      return false;
+    });
+  }
+
+  logoutConfirmation = () => {
+    this.authService.logout().subscribe();
+  };
+
+  private isLogoutConfirmMessageActive() {
+    if (!this.isPersonalSettingsChangedConfirmationActive) {
+      return false;
+    }
+    return this.isDataSame(this.profile, this.form.value);
+  }
+
+  private showLogoutConfirmMessage() {
+    this.confirmationService
+      .info(
+        'AbpAccount::PersonalSettingsChangedConfirmationModalDescription',
+        'AbpAccount::PersonalSettingsChangedConfirmationModalTitle',
+      )
+      .pipe(filter(status => status === Confirmation.Status.confirm))
+      .subscribe(this.logoutConfirmation);
+  }
 }

npm/ng-packs/packages/account/src/lib/models/config-options.ts

@@ -1,3 +1,4 @@
 export interface AccountConfigOptions {
   redirectUrl?: string;
+  isPersonalSettingsChangedConfirmationActive?: boolean;
 }

npm/ng-packs/packages/account/src/lib/tokens/index.ts

@@ -1 +1,2 @@
 export * from './config-options.token';
+export * from './re-login-confirmation.token';

npm/ng-packs/packages/account/src/lib/tokens/re-login-confirmation.token.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const RE_LOGIN_CONFIRMATION_TOKEN = new InjectionToken<boolean>(
+  'RE_LOGIN_CONFIRMATION_TOKEN',
+);