diff options
Diffstat (limited to 'frontend/src/app/_modals')
8 files changed, 377 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..d694ea58 --- /dev/null +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -0,0 +1,42 @@ +<!-- 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" style="background-color: #003459;"> + <button id="closeButton" type="button" class="btn-close" style="background-color:white;" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></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" style="color:white; background-color: #003459; margin-right: 10px;" (click)="doLogin()">Prijavite se</button> + <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button> + </div> + <br> + </div> + <div class="modal-footer justify-content-center"> + <p class="small fw-bold">Još uvek nemate nalog? + <a data-bs-toggle="modal" data-bs-target="#modalForRegister" class="link-danger">Registrujte se</a> + </p> + </div> + </div> + </div> +</div>
\ No newline at end of file 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..87686f10 --- /dev/null +++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts @@ -0,0 +1,40 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { Router } from '@angular/router'; +import { CookieService } from 'ngx-cookie-service'; +import { AuthService } from 'src/app/_services/auth.service'; + +@Component({ + selector: 'app-login-modal', + templateUrl: './login-modal.component.html', + styleUrls: ['./login-modal.component.css'] +}) +export class LoginModalComponent implements OnInit { + + username: string = ''; + password: string = ''; + + public wrongCreds: boolean = false; //RAZMOTRITI + + constructor( + private authService: AuthService, + private cookie: CookieService, + private router: Router + ) { } + + ngOnInit(): void { + } + + 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.authService.authenticate(response); + (<HTMLSelectElement>document.getElementById('closeButton')).click(); + }, error => { + console.warn(error); //NETACNI PODACI + }); + } + resetData() { + this.username = ''; + this.password = ''; + } +} diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.css b/frontend/src/app/_modals/register-modal/register-modal.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.css diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html new file mode 100644 index 00000000..7098c040 --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.html @@ -0,0 +1,88 @@ +<!-- Modal --> +<div class="modal fade" id="modalForRegister" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" + aria-labelledby="staticBackdropLabel" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg"> + <div class="modal-content"> + <div class="modal-header" style="background-color: #003459;"> + <button type="button" class="btn-close" data-bs-dismiss="modal" style="background-color: white;" + aria-label="Close" (click)="resetData()"></button> + </div> + <div class="modal-body" style="color:#003459"> + <h1 class="text-center mt-2 mb-4">Registracija</h1> + + <form class="mx-5"> + <!--Ime--> + <div class="row"> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="firstName">Ime</label> + <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName" + name="firstName" placeholder="Unesite ime..."> + <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Unesite ispravno + ime.</small> + </div> + <!--Prezime--> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="lastName">Prezime</label> + <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName" + placeholder="Unesite prezime..." /> + <small *ngIf="wrongLastNameBool" class="form-text text-danger">Unesite ispravno + prezime.</small> + </div> + </div> + <div class="row"> + <!--Korisnicko ime--> + <div class="col-12 px-3 py-3"> + <label class="form-label" for="username-register">Korisničko ime</label> + <input type="text" id="username-register" class="form-control" [(ngModel)]="username" + name="username-register" placeholder="Unesite korisničko ime..." /> + <small *ngIf="wrongUsernameBool" class="form-text text-danger">Unesite ispravno korisničko + ime.</small> + </div> + </div> + <div class="row"> + <!--Email--> + <div class="col-12 px-3 py-3"> + <label class="form-label" for="email">E-mail adresa</label> + <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" + placeholder="Unesite email adresu..." /> + <small *ngIf="wrongEmailBool" class="form-text text-danger">Unesite ispravno e-mail + adresu.</small> + </div> + </div> + <div class="row"> + <!-- Lozinka 1. --> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="pass1">Lozinka</label> + <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1" + placeholder="Unesite lozinku..." /> + <small *ngIf="wrongPass1Bool" class="form-text text-danger">Lozinka se mora sastojati od + najmanje 6 karaktera.</small> + </div> + <!-- Lozinka 2. --> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="pass2">Potvrdite lozinku</label> + <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2" + placeholder="Ponovite lozinku..." /> + <small *ngIf="wrongPass2Bool" class="form-text text-danger">Lozinke se ne + podudaraju.</small> + </div> + </div> + </form> + <div class="col-md-12 d-flex justify-content-center mt-5"> + <button type="button" class="btn btn-lg" + style="color:white; background-color: #003459; margin-right: 10px;" + (click)="doRegister()">Registrujte se</button> + <button type="button" class="btn btn-lg btn-outline-secondary" style="margin-left: 15px;" + data-bs-dismiss="modal" (click)="resetData()">Odustanite</button> + </div> + <br> + </div> + <div class="modal-footer justify-content-center"> + <p class="small fw-bold">Već imate kreiran nalog? + <a id="linkToLoginModal" data-bs-toggle="modal" data-bs-target="#modalForLogin" + class="link-danger">Prijavite se</a> + </p> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts new file mode 100644 index 00000000..e371b3d8 --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RegisterModalComponent } from './register-modal.component'; + +describe('RegisterModalComponent', () => { + let component: RegisterModalComponent; + let fixture: ComponentFixture<RegisterModalComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RegisterModalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RegisterModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts new file mode 100644 index 00000000..c02a4e1a --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts @@ -0,0 +1,157 @@ +import { Component, OnInit } from '@angular/core'; +import { AuthService } from 'src/app/_services/auth.service'; + +@Component({ + selector: 'app-register-modal', + templateUrl: './register-modal.component.html', + styleUrls: ['./register-modal.component.css'] +}) +export class RegisterModalComponent implements OnInit { + + firstName: string = ''; + lastName: string = ''; + username: string = ''; + email: string = ''; + pass1: string = ''; + pass2: string = ''; + + wrongFirstNameBool: boolean = false; + wrongLastNameBool: boolean = false; + wrongUsernameBool: boolean = false; + wrongEmailBool: boolean = false; + wrongPass1Bool: boolean = false; + wrongPass2Bool: boolean = false; + + pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/; + pattUsername: RegExp = /^[a-zA-Z0-9]{6,18}$/; + pattTwoSpaces: RegExp = / /; + pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; + pattPassword: RegExp = /.{6,30}$/; + + constructor( + private authService: AuthService + ) { } + + ngOnInit(): void { + } + + doRegister() { + this.validation(); + } + resetData() { + this.firstName = this.lastName = this.username = this.email = this.pass1 = this.pass2 = ''; + this.wrongFirstNameBool = this.wrongLastNameBool = this.wrongUsernameBool = this.wrongEmailBool = this.wrongPass1Bool = this.wrongPass2Bool = false; + } + + isCorrectName(element: string): boolean { + if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) + return true; + return false; + } + isCorrectUsername(element: string): boolean { + if (this.pattUsername.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) + return true; + return false; + } + isCorrectEmail(element: string): boolean { + if (this.pattEmail.test(element.toLowerCase()) && element.length <= 320) + return true; + return false; + } + isCorrectPassword(element: string): boolean { + if (this.pattPassword.test(element)) + return true; + return false; + } + + firstNameValidation() { + if (this.isCorrectName(this.firstName) == true) { + this.wrongFirstNameBool = false; + return; + } + (<HTMLSelectElement>document.getElementById('firstName')).focus(); + this.wrongFirstNameBool = true; + } + lastNameValidation() { + if (this.isCorrectName(this.lastName) == true) { + this.wrongLastNameBool = false; + return; + } + (<HTMLSelectElement>document.getElementById('lastName')).focus(); + this.wrongLastNameBool = true; + } + usernameValidation() { + if (this.isCorrectUsername(this.username) == true) { + this.wrongUsernameBool = false; + return; + } + (<HTMLSelectElement>document.getElementById('username-register')).focus(); + this.wrongUsernameBool = true; + } + emailValidation() { + if (this.isCorrectEmail(this.email) == true) { + this.wrongEmailBool = false; + return; + } + (<HTMLSelectElement>document.getElementById('email')).focus(); + this.wrongEmailBool = true; + } + passwordValidation() { + if (this.isCorrectPassword(this.pass1) && this.isCorrectPassword(this.pass2) && this.pass1 == this.pass2) { + this.wrongPass1Bool = false; + this.wrongPass2Bool = false; + return; + } + this.pass1 = ''; //brisi obe ukucane lozinke + this.pass2 = ''; + (<HTMLSelectElement>document.getElementById('pass1')).focus(); + this.wrongPass1Bool = true; + this.wrongPass2Bool = true; + } + + validation() { + this.firstName = this.firstName.trim(); + this.lastName = this.lastName.trim(); + this.username = this.username.trim(); + this.email = this.email.trim(); + + this.firstNameValidation(); + this.lastNameValidation(); + this.usernameValidation(); + this.emailValidation(); + this.passwordValidation(); + + if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongUsernameBool || + this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga + + let user = { + firstName: this.firstName, + lastName: this.lastName, + username: this.username, + password: this.pass1, + email: this.email + } + + this.authService.register(user) + .subscribe( + (response) => { + console.log(response); + if (response === 'User added') { + this.resetData(); + (<HTMLSelectElement>document.getElementById('linkToLoginModal')).click(); + } + else if (response === 'Email Already Exists') { + alert('Nalog sa unetim email-om već postoji!'); + (<HTMLSelectElement>document.getElementById('email')).focus(); + } + else if (response === 'Username Already Exists') { + alert('Nalog sa unetim korisničkim imenom već postoji!'); + (<HTMLSelectElement>document.getElementById('username-register')).focus(); + } + } + ); + } + } + + +} |