From 66e9c76049d0ec2277f89b2ac380a9877c5c2205 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 17 Aug 2020 11:14:52 +0300 Subject: [PATCH 1/6] Update Permission-Management.md --- docs/en/UI/Angular/Permission-Management.md | 25 +++------------------ 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/docs/en/UI/Angular/Permission-Management.md b/docs/en/UI/Angular/Permission-Management.md index 8cc7325afd..b9c4649c03 100644 --- a/docs/en/UI/Angular/Permission-Management.md +++ b/docs/en/UI/Angular/Permission-Management.md @@ -4,36 +4,17 @@ A permission is a simple policy that is granted or prohibited for a particular u You can get permission of authenticated user using `getGrantedPolicy` selector of `ConfigState`. -You can get permission as boolean value from store: - -```js -import { Store } from '@ngxs/store'; -import { ConfigState } from '@abp/ng.core'; - -export class YourComponent { - constructor(private store: Store) {} - - ngOnInit(): void { - const canCreate = this.store.selectSnapshot(ConfigState.getGrantedPolicy('AbpIdentity.Roles.Create')); - } - - // ... -} -``` - -Or you can get it via `ConfigStateService`: +You can get permission as boolean value: ```js import { ConfigStateService } from '@abp/ng.core'; export class YourComponent { - constructor(private configStateService: ConfigStateService) {} + constructor(private config: ConfigStateService) {} ngOnInit(): void { - const canCreate = this.configStateService.getGrantedPolicy('AbpIdentity.Roles.Create'); + const canCreate = this.config.getGrantedPolicy('AbpIdentity.Roles.Create'); } - - // ... } ``` From c2426414d81baa7c7b3eb04f0d7512393cee0a44 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 17 Aug 2020 11:21:06 +0300 Subject: [PATCH 2/6] feat: revise changing password --- .../change-password.component.html | 2 +- .../change-password.component.ts | 10 ++++-- .../manage-profile.component.html | 6 ++-- .../manage-profile.component.ts | 29 ++++++++++++++-- .../personal-settings.component.ts | 33 ++++++++----------- .../packages/core/src/lib/models/profile.ts | 2 ++ 6 files changed, 54 insertions(+), 28 deletions(-) diff --git a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html index fdc8f23ce2..9387c84dc2 100644 --- a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html @@ -1,5 +1,5 @@
-
+
{ 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, }), ) diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html index 16e0d66f42..4b6f5bf496 100644 --- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html @@ -1,11 +1,11 @@
-
+
-
+

diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts index f9ee2b8ff7..3a795c83d7 100644 --- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts +++ b/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; + } + }); + } } diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts index 444a014d6d..f31cb2743e 100644 --- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts +++ b/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; - 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() { diff --git a/npm/ng-packs/packages/core/src/lib/models/profile.ts b/npm/ng-packs/packages/core/src/lib/models/profile.ts index 068a3fad39..4d65b5dcbb 100644 --- a/npm/ng-packs/packages/core/src/lib/models/profile.ts +++ b/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 { From 111775d2245e73a2384fe8ce18eca0ab52262e4e Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 17 Aug 2020 11:53:08 +0300 Subject: [PATCH 3/6] test: fix testing error --- .../packages/core/src/lib/tests/profile.service.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/npm/ng-packs/packages/core/src/lib/tests/profile.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/profile.service.spec.ts index 4c7b7ba3c1..7ccb0f2da3 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/profile.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/profile.service.spec.ts @@ -37,6 +37,8 @@ describe('ProfileService', () => { name: 'John', surname: 'Doe', phoneNumber: '+123456', + isExternal: false, + hasPassword: false, }; spectator.inject(Store).selectSnapshot.andReturn('https://abp.io'); spectator.service.update(mock).subscribe(); From 514208cbf64f469b4a844ebffed5645f6c36b98f Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 17 Aug 2020 13:21:58 +0300 Subject: [PATCH 4/6] chore: change a variable name --- .../change-password/change-password.component.html | 2 +- .../change-password/change-password.component.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html index 9387c84dc2..37ac7f0175 100644 --- a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html @@ -1,5 +1,5 @@ -
+
{ if (PASSWORD_FIELDS.indexOf(String(control.name)) < 0) return errors; @@ -38,7 +38,7 @@ export class ChangePasswordComponent ) {} ngOnInit(): void { - this.hideOldPassword = !this.store.selectSnapshot(ProfileState.getProfile).hasPassword; + this.hideCurrentPassword = !this.store.selectSnapshot(ProfileState.getProfile).hasPassword; const passwordValidations = getPasswordValidators(this.store); @@ -63,7 +63,7 @@ export class ChangePasswordComponent }, ); - if (this.hideOldPassword) this.form.removeControl('password'); + if (this.hideCurrentPassword) this.form.removeControl('password'); } onSubmit() { @@ -72,7 +72,7 @@ export class ChangePasswordComponent this.store .dispatch( new ChangePassword({ - ...(!this.hideOldPassword && { currentPassword: this.form.get('password').value }), + ...(!this.hideCurrentPassword && { currentPassword: this.form.get('password').value }), newPassword: this.form.get('newPassword').value, }), ) From 70eee00c6f89f2a15b7e344fa9250158e30ad398 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 17 Aug 2020 13:32:39 +0300 Subject: [PATCH 5/6] chore: add a condition to whether to visible changing password tab --- .../components/manage-profile/manage-profile.component.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html index 4b6f5bf496..ad2d05b76e 100644 --- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html @@ -5,7 +5,11 @@