From cd2188997ff4cbcce83e3cada3fc220375ebc78e Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Sat, 5 Mar 2022 22:03:03 +0100 Subject: Login and Register page - v. 0.1.0 --- .../app/_pages/login-page/login-page.component.css | 0 .../_pages/login-page/login-page.component.html | 39 ++++++ .../_pages/login-page/login-page.component.spec.ts | 25 ++++ .../app/_pages/login-page/login-page.component.ts | 46 +++++++ .../register-page/register-page.component.css | 0 .../register-page/register-page.component.html | 80 +++++++++++ .../register-page/register-page.component.spec.ts | 25 ++++ .../register-page/register-page.component.ts | 151 +++++++++++++++++++++ frontend/src/app/_services/auth.service.spec.ts | 16 +++ frontend/src/app/_services/auth.service.ts | 9 ++ .../src/app/_services/register.service.spec.ts | 16 +++ frontend/src/app/_services/register.service.ts | 9 ++ frontend/src/app/app-routing.module.ts | 8 +- frontend/src/app/app.module.ts | 16 ++- frontend/src/polyfills.ts | 4 + 15 files changed, 440 insertions(+), 4 deletions(-) create mode 100644 frontend/src/app/_pages/login-page/login-page.component.css create mode 100644 frontend/src/app/_pages/login-page/login-page.component.html create mode 100644 frontend/src/app/_pages/login-page/login-page.component.spec.ts create mode 100644 frontend/src/app/_pages/login-page/login-page.component.ts create mode 100644 frontend/src/app/_pages/register-page/register-page.component.css create mode 100644 frontend/src/app/_pages/register-page/register-page.component.html create mode 100644 frontend/src/app/_pages/register-page/register-page.component.spec.ts create mode 100644 frontend/src/app/_pages/register-page/register-page.component.ts create mode 100644 frontend/src/app/_services/auth.service.spec.ts create mode 100644 frontend/src/app/_services/auth.service.ts create mode 100644 frontend/src/app/_services/register.service.spec.ts create mode 100644 frontend/src/app/_services/register.service.ts (limited to 'frontend/src') diff --git a/frontend/src/app/_pages/login-page/login-page.component.css b/frontend/src/app/_pages/login-page/login-page.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_pages/login-page/login-page.component.html b/frontend/src/app/_pages/login-page/login-page.component.html new file mode 100644 index 00000000..b8620e2f --- /dev/null +++ b/frontend/src/app/_pages/login-page/login-page.component.html @@ -0,0 +1,39 @@ +
+ + + +
+

Prijavite se

+
+ +
+ + +
+ + +
+ + +
+ +
+ +

Lozinka ili e-mail su pogrešni

+ +
+ + + +

Još uvek nemate nalog? + Registrujte se

+
+
+
+ + + +
\ No newline at end of file diff --git a/frontend/src/app/_pages/login-page/login-page.component.spec.ts b/frontend/src/app/_pages/login-page/login-page.component.spec.ts new file mode 100644 index 00000000..9da3aca8 --- /dev/null +++ b/frontend/src/app/_pages/login-page/login-page.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginPageComponent } from './login-page.component'; + +describe('LoginPageComponent', () => { + let component: LoginPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoginPageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/login-page/login-page.component.ts b/frontend/src/app/_pages/login-page/login-page.component.ts new file mode 100644 index 00000000..c041003d --- /dev/null +++ b/frontend/src/app/_pages/login-page/login-page.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { AuthService } from 'src/app/_services/auth.service'; +//import { LoginService } from 'src/app/_services/login.service'; + +@Component({ + selector: 'app-login-page', + templateUrl: './login-page.component.html', + styleUrls: ['./login-page.component.css'] +}) +export class LoginPageComponent implements OnInit { + + public pageLoaded: boolean = false; //ako korisnik ne sme da ima pristup stranici (vec je ulogovan itd), ona ne sme ni da se ucita + email: string = ''; + password: string = ''; + + 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,}$/; + + constructor( + private activatedRoute: ActivatedRoute, + private authService: AuthService + //private loginService: LoginService + ) { } + + ngOnInit(): void { + /*this.authService.checkAccess(this.activatedRoute, this, + (self: any) => self.pageLoaded = true; + );*/ + } + + onSubmit() { + //this.wrongCreds = false; + //this.notApproved = false; RAZMOTRITI + + if (this.pattEmail.test(this.email)) { + //this.loginService.login(this.email, this.password); + } + else { + //this.wrongCreds = true; + } + } + +} diff --git a/frontend/src/app/_pages/register-page/register-page.component.css b/frontend/src/app/_pages/register-page/register-page.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_pages/register-page/register-page.component.html b/frontend/src/app/_pages/register-page/register-page.component.html new file mode 100644 index 00000000..f8ae046e --- /dev/null +++ b/frontend/src/app/_pages/register-page/register-page.component.html @@ -0,0 +1,80 @@ +
+ + + +
+
+
+
+

Registracija

+ +
+ +
+
+ + +

Unesite ispravno ime. (minimum 1, maksimum 30 karaktera)

+
+ +
+ + +

Unesite ispravno prezime. (minimum 1, maksimum 30 karaktera)

+
+
+
+ +
+ +
+ + +

Unesite ispravno korisničko ime.

+
+ +
+ + +

Unesite ispravnu e-mail adresu.

+
+
+
+ +
+ +
+ + +

Lozinka se mora sastojati od najmanje 6 karaktera.

+
+ + +
+ + +

Lozinke se ne podudaraju.

+
+
+ +


+ +
+ +
+ +
+ +
+
+
+
+
+
+ + + +
\ No newline at end of file diff --git a/frontend/src/app/_pages/register-page/register-page.component.spec.ts b/frontend/src/app/_pages/register-page/register-page.component.spec.ts new file mode 100644 index 00000000..347fe9f4 --- /dev/null +++ b/frontend/src/app/_pages/register-page/register-page.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RegisterPageComponent } from './register-page.component'; + +describe('RegisterPageComponent', () => { + let component: RegisterPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RegisterPageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RegisterPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/register-page/register-page.component.ts b/frontend/src/app/_pages/register-page/register-page.component.ts new file mode 100644 index 00000000..d51358de --- /dev/null +++ b/frontend/src/app/_pages/register-page/register-page.component.ts @@ -0,0 +1,151 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Router } from '@angular/router'; +import { AuthService } from 'src/app/_services/auth.service'; +import { RegisterService } from 'src/app/_services/register.service'; + +@Component({ + selector: 'app-register-page', + templateUrl: './register-page.component.html', + styleUrls: ['./register-page.component.css'] +}) +export class RegisterPageComponent implements OnInit { + + public pageLoaded: boolean = false; + + firstName: string = ''; + lastName: string = ''; + nickName: string = ''; + email: string = ''; + pass1: string = ''; + pass2: string = ''; + + wrongFirstNameBool: boolean = false; + wrongLastNameBool: boolean = false; + wrongNickNameBool: boolean = false; + wrongEmailBool: boolean = false; + wrongPass1Bool: boolean = false; + wrongPass2Bool: boolean = false; + + pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/; + 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 activatedRoute: ActivatedRoute, + private router: Router, + private authService: AuthService, + private registerService: RegisterService + ) { } + + ngOnInit(): void { + /*this.authService.checkAccess(this.activatedRoute, this, + (self: any) => + { + self.pageLoaded = true; + } + );*/ + } + + isCorrectName(element: string): boolean { + if (this.pattName.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; + } + nickNameValidation() { + if (this.isCorrectName(this.nickName) == true) { + this.wrongNickNameBool = false; + return; + } + (document.getElementById('nickName')).focus(); + this.wrongNickNameBool = 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.nickName = this.nickName.trim(); + this.email = this.email.trim(); + + this.firstNameValidation(); + this.lastNameValidation(); + this.nickNameValidation(); + this.emailValidation(); + this.passwordValidation(); + + if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongNickNameBool || + this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga + + let user = { + firstName: this.firstName, + lastName: this.lastName, + nickName: this.nickName, + email: this.email, + password: this.pass1 + } + + /*this.registerService.createUser(user, this) + .subscribe( + (response) => { + if () + this.router.navigate(['/login']); //registracija uspesna, idi na login + else if () + alert('Nalog sa unetim email-om već postoji!'); + } + ); + */ + } + } + + + + +} diff --git a/frontend/src/app/_services/auth.service.spec.ts b/frontend/src/app/_services/auth.service.spec.ts new file mode 100644 index 00000000..f1251cac --- /dev/null +++ b/frontend/src/app/_services/auth.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AuthService } from './auth.service'; + +describe('AuthService', () => { + let service: AuthService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(AuthService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts new file mode 100644 index 00000000..af27fdec --- /dev/null +++ b/frontend/src/app/_services/auth.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class AuthService { + + constructor() { } +} diff --git a/frontend/src/app/_services/register.service.spec.ts b/frontend/src/app/_services/register.service.spec.ts new file mode 100644 index 00000000..2ba39608 --- /dev/null +++ b/frontend/src/app/_services/register.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { RegisterService } from './register.service'; + +describe('RegisterService', () => { + let service: RegisterService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(RegisterService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/register.service.ts b/frontend/src/app/_services/register.service.ts new file mode 100644 index 00000000..93074c06 --- /dev/null +++ b/frontend/src/app/_services/register.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class RegisterService { + + constructor() { } +} diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 02972627..3fe2bc13 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -1,7 +1,13 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -const routes: Routes = []; +import { LoginPageComponent } from './_pages/login-page/login-page.component'; +import { RegisterPageComponent } from './_pages/register-page/register-page.component'; + +const routes: Routes = [ + { path: 'login', component: LoginPageComponent }, + { path: 'register', component: RegisterPageComponent } +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index b1c6c96a..39d75e89 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,16 +1,26 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; - +import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; +import { HttpClientModule } from '@angular/common/http'; + import { AppComponent } from './app.component'; +import { LoginPageComponent } from './_pages/login-page/login-page.component'; +import { RegisterPageComponent } from './_pages/register-page/register-page.component'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ - AppComponent + AppComponent, + LoginPageComponent, + RegisterPageComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + FormsModule, + HttpClientModule, + NgbModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/polyfills.ts b/frontend/src/polyfills.ts index 429bb9ef..9194e82b 100644 --- a/frontend/src/polyfills.ts +++ b/frontend/src/polyfills.ts @@ -1,3 +1,7 @@ +/*************************************************************************************************** + * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. + */ +import '@angular/localize/init'; /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. -- cgit v1.2.3