From adbd70386b4fa13c940eed643cd1b252b5243051 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Thu, 28 Apr 2022 14:22:49 +0200
Subject: Redizajn login modala uradjen.

---
 .../_modals/login-modal/login-modal.component.css  | 37 ++++++++++
 .../_modals/login-modal/login-modal.component.html | 79 ++++++++++++----------
 .../_modals/login-modal/login-modal.component.ts   | 14 ++++
 frontend/src/styles/helper.css                     |  8 +++
 frontend/src/styles/theme.css                      |  5 ++
 5 files changed, 107 insertions(+), 36 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.css b/frontend/src/app/_modals/login-modal/login-modal.component.css
index e69de29b..f8ffe797 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.css
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.css
@@ -0,0 +1,37 @@
+.modal-content {
+    text-align: center;
+    width: 80%;
+    margin: auto;
+}
+
+.modal-footer {
+    text-align: center;
+}
+
+#loginButton {
+    color: white;
+    background-color: #003459;
+    margin-right: 10px;
+}
+
+#loginButton,
+#doNotLoginButton {
+    padding: 2% 6%;
+}
+
+.close-button {
+    margin: 2%;
+}
+
+#link {
+    text-decoration: underline;
+}
+
+#link:hover {
+    color: var(--offwhite);
+    font-size: 110%;
+}
+
+#wrong-creds {
+    color: var(--ns-warn);
+}
\ No newline at end of file
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 03048155..1c5f318b 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -1,42 +1,49 @@
 <!-- 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" style="background-color: #003459;">
-        <button #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>
-          <form>
-            <!-- Korisnicko ime -->
-            <div class="form-outline mb-3">
-                <label class="form-label" for="username">Korisničko ime</label>
-                <input [(ngModel)]="username" name="username" type="text" id="username"
-                    class="form-control form-control" placeholder="Unesite korisničko ime..." />
-            </div>
-            <!-- Lozinka -->
-            <div class="form-outline mb-3">
-                <label class="form-label" for="password">Lozinka</label>
-                <input [(ngModel)]="password" name="password" type="password" id="password"
-                    class="form-control form-control" placeholder="Unesite lozinku..." />
+    <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="login-heading mt-5 mb-5">Prijava</h1>
+            <form>
+                <!-- Korisnicko ime -->
+                <div class="mb-3">
+                    <mat-form-field appearance="fill">
+                        <mat-label>Korisničko ime</mat-label>
+                        <input type="text" matInput [(ngModel)]="username" name="username" id="username">
+                        <mat-icon matSuffix></mat-icon>
+                    </mat-form-field>
+                </div>
+                <!-- Lozinka -->
+                <div class="mb-4">
+                    <mat-form-field appearance="fill">
+                        <mat-label>Lozinka</mat-label>
+                        <input type="password" matInput [(ngModel)]="password" name="password" id="pass" #pass>
+                        <ng-container matSuffix *ngIf="!passwordShown">
+                            <mat-icon (click)="togglePasswordShown()">visibility_off</mat-icon>
+                        </ng-container>
+                        <ng-container matSuffix *ngIf="passwordShown">
+                            <mat-icon (click)="togglePasswordShown()">visibility</mat-icon>
+                        </ng-container>
+                    </mat-form-field>
+                </div>
+            </form>
+
+            <div class="text-lg-start">
+                <p *ngIf="wrongCreds" class="small text-center" id="wrong-creds">Unesite ispravno korisničko ime i lozinku.</p>
             </div>
-          </form>
-          
-          <div class="text-center text-lg-start mt-5">
-            <p *ngIf="wrongCreds" class="small fw-bold text-danger text-center">Unesite ispravan e-mail i lozinku.</p>
-          </div>
 
-          <div class="col-md-12 d-flex justify-content-center">
-            <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 data-bs-toggle="modal" data-bs-target="#modalForRegister" class="link-danger">Registrujte se</a>
-        </p>
-      </div>
+            <!--mat-raised-button-->
+            <div class="d-flex justify-content-center">
+                <button mat-raised-button id="loginButton" (click)="doLogin()">Prijavite se</button>
+                <button mat-stroked-button id="doNotloginButton" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
+            </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>
+                </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 b28d9799..f69e1cff 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -14,10 +14,13 @@ import {AfterViewInit, ElementRef} from '@angular/core';
 export class LoginModalComponent implements OnInit {
 
   @ViewChild('closeButton') closeButton?: ElementRef;
+  @ViewChild('pass') passwordInput!: ElementRef;
 
   username: string = '';
   password: string = '';
 
+  passwordShown: boolean = false;
+
   wrongCreds: boolean = false;
 
   constructor(
@@ -37,6 +40,8 @@ export class LoginModalComponent implements OnInit {
         if (response == "Username doesn't exist" || response == "Wrong password") {
           this.wrongCreds = true;
           this.password = '';
+          this.passwordShown = false;
+          this.passwordInput.nativeElement.type = "password";
         }
         else {
           this.authService.authenticate(response);
@@ -57,4 +62,13 @@ export class LoginModalComponent implements OnInit {
     this.username = '';
     this.password = '';
   }
+
+  togglePasswordShown() {
+    this.passwordShown = !this.passwordShown;
+
+    if (this.passwordShown)
+      this.passwordInput.nativeElement.type = "text";
+    else 
+      this.passwordInput.nativeElement.type = "password";
+  }
 }
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index ef875069..55b0967e 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -128,4 +128,12 @@
     width: 150px;
     height: 150px;
     margin: auto;
+}
+
+.close-button {
+    background-color: none;
+    color: white;
+    position: absolute;
+    top: 5px;
+    right: 5px;
 }
\ No newline at end of file
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 17a433c6..c517e885 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -9,6 +9,7 @@
     --ns-bg-dark-50: rgba(0, 65, 101, 0.5);
     --offwhite: #dfd7d7;
     --ns-warn: #f9b7b7;
+    --ns-alt: #002b49;
 }
 
 body {
@@ -20,6 +21,10 @@ body {
     background-color: var(--ns-bg-light-30) !important;
 }
 
+.bg-alt {
+    background-color: var(--ns-alt);
+}
+
 .ns-border-primary {
     border: 1px solid var(--ns-primary);
 }
-- 
cgit v1.2.3