Skip to content

Commit f14fb7d

Browse files
iyilm4ziyilm4z
committed
app module's user comps done
1 parent bd8b27d commit f14fb7d

10 files changed

+957
-613
lines changed

‎angular/src/app/users/change-password/change-password.component.html

Lines changed: 113 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,115 @@
1-
<div class="row clearfix" [@routerTransition]>
2-
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
3-
<div class="card main-content">
4-
<div class="header">
5-
<h2>{{ "UpdatePassword" | localize }}</h2>
6-
</div>
7-
<div class="body table-responsive" #body>
8-
<form novalidate (ngSubmit)="updatePassword(parentFormGroup.value)">
9-
<div [formGroup]="parentFormGroup">
10-
<div class="row">
11-
<div class="col-md-6">
12-
<mat-form-field>
13-
<input matInput id="currentPassword" type="password" name="CurrentPassword" formControlName="currentPassword"
14-
[placeholder]="'CurrentPassword' | localize"
15-
required minlength="2" maxlength="32"
16-
/>
17-
</mat-form-field>
18-
</div>
19-
</div>
20-
<div class="row">
21-
<div class="col-md-6" [formGroup]="passwordsFormGroup" formGroupName="passwords">
22-
<mat-form-field>
23-
<input matInput id="newPassword" formControlName="newPassword" type="password" name="NewPassword"
24-
[placeholder]="'NewPassword' | localize"
25-
required minlength="2" maxlength="32"
26-
/>
27-
<mat-error *ngIf="passwordsFormGroup.controls.newPassword.errors">
28-
{{ "PasswordsMustBeAtLeast8CharactersContainLowercaseUppercaseNumber" | localize }}
29-
</mat-error>
30-
</mat-form-field>
31-
</div>
32-
</div>
33-
<div class="row">
34-
<div class="col-md-6" formGroupName="passwords">
35-
<mat-form-field>
36-
<input matInput id="repeatNewPassword" formControlName="repeatNewPassword" type="password" name="RepeatNewPassword"
37-
[placeholder]="'ConfirmNewPassword' | localize" [errorStateMatcher]="equalMatcher"
38-
required minlength="2" maxlength="32"
39-
/>
40-
<mat-error *ngIf="passwordsFormGroup.errors &&
41-
passwordsFormGroup.errors.areEqual &&
42-
passwordsFormGroup.controls.newPassword.touched
43-
">
44-
{{ "PasswordsDoNotMatch" | localize }}
45-
</mat-error>
46-
</mat-form-field>
47-
</div>
48-
</div>
49-
<button mat-flat-button type="submit" flex="15" color="primary"
50-
[disabled]="!parentFormGroup.valid || isLoading">
51-
{{ "Save" | localize }}
52-
<i class="fa fa-spin fa-spinner" *ngIf="isLoading"></i>
53-
</button>
54-
</div>
55-
</form>
56-
</div>
1+
<div [@routerTransition]>
2+
<section class="content-header">
3+
<div class="container-fluid">
4+
<div class="row">
5+
<div class="col-6">
6+
<h1>{{ "UpdatePassword" | localize }}</h1>
577
</div>
8+
</div>
9+
</div>
10+
</section>
11+
<section class="content px-2">
12+
<div class="container-fluid">
13+
<div class="card">
14+
<form
15+
class="form-horizontal"
16+
autocomplete="off"
17+
#changePasswordForm="ngForm"
18+
(ngSubmit)="changePassword()"
19+
>
20+
<div class="card-body">
21+
<div class="modal-body">
22+
<div class="form-group row required">
23+
<label class="col-md-3 col-form-label" for="currentPassword">
24+
{{ "CurrentPassword" | localize }}
25+
</label>
26+
<div class="col-md-9">
27+
<input
28+
type="text"
29+
class="form-control"
30+
name="currentPassword"
31+
id="currentPassword"
32+
required
33+
minlength="2"
34+
maxlength="32"
35+
[(ngModel)]="changePasswordDto.currentPassword"
36+
#currentPasswordModel="ngModel"
37+
#currentPasswordEl
38+
/>
39+
<abp-validation-summary
40+
[control]="currentPasswordModel"
41+
[controlEl]="currentPasswordEl"
42+
></abp-validation-summary>
43+
</div>
44+
</div>
45+
<div class="form-group row required">
46+
<label class="col-md-3 col-form-label" for="newPassword">
47+
{{ "NewPassword" | localize }}
48+
</label>
49+
<div class="col-md-9">
50+
<input
51+
type="text"
52+
class="form-control"
53+
name="newPassword"
54+
id="newPassword"
55+
required
56+
minlength="2"
57+
maxlength="32"
58+
validateEqual="confirmNewPassword"
59+
reverse="true"
60+
pattern="(?=^.{8,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)[0-9a-zA-Z!@#$%^&*()]*$"
61+
[(ngModel)]="changePasswordDto.newPassword"
62+
#newPasswordModel="ngModel"
63+
#newPasswordEl
64+
/>
65+
<abp-validation-summary
66+
[control]="newPasswordModel"
67+
[controlEl]="newPasswordEl"
68+
[customValidationErrors]="newPasswordValidationErrors"
69+
></abp-validation-summary>
70+
</div>
71+
</div>
72+
<div class="form-group row required">
73+
<label class="col-md-3 col-form-label" for="confirmNewPassword">
74+
{{ "ConfirmNewPassword" | localize }}
75+
</label>
76+
<div class="col-md-9">
77+
<input
78+
type="text"
79+
class="form-control"
80+
name="confirmNewPassword"
81+
id="confirmNewPassword"
82+
required
83+
minlength="2"
84+
maxlength="32"
85+
validateEqual="newPassword"
86+
reverse="false"
87+
ngModel
88+
#confirmNewPasswordModel="ngModel"
89+
#confirmNewPasswordEl
90+
/>
91+
<abp-validation-summary
92+
[control]="confirmNewPasswordModel"
93+
[controlEl]="confirmNewPasswordEl"
94+
[customValidationErrors]="
95+
confirmNewPasswordValidationErrors
96+
"
97+
></abp-validation-summary>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<div class="card-footer justify-content-between">
103+
<button
104+
type="submit"
105+
class="btn btn-primary"
106+
[disabled]="!changePasswordForm.form.valid || saving"
107+
>
108+
{{ "Save" | localize }}
109+
</button>
110+
</div>
111+
</form>
112+
</div>
58113
</div>
59-
</div>
114+
</section>
115+
</div>

‎angular/src/app/users/change-password/change-password.component.ts

Lines changed: 51 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,58 @@
1-
import { Component, OnInit, Injector, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
2-
import { appModuleAnimation } from '@shared/animations/routerTransition';
3-
import { AppComponentBase } from '@shared/app-component-base';
4-
import { ChangePasswordDto, UserServiceProxy } from '@shared/service-proxies/service-proxies';
1+
import { Component, Injector } from '@angular/core';
52
import { Router } from '@angular/router';
6-
import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors, FormGroupDirective, NgForm } from '@angular/forms';
73
import { finalize } from 'rxjs/operators';
8-
import { ErrorStateMatcher } from '@angular/material';
9-
10-
export class FormGroupErrorStateMatcher implements ErrorStateMatcher {
11-
constructor(private formGroup: FormGroup) { }
12-
13-
public isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
14-
return control && control.dirty && control.touched && this.formGroup && this.formGroup.errors && this.formGroup.errors.areEqual;
15-
}
16-
}
4+
import { appModuleAnimation } from '@shared/animations/routerTransition';
5+
import { AppComponentBase } from '@shared/app-component-base';
6+
import {
7+
ChangePasswordDto,
8+
UserServiceProxy
9+
} from '@shared/service-proxies/service-proxies';
10+
import { AbpValidationError } from '@shared/components/validation/abp-validation.api';
1711

1812
@Component({
19-
animations: [appModuleAnimation()],
20-
templateUrl: './change-password.component.html'
13+
templateUrl: './change-password.component.html',
14+
animations: [appModuleAnimation()]
2115
})
22-
export class ChangePasswordComponent extends AppComponentBase implements OnInit {
23-
24-
private static areEqual(c: AbstractControl): ValidationErrors | null {
25-
const keys: string[] = Object.keys(c.value);
26-
for (const i in keys) {
27-
if (i !== '0' && c.value[keys[+i - 1]] !== c.value[keys[i]]) {
28-
return { areEqual: true };
29-
}
16+
export class ChangePasswordComponent extends AppComponentBase {
17+
saving = false;
18+
changePasswordDto = new ChangePasswordDto();
19+
newPasswordValidationErrors: Partial<AbpValidationError>[] = [
20+
{
21+
name: 'pattern',
22+
localizationKey:
23+
'PasswordsMustBeAtLeast8CharactersContainLowercaseUppercaseNumber',
24+
},
25+
];
26+
confirmNewPasswordValidationErrors: Partial<AbpValidationError>[] = [
27+
{
28+
name: 'validateEqual',
29+
localizationKey: 'PasswordsDoNotMatch',
30+
},
31+
];
32+
33+
constructor(
34+
injector: Injector,
35+
private userServiceProxy: UserServiceProxy,
36+
private router: Router
37+
) {
38+
super(injector);
39+
}
40+
41+
changePassword() {
42+
this.saving = true;
43+
44+
this.userServiceProxy
45+
.changePassword(this.changePasswordDto)
46+
.pipe(
47+
finalize(() => {
48+
this.saving = false;
49+
})
50+
)
51+
.subscribe((success) => {
52+
if (success) {
53+
abp.message.success('Password changed successfully', 'Success');
54+
this.router.navigate(['/']);
3055
}
31-
}
32-
public parentFormGroup: FormGroup;
33-
public passwordsFormGroup: FormGroup;
34-
public isLoading: boolean;
35-
public equalMatcher: FormGroupErrorStateMatcher;
36-
37-
public constructor(
38-
injector: Injector,
39-
private userServiceProxy: UserServiceProxy,
40-
private router: Router
41-
) {
42-
super(injector);
43-
}
44-
45-
public ngOnInit() {
46-
this.isLoading = true;
47-
48-
this.passwordsFormGroup = new FormGroup({
49-
'newPassword': new FormControl('', [
50-
Validators.required,
51-
Validators.pattern('(?=^.{8,}$)(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\\s)[0-9a-zA-Z!@#$%^&*()]*$') ]),
52-
'repeatNewPassword': new FormControl('', [ Validators.required ])
53-
}, ChangePasswordComponent.areEqual);
54-
55-
this.parentFormGroup = new FormGroup({
56-
'currentPassword': new FormControl('', [ Validators.required ]),
57-
'passwords': this.passwordsFormGroup
58-
});
59-
60-
this.equalMatcher = new FormGroupErrorStateMatcher(this.passwordsFormGroup);
61-
62-
this.doneLoading();
63-
}
64-
65-
public updatePassword(formValue: any) {
66-
const changePasswordDto = new ChangePasswordDto();
67-
changePasswordDto.currentPassword = formValue.currentPassword;
68-
changePasswordDto.newPassword = formValue.passwords.newPassword;
69-
70-
this.isLoading = true;
71-
this.userServiceProxy.changePassword(changePasswordDto)
72-
.pipe(
73-
finalize(() => {
74-
this.doneLoading();
75-
})
76-
)
77-
.subscribe(success => {
78-
if (success) {
79-
abp.message.success('Password changed successfully', 'Success');
80-
this.router.navigate(['/']);
81-
}
82-
});
83-
}
84-
85-
private doneLoading(): void {
86-
this.isLoading = false;
87-
}
56+
});
57+
}
8858
}

0 commit comments

Comments
 (0)