From 24679faf85c509e04c86f00dae1e6dbc08ce6e2a Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Sun, 13 Mar 2022 23:30:29 +0100
Subject: Doradjen login-modal.component i uradjen register-modal.component
 (stilski uredjen modal register forme)

---
 .../app/_modals/login-modal/login-modal.component.ts | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

(limited to 'frontend/src/app/_modals/login-modal/login-modal.component.ts')

diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index 3a6fd8f1..3ee2c7fe 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -1,11 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { CookieService } from 'ngx-cookie-service';
 import { AuthService } from 'src/app/_services/auth.service';
-import { ElementRef } from '@angular/core';
-
-declare var window: any;
 
 @Component({
   selector: 'app-login-modal',
@@ -27,25 +23,21 @@ export class LoginModalComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.loginModal = new window.bootstrap.Modal(
-      document.getElementById("modalForLogin")
-    );
   }
 
-  openModal() {
-    this.loginModal.show();
-    //console.log("ok");
-    //(<HTMLInputElement>document.getElementById("exampleModal")).style.display = "block";
-  }
   doLogin() {
     this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
       console.log(response);
       this.cookie.set('token', response);
+      this.resetData(); //dodato
       this.loginModal.hide(); //dodato
       this.router.navigate(['add-model']);
+    }, error => {
+      console.warn(error); //NETACNI PODACI
     });
   }
-  sendToRegister() {
-    
+  resetData() {
+    this.username = '';
+    this.password = '';
   }
 }
-- 
cgit v1.2.3


From 5d9b17d69acc8dfbe30859610c6ba2fa5d9d963f Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 14 Mar 2022 19:03:36 +0100
Subject: Sredjeni modali za login i register. Dodat folder images u
 src/assets.

---
 .../_modals/login-modal/login-modal.component.html |   6 ++--
 .../_modals/login-modal/login-modal.component.ts   |   4 +--
 .../register-modal/register-modal.component.html   |  37 ++++++---------------
 .../register-modal/register-modal.component.ts     |  29 ++++++----------
 frontend/src/assets/images/logo.png                | Bin 0 -> 13315 bytes
 frontend/src/assets/images/logo_crop.png           | Bin 0 -> 11447 bytes
 frontend/src/assets/images/logo_dark.png           | Bin 0 -> 15736 bytes
 frontend/src/assets/images/logo_dark_crop.png      | Bin 0 -> 10987 bytes
 8 files changed, 25 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/assets/images/logo.png
 create mode 100644 frontend/src/assets/images/logo_crop.png
 create mode 100644 frontend/src/assets/images/logo_dark.png
 create mode 100644 frontend/src/assets/images/logo_dark_crop.png

(limited to 'frontend/src/app/_modals/login-modal/login-modal.component.ts')

diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html
index eb6f0c53..d694ea58 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -2,8 +2,8 @@
 <div class="modal fade" id="modalForLogin" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
-      <div class="modal-header bg-info">
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button>
+      <div class="modal-header" style="background-color: #003459;">
+        <button id="closeButton" type="button" class="btn-close" style="background-color:white;" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button>
       </div>
       <div class="modal-body px-5" style="color:#003459">
           <h1 class="text-center mt-2 mb-4">Prijavite se</h1>
@@ -27,7 +27,7 @@
             </div>
           </form>
           <div class="col-md-12 d-flex justify-content-center">
-            <button type="button" class="btn btn-lg btn-info" style="color:white; border-color: #00a8e8; margin-right: 10px;" (click)="doLogin()">Prijavite se</button>
+            <button type="button" class="btn btn-lg" style="color:white; background-color: #003459; margin-right: 10px;" (click)="doLogin()">Prijavite se</button>
             <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
           </div>
           <br>
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index 3ee2c7fe..22bd9a28 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -10,7 +10,6 @@ import { AuthService } from 'src/app/_services/auth.service';
 })
 export class LoginModalComponent implements OnInit {
 
-  loginModal: any;
   username: string = '';
   password: string = '';
 
@@ -29,8 +28,7 @@ export class LoginModalComponent implements OnInit {
     this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
       console.log(response);
       this.cookie.set('token', response);
-      this.resetData(); //dodato
-      this.loginModal.hide(); //dodato
+      (<HTMLSelectElement>document.getElementById('closeButton')).click();
       this.router.navigate(['add-model']);
     }, error => {
       console.warn(error); //NETACNI PODACI
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html
index d20b199f..7ed2bbac 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.html
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.html
@@ -2,8 +2,8 @@
 <div class="modal fade" id="modalForRegister" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg">
     <div class="modal-content">
-    <div class="modal-header bg-info">
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button>
+    <div class="modal-header" style="background-color: #003459;">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" style="background-color: white;" aria-label="Close" (click)="resetData()"></button>
     </div>
     <div class="modal-body" style="color:#003459">
         <h1 class="text-center mt-2 mb-4">Registracija</h1>
@@ -14,15 +14,13 @@
                 <div class="col-6 px-3 py-3">
                     <label class="form-label" for="firstName">Ime</label>
                     <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName" name="firstName" placeholder="Unesite ime...">
-                    <p *ngIf="wrongFirstNameBool" class="small fw-bold text-danger">Unesite ispravno ime. (minimum 1, maksimum 30 karaktera)</p>
-                    <!--<small *ngIf="wrongFirstNameBool" class="form-text text-muted">Unesite ispravno ime</small>
-                    <small class="form-text text-muted" [ngClass]="{wrongFirstNameBool} ? 'notCorrect' : 'correct'">Ispravno uneto ime</small>-->
+                    <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Unesite ispravno ime.</small>
                 </div>
                 <!--Prezime-->
                 <div class="col-6 px-3 py-3">
                     <label class="form-label" for="lastName">Prezime</label>
                     <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName" placeholder="Unesite prezime..."/>
-                    <p *ngIf="wrongLastNameBool" class="small fw-bold text-danger">Unesite ispravno prezime. (minimum 1, maksimum 30 karaktera)</p>
+                    <small *ngIf="wrongLastNameBool" class="form-text text-danger">Unesite ispravno prezime.</small>
                 </div>
             </div>
             <div class="row">
@@ -30,7 +28,7 @@
                 <div class="col-12 px-3 py-3">
                     <label class="form-label" for="username">Korisničko ime</label>
                     <input type="text" id="username" class="form-control" [(ngModel)]="username" name="username" placeholder="Unesite korisničko ime..."/>
-                    <p *ngIf="wrongUsernameBool" class="small fw-bold text-danger">Unesite ispravno korisničko ime.</p>
+                    <small *ngIf="wrongUsernameBool" class="form-text text-danger">Unesite ispravno korisničko ime.</small>
                 </div>
             </div>
             <div class="row">
@@ -38,7 +36,7 @@
                 <div class="col-12 px-3 py-3">
                     <label class="form-label" for="email">E-mail adresa</label>
                     <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" placeholder="Unesite email adresu..."/>
-                    <p *ngIf="wrongEmailBool" class="small fw-bold text-danger">Unesite ispravnu e-mail adresu.</p>
+                    <small *ngIf="wrongEmailBool" class="form-text text-danger">Unesite ispravno e-mail adresu.</small>
                 </div>
             </div>
             <div class="row">
@@ -46,40 +44,27 @@
                 <div class="col-6 px-3 py-3">
                     <label class="form-label" for="pass1">Lozinka</label>
                     <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1" placeholder="Unesite lozinku..."/>
-                    <p *ngIf="wrongPass1Bool" class="small fw-bold text-danger">Lozinka se mora sastojati od najmanje 6 karaktera.</p>
+                    <small *ngIf="wrongPass1Bool" class="form-text text-danger">Lozinka se mora sastojati od najmanje 6 karaktera.</small>
                 </div>
                 <!-- Lozinka 2. -->
                 <div class="col-6 px-3 py-3">
                     <label class="form-label" for="pass2">Potvrdite lozinku</label>
                     <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2" placeholder="Ponovite lozinku..."/>
-                    <p *ngIf="wrongPass2Bool" class="small fw-bold text-danger">Lozinke se ne podudaraju.</p>
+                    <small *ngIf="wrongPass2Bool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
                 </div>
             </div>
         </form>
         <div class="col-md-12 d-flex justify-content-center mt-5">
-            <button type="button" class="btn btn-lg btn-info" style="color:white; border-color: #00a8e8; margin-right: 10px;" (click)="doRegister()">Registracija</button>
+            <button type="button" class="btn btn-lg" style="color:white; background-color: #003459; margin-right: 10px;" (click)="doRegister()">Registrujte se</button>
             <button type="button" class="btn btn-lg btn-outline-secondary" style="margin-left: 15px;" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
         </div>
         <br>
     </div>
     <div class="modal-footer justify-content-center">
         <p class="small fw-bold">Već imate kreiran nalog?
-        <a data-bs-toggle="modal" data-bs-target="#modalForLogin" class="link-danger">Prijavite se</a>
+        <a id="linkToLoginModal" data-bs-toggle="modal" data-bs-target="#modalForLogin" class="link-danger">Prijavite se</a>
         </p>
     </div>
     </div>
 </div>
-</div>
-
-<style>
-.correct {
-    content: "✔️";
-    margin: 5px;
-    color: green;
-}
-.notCorrect {
-    content: "✕";
-    margin: 5px;
-    color: red;
-}
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts
index d86345b5..688fc806 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.ts
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts
@@ -1,9 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { AuthService } from 'src/app/_services/auth.service';
 
-declare var window: any;
-
 @Component({
   selector: 'app-register-modal',
   templateUrl: './register-modal.component.html',
@@ -11,8 +8,6 @@ declare var window: any;
 })
 export class RegisterModalComponent implements OnInit {
 
-  registerModal: any;
-
   firstName: string = '';
   lastName: string = '';
   username: string = '';
@@ -28,25 +23,18 @@ export class RegisterModalComponent implements OnInit {
   wrongPass2Bool: boolean = false;
 
   pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/;
-  pattUsername: RegExp = /^[a-zA-Z0-9](_(?!(\.|_))|\.(?!(_|\.))|[a-zA-Z0-9]){6,18}[a-zA-Z0-9]$/;
+  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 router: Router,
     private authService: AuthService
   ) { }
 
   ngOnInit(): void {
-    this.registerModal = new window.bootstrap.Modal(
-      document.getElementById("modalForRegister")
-    ); 
   }
 
-  openModal() {
-    this.registerModal.show();
-  }
   doRegister() {
     this.validation();
   }
@@ -149,14 +137,17 @@ export class RegisterModalComponent implements OnInit {
           (response) => {
             console.log(response);
             if (response === 'User added') {
-              this.resetData(); //DODATO
-              this.registerModal.hide(); //dodato
-              this.router.navigate(['/login']); //registracija uspesna, idi na LOGIN MODAL, SREDITI
+              this.resetData();
+              (<HTMLSelectElement>document.getElementById('linkToLoginModal')).click();
             }
-            else if (response === 'Email Already Exists')
+            else if (response === 'Email Already Exists') {
               alert('Nalog sa unetim email-om već postoji!');
-            else if (response === 'Username Already Exists')
-              alert('Nalog sa unetim korisnićkim imenom već postoji!');
+              (<HTMLSelectElement>document.getElementById('email')).focus();
+            }
+            else if (response === 'Username Already Exists') {
+              alert('Nalog sa unetim korisničkim imenom već postoji!');
+              (<HTMLSelectElement>document.getElementById('username')).focus();
+            }
           }
         );
     }
diff --git a/frontend/src/assets/images/logo.png b/frontend/src/assets/images/logo.png
new file mode 100644
index 00000000..2e15550a
Binary files /dev/null and b/frontend/src/assets/images/logo.png differ
diff --git a/frontend/src/assets/images/logo_crop.png b/frontend/src/assets/images/logo_crop.png
new file mode 100644
index 00000000..1775a465
Binary files /dev/null and b/frontend/src/assets/images/logo_crop.png differ
diff --git a/frontend/src/assets/images/logo_dark.png b/frontend/src/assets/images/logo_dark.png
new file mode 100644
index 00000000..95c06d8f
Binary files /dev/null and b/frontend/src/assets/images/logo_dark.png differ
diff --git a/frontend/src/assets/images/logo_dark_crop.png b/frontend/src/assets/images/logo_dark_crop.png
new file mode 100644
index 00000000..d66f13e2
Binary files /dev/null and b/frontend/src/assets/images/logo_dark_crop.png differ
-- 
cgit v1.2.3


From a9287af015228a73b5053acdef421d9d63ba766b Mon Sep 17 00:00:00 2001
From: Danijel Andjelkovic <adanijel99@gmail.com>
Date: Tue, 15 Mar 2022 16:06:09 +0100
Subject: Dodao automatsko osvezavanja JWT tokena, automatsko ucitavanje
 ulogovanog korisnika. Prosirio modele Dataset, Model, Predictor tako da se
 moze definisati da li su javna ili da li bilo ko sa linkom moze da ih vidi,
 dodao lastUpdated datum. Login dugme u navbar-u radi funkcionalno.
 Login/logout ne moraju da osveze stranicu vise.

---
 frontend/src/app/_data/Dataset.ts                  |   5 +-
 frontend/src/app/_data/Model.ts                    |   3 +-
 frontend/src/app/_data/Predictor.ts                |   5 +-
 .../src/app/_elements/navbar/navbar.component.html |   2 +-
 .../src/app/_elements/navbar/navbar.component.ts   |   6 +-
 .../_modals/login-modal/login-modal.component.ts   |   3 +-
 .../register-modal/register-modal.component.html   | 142 ++++++++++++---------
 .../register-modal/register-modal.component.ts     |   6 +-
 frontend/src/app/_services/auth.service.ts         |  46 +++++++
 9 files changed, 144 insertions(+), 74 deletions(-)

(limited to 'frontend/src/app/_modals/login-modal/login-modal.component.ts')

diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index b4e46315..aaee50eb 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -5,6 +5,9 @@ export default class Dataset {
         public header: string[] = [],
         public fileId?: number,
         public extension: string = '.csv',
-        public dateCreated: Date = new Date()
+        public isPublic: boolean = false,
+        public accessibleByLink: boolean = false,
+        public dateCreated: Date = new Date(),
+        public lastUpdated: Date = new Date()
     ) { }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 162d5d78..1a120ca7 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -3,9 +3,10 @@ export default class Model {
         public name: string = 'Novi model',
         public description: string = '',
         public dateCreated: Date = new Date(),
+        public lastUpdated: Date = new Date(),
         public datasetId?: number,
 
-        //Test set settings
+        // Test set settings
         public inputColumns: number[] = [0],
         public columnToPredict: number = 1,
         public randomOrder: boolean = true,
diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts
index 379526ec..77d9498b 100644
--- a/frontend/src/app/_data/Predictor.ts
+++ b/frontend/src/app/_data/Predictor.ts
@@ -2,8 +2,9 @@ export default class Dataset {
     constructor(
         public name: string = 'Novi izvor podataka',
         public description: string = '',
-        public inputs: string[] = [],
-        public output: string = '',
+        public columns: string[] = [],
+        public isPublic: boolean = false,
+        public accessibleByLink: boolean = false,
         public dateCreated: Date = new Date()
     ) { }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 426332bd..cea41e5a 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -30,7 +30,7 @@
                     <li>
                         <hr class="dropdown-divider">
                     </li>
-                    <li><a class="dropdown-item" href="#">Odjavi se</a></li>
+                    <li><a class="dropdown-item" (click)="logOut()">Odjavi se</a></li>
                 </ul>
             </div>
             <div *ngIf="!shared.loggedIn" class="dropdown text-end">
diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts
index 154a0d7d..c16e3e9d 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.ts
+++ b/frontend/src/app/_elements/navbar/navbar.component.ts
@@ -18,11 +18,13 @@ export class NavbarComponent implements OnInit {
     this.location.onUrlChange(() => {
       this.currentUrl = this.location.path();
     })
-
-    this.shared.loggedIn = auth.isAuthenticated();
   }
 
   ngOnInit(): void {
+    this.auth.updateUser();
   }
 
+  logOut() {
+    this.auth.logOut();
+  }
 }
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index 22bd9a28..87686f10 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -27,9 +27,8 @@ export class LoginModalComponent implements OnInit {
   doLogin() {
     this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
       console.log(response);
-      this.cookie.set('token', response);
+      this.authService.authenticate(response);
       (<HTMLSelectElement>document.getElementById('closeButton')).click();
-      this.router.navigate(['add-model']);
     }, error => {
       console.warn(error); //NETACNI PODACI
     });
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html
index 7ed2bbac..7098c040 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.html
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.html
@@ -1,70 +1,88 @@
 <!-- Modal -->
-<div class="modal fade" id="modalForRegister" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-<div class="modal-dialog modal-dialog-centered modal-dialog modal-lg">
-    <div class="modal-content">
-    <div class="modal-header" style="background-color: #003459;">
-        <button type="button" class="btn-close" data-bs-dismiss="modal" style="background-color: white;" aria-label="Close" (click)="resetData()"></button>
-    </div>
-    <div class="modal-body" style="color:#003459">
-        <h1 class="text-center mt-2 mb-4">Registracija</h1>
-        
-        <form class="mx-5">
-            <!--Ime-->
-            <div class="row">
-                <div class="col-6 px-3 py-3">
-                    <label class="form-label" for="firstName">Ime</label>
-                    <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName" name="firstName" placeholder="Unesite ime...">
-                    <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Unesite ispravno ime.</small>
-                </div>
-                <!--Prezime-->
-                <div class="col-6 px-3 py-3">
-                    <label class="form-label" for="lastName">Prezime</label>
-                    <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName" placeholder="Unesite prezime..."/>
-                    <small *ngIf="wrongLastNameBool" class="form-text text-danger">Unesite ispravno prezime.</small>
-                </div>
+<div class="modal fade" id="modalForRegister" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header" style="background-color: #003459;">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" style="background-color: white;"
+                    aria-label="Close" (click)="resetData()"></button>
             </div>
-            <div class="row">
-                <!--Korisnicko ime-->
-                <div class="col-12 px-3 py-3">
-                    <label class="form-label" for="username">Korisničko ime</label>
-                    <input type="text" id="username" class="form-control" [(ngModel)]="username" name="username" placeholder="Unesite korisničko ime..."/>
-                    <small *ngIf="wrongUsernameBool" class="form-text text-danger">Unesite ispravno korisničko ime.</small>
+            <div class="modal-body" style="color:#003459">
+                <h1 class="text-center mt-2 mb-4">Registracija</h1>
+
+                <form class="mx-5">
+                    <!--Ime-->
+                    <div class="row">
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="firstName">Ime</label>
+                            <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName"
+                                name="firstName" placeholder="Unesite ime...">
+                            <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Unesite ispravno
+                                ime.</small>
+                        </div>
+                        <!--Prezime-->
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="lastName">Prezime</label>
+                            <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName"
+                                placeholder="Unesite prezime..." />
+                            <small *ngIf="wrongLastNameBool" class="form-text text-danger">Unesite ispravno
+                                prezime.</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <!--Korisnicko ime-->
+                        <div class="col-12 px-3 py-3">
+                            <label class="form-label" for="username-register">Korisničko ime</label>
+                            <input type="text" id="username-register" class="form-control" [(ngModel)]="username"
+                                name="username-register" placeholder="Unesite korisničko ime..." />
+                            <small *ngIf="wrongUsernameBool" class="form-text text-danger">Unesite ispravno korisničko
+                                ime.</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <!--Email-->
+                        <div class="col-12 px-3 py-3">
+                            <label class="form-label" for="email">E-mail adresa</label>
+                            <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email"
+                                placeholder="Unesite email adresu..." />
+                            <small *ngIf="wrongEmailBool" class="form-text text-danger">Unesite ispravno e-mail
+                                adresu.</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <!-- Lozinka 1. -->
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="pass1">Lozinka</label>
+                            <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1"
+                                placeholder="Unesite lozinku..." />
+                            <small *ngIf="wrongPass1Bool" class="form-text text-danger">Lozinka se mora sastojati od
+                                najmanje 6 karaktera.</small>
+                        </div>
+                        <!-- Lozinka 2. -->
+                        <div class="col-6 px-3 py-3">
+                            <label class="form-label" for="pass2">Potvrdite lozinku</label>
+                            <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2"
+                                placeholder="Ponovite lozinku..." />
+                            <small *ngIf="wrongPass2Bool" class="form-text text-danger">Lozinke se ne
+                                podudaraju.</small>
+                        </div>
+                    </div>
+                </form>
+                <div class="col-md-12 d-flex justify-content-center mt-5">
+                    <button type="button" class="btn btn-lg"
+                        style="color:white; background-color: #003459; margin-right: 10px;"
+                        (click)="doRegister()">Registrujte se</button>
+                    <button type="button" class="btn btn-lg btn-outline-secondary" style="margin-left: 15px;"
+                        data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
                 </div>
+                <br>
             </div>
-            <div class="row">
-                <!--Email-->
-                <div class="col-12 px-3 py-3">
-                    <label class="form-label" for="email">E-mail adresa</label>
-                    <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" placeholder="Unesite email adresu..."/>
-                    <small *ngIf="wrongEmailBool" class="form-text text-danger">Unesite ispravno e-mail adresu.</small>
-                </div>
+            <div class="modal-footer justify-content-center">
+                <p class="small fw-bold">Već imate kreiran nalog?
+                    <a id="linkToLoginModal" data-bs-toggle="modal" data-bs-target="#modalForLogin"
+                        class="link-danger">Prijavite se</a>
+                </p>
             </div>
-            <div class="row">
-                <!-- Lozinka 1. -->
-                <div class="col-6 px-3 py-3">
-                    <label class="form-label" for="pass1">Lozinka</label>
-                    <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1" placeholder="Unesite lozinku..."/>
-                    <small *ngIf="wrongPass1Bool" class="form-text text-danger">Lozinka se mora sastojati od najmanje 6 karaktera.</small>
-                </div>
-                <!-- Lozinka 2. -->
-                <div class="col-6 px-3 py-3">
-                    <label class="form-label" for="pass2">Potvrdite lozinku</label>
-                    <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2" placeholder="Ponovite lozinku..."/>
-                    <small *ngIf="wrongPass2Bool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
-                </div>
-            </div>
-        </form>
-        <div class="col-md-12 d-flex justify-content-center mt-5">
-            <button type="button" class="btn btn-lg" style="color:white; background-color: #003459; margin-right: 10px;" (click)="doRegister()">Registrujte se</button>
-            <button type="button" class="btn btn-lg btn-outline-secondary" style="margin-left: 15px;" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
         </div>
-        <br>
-    </div>
-    <div class="modal-footer justify-content-center">
-        <p class="small fw-bold">Već imate kreiran nalog?
-        <a id="linkToLoginModal" data-bs-toggle="modal" data-bs-target="#modalForLogin" class="link-danger">Prijavite se</a>
-        </p>
-    </div>
     </div>
-</div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts
index 688fc806..c02a4e1a 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.ts
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts
@@ -48,7 +48,7 @@ export class RegisterModalComponent implements OnInit {
       return true;
     return false;
   }
-  isCorrectUsername(element: string) : boolean {
+  isCorrectUsername(element: string): boolean {
     if (this.pattUsername.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30))
       return true;
     return false;
@@ -85,7 +85,7 @@ export class RegisterModalComponent implements OnInit {
       this.wrongUsernameBool = false;
       return;
     }
-    (<HTMLSelectElement>document.getElementById('username')).focus();
+    (<HTMLSelectElement>document.getElementById('username-register')).focus();
     this.wrongUsernameBool = true;
   }
   emailValidation() {
@@ -146,7 +146,7 @@ export class RegisterModalComponent implements OnInit {
             }
             else if (response === 'Username Already Exists') {
               alert('Nalog sa unetim korisničkim imenom već postoji!');
-              (<HTMLSelectElement>document.getElementById('username')).focus();
+              (<HTMLSelectElement>document.getElementById('username-register')).focus();
             }
           }
         );
diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts
index c96c2dae..e6611880 100644
--- a/frontend/src/app/_services/auth.service.ts
+++ b/frontend/src/app/_services/auth.service.ts
@@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
 import { API_SETTINGS } from 'src/config';
+import shared from '../Shared';
 
 const jwtHelper = new JwtHelperService();
 
@@ -11,6 +12,8 @@ const jwtHelper = new JwtHelperService();
 })
 export class AuthService {
 
+  shared = shared;
+
   constructor(private http: HttpClient, private cookie: CookieService) { }
 
   login(username: string, password: string) {
@@ -28,4 +31,47 @@ export class AuthService {
     }
     return false;
   }
+
+  lastToken?: string;
+  refresher: any;
+
+  enableAutoRefresh() {
+    this.lastToken = this.cookie.get('token');
+    let exp = jwtHelper.getTokenExpirationDate(this.lastToken);
+    if (!exp) {
+      exp = new Date();
+    }
+    console.log(exp, exp?.getTime());
+    this.refresher = setTimeout(() => {
+      console.log('refreshing token!');
+      this.http.post(`${API_SETTINGS.apiURL}/auth/renewJwt`, {}, { headers: this.authHeader(), responseType: 'text' }).subscribe((response) => {
+        this.authenticate(response);
+      });
+    }, exp.getTime() - new Date().getTime());
+  }
+
+  authenticate(token: string) {
+    const user = jwtHelper.decodeToken(token);
+    this.cookie.set('token', token, user.exp);
+    this.updateUser();
+  }
+
+  updateUser() {
+    if (this.cookie.check('token')) {
+      const token = this.cookie.get('token');
+      this.shared.loggedIn = this.isAuthenticated();
+      this.enableAutoRefresh();
+    }
+  }
+
+  logOut() {
+    this.cookie.delete('token');
+    if (this.refresher)
+      clearTimeout(this.refresher);
+    this.shared.loggedIn = false;
+  }
+
+  authHeader() {
+    return new HttpHeaders().set("Authorization", "Bearer " + this.cookie.get('token'));
+  }
 }
-- 
cgit v1.2.3


From f0e05dade823673fbf6568f50f64b93859000f32 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 16 Mar 2022 00:06:21 +0100
Subject: Promenjena veza add-model strane i dataset-load komponente. Dodat
 models.service - slanje dataseta i modela backendu.

---
 .../_elements/dataset-load/dataset-load.component.ts    |  9 +++++----
 .../app/_modals/login-modal/login-modal.component.ts    | 17 ++++++++++-------
 .../src/app/_pages/add-model/add-model.component.html   |  6 +++---
 .../src/app/_pages/add-model/add-model.component.ts     |  4 ++++
 frontend/src/app/_pages/home/home.component.html        |  2 +-
 frontend/src/app/_services/auth-guard.service.ts        |  2 +-
 frontend/src/app/_services/models.service.ts            |  4 ++++
 7 files changed, 28 insertions(+), 16 deletions(-)

(limited to 'frontend/src/app/_modals/login-modal/login-modal.component.ts')

diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index d9d045ce..8465c3d6 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
 import Dataset from 'src/app/_data/Dataset';
 
@@ -9,6 +9,8 @@ import Dataset from 'src/app/_data/Dataset';
 })
 export class DatasetLoadComponent {
 
+  @Output() loaded = new EventEmitter<string>();
+
   delimiter: string = "";
   delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
 
@@ -21,9 +23,6 @@ export class DatasetLoadComponent {
   rowsNumber: number = 0;
   colsNumber: number = 0;
 
-  checkedInputCols: Array<string> = [];
-  checkedOutputCol: string = '';
-
   dataset: Dataset;
 
   constructor(private ngxCsvParser: NgxCsvParser) {
@@ -55,6 +54,8 @@ export class DatasetLoadComponent {
         this.colsNumber = this.csvRecords[0].length;
 
         this.dataset.header = this.csvRecords[0];
+
+        this.loaded.emit("loaded");
       }
     }, (error: NgxCSVParserError) => {
       console.log('Error', error);
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index 87686f10..d17d7017 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -25,13 +25,16 @@ export class LoginModalComponent implements OnInit {
   }
 
   doLogin() {
-    this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
-      console.log(response);
-      this.authService.authenticate(response);
-      (<HTMLSelectElement>document.getElementById('closeButton')).click();
-    }, error => {
-      console.warn(error); //NETACNI PODACI
-    });
+    if (this.username.length > 0 && this.password.length > 0) {
+      this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
+        console.log(response);
+        this.authService.authenticate(response);
+        (<HTMLSelectElement>document.getElementById('closeButton')).click();
+      }, error => {
+        console.warn(error); //NETACNI PODACI
+      });
+    }
+    
   }
   resetData() {
     this.username = '';
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
index 5c4411b9..f5270127 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -30,11 +30,11 @@
     
         <div class="my-5 justify-content-center">
             <h2>Izvor podataka:</h2>
-            <app-dataset-load id="dataset"></app-dataset-load>
+            <app-dataset-load id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load>
         </div>
 
-        <div *ngIf="datasetLoadComponent" class="mt-2">
-            <div class="row">
+        <div *ngIf="datasetLoaded" class="mt-2">
+            <div *ngIf="datasetLoadComponent" class="row">
               <div class="col d-flex justify-content-center">
                 <h3>Izaberite ulazne kolone:</h3> 
                 <div id="divInputs" class="form-check">
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index 3c8c32c6..c18ad324 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -13,6 +13,7 @@ import { ModelsService } from 'src/app/_services/models.service';
 export class AddModelComponent implements OnInit {
 
   @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent;
+  datasetLoaded: boolean = false;
 
   newModel: Model;
 
@@ -31,6 +32,9 @@ export class AddModelComponent implements OnInit {
   }
 
   addModel() {
+    if (this.datasetLoadComponent)
+      this.models.addDataset(this.datasetLoadComponent?.dataset);
+
     this.getCheckedInputCols();
     this.getCheckedOutputCol();
     if (this.validationInputsOutput()) 
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 374cb324..7245f602 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex flex-column align-items-center">
+<div class="d-flex flex-column align-items-center bg-light">
     <img src="../../../assets/svg/logo.svg" class="bi me-2" width="256" height="256" role="img">
     <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center">
         <h2 class="my-4">Započnite sa treniranjem!</h2>
diff --git a/frontend/src/app/_services/auth-guard.service.ts b/frontend/src/app/_services/auth-guard.service.ts
index b6d3678d..057996e0 100644
--- a/frontend/src/app/_services/auth-guard.service.ts
+++ b/frontend/src/app/_services/auth-guard.service.ts
@@ -15,7 +15,7 @@ export class AuthGuardService implements CanActivate {
     if (this.auth.isAuthenticated()) {
       return true;
     }
-    this.router.navigate(['login']);
+    this.router.navigate(['']);
     return false;
   }
 }
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index bd91a811..f85ca44e 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import Model from '../_data/Model';
 import { AuthService } from './auth.service';
 import { API_SETTINGS } from 'src/config';
+import Dataset from '../_data/Dataset';
 
 
 @Injectable({
@@ -15,4 +16,7 @@ export class ModelsService {
   addModel(model: Model) {
     return this.http.post(`${API_SETTINGS.apiURL}/model/sendModel`, model, { headers: this.authService.authHeader(), responseType: 'text' });
   }
+  addDataset(dataset: Dataset) {
+    return this.http.post(`${API_SETTINGS.apiURL}/model/uploadDataset`, dataset, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
 }
-- 
cgit v1.2.3