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.html | 79 ++++++++++++----------
 1 file changed, 43 insertions(+), 36 deletions(-)

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

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
-- 
cgit v1.2.3