feat: revise changing password

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" validateOnSubmit>
-  <div class="form-group">
+  <div *ngIf="!hideOldPassword" class="form-group">
     <label for="current-password">{{
       'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization
     }}</label

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts

@@ -1,4 +1,4 @@
-import { ChangePassword } from '@abp/ng.core';
+import { ChangePassword, ProfileState } from '@abp/ng.core';
 import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -23,6 +23,8 @@ export class ChangePasswordComponent
 
   inProgress: boolean;
 
+  hideOldPassword: boolean;
+
   mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
     if (PASSWORD_FIELDS.indexOf(String(control.name)) < 0) return errors;
 
@@ -36,6 +38,8 @@ export class ChangePasswordComponent
   ) {}
 
   ngOnInit(): void {
+    this.hideOldPassword = !this.store.selectSnapshot(ProfileState.getProfile).hasPassword;
+
     const passwordValidations = getPasswordValidators(this.store);
 
     this.form = this.fb.group(
@@ -58,6 +62,8 @@ export class ChangePasswordComponent
         validators: [comparePasswords(PASSWORD_FIELDS)],
       },
     );
+
+    if (this.hideOldPassword) this.form.removeControl('password');
   }
 
   onSubmit() {
@@ -66,7 +72,7 @@ export class ChangePasswordComponent
     this.store
       .dispatch(
         new ChangePassword({
-          currentPassword: this.form.get('password').value,
+          ...(!this.hideOldPassword && { currentPassword: this.form.get('password').value }),
           newPassword: this.form.get('newPassword').value,
         }),
       )

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html

@@ -1,11 +1,11 @@
 <div id="AbpContentToolbar"></div>
 
-<div class="card border-0 shadow-sm">
+<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!isProfileLoaded">
   <div class="card-body">
     <div class="row">
       <div class="col-12 col-md-3">
         <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-          <li class="nav-item" (click)="selectedTab = 0">
+          <li *ngIf="!hideChangePasswordTab" class="nav-item" (click)="selectedTab = 0">
             <a
               class="nav-link"
               [ngClass]="{ active: selectedTab === 0 }"
@@ -25,7 +25,7 @@
           </li>
         </ul>
       </div>
-      <div class="col-12 col-md-9">
+      <div *ngIf="isProfileLoaded" class="col-12 col-md-9">
         <div class="tab-content" *ngIf="selectedTab === 0" [@fadeIn]>
           <div class="tab-pane active" role="tabpanel">
             <h4>

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts

@@ -1,17 +1,42 @@
 import { fadeIn } from '@abp/ng.theme.shared';
 import { transition, trigger, useAnimation } from '@angular/animations';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { eAccountComponents } from '../../enums/components';
+import { Store } from '@ngxs/store';
+import { GetProfile, ProfileState } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
   animations: [trigger('fadeIn', [transition(':enter', useAnimation(fadeIn))])],
+  styles: [
+    `
+      .min-h-400 {
+        min-height: 400px;
+      }
+    `,
+  ],
 })
-export class ManageProfileComponent {
+export class ManageProfileComponent implements OnInit {
   selectedTab = 0;
 
   changePasswordKey = eAccountComponents.ChangePassword;
 
   personalSettingsKey = eAccountComponents.PersonalSettings;
+
+  isProfileLoaded: boolean;
+
+  hideChangePasswordTab: boolean;
+
+  constructor(private store: Store) {}
+
+  ngOnInit() {
+    this.store.dispatch(new GetProfile()).subscribe(() => {
+      this.isProfileLoaded = true;
+      if (this.store.selectSnapshot(ProfileState.getProfile).isExternal) {
+        this.hideChangePasswordTab = true;
+        this.selectedTab = 1;
+      }
+    });
+  }
 }

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

@@ -1,10 +1,9 @@
-import { GetProfile, Profile, ProfileState, UpdateProfile } from '@abp/ng.core';
+import { ProfileState, UpdateProfile } from '@abp/ng.core';
+import { ToasterService } from '@abp/ng.theme.shared';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
-import { take, withLatestFrom, finalize } from 'rxjs/operators';
-import { ToasterService } from '@abp/ng.theme.shared';
+import { Store } from '@ngxs/store';
+import { finalize } from 'rxjs/operators';
 import { Account } from '../../models/account';
 
 const { maxLength, required, email } = Validators;
@@ -19,9 +18,6 @@ export class PersonalSettingsComponent
     OnInit,
     Account.PersonalSettingsComponentInputs,
     Account.PersonalSettingsComponentOutputs {
-  @Select(ProfileState.getProfile)
-  profile$: Observable<Profile.Response>;
-
   form: FormGroup;
 
   inProgress: boolean;
@@ -37,18 +33,15 @@ export class PersonalSettingsComponent
   }
 
   buildForm() {
-    this.store
-      .dispatch(new GetProfile())
-      .pipe(withLatestFrom(this.profile$), take(1))
-      .subscribe(([, profile]) => {
-        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)]],
-        });
-      });
+    const profile = this.store.selectSnapshot(ProfileState.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)]],
+    });
   }
 
   submit() {

npm/ng-packs/packages/core/src/lib/models/profile.ts

@@ -9,6 +9,8 @@ export namespace Profile {
     name: string;
     surname: string;
     phoneNumber: string;
+    isExternal: boolean;
+    hasPassword: boolean;
   }
 
   export interface ChangePasswordRequest {