aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/angular.json2
-rw-r--r--frontend/package-lock.json57
-rw-r--r--frontend/package.json4
-rw-r--r--frontend/src/app/_modals/login-modal/login-modal.component.css0
-rw-r--r--frontend/src/app/_modals/login-modal/login-modal.component.html49
-rw-r--r--frontend/src/app/_modals/login-modal/login-modal.component.spec.ts25
-rw-r--r--frontend/src/app/_modals/login-modal/login-modal.component.ts51
-rw-r--r--frontend/src/app/_pages/login-page/login-page.component.html33
-rw-r--r--frontend/src/app/_pages/login-page/login-page.component.ts41
-rw-r--r--frontend/src/app/app-routing.module.ts4
-rw-r--r--frontend/src/app/app.module.ts8
11 files changed, 247 insertions, 27 deletions
diff --git a/frontend/angular.json b/frontend/angular.json
index b91ab578..bbbe3eaa 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -31,7 +31,7 @@
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
- "scripts": []
+ "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
},
"configurations": {
"production": {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2df1f1fa..ffe47b6a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -25,6 +25,8 @@
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"csv-parser": "^3.0.0",
+ "mdb-angular-ui-kit": "^2.0.0",
+ "ng-uikit-pro-standard": "^1.0.0",
"ngx-cookie-service": "^13.1.2",
"ngx-csv-parser": "^0.0.7",
"rxjs": "~7.5.0",
@@ -7577,6 +7579,21 @@
"node": ">= 10"
}
},
+ "node_modules/mdb-angular-ui-kit": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/mdb-angular-ui-kit/-/mdb-angular-ui-kit-2.0.0.tgz",
+ "integrity": "sha512-atwGldhGszfrWvQBcmaxhTPV4XjvbaJ030Ma6XAbPsdtN2UZio5qPlCb6sJHAGQOKusVq++4EmtYYnT0u51bLg==",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "peerDependencies": {
+ "@angular/animations": "^13.0.0",
+ "@angular/cdk": "^13.0.0",
+ "@angular/common": "^13.0.0",
+ "@angular/core": "^13.0.0",
+ "@angular/forms": "^13.0.0"
+ }
+ },
"node_modules/media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7940,6 +7957,23 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
+ "node_modules/ng-uikit-pro-standard": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/ng-uikit-pro-standard/-/ng-uikit-pro-standard-1.0.0.tgz",
+ "integrity": "sha512-GaG4Ek8pJRdHdr6JtkE4mHMvhb619mJI9VOIXKas4F0iGRyTb7U4rc2Y9AFgsysOYBZKCYifSzKxCf3NukZj0w==",
+ "dependencies": {
+ "tslib": "^1.9.0"
+ },
+ "peerDependencies": {
+ "@angular/common": "^8.0.0",
+ "@angular/core": "^8.0.0"
+ }
+ },
+ "node_modules/ng-uikit-pro-standard/node_modules/tslib": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+ },
"node_modules/ngx-cookie-service": {
"version": "13.1.2",
"resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-13.1.2.tgz",
@@ -17011,6 +17045,14 @@
"ssri": "^8.0.0"
}
},
+ "mdb-angular-ui-kit": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/mdb-angular-ui-kit/-/mdb-angular-ui-kit-2.0.0.tgz",
+ "integrity": "sha512-atwGldhGszfrWvQBcmaxhTPV4XjvbaJ030Ma6XAbPsdtN2UZio5qPlCb6sJHAGQOKusVq++4EmtYYnT0u51bLg==",
+ "requires": {
+ "tslib": "^2.0.0"
+ }
+ },
"media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -17281,6 +17323,21 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
+ "ng-uikit-pro-standard": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/ng-uikit-pro-standard/-/ng-uikit-pro-standard-1.0.0.tgz",
+ "integrity": "sha512-GaG4Ek8pJRdHdr6JtkE4mHMvhb619mJI9VOIXKas4F0iGRyTb7U4rc2Y9AFgsysOYBZKCYifSzKxCf3NukZj0w==",
+ "requires": {
+ "tslib": "^1.9.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+ }
+ }
+ },
"ngx-cookie-service": {
"version": "13.1.2",
"resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-13.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9ba60188..0b32837f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,8 @@
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"csv-parser": "^3.0.0",
+ "mdb-angular-ui-kit": "^2.0.0",
+ "ng-uikit-pro-standard": "^1.0.0",
"ngx-cookie-service": "^13.1.2",
"ngx-csv-parser": "^0.0.7",
"rxjs": "~7.5.0",
@@ -47,4 +49,4 @@
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
-} \ No newline at end of file
+}
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]
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 04:00:27 +0000