MyProfile stranica korisnika v1. Servis user-info za dobavljanje i izmenu podataka o korisniku. Dodata klasa User.

8 files changed, 288 insertions, 6 deletions

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 @@
-<p>profile works!</p>
+<div class="container-xl px-4 mt-4">
+    <hr class="mt-0 mb-4">
+
+    <div class="row">
+        <div class="col-xl-4">
+            <!-- Profile picture card-->
+            <div class="card mb-4 mb-xl-0">
+                <div class="card-header">Moj profil</div>
+                <div class="card-body text-center">
+                    <!-- Profile picture image-->
+                    <img class="img-account-profile rounded-circle mb-2" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="">
+                    <!-- Profile picture help block-->
+                    <div class="small font-italic text-muted mb-4">JPG or PNG no larger than 5 MB</div>
+                    <!-- Profile picture upload button-->
+                    <button class="btn btn-primary" type="button">Upload new image</button>
+                </div>
+            </div>
+        </div>
+        <div class="col-xl-8">
+            <!-- Account details card-->
+            <div class="card mb-4">
+                <div class="card-header">Osnovni podaci</div>
+                <div class="card-body">
+                    <form>
+                        <!-- Form Row-->
+                        <div class="row gx-3 mb-3">
+                            <!-- Form Group (username)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputUsername">Korisničko ime (kako će ostali korisnici videti tvoje ime)</label>
+                                <input class="form-control" id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
+                            </div>
+                            <!-- Form Group (email address)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputEmailAddress">Email adresa</label>
+                                <input class="form-control" id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
+                            </div>
+                        </div>
+
+                        <!-- Form Row-->
+                        <div class="row gx-3 mb-3">
+                            <!-- Form Group (first name)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputFirstName">Ime</label>
+                                <input class="form-control" id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
+                            </div>
+                            <!-- Form Group (last name)-->
+                            <div class="col-md-6">
+                                <label class="small mb-1" for="inputLastName">Prezime</label>
+                                <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
+                            </div>
+                        </div>
+                        
+                        <div class="row mt-5">
+                            <div class="col text-center">
+                                <!-- Save changes button-->
+                                <button class="btn btn-primary text-center" type="button" (click)="saveInfoChanges()">Sačuvaj izmene</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="row">
+        <div class="col-xl-4">
+            <div class="card mb-4">
+                <div class="card-header">Promena lozinke</div>
+                <div class="card-body">
+                    <form>
+
+                        <div class="row">
+                            <!-- Form Row-->
+                            <div class="row gx-3 mb-3">
+                                <!-- Form Group (password)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputPassword">Važeća lozinka</label>
+                                    <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka">
+                                    <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small>
+                                </div>
+                                <!-- Form Group (new password)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputNewPassword">Nova lozinka</label>
+                                    <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku">
+                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
+                                </div>
+                            </div>
+    
+                            <!-- Form Row-->
+                            <div class="row gx-3 mb-3">
+                                <div class="col-md-6">
+                                    <div class="col text-center">
+                                        <!-- Save changes button-->
+                                        <button class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button>
+                                    </div>
+                                </div>
+                                <!-- Form Group (new password again)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label>
+                                    <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku">
+                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
+                                </div>
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+
+</div>
\ 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<Dataset[]> {
-    return this.http.get<Dataset[]>(`${API_SETTINGS.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() });//responsetype text da l treba??
+    return this.http.get<Dataset[]>(`${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<User> {
+    return this.http.get<User>(`${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<User> {
+    return this.http.put<User>(`${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 @@
 <app-navbar></app-navbar>
 <div class="container h-100">
     <router-outlet></router-outlet>
-    <app-barchart></app-barchart>
-    <app-scatterchart></app-scatterchart>
-</div>
+    <!--<app-barchart></app-barchart>
+    <app-scatterchart></app-scatterchart>-->
+</div>
\ No newline at end of file