From 3d10d260aea0b9faf399d009ed716191a915ade0 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Thu, 28 Apr 2022 17:30:19 +0200
Subject: Redizajn register modala

---
 .../_modals/login-modal/login-modal.component.html |   2 +-
 .../_modals/login-modal/login-modal.component.ts   |   5 +
 .../register-modal/register-modal.component.css    |  44 ++++++
 .../register-modal/register-modal.component.html   | 159 ++++++++++-----------
 .../register-modal/register-modal.component.ts     |  47 +++++-
 5 files changed, 169 insertions(+), 88 deletions(-)

(limited to 'frontend')

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 1c5f318b..cea6bf39 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -41,7 +41,7 @@
             </div>
             <div class="modal-footer justify-content-center mt-5">
                 <p class="small mt-1">Nemate nalog?
-                    <a data-bs-toggle="modal" data-bs-target="#modalForRegister"><span id="link">Registrujte se</span></a>
+                    <a data-bs-toggle="modal" data-bs-target="#modalForRegister"><span id="link" (click)="cleanWarnings()">Registrujte se</span></a>
                 </p>
             </div>
         </div>
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 f69e1cff..062a0550 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -44,6 +44,7 @@ export class LoginModalComponent implements OnInit {
           this.passwordInput.nativeElement.type = "password";
         }
         else {
+          this.wrongCreds = false;
           this.authService.authenticate(response);
           (<HTMLSelectElement>this.closeButton?.nativeElement).click();
           this.userInfoService.getUserInfo().subscribe((response) => {
@@ -71,4 +72,8 @@ export class LoginModalComponent implements OnInit {
     else 
       this.passwordInput.nativeElement.type = "password";
   }
+
+  cleanWarnings() {
+    this.wrongCreds = false;
+  }
 }
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.css b/frontend/src/app/_modals/register-modal/register-modal.component.css
index e69de29b..f8496973 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.css
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.css
@@ -0,0 +1,44 @@
+.modal-content {
+    text-align: center;
+    margin: auto;
+}
+
+.modal-footer {
+    text-align: center;
+}
+
+#registerButton {
+    color: white;
+    background-color: #003459;
+    margin-right: 10px;
+}
+
+#registerButton,
+#doNotRegisterButton {
+    padding: 2% 7%;
+}
+
+.close-button {
+    margin: 2%;
+}
+
+#link {
+    text-decoration: underline;
+}
+
+#link:hover {
+    color: var(--offwhite);
+    font-size: 110%;
+}
+
+.mat-form-field {
+    width: 80%;
+}
+
+.wrong-creds {
+    color: var(--ns-warn);
+}
+
+p {
+    font-size: 11px;
+}
\ No newline at end of file
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 68025a46..d76af4d6 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.html
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.html
@@ -1,86 +1,85 @@
 <!-- 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 id="closeButtonReg" 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 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">
+        <div class="modal-content bg-alt text-offwhite">
+            <button #closeButton type="button" class="close-button btn-clear" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()">
+              <mat-icon>close</mat-icon>
+            </button>
+            <h1 class="mt-5 mb-4">Registracija</h1>
+            <form class="mx-4">
+                <!--Ime-->
+                <div>
+                    <mat-form-field appearance="fill">
+                        <mat-label>Ime</mat-label>
+                        <input type="text" matInput [(ngModel)]="firstName" name="firstName" id="firstName">
+                        <mat-icon matSuffix></mat-icon>
+                    </mat-form-field>
+                    <p *ngIf="wrongFirstNameBool" class="wrong-creds">Unesite ispravno ime.</p>
+                </div>
+                <!--Prezime-->
+                <div>
+                    <mat-form-field appearance="fill">
+                        <mat-label>Prezime</mat-label>
+                        <input type="text" matInput [(ngModel)]="lastName" name="lastName" id="lastName">
+                        <mat-icon matSuffix></mat-icon>
+                    </mat-form-field>
+                    <p *ngIf="wrongLastNameBool" class="wrong-creds">Unesite ispravno prezime.</p>
+                </div>
+                <!--Korisnicko ime-->
+                <div>
+                    <mat-form-field appearance="fill">
+                        <mat-label>Korisničko ime</mat-label>
+                        <input type="text" matInput [(ngModel)]="username" name="username-register" id="username-register">
+                        <mat-icon matSuffix></mat-icon>
+                    </mat-form-field>
+                    <p *ngIf="wrongUsernameBool" class="wrong-creds">Unesite ispravno korisničko ime.</p>
+                </div>
+                <!--Email-->
+                <div>
+                    <mat-form-field appearance="fill">
+                        <mat-label>E-mail adresa</mat-label>
+                        <input type="email" matInput [(ngModel)]="email" name="email" id="email">
+                        <mat-icon matSuffix></mat-icon>
+                    </mat-form-field>
+                    <p *ngIf="wrongEmailBool" class="wrong-creds">Unesite ispravno e-mail adresu.</p>
+                </div>
+                <!-- Lozinka 1. -->
+                <div>
+                    <mat-form-field appearance="fill">
+                        <mat-label>Lozinka</mat-label>
+                        <input type="password" matInput [(ngModel)]="pass1" name="pass1" id="pass1" #password1>
+                        <ng-container matSuffix *ngIf="!password1Shown">
+                            <mat-icon (click)="togglePasswordShown(1)">visibility_off</mat-icon>
+                        </ng-container>
+                        <ng-container matSuffix *ngIf="password1Shown">
+                            <mat-icon (click)="togglePasswordShown(1)">visibility</mat-icon>
+                        </ng-container>
+                    </mat-form-field>
+                    <p *ngIf="wrongPass1Bool" class="wrong-creds">Lozinka se mora sastojati od najmanje 6 karaktera.</p>
+                </div>
+                <!-- Lozinka 2. -->
+                <div>
+                    <mat-form-field appearance="fill">
+                        <mat-label>Potvrdite lozinku</mat-label>
+                        <input type="password" matInput [(ngModel)]="pass2" name="pass2" id="pass2" #password2>
+                        <ng-container matSuffix *ngIf="!password2Shown">
+                            <mat-icon (click)="togglePasswordShown(2)">visibility_off</mat-icon>
+                        </ng-container>
+                        <ng-container matSuffix *ngIf="password2Shown">
+                            <mat-icon (click)="togglePasswordShown(2)">visibility</mat-icon>
+                        </ng-container>
+                    </mat-form-field>
+                    <p *ngIf="wrongPass2Bool" class="wrong-creds">Lozinke se ne podudaraju.</p>
                 </div>
-                <br>
+            </form>
+            <div class="d-flex justify-content-center mt-2">
+                <button mat-raised-button id="registerButton" (click)="doRegister()">Registrujte se</button>
+                <button mat-stroked-button id="doNotRegisterButton" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
             </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>
+            <br>
+            <div class="modal-footer justify-content-center mt-3">
+                <p class="small">Imate kreiran nalog?
+                    <a data-bs-toggle="modal" data-bs-target="#modalForLogin"><span id="link" (click)="cleanWarnings()">Prijavite se</span></a>
                 </p>
             </div>
         </div>
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 11f6727d..3726b2e0 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.ts
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { AuthService } from 'src/app/_services/auth.service';
 import User from 'src/app/_data/User';
 import { DOCUMENT } from '@angular/common';
@@ -34,6 +34,13 @@ export class RegisterModalComponent implements OnInit {
 
   shared = shared;
 
+  password1Shown: boolean = false;
+  password2Shown: boolean = false;
+  @ViewChild('password1') password1Input!: ElementRef;
+  @ViewChild('password2') password2Input!: ElementRef;
+  @ViewChild('closeButton') closeButton!: ElementRef;
+
+
   constructor(
     private authService: AuthService,
     @Inject(DOCUMENT) document: Document
@@ -48,6 +55,8 @@ export class RegisterModalComponent implements OnInit {
   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;
+    this.password1Shown = false;
+    this.password2Shown = false;
   }
 
   isCorrectName(element: string): boolean {
@@ -76,7 +85,7 @@ export class RegisterModalComponent implements OnInit {
       this.wrongFirstNameBool = false;
       return;
     }
-    (<HTMLSelectElement>document.getElementById('firstName')).focus();
+    //(<HTMLSelectElement>document.getElementById('firstName')).focus();
     this.wrongFirstNameBool = true;
   }
   lastNameValidation() {
@@ -84,7 +93,7 @@ export class RegisterModalComponent implements OnInit {
       this.wrongLastNameBool = false;
       return;
     }
-    (<HTMLSelectElement>document.getElementById('lastName')).focus();
+    //(<HTMLSelectElement>document.getElementById('lastName')).focus();
     this.wrongLastNameBool = true;
   }
   usernameValidation() {
@@ -92,7 +101,7 @@ export class RegisterModalComponent implements OnInit {
       this.wrongUsernameBool = false;
       return;
     }
-    (<HTMLSelectElement>document.getElementById('username-register')).focus();
+    //(<HTMLSelectElement>document.getElementById('username-register')).focus();
     this.wrongUsernameBool = true;
   }
   emailValidation() {
@@ -100,7 +109,7 @@ export class RegisterModalComponent implements OnInit {
       this.wrongEmailBool = false;
       return;
     }
-    (<HTMLSelectElement>document.getElementById('email')).focus();
+    //(<HTMLSelectElement>document.getElementById('email')).focus();
     this.wrongEmailBool = true;
   }
   passwordValidation() {
@@ -111,7 +120,11 @@ export class RegisterModalComponent implements OnInit {
     }
     this.pass1 = ''; //brisi obe ukucane lozinke
     this.pass2 = '';
-    (<HTMLSelectElement>document.getElementById('pass1')).focus();
+    this.password1Shown = false;
+    this.password2Shown = false;
+    this.password1Input.nativeElement.type = "password";
+    this.password2Input.nativeElement.type = "password";
+    //(<HTMLSelectElement>document.getElementById('pass1')).focus();
     this.wrongPass1Bool = true;
     this.wrongPass2Bool = true;
   }
@@ -148,7 +161,7 @@ export class RegisterModalComponent implements OnInit {
               this.authService.login(this.username, this.pass1).subscribe((response) => {
 
                 this.authService.authenticate(response);
-                (<HTMLSelectElement>document.getElementById('closeButtonReg')).click();
+                this.closeButton.nativeElement.click();
                 //(<HTMLSelectElement>document.getElementById('linkToLoginModal')).click();
               }, (error) => console.warn(error));             
             }
@@ -165,5 +178,25 @@ export class RegisterModalComponent implements OnInit {
     }
   }
 
+  togglePasswordShown(whichPassword: number) {
+    if (whichPassword == 1) {
+      this.password1Shown = !this.password1Shown;
+
+      if (this.password1Shown)
+        this.password1Input.nativeElement.type = "text";
+      else 
+        this.password1Input.nativeElement.type = "password";
+    }
+    else {
+      this.password2Shown = !this.password2Shown;
 
+      if (this.password2Shown)
+        this.password2Input.nativeElement.type = "text";
+      else 
+        this.password2Input.nativeElement.type = "password";
+    }
+  }
+  cleanWarnings() {
+    this.resetData();
+  }
 }
-- 
cgit v1.2.3