;
diff --git a/npm/ng-packs/packages/account-config/src/lib/services/account-config.service.ts b/npm/ng-packs/packages/account-config/src/lib/services/account-config.service.ts
index dac3704a06..8932c80670 100644
--- a/npm/ng-packs/packages/account-config/src/lib/services/account-config.service.ts
+++ b/npm/ng-packs/packages/account-config/src/lib/services/account-config.service.ts
@@ -15,6 +15,7 @@ export class AccountConfigService {
children: [
{ path: 'login', name: 'AbpAccount::Login', order: 1 },
{ path: 'register', name: 'AbpAccount::Register', order: 2 },
+ { path: 'manage-profile', name: 'AbpAccount::ManageYourProfile', order: 3 },
],
});
}
diff --git a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
index 9ad3e78f93..3df3001272 100644
--- a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
@@ -1,15 +1,23 @@
+import { DynamicLayoutComponent } from '@abp/ng.core';
import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
+import { ManageProfileComponent } from './components/manage-profile/manage-profile.component';
import { RegisterComponent } from './components/register/register.component';
-import { DynamicLayoutComponent } from '@abp/ng.core';
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{
path: '',
component: DynamicLayoutComponent,
- children: [{ path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }],
+ children: [
+ { path: 'login', component: LoginComponent },
+ { path: 'register', component: RegisterComponent },
+ {
+ path: 'manage-profile',
+ component: ManageProfileComponent,
+ },
+ ],
},
];
diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts
index d6b97fec84..591593d8b0 100644
--- a/npm/ng-packs/packages/account/src/lib/account.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account.module.ts
@@ -5,14 +5,24 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxValidateCoreModule } from '@ngx-validate/core';
import { TableModule } from 'primeng/table';
import { AccountRoutingModule } from './account-routing.module';
+import { ChangePasswordComponent } from './components/change-password/change-password.component';
import { LoginComponent } from './components/login/login.component';
+import { ManageProfileComponent } from './components/manage-profile/manage-profile.component';
+import { PersonalSettingsComponent } from './components/personal-settings/personal-settings.component';
import { RegisterComponent } from './components/register/register.component';
import { TenantBoxComponent } from './components/tenant-box/tenant-box.component';
import { Options } from './models/options';
import { ACCOUNT_OPTIONS, optionsFactory } from './tokens/options.token';
@NgModule({
- declarations: [LoginComponent, RegisterComponent, TenantBoxComponent],
+ declarations: [
+ LoginComponent,
+ RegisterComponent,
+ TenantBoxComponent,
+ ChangePasswordComponent,
+ ManageProfileComponent,
+ PersonalSettingsComponent,
+ ],
imports: [CoreModule, AccountRoutingModule, ThemeSharedModule, TableModule, NgbDropdownModule, NgxValidateCoreModule],
exports: [],
})
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
new file mode 100644
index 0000000000..61f3a7de3a
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html
@@ -0,0 +1,19 @@
+
diff --git a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts
new file mode 100644
index 0000000000..3a0e5bb6a7
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts
@@ -0,0 +1,63 @@
+import { ChangePassword } 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 { comparePasswords, Validation } from '@ngx-validate/core';
+import { Store } from '@ngxs/store';
+import snq from 'snq';
+
+const { minLength, required } = Validators;
+
+const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
+
+@Component({
+ selector: 'abp-change-password-form',
+ templateUrl: './change-password.component.html',
+})
+export class ChangePasswordComponent implements OnInit {
+ form: FormGroup;
+
+ mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
+ if (PASSWORD_FIELDS.indexOf(control.name) < 0) return errors;
+
+ return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
+ }
+
+ constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
+
+ ngOnInit(): void {
+ this.form = this.fb.group(
+ {
+ password: ['', required],
+ newPassword: ['', required],
+ repeatNewPassword: ['', required],
+ },
+ {
+ validators: [comparePasswords(PASSWORD_FIELDS)],
+ },
+ );
+ }
+
+ onSubmit() {
+ if (this.form.invalid) return;
+
+ this.store
+ .dispatch(
+ new ChangePassword({
+ currentPassword: this.form.get('password').value,
+ newPassword: this.form.get('newPassword').value,
+ }),
+ )
+ .subscribe({
+ next: () => {
+ this.form.reset();
+ this.toasterService.success('AbpAccount::PasswordChangedMessage', 'Success', { life: 5000 });
+ },
+ error: err => {
+ this.toasterService.error(snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'), 'Error', {
+ life: 7000,
+ });
+ },
+ });
+ }
+}
diff --git a/npm/ng-packs/packages/account/src/lib/components/index.ts b/npm/ng-packs/packages/account/src/lib/components/index.ts
index 8e943f0bad..a852329e4e 100644
--- a/npm/ng-packs/packages/account/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/index.ts
@@ -1,2 +1,5 @@
+export * from './change-password/change-password.component';
export * from './login/login.component';
+export * from './manage-profile/manage-profile.component';
export * from './register/register.component';
+export * from './personal-settings/personal-settings.component';
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
new file mode 100644
index 0000000000..d125b77dcc
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
@@ -0,0 +1,36 @@
+
+
+
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
new file mode 100644
index 0000000000..d24c541923
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'abp-manage-profile',
+ templateUrl: './manage-profile.component.html',
+})
+export class ManageProfileComponent implements OnInit {
+ selectedTab = 0;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
new file mode 100644
index 0000000000..98ef7dc141
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
@@ -0,0 +1,31 @@
+
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
new file mode 100644
index 0000000000..3b719d0230
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
@@ -0,0 +1,52 @@
+import { GetProfile, Profile, ProfileState, UpdateProfile } from '@abp/ng.core';
+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 } from 'rxjs/operators';
+import { ToasterService } from '@abp/ng.theme.shared';
+
+const { maxLength, required, email } = Validators;
+
+@Component({
+ selector: 'abp-personal-settings-form',
+ templateUrl: './personal-settings.component.html',
+})
+export class PersonalSettingsComponent implements OnInit {
+ @Select(ProfileState.getProfile)
+ profile$: Observable;
+
+ form: FormGroup;
+
+ constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
+
+ 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)]],
+ });
+ });
+ }
+
+ submit() {
+ if (this.form.invalid) return;
+
+ this.store.dispatch(new UpdateProfile(this.form.value)).subscribe(() => {
+ this.toasterService.success('AbpAccount::PersonalSettingsSaved', 'Success', { life: 5000 });
+ });
+ }
+
+ ngOnInit() {
+ this.buildForm();
+ }
+}