Profile page - dodata opcija izbora profilne slike. Svi pozivi rade.

3 files changed, 119 insertions, 51 deletions

diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css
index 8c2ffa88..5565d105 100644
--- a/frontend/src/app/_pages/profile/profile.component.css
+++ b/frontend/src/app/_pages/profile/profile.component.css
@@ -4,13 +4,11 @@ color:#69707a;
 }
 .img-account-profile {
     height: 10rem;
+    border: 1px solid lightgray;
 }
 .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;
 }
@@ -40,3 +38,7 @@ color:#69707a;
     border-radius: 0.35rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
+
+.selectedPicture {
+    border: 2px solid darkgray;
+}
diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
index fba95218..24efaeb5 100644
--- a/frontend/src/app/_pages/profile/profile.component.html
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -1,4 +1,4 @@
-<div class="container-xl px-4 mt-4">
+<div class="container-xl px-4 mt-1">
     <hr class="mt-0 mb-4">
 
     <div class="row">
@@ -9,15 +9,58 @@
                 <div class="card-body text-center">
                     <div class=" image d-flex flex-column justify-content-center align-items-center">
                         <!-- Profile picture image-->
-                        <img class="img-account-profile rounded-circle mb-2" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="">
+                        <img class="img-account-profile rounded-circle mb-2" src="{{this.photoPath}}" alt="profilePicture">
                         <!-- User's info -->
                         <span>@ {{this.user.username}}</span>
                         <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span> 
-                        <span>{{this.email}}</span>
                     </div>
                 </div>
             </div>
+
+            <!-- Password Change card -->
+            <div class="card mt-3">
+                <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>
+
+        <!-- Info Change card -->
         <div class="col-xl-8">
             <!-- Account details card-->
             <div class="card mb-4">
@@ -51,6 +94,22 @@
                                 <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
                             </div>
                         </div>
+
+                        <div>
+                            <label class="small mt-2 mb-3">Kliknite na sliku kako biste je odabrali za profilnu:</label>
+                            
+                            <div class="container">
+                                <div class="card-group">
+                                    <!--bootstrap card with 3 horizontal images-->
+                                    <div class="row overflow-auto" style="max-height: 200px;">
+                                        <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()"
+                                            [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
+                                            <img class="card-img-top" src="{{picture.path}}">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         
                         <div class="row mt-5">
                             <div class="col text-center">
@@ -67,48 +126,7 @@
 
     <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>
 
diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts
index c155dbff..cb4b095e 100644
--- a/frontend/src/app/_pages/profile/profile.component.ts
+++ b/frontend/src/app/_pages/profile/profile.component.ts
@@ -1,9 +1,10 @@
-import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import User from 'src/app/_data/User';
 import { UserInfoService } from 'src/app/_services/user-info.service';
 import { AuthService } from 'src/app/_services/auth.service';
 import { Router } from '@angular/router';
+import { PICTURES } from 'src/app/_data/ProfilePictures';
+import { Picture } from 'src/app/_data/ProfilePictures';
 
 @Component({
   selector: 'app-profile',
@@ -13,6 +14,7 @@ import { Router } from '@angular/router';
 export class ProfileComponent implements OnInit {
 
   user: User = new User();
+  pictures: Picture[] = PICTURES;
 
   username: string = '';
   email: string = '';
@@ -22,10 +24,26 @@ export class ProfileComponent implements OnInit {
   newPass1: string = '';
   newPass2: string = '';
   photoId: string = '';
+  photoPath: string = '';
 
   wrongPassBool: boolean = false;
   wrongNewPassBool: boolean = false;
 
+  wrongFirstNameBool: boolean = false;
+  wrongLastNameBool: boolean = false;
+  wrongUsernameBool: boolean = false;
+  wrongEmailBool: boolean = false;
+  wrongOldPassBool: boolean = false;
+  wrongNewPass1Bool: boolean = false;
+  wrongNewPass2Bool: boolean = false;
+
+  pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/;
+  pattUsername: RegExp = /^[a-zA-Z0-9]{6,18}$/;
+  pattTwoSpaces: RegExp = /  /;
+  pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/;
+  pattPassword: RegExp = /.{6,30}$/;
+
+
   constructor(private userInfoService: UserInfoService, private authService: AuthService, private router: Router) { }
 
   ngOnInit(): void {
@@ -38,6 +56,13 @@ export class ProfileComponent implements OnInit {
       this.firstName = this.user.firstName;
       this.lastName = this.user.lastName;
       this.photoId = this.user.photoId;
+
+      for (let i = 0; i < this.pictures.length; i++) {
+        if (this.pictures[i].photoId.toString() === this.photoId) {
+          this.photoPath = this.pictures[i].path;
+          break;
+        }
+      }
       console.log(this.user);
     });
   }
@@ -50,7 +75,7 @@ export class ProfileComponent implements OnInit {
       password: this.user.password,
       firstName: this.firstName,
       lastName: this.lastName,
-      photoId: "1"
+      photoId: this.photoId
     }
 
     this.userInfoService.changeUserInfo(editedUser).subscribe((response: any) =>{
@@ -63,8 +88,14 @@ export class ProfileComponent implements OnInit {
       }
       this.user = editedUser;
       console.log(this.user);
+      this.resetInfo();
     }, (error: any) =>{
-      console.log(error);
+      if (error.error == "Username already exists!") {
+        alert("Ukucano korisničko ime je već zauzeto!\nIzaberite neko drugo.");
+        (<HTMLSelectElement>document.getElementById("inputUsername")).focus();
+        //poruka obavestenja ispod inputa
+        this.resetInfo();
+      }
     });
   }
 
@@ -72,6 +103,7 @@ export class ProfileComponent implements OnInit {
     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.resetNewPassInputs();
@@ -110,4 +142,20 @@ export class ProfileComponent implements OnInit {
     this.newPass2 = '';
   }
 
+  resetInfo() {
+    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;
+
+    for (let i = 0; i < this.pictures.length; i++) {
+      if (this.pictures[i].photoId.toString() === this.photoId) {
+        this.photoPath = this.pictures[i].path;
+        break;
+      }
+    }
+  }
+  
+
 }