From 24679faf85c509e04c86f00dae1e6dbc08ce6e2a Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Sun, 13 Mar 2022 23:30:29 +0100 Subject: Doradjen login-modal.component i uradjen register-modal.component (stilski uredjen modal register forme) --- .../_modals/login-modal/login-modal.component.html | 15 +- .../_modals/login-modal/login-modal.component.ts | 20 +-- .../register-modal/register-modal.component.css | 0 .../register-modal/register-modal.component.html | 85 +++++++++++ .../register-modal.component.spec.ts | 25 ++++ .../register-modal/register-modal.component.ts | 166 +++++++++++++++++++++ 6 files changed, 286 insertions(+), 25 deletions(-) create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.css create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.html create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.spec.ts create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.ts (limited to 'frontend/src/app/_modals') diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html index 22f50de2..eb6f0c53 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -1,14 +1,9 @@ - - - - - + \ No newline at end of file diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts index 3a6fd8f1..3ee2c7fe 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.ts +++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts @@ -1,11 +1,7 @@ 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', @@ -27,25 +23,21 @@ export class LoginModalComponent implements OnInit { ) { } 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.resetData(); //dodato this.loginModal.hide(); //dodato this.router.navigate(['add-model']); + }, error => { + console.warn(error); //NETACNI PODACI }); } - sendToRegister() { - + 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 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..d20b199f --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.html @@ -0,0 +1,85 @@ + + + + \ 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; + + 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..d86345b5 --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts @@ -0,0 +1,166 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { AuthService } from 'src/app/_services/auth.service'; + +declare var window: any; + +@Component({ + selector: 'app-register-modal', + templateUrl: './register-modal.component.html', + styleUrls: ['./register-modal.component.css'] +}) +export class RegisterModalComponent implements OnInit { + + registerModal: any; + + 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](_(?!(\.|_))|\.(?!(_|\.))|[a-zA-Z0-9]){6,18}[a-zA-Z0-9]$/; + 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 router: Router, + private authService: AuthService + ) { } + + ngOnInit(): void { + this.registerModal = new window.bootstrap.Modal( + document.getElementById("modalForRegister") + ); + } + + openModal() { + this.registerModal.show(); + } + 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; + } + (document.getElementById('firstName')).focus(); + this.wrongFirstNameBool = true; + } + lastNameValidation() { + if (this.isCorrectName(this.lastName) == true) { + this.wrongLastNameBool = false; + return; + } + (document.getElementById('lastName')).focus(); + this.wrongLastNameBool = true; + } + usernameValidation() { + if (this.isCorrectUsername(this.username) == true) { + this.wrongUsernameBool = false; + return; + } + (document.getElementById('username')).focus(); + this.wrongUsernameBool = true; + } + emailValidation() { + if (this.isCorrectEmail(this.email) == true) { + this.wrongEmailBool = false; + return; + } + (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 = ''; + (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(); //DODATO + this.registerModal.hide(); //dodato + this.router.navigate(['/login']); //registracija uspesna, idi na LOGIN MODAL, SREDITI + } + else if (response === 'Email Already Exists') + alert('Nalog sa unetim email-om već postoji!'); + else if (response === 'Username Already Exists') + alert('Nalog sa unetim korisnićkim imenom već postoji!'); + } + ); + } + } + + +} -- cgit v1.2.3 From 5d9b17d69acc8dfbe30859610c6ba2fa5d9d963f Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Mon, 14 Mar 2022 19:03:36 +0100 Subject: Sredjeni modali za login i register. Dodat folder images u src/assets. --- .../_modals/login-modal/login-modal.component.html | 6 ++-- .../_modals/login-modal/login-modal.component.ts | 4 +-- .../register-modal/register-modal.component.html | 37 ++++++--------------- .../register-modal/register-modal.component.ts | 29 ++++++---------- frontend/src/assets/images/logo.png | Bin 0 -> 13315 bytes frontend/src/assets/images/logo_crop.png | Bin 0 -> 11447 bytes frontend/src/assets/images/logo_dark.png | Bin 0 -> 15736 bytes frontend/src/assets/images/logo_dark_crop.png | Bin 0 -> 10987 bytes 8 files changed, 25 insertions(+), 51 deletions(-) create mode 100644 frontend/src/assets/images/logo.png create mode 100644 frontend/src/assets/images/logo_crop.png create mode 100644 frontend/src/assets/images/logo_dark.png create mode 100644 frontend/src/assets/images/logo_dark_crop.png (limited to 'frontend/src/app/_modals') diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html index eb6f0c53..d694ea58 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -2,8 +2,8 @@