Skip to content

Commit beed9c5

Browse files
BoykoBonevBoykoBonev
committed
2 parents 804b481 + 04db140 commit beed9c5

File tree

5 files changed

+106
-9
lines changed

5 files changed

+106
-9
lines changed

‎src/app/app.module.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
33
import { RouterModule } from '@angular/router';
44
import { AppComponent } from './app.component';
55
import { APP_ROUTES } from './app.routes';
6-
import { FormsModule } from '@angular/forms';
6+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
77

88
import { SimpleNotificationsModule } from 'angular2-notifications';
99

@@ -48,7 +48,8 @@ import { CreateCategoryComponent } from './create-category/create-category.compo
4848
ForumModule,
4949
FormsModule,
5050
CategoryModule,
51-
SimpleNotificationsModule
51+
SimpleNotificationsModule,
52+
ReactiveFormsModule
5253
],
5354
providers: [AuthService, UserService, HttpOptionsService, AuthGuard, CategoryService]
5455
})

‎src/app/auth/login/login.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export class LoginComponent implements OnInit {
5151
localStorage.setItem('user', JSON.stringify(result));
5252
this._userService.setIsUserLoggedIn();
5353
this._notificationsService.success('', result.success);
54-
setTimeout(() => this._router.navigateByUrl('/profile'), 1500);
54+
setTimeout(() => this._router.navigateByUrl('/profile/home'), 1500);
5555
}
5656
});
5757
}

‎src/app/common-services/user.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export class UserService {
5353
}
5454

5555
public updateUserData(userId: string, userData: Object): Observable<any> {
56-
let url = `${USER_URL}/${userId}`;
56+
let url = `${USER_URL}/${userId}/edit`;
5757
let requestOptions = this._httpOptionsService.getRequestOptions(true);
5858
let data = JSON.stringify(userData);
5959
return this._http.post(url, data, requestOptions).map((response: Response) => response.json());

‎src/app/profile/profile-edit/profile-edit.component.html

+47-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,47 @@
1-
<p>
2-
profile-edit works!
3-
</p>
1+
<form [formGroup]="form" (ngSubmit)="updateProfile()">
2+
<div class="header header-info text-center">
3+
<h4>Edit your details</h4>
4+
</div>
5+
<div class="content">
6+
<div class="row">
7+
<div class="col-md-6">
8+
<div class="form-group label-floating" [ngClass]="{'has-error':!form.controls['firstName'].valid && form.controls['firstName'].touched}">
9+
<label class="control-label" for="tb-firstName">First name</label>
10+
<input type="text" id="tb-firstName" formControlName="firstName" class="form-control">
11+
<span class="text-danger" *ngIf="!form.controls['firstName'].valid && form.controls['firstName'].touched">
12+
First name must be between 3 and 20 characters.
13+
</span>
14+
</div>
15+
16+
<div class="form-group label-floating" [ngClass]="{'has-error':!form.controls['lastName'].valid && form.controls['lastName'].touched}">
17+
<label class="control-label" for="tb-lastName">Last name</label>
18+
<input type="text" id="tb-lastName" formControlName="lastName" class="form-control">
19+
<span class="text-danger" *ngIf="!form.controls['lastName'].valid && form.controls['lastName'].touched">
20+
Last name must be between 3 and 20 characters.
21+
</span>
22+
</div>
23+
</div>
24+
<div class="col-md-6">
25+
<div class="form-group label-floating" [ngClass]="{'has-error':!form.controls['password'].valid && form.controls['password'].touched}">
26+
<label class="control-label" for="tb-password">Password</label>
27+
<input type="password" id="tb-password" formControlName="password" class="form-control">
28+
<span class="text-danger" *ngIf="!form.controls['password'].valid && form.controls['password'].touched">
29+
Password must be between 6 and 30 symbols.
30+
</span>
31+
</div>
32+
33+
<div class="form-group label-floating" [ngClass]="{'has-error':!form.controls['confirmPassword'].valid && form.controls['confirmPassword'].touched}">
34+
<label class="control-label" for="tb-confirm-password">Confirm Password</label>
35+
<input type="password" id="tb-confirm-password" formControlName="confirmPassword" class="form-control">
36+
<span class="text-danger" *ngIf="!form.controls['confirmPassword'].valid && form.controls['confirmPassword'].touched">
37+
Confirm password must be between 6 and 30 symbols and should match password.
38+
</span>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
<div class="footer text-center">
44+
<button class="btn btn-info btn-lg" type="submit" [disabled]="!form.valid">Save changes</button>
45+
</div>
46+
</form>
47+
<simple-notifications [options]="options"></simple-notifications>

‎src/app/profile/profile-edit/profile-edit.component.ts

+54-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, HostBinding } from '@angular/core';
2+
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
3+
import { Router } from '@angular/router';
4+
import { NotificationsService } from './../../../../node_modules/angular2-notifications';
5+
import { UserService } from './../../common-services/user.service';
6+
import { AuthService } from './../../auth/auth.service';
7+
8+
const MIN_NAME_LENGTH = 3;
9+
const MAX_NAME_LENGTH = 20;
10+
const MIN_PASSWORD_LENGTH = 6;
11+
const MAX_PASSWORD_LENGTH = 30;
212

313
@Component({
414
selector: 'app-profile-edit',
@@ -7,9 +17,51 @@ import { Component, OnInit } from '@angular/core';
717
})
818
export class ProfileEditComponent implements OnInit {
919

10-
constructor() { }
20+
public form: FormGroup;
21+
public fb: FormBuilder;
22+
public options: Object;
23+
24+
private _authService: AuthService;
25+
private _router: Router;
26+
private _notificationsService: NotificationsService;
27+
private _userService: UserService;
28+
29+
constructor(fb: FormBuilder, authService: AuthService, router: Router, notificationsService: NotificationsService,
30+
userService: UserService) {
31+
this.fb = fb;
32+
this._authService = authService;
33+
this._userService = userService;
34+
this._router = router;
35+
this._notificationsService = notificationsService;
36+
this.options = { timeOut: 1500, pauseOnHover: true, showProgressBar: true, animate: 'scale', position: ['right', 'bottom'] };
37+
}
38+
39+
public updateProfile() {
40+
let username = JSON.parse(localStorage.getItem('user')).result.username;
41+
console.log(this.form.value);
42+
this._userService
43+
.updateUserData(username, this.form.value)
44+
.subscribe(res => {
45+
if (res.err) {
46+
this._notificationsService.error('', res.error);
47+
} else {
48+
this._notificationsService.success('', res.success)
49+
setTimeout(() => this._router.navigateByUrl('/profile/home'), 1500);
50+
}
51+
},
52+
err => console.log(err));
53+
}
1154

1255
ngOnInit() {
56+
let namesValidators = [Validators.required, Validators.minLength(MIN_NAME_LENGTH), Validators.maxLength(MAX_NAME_LENGTH)];
57+
58+
this.form = this.fb.group({
59+
firstName: ['', Validators.compose(namesValidators)],
60+
lastName: ['', Validators.compose(namesValidators)],
61+
password: ['', Validators.compose([Validators.required, Validators.minLength(MIN_PASSWORD_LENGTH), Validators.maxLength(MAX_PASSWORD_LENGTH)])],
62+
confirmPassword: ['', Validators.required]
63+
});
64+
1365
}
1466

1567
}

0 commit comments

Comments
 (0)