From c734e57e88280d7b05f46f7630b691b5b45c926b Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 22 Mar 2022 19:53:56 +0100 Subject: MyProfile stranica korisnika v1. Servis user-info za dobavljanje i izmenu podataka o korisniku. Dodata klasa User. --- frontend/src/app/_data/User.ts | 11 ++ .../src/app/_pages/profile/profile.component.css | 42 ++++++++ .../src/app/_pages/profile/profile.component.html | 118 ++++++++++++++++++++- .../src/app/_pages/profile/profile.component.ts | 73 ++++++++++++- frontend/src/app/_services/models.service.ts | 2 +- .../src/app/_services/user-info.service.spec.ts | 16 +++ frontend/src/app/_services/user-info.service.ts | 26 +++++ frontend/src/app/app.component.html | 6 +- 8 files changed, 288 insertions(+), 6 deletions(-) create mode 100644 frontend/src/app/_data/User.ts create mode 100644 frontend/src/app/_services/user-info.service.spec.ts create mode 100644 frontend/src/app/_services/user-info.service.ts (limited to 'frontend/src/app') diff --git a/frontend/src/app/_data/User.ts b/frontend/src/app/_data/User.ts new file mode 100644 index 00000000..58383d38 --- /dev/null +++ b/frontend/src/app/_data/User.ts @@ -0,0 +1,11 @@ +export default class User { + _id: string = ''; + constructor( + public username: string = '', + public email: string = '', + public password: string = '', + public firstName: string = '', + public lastName: string = '', + public photoId: string = '1' //difoltna profilna slika + ) { } +} \ No newline at end of file diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css index e69de29b..8c2ffa88 100644 --- a/frontend/src/app/_pages/profile/profile.component.css +++ b/frontend/src/app/_pages/profile/profile.component.css @@ -0,0 +1,42 @@ +body{margin-top:20px; +background-color:#f2f6fc; +color:#69707a; +} +.img-account-profile { + height: 10rem; +} +.rounded-circle { + border-radius: 50% !important; +} +.card { + box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%); +} +.card .card-header { + font-weight: 500; +} +.card-header:first-child { + border-radius: 0.35rem 0.35rem 0 0; +} +.card-header { + padding: 1rem 1.35rem; + margin-bottom: 0; + background-color: rgba(33, 40, 50, 0.03); + border-bottom: 1px solid rgba(33, 40, 50, 0.125); +} +.form-control, .dataTable-input { + display: block; + width: 100%; + padding: 0.875rem 1.125rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1; + color: #69707a; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #c5ccd6; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.35rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html index 9df0576d..bece7c46 100644 --- a/frontend/src/app/_pages/profile/profile.component.html +++ b/frontend/src/app/_pages/profile/profile.component.html @@ -1 +1,117 @@ -

profile works!

+
+
+ +
+
+ +
+
Moj profil
+
+ + + +
JPG or PNG no larger than 5 MB
+ + +
+
+
+
+ +
+
Osnovni podaci
+
+
+ +
+ +
+ + +
+ +
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
Promena lozinke
+
+
+ +
+ +
+ +
+ + + Neispravna lozinka. +
+ +
+ + + Lozinke se ne podudaraju. +
+
+ + +
+
+
+ + +
+
+ +
+ + + Lozinke se ne podudaraju. +
+
+
+ +
+
+
+
+
+ + + + + +
\ No newline at end of file diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts index 93040f3e..4b474678 100644 --- a/frontend/src/app/_pages/profile/profile.component.ts +++ b/frontend/src/app/_pages/profile/profile.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import User from 'src/app/_data/User'; +import { UserInfoService } from 'src/app/_services/user-info.service'; @Component({ selector: 'app-profile', @@ -7,9 +9,78 @@ import { Component, OnInit } from '@angular/core'; }) export class ProfileComponent implements OnInit { - constructor() { } + user: User = new User(); + + username: string = ''; + email: string = ''; + firstName : string = ''; + lastName : string = ''; + oldPass: string = ''; + newPass1: string = ''; + newPass2: string = ''; + photoId: string = ''; + + wrongPassBool: boolean = false; + wrongNewPassBool: boolean = false; + + constructor(private userInfoService: UserInfoService) { } ngOnInit(): void { + this.userInfoService.getUsersInfo().subscribe((response) => { + + this.user = response; + + this.user.password = 'sonja123'; + + this.username = this.user.username; + this.email = this.user.email; + this.firstName = this.user.firstName; + this.lastName = this.user.lastName; + this.photoId = this.user.photoId; + console.log(this.user); + }); + } + + saveInfoChanges() { + let editedUser: User = { + _id: this.user._id, + username: this.username, + email: this.email, + password: this.user.password, + firstName: this.firstName, + lastName: this.lastName, + photoId: "1" + } + + this.userInfoService.changeUserInfo(editedUser).subscribe((response: any) =>{ + this.user = editedUser; + console.log(this.user); + }, (error: any) =>{ + console.log(error); + }); + } + + savePasswordChanges() { + if (this.newPass1 == '' && this.newPass2 == '') //ne zeli da promeni lozinku + return; + console.log("zeli da promeni lozinku"); + if (this.newPass1 != this.newPass2) { //netacno ponovio novu lozinku + this.wrongNewPassBool = true; + this.newPass1 = ''; + this.newPass2 = ''; + console.log("Netacno ponovljena lozinka"); + return; + } + + this.wrongPassBool = false; + this.wrongNewPassBool = false; + + this.userInfoService.changeUserPassword(this.oldPass, this.newPass1).subscribe((response) => { + this.user = response; + console.log(this.user); + }, (error: any) => { + + }); } } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index 30d63956..f629fd2a 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -40,6 +40,6 @@ export class ModelsService { } getMyDatasets(): Observable { - return this.http.get(`${API_SETTINGS.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() });//responsetype text da l treba?? + return this.http.get(`${API_SETTINGS.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() }); } } diff --git a/frontend/src/app/_services/user-info.service.spec.ts b/frontend/src/app/_services/user-info.service.spec.ts new file mode 100644 index 00000000..a181223a --- /dev/null +++ b/frontend/src/app/_services/user-info.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UserInfoService } from './user-info.service'; + +describe('UserInfoService', () => { + let service: UserInfoService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(UserInfoService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/user-info.service.ts b/frontend/src/app/_services/user-info.service.ts new file mode 100644 index 00000000..b66a73e1 --- /dev/null +++ b/frontend/src/app/_services/user-info.service.ts @@ -0,0 +1,26 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { API_SETTINGS } from 'src/config'; +import User from '../_data/User'; +import { AuthService } from './auth.service'; + +@Injectable({ + providedIn: 'root' +}) +export class UserInfoService { + + constructor(private http: HttpClient, private authService: AuthService) { } + + getUsersInfo(): Observable { + return this.http.get(`${API_SETTINGS.apiURL}/user/myprofile`, { headers: this.authService.authHeader() }); + } + + changeUserInfo(user: User): any { + return this.http.put(`${API_SETTINGS.apiURL}/user/${user._id}`, user, { headers: this.authService.authHeader() }); + } + + changeUserPassword(oldPassword: string, newPassword: string): Observable { + return this.http.put(`${API_SETTINGS.apiURL}/user/`, { oldPassword, newPassword }, { headers: this.authService.authHeader() }); + } +} diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 24828a06..2ec16fc2 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,6 +1,6 @@
- - -
+ + \ No newline at end of file -- cgit v1.2.3