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

4 files changed, 125 insertions, 0 deletions

diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.css b/frontend/src/app/_modals/login-modal/login-modal.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.css
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>
+
+
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.spec.ts b/frontend/src/app/_modals/login-modal/login-modal.component.spec.ts
new file mode 100644
index 00000000..7d0d526a
--- /dev/null
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginModalComponent } from './login-modal.component';
+
+describe('LoginModalComponent', () => {
+  let component: LoginModalComponent;
+  let fixture: ComponentFixture<LoginModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
new file mode 100644
index 00000000..3a6fd8f1
--- /dev/null
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -0,0 +1,51 @@
+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',
+  templateUrl: './login-modal.component.html',
+  styleUrls: ['./login-modal.component.css']
+})
+export class LoginModalComponent implements OnInit {
+
+  loginModal: any;
+  username: string = '';
+  password: string = '';
+
+  public wrongCreds: boolean = false;      //RAZMOTRITI
+
+  constructor(
+    private authService: AuthService,
+    private cookie: CookieService,
+    private router: Router
+  ) { }
+
+  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() {
+    
+  }
+}