Napravljen folder _modals u projektu. Kreirana login-modal.component (stilski uredjen modal login forme).

1 files changed, 49 insertions, 0 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
new file mode 100644
index 00000000..22f50de2
--- /dev/null
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -0,0 +1,49 @@
+<!-- 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>
+      <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>
+
+            <div class="text-center text-lg-start mt-5 pt-2">
+                <p *ngIf="wrongCreds" class="small fw-bold mt-2 pt-1 mb-0 text-danger">Lozinka ili e-mail su pogrešni
+                </p>
+            </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>
+          </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>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+