Login and Register page - v. 0.1.0

8 files changed, 366 insertions, 0 deletions

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
--- /dev/null
+++ b/frontend/src/app/_pages/login-page/login-page.component.css
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 @@
+<div *ngIf="pageLoaded" 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>
+            <!-- Email input -->
+            <div class="form-outline mb-4">
+                <label class="form-label" for="email">Email adresa</label>
+                <input [(ngModel)]="email" name="email" type="email" id="email" class="form-control form-control-lg" placeholder="Unesite email adresu..." />
+            </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" class="form-control form-control-lg" placeholder="Unesite lozinku..." />
+            </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>
+        
+                <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>
+            </div>
+        </form>
+    </div>
+    
+    <!-- TODO: <app-footer></app-footer>-->
+
+</div>
\ 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<LoginPageComponent>;
+
+  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
--- /dev/null
+++ b/frontend/src/app/_pages/register-page/register-page.component.css
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 @@
+<div style="min-height: 100vh; position: relative;">
+    
+    <!-- TODO <app-navbar [activeNav]="'register'"></app-navbar>-->
+    
+    <div class="container" style="margin-top: 50px;">
+        <div class="text-black">
+          <div class="row justify-content-center">
+            <div class="col-8 bg-white border rounded-3 shadow-sm p-5">
+              <p class="text-center h2 fw-bold mb-5 mx-1 mx-md-4">Registracija</p>
+      
+              <form class="mx-1 mx-md-4">
+                <!--Ime-->
+                <div class="row">
+                    <div class="col-6 p-2">
+                        <label class="form-label" for="firstName">Ime</label>
+                        <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName" name="firstName">
+                        <p *ngIf="wrongFirstNameBool" class="small fw-bold text-danger">Unesite ispravno ime. (minimum 1, maksimum 30 karaktera)</p>
+                    </div>
+                    <!--Prezime-->
+                    <div class="col-6 p-2">
+                        <label class="form-label" for="lastName">Prezime</label>
+                        <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName" />
+                        <p *ngIf="wrongLastNameBool" class="small fw-bold text-danger">Unesite ispravno prezime. (minimum 1, maksimum 30 karaktera)</p>
+                    </div>
+                </div>
+                <br>
+      
+                <div class="row">
+                    <!--Korisnicko ime-->
+                    <div class="col-6 p-2">
+                        <label class="form-label" for="nickName">Korisničko ime</label>
+                        <input type="text" id="nickName" class="form-control" [(ngModel)]="nickName" name="nickName" />
+                        <p *ngIf="wrongNickNameBool" class="small fw-bold text-danger">Unesite ispravno korisničko ime.</p>
+                    </div>
+                    <!--Email-->
+                    <div class="col-6 p-2">
+                        <label class="form-label" for="email">E-mail adresa</label>
+                        <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" />
+                        <p *ngIf="wrongEmailBool" class="small fw-bold text-danger">Unesite ispravnu e-mail adresu.</p>
+                    </div>
+                </div>
+                <br>
+      
+                <div class="row">
+                    <!-- Lozinka 1. -->
+                    <div class="col-6 p-2">
+                        <label class="form-label" for="pass1">Lozinka</label>
+                        <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1" />
+                        <p *ngIf="wrongPass1Bool" class="small fw-bold text-danger">Lozinka se mora sastojati od najmanje 6 karaktera.</p>
+                    </div>
+      
+                    <!-- Lozinka 2. -->
+                    <div class="col-6 p-2">
+                        <label class="form-label" for="pass2">Potvrdite lozinku</label>
+                        <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2" />
+                        <p *ngIf="wrongPass2Bool" class="small fw-bold text-danger">Lozinke se ne podudaraju.</p>
+                    </div>
+                </div>
+      
+                <br><br><br>
+                <!--Dugme Registruj se-->
+                <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
+                    <button type="button" class="btn btn-primary btn-lg" (click)="validation()">Registrujte se</button>
+                </div>
+      
+                <div class="form-check d-flex justify-content-center mb-5">
+                  <label class="form-check-label" class="small fw-bold mt-2 pt-1 mb-0" for="form2Example3">
+                    Već imate kreiran nalog?
+                    <a routerLink="/login" class="link-danger">Prijavite se</a>
+                  </label>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    
+    <!-- TODO <app-footer></app-footer> -->
+
+</div>
\ 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<RegisterPageComponent>;
+
+  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;
+    }
+    (<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;
+  }
+  nickNameValidation() {
+    if (this.isCorrectName(this.nickName) == true) {
+      this.wrongNickNameBool = false;
+      return;
+    }
+    (<HTMLSelectElement>document.getElementById('nickName')).focus();
+    this.wrongNickNameBool = 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.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!');
+            }
+          );
+          */
+      }
+  }
+
+
+
+
+}