Merge branch 'dev' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into dev

6 files changed, 289 insertions, 34 deletions

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 22f50de2..d694ea58 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -1,14 +1,9 @@
-<!-- Button trigger modal, OVO JE U STVARI DUGME U NAVBARU -->
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForLogin" (click)="openModal()">
-  Otvori login modal
-</button>
-
 <!-- Modal -->
 <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"></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>
@@ -32,18 +27,16 @@
             </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 btn-outline-secondary" data-bs-dismiss="modal">Odustanite</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>
       </div>
       <div class="modal-footer justify-content-center">
         <p class="small fw-bold">Još uvek nemate nalog?
-          <a routerLink="/register" class="link-danger">Registrujte se</a>
+          <a data-bs-toggle="modal" data-bs-target="#modalForRegister" class="link-danger">Registrujte se</a>
         </p>
       </div>
     </div>
   </div>
-</div>
-
-
+</div>
\ No newline at end of file
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..d17d7017 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',
@@ -14,7 +10,6 @@ declare var window: any;
 })
 export class LoginModalComponent implements OnInit {
 
-  loginModal: any;
   username: string = '';
   password: string = '';
 
@@ -27,25 +22,22 @@ 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.loginModal.hide(); //dodato
-      this.router.navigate(['add-model']);
-    });
-  }
-  sendToRegister() {
+    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 = '';
+    this.password = '';
+  }
 }
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.css b/frontend/src/app/_modals/register-modal/register-modal.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.css
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html
new file mode 100644
index 00000000..7098c040
--- /dev/null
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.html
@@ -0,0 +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>
+                    <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="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.spec.ts b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts
new file mode 100644
index 00000000..e371b3d8
--- /dev/null
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterModalComponent } from './register-modal.component';
+
+describe('RegisterModalComponent', () => {
+  let component: RegisterModalComponent;
+  let fixture: ComponentFixture<RegisterModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RegisterModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts
new file mode 100644
index 00000000..c02a4e1a
--- /dev/null
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts
@@ -0,0 +1,157 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from 'src/app/_services/auth.service';
+
+@Component({
+  selector: 'app-register-modal',
+  templateUrl: './register-modal.component.html',
+  styleUrls: ['./register-modal.component.css']
+})
+export class RegisterModalComponent implements OnInit {
+
+  firstName: string = '';
+  lastName: string = '';
+  username: string = '';
+  email: string = '';
+  pass1: string = '';
+  pass2: string = '';
+
+  wrongFirstNameBool: boolean = false;
+  wrongLastNameBool: boolean = false;
+  wrongUsernameBool: boolean = false;
+  wrongEmailBool: boolean = false;
+  wrongPass1Bool: boolean = false;
+  wrongPass2Bool: 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 authService: AuthService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  doRegister() {
+    this.validation();
+  }
+  resetData() {
+    this.firstName = this.lastName = this.username = this.email = this.pass1 = this.pass2 = '';
+    this.wrongFirstNameBool = this.wrongLastNameBool = this.wrongUsernameBool = this.wrongEmailBool = this.wrongPass1Bool = this.wrongPass2Bool = false;
+  }
+
+  isCorrectName(element: string): boolean {
+    if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30))
+      return true;
+    return false;
+  }
+  isCorrectUsername(element: string): boolean {
+    if (this.pattUsername.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30))
+      return true;
+    return false;
+  }
+  isCorrectEmail(element: string): boolean {
+    if (this.pattEmail.test(element.toLowerCase()) && element.length <= 320)
+      return true;
+    return false;
+  }
+  isCorrectPassword(element: string): boolean {
+    if (this.pattPassword.test(element))
+      return true;
+    return false;
+  }
+
+  firstNameValidation() {
+    if (this.isCorrectName(this.firstName) == true) {
+      this.wrongFirstNameBool = false;
+      return;
+    }
+    (<HTMLSelectElement>document.getElementById('firstName')).focus();
+    this.wrongFirstNameBool = true;
+  }
+  lastNameValidation() {
+    if (this.isCorrectName(this.lastName) == true) {
+      this.wrongLastNameBool = false;
+      return;
+    }
+    (<HTMLSelectElement>document.getElementById('lastName')).focus();
+    this.wrongLastNameBool = true;
+  }
+  usernameValidation() {
+    if (this.isCorrectUsername(this.username) == true) {
+      this.wrongUsernameBool = false;
+      return;
+    }
+    (<HTMLSelectElement>document.getElementById('username-register')).focus();
+    this.wrongUsernameBool = true;
+  }
+  emailValidation() {
+    if (this.isCorrectEmail(this.email) == true) {
+      this.wrongEmailBool = false;
+      return;
+    }
+    (<HTMLSelectElement>document.getElementById('email')).focus();
+    this.wrongEmailBool = true;
+  }
+  passwordValidation() {
+    if (this.isCorrectPassword(this.pass1) && this.isCorrectPassword(this.pass2) && this.pass1 == this.pass2) {
+      this.wrongPass1Bool = false;
+      this.wrongPass2Bool = false;
+      return;
+    }
+    this.pass1 = ''; //brisi obe ukucane lozinke
+    this.pass2 = '';
+    (<HTMLSelectElement>document.getElementById('pass1')).focus();
+    this.wrongPass1Bool = true;
+    this.wrongPass2Bool = true;
+  }
+
+  validation() {
+    this.firstName = this.firstName.trim();
+    this.lastName = this.lastName.trim();
+    this.username = this.username.trim();
+    this.email = this.email.trim();
+
+    this.firstNameValidation();
+    this.lastNameValidation();
+    this.usernameValidation();
+    this.emailValidation();
+    this.passwordValidation();
+
+    if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongUsernameBool ||
+      this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga
+
+      let user = {
+        firstName: this.firstName,
+        lastName: this.lastName,
+        username: this.username,
+        password: this.pass1,
+        email: this.email
+      }
+
+      this.authService.register(user)
+        .subscribe(
+          (response) => {
+            console.log(response);
+            if (response === 'User added') {
+              this.resetData();
+              (<HTMLSelectElement>document.getElementById('linkToLoginModal')).click();
+            }
+            else if (response === 'Email Already Exists') {
+              alert('Nalog sa unetim email-om 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-register')).focus();
+            }
+          }
+        );
+    }
+  }
+
+
+}