From 7c9c0653c68ecd5ad7e9c5b48922874fd6901fb1 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 23 Mar 2022 21:57:28 +0100
Subject: Profile page - dodata opcija izbora profilne slike. Svi pozivi rade.

---
 frontend/src/app/_data/ProfilePictures.ts          |  71 ++++++++++++++
 .../src/app/_pages/profile/profile.component.css   |   8 +-
 .../src/app/_pages/profile/profile.component.html  | 108 ++++++++++++---------
 .../src/app/_pages/profile/profile.component.ts    |  54 ++++++++++-
 frontend/src/assets/profilePictures/1.png          | Bin 0 -> 27411 bytes
 frontend/src/assets/profilePictures/10.png         | Bin 0 -> 37866 bytes
 frontend/src/assets/profilePictures/11.png         | Bin 0 -> 25177 bytes
 frontend/src/assets/profilePictures/12.png         | Bin 0 -> 22224 bytes
 frontend/src/assets/profilePictures/13.png         | Bin 0 -> 31624 bytes
 frontend/src/assets/profilePictures/14.png         | Bin 0 -> 30103 bytes
 frontend/src/assets/profilePictures/15.png         | Bin 0 -> 37226 bytes
 frontend/src/assets/profilePictures/16.png         | Bin 0 -> 27723 bytes
 frontend/src/assets/profilePictures/2.png          | Bin 0 -> 42749 bytes
 frontend/src/assets/profilePictures/3.png          | Bin 0 -> 37815 bytes
 frontend/src/assets/profilePictures/4.png          | Bin 0 -> 35414 bytes
 frontend/src/assets/profilePictures/5.png          | Bin 0 -> 37797 bytes
 frontend/src/assets/profilePictures/6.png          | Bin 0 -> 28790 bytes
 frontend/src/assets/profilePictures/7.png          | Bin 0 -> 47893 bytes
 frontend/src/assets/profilePictures/8.png          | Bin 0 -> 39817 bytes
 frontend/src/assets/profilePictures/9.png          | Bin 0 -> 25994 bytes
 20 files changed, 190 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/app/_data/ProfilePictures.ts
 create mode 100644 frontend/src/assets/profilePictures/1.png
 create mode 100644 frontend/src/assets/profilePictures/10.png
 create mode 100644 frontend/src/assets/profilePictures/11.png
 create mode 100644 frontend/src/assets/profilePictures/12.png
 create mode 100644 frontend/src/assets/profilePictures/13.png
 create mode 100644 frontend/src/assets/profilePictures/14.png
 create mode 100644 frontend/src/assets/profilePictures/15.png
 create mode 100644 frontend/src/assets/profilePictures/16.png
 create mode 100644 frontend/src/assets/profilePictures/2.png
 create mode 100644 frontend/src/assets/profilePictures/3.png
 create mode 100644 frontend/src/assets/profilePictures/4.png
 create mode 100644 frontend/src/assets/profilePictures/5.png
 create mode 100644 frontend/src/assets/profilePictures/6.png
 create mode 100644 frontend/src/assets/profilePictures/7.png
 create mode 100644 frontend/src/assets/profilePictures/8.png
 create mode 100644 frontend/src/assets/profilePictures/9.png

(limited to 'frontend/src')

diff --git a/frontend/src/app/_data/ProfilePictures.ts b/frontend/src/app/_data/ProfilePictures.ts
new file mode 100644
index 00000000..42688b4d
--- /dev/null
+++ b/frontend/src/app/_data/ProfilePictures.ts
@@ -0,0 +1,71 @@
+export class Picture {
+    photoId!: number;
+    path!: string;
+}
+
+export const PICTURES = [
+    {
+        photoId: 1,
+        path: "/assets/profilePictures/1.png"
+    },
+    {
+        photoId: 2,
+        path: "/assets/profilePictures/2.png"
+    },
+    {
+        photoId: 3,
+        path: "/assets/profilePictures/3.png"
+    },
+    {
+        photoId: 4,
+        path: "/assets/profilePictures/4.png"
+    },
+    {
+        photoId: 5,
+        path: "/assets/profilePictures/5.png"
+    },
+    {
+        photoId: 6,
+        path: "/assets/profilePictures/6.png"
+    },
+    {
+        photoId: 7,
+        path: "/assets/profilePictures/7.png"
+    },
+    {
+        photoId: 8,
+        path: "/assets/profilePictures/8.png"
+    },
+    {
+        photoId: 9,
+        path: "/assets/profilePictures/9.png"
+    },
+    {
+        photoId: 10,
+        path: "/assets/profilePictures/10.png"
+    },
+    {
+        photoId: 11,
+        path: "/assets/profilePictures/11.png"
+    },
+    {
+        photoId: 12,
+        path: "/assets/profilePictures/12.png"
+    },
+    {
+        photoId: 13,
+        path: "/assets/profilePictures/13.png"
+    },
+    {
+        photoId: 14,
+        path: "/assets/profilePictures/14.png"
+    },
+    {
+        photoId: 15,
+        path: "/assets/profilePictures/15.png"
+    },
+    {
+        photoId: 16,
+        path: "/assets/profilePictures/16.png"
+    }
+]
\ 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 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;
+      }
+    }
+  }
+  
+
 }
diff --git a/frontend/src/assets/profilePictures/1.png b/frontend/src/assets/profilePictures/1.png
new file mode 100644
index 00000000..27f46e7f
Binary files /dev/null and b/frontend/src/assets/profilePictures/1.png differ
diff --git a/frontend/src/assets/profilePictures/10.png b/frontend/src/assets/profilePictures/10.png
new file mode 100644
index 00000000..8523f582
Binary files /dev/null and b/frontend/src/assets/profilePictures/10.png differ
diff --git a/frontend/src/assets/profilePictures/11.png b/frontend/src/assets/profilePictures/11.png
new file mode 100644
index 00000000..37fa560b
Binary files /dev/null and b/frontend/src/assets/profilePictures/11.png differ
diff --git a/frontend/src/assets/profilePictures/12.png b/frontend/src/assets/profilePictures/12.png
new file mode 100644
index 00000000..2aedbdb0
Binary files /dev/null and b/frontend/src/assets/profilePictures/12.png differ
diff --git a/frontend/src/assets/profilePictures/13.png b/frontend/src/assets/profilePictures/13.png
new file mode 100644
index 00000000..f8d771d9
Binary files /dev/null and b/frontend/src/assets/profilePictures/13.png differ
diff --git a/frontend/src/assets/profilePictures/14.png b/frontend/src/assets/profilePictures/14.png
new file mode 100644
index 00000000..d3ec8ae1
Binary files /dev/null and b/frontend/src/assets/profilePictures/14.png differ
diff --git a/frontend/src/assets/profilePictures/15.png b/frontend/src/assets/profilePictures/15.png
new file mode 100644
index 00000000..835ba0ab
Binary files /dev/null and b/frontend/src/assets/profilePictures/15.png differ
diff --git a/frontend/src/assets/profilePictures/16.png b/frontend/src/assets/profilePictures/16.png
new file mode 100644
index 00000000..6cdf285f
Binary files /dev/null and b/frontend/src/assets/profilePictures/16.png differ
diff --git a/frontend/src/assets/profilePictures/2.png b/frontend/src/assets/profilePictures/2.png
new file mode 100644
index 00000000..a99fad8a
Binary files /dev/null and b/frontend/src/assets/profilePictures/2.png differ
diff --git a/frontend/src/assets/profilePictures/3.png b/frontend/src/assets/profilePictures/3.png
new file mode 100644
index 00000000..b4219c22
Binary files /dev/null and b/frontend/src/assets/profilePictures/3.png differ
diff --git a/frontend/src/assets/profilePictures/4.png b/frontend/src/assets/profilePictures/4.png
new file mode 100644
index 00000000..ef0701ef
Binary files /dev/null and b/frontend/src/assets/profilePictures/4.png differ
diff --git a/frontend/src/assets/profilePictures/5.png b/frontend/src/assets/profilePictures/5.png
new file mode 100644
index 00000000..d8dc7967
Binary files /dev/null and b/frontend/src/assets/profilePictures/5.png differ
diff --git a/frontend/src/assets/profilePictures/6.png b/frontend/src/assets/profilePictures/6.png
new file mode 100644
index 00000000..96540607
Binary files /dev/null and b/frontend/src/assets/profilePictures/6.png differ
diff --git a/frontend/src/assets/profilePictures/7.png b/frontend/src/assets/profilePictures/7.png
new file mode 100644
index 00000000..f0557738
Binary files /dev/null and b/frontend/src/assets/profilePictures/7.png differ
diff --git a/frontend/src/assets/profilePictures/8.png b/frontend/src/assets/profilePictures/8.png
new file mode 100644
index 00000000..982fdae4
Binary files /dev/null and b/frontend/src/assets/profilePictures/8.png differ
diff --git a/frontend/src/assets/profilePictures/9.png b/frontend/src/assets/profilePictures/9.png
new file mode 100644
index 00000000..b7d99523
Binary files /dev/null and b/frontend/src/assets/profilePictures/9.png differ
-- 
cgit v1.2.3