From 52618d7d8dcb8e570912e9924d39bf6ba9d68d1e Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Sun, 13 Mar 2022 15:59:05 +0100 Subject: Napravljen folder _modals u projektu. Kreirana login-modal.component (stilski uredjen modal login forme). --- frontend/angular.json | 2 +- frontend/package-lock.json | 57 ++++++++++++++++++++++ frontend/package.json | 4 +- .../_modals/login-modal/login-modal.component.css | 0 .../_modals/login-modal/login-modal.component.html | 49 +++++++++++++++++++ .../login-modal/login-modal.component.spec.ts | 25 ++++++++++ .../_modals/login-modal/login-modal.component.ts | 51 +++++++++++++++++++ .../_pages/login-page/login-page.component.html | 33 ++++++++----- .../app/_pages/login-page/login-page.component.ts | 41 +++++++++++----- frontend/src/app/app-routing.module.ts | 4 +- frontend/src/app/app.module.ts | 8 ++- 11 files changed, 247 insertions(+), 27 deletions(-) create mode 100644 frontend/src/app/_modals/login-modal/login-modal.component.css create mode 100644 frontend/src/app/_modals/login-modal/login-modal.component.html create mode 100644 frontend/src/app/_modals/login-modal/login-modal.component.spec.ts create mode 100644 frontend/src/app/_modals/login-modal/login-modal.component.ts (limited to 'frontend') 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 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 @@ + + + + + + + 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; + + 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"); + //(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 @@ + + + + + + -

Prijavite se

- -
-
-

Lozinka ili e-mail su pogrešni

-
+

Još uvek nemate nalog? Registrujte se

@@ -39,6 +51,5 @@
- - -
\ No newline at end of file +
+--> \ 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"); + //(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] -- cgit v1.2.3