diff options
Diffstat (limited to 'frontend/src/app')
8 files changed, 186 insertions, 25 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() { + + } +} diff --git a/frontend/src/app/_pages/login-page/login-page.component.html b/frontend/src/app/_pages/login-page/login-page.component.html index 76a4ee7b..8deb5290 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.html +++ b/frontend/src/app/_pages/login-page/login-page.component.html @@ -1,19 +1,33 @@ +<!--<script> + $(document).ready(function(){ + $(".btn").click(function(){ + $("#exampleModal").modal('show'); + }); + + $('#exampleModal').modal({ + backdrop: 'static', + keyboard: false + }); + }); +</script>--> + +<!-- Button trigger modal --> +<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForLogin" (click)="openModal()"> + Open Modal + </button> + +<!-- <div style="min-height: 100vh; position: relative;"> - <!-- TODO : <app-navbar [activeNav]="'login'"></app-navbar>--> - <div class="container p-5 rounded-3 shadow-sm border" style="max-width: 50em; margin-top: 50px;"> <h3 class="text-center pb-5">Prijavite se</h3> <form> - <!-- Username input --> - <!-- Username input --> <div class="form-outline mb-4"> <label class="form-label" for="username">Korisničko ime</label> <input [(ngModel)]="username" name="username" type="text" id="username" class="form-control form-control-lg" placeholder="Unesite korisničko ime..." /> </div> - <!-- Password input --> <div class="form-outline mb-3"> <label class="form-label" for="password">Lozinka</label> <input [(ngModel)]="password" name="password" type="password" id="password" @@ -21,17 +35,15 @@ </div> <div class="text-center text-lg-start mt-4 pt-2"> - <!-- Pogresna lozinka --> <p *ngIf="wrongCreds" class="small fw-bold mt-2 pt-1 mb-0 text-danger">Lozinka ili e-mail su pogrešni </p> - <!-- Nepotvrdjena registracija - <p *ngIf="notApproved" class="small fw-bold mt-2 pt-1 mb-0 text-danger">Vaša registracija još uvek nije potvrđena</p>--> <br> <button type="button" class="btn btn-primary btn-lg" style="padding-left: 2.5rem; padding-right: 2.5rem;" (click)="onSubmit()">Prijava </button> + <br> <p class="small fw-bold mt-2 pt-1 mb-0">Još uvek nemate nalog? <a routerLink="/register" class="link-danger">Registrujte se</a> </p> @@ -39,6 +51,5 @@ </form> </div> - <!-- TODO: <app-footer></app-footer>--> - -</div>
\ No newline at end of file +</div> +-->
\ No newline at end of file diff --git a/frontend/src/app/_pages/login-page/login-page.component.ts b/frontend/src/app/_pages/login-page/login-page.component.ts index 0825d435..e5366283 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.ts +++ b/frontend/src/app/_pages/login-page/login-page.component.ts @@ -3,12 +3,22 @@ import { Router } from '@angular/router'; import { CookieService } from 'ngx-cookie-service'; import { AuthService } from 'src/app/_services/auth.service'; +import { LoginModalComponent } from 'src/app/_modals/login-modal/login-modal.component'; +import { MDBModalRef, MDBModalService } from 'ng-uikit-pro-standard'; + + +declare var window: any; + @Component({ selector: 'app-login-page', templateUrl: './login-page.component.html', - styleUrls: ['./login-page.component.css'] + styleUrls: ['./login-page.component.css'], + }) -export class LoginPageComponent implements OnInit { +export class LoginPageComponent{ + + modalRef?: MDBModalRef; + //email: string = ''; username: string = ''; password: string = ''; @@ -16,29 +26,38 @@ export class LoginPageComponent implements OnInit { public wrongCreds: boolean = false; //RAZMOTRITI //public notApproved: boolean = false; //RAZMOTRITI - //pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; + formModal: any; constructor( private authService: AuthService, private cookie: CookieService, - private router: Router + private router: Router, + private modalService: MDBModalService ) { } + openModal() { + //this.modalRef = this.modalService.show(LoginModalComponent); + } + /* ngOnInit(): void { + this.formModal = new window.bootstrap.Modal( + document.getElementById("exampleModal") + ); + } + + openModal() { + this.formModal.show(); + //console.log("ok"); + //(<HTMLInputElement>document.getElementById("exampleModal")).style.display = "block"; } onSubmit() { - /*if (!this.pattEmail.test(this.email)) { - console.warn('Bad email!'); - return; - } - else {*/ + this.authService.login(this.username, this.password).subscribe((response) => { console.log(response); this.cookie.set('token', response); this.router.navigate(['add-model']); - // }) }); } - +*/ } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index c592d57b..cd86ef5c 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -6,13 +6,15 @@ import { LoginPageComponent } from './_pages/login-page/login-page.component'; import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component'; import { RegisterPageComponent } from './_pages/register-page/register-page.component'; import { AddModelComponent } from './_pages/add-model/add-model.component'; +import { LoginModalComponent } from './_modals/login-modal/login-modal.component'; const routes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: 'login', component: LoginPageComponent }, { path: 'register', component: RegisterPageComponent }, { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] }, - { path: 'add-model', component: AddModelComponent } + { path: 'add-model', component: AddModelComponent }, + { path: 'login-modal-test', component: LoginModalComponent } ]; @NgModule({ diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index aa5d018d..d95252ad 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -12,8 +12,10 @@ import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorize import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component'; import { AddModelComponent } from './_pages/add-model/add-model.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { LoginModalComponent } from './_modals/login-modal/login-modal.component'; import { MaterialModule } from './material.module'; +import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ @@ -22,7 +24,8 @@ import { MaterialModule } from './material.module'; RegisterPageComponent, OnlyAuthorizedComponent, DatasetLoadComponent, - AddModelComponent + AddModelComponent, + LoginModalComponent ], imports: [ BrowserModule, @@ -31,7 +34,8 @@ import { MaterialModule } from './material.module'; HttpClientModule, NgbModule, BrowserAnimationsModule, - MaterialModule + MaterialModule, + ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] |