From 56eaec89206e7f473cb53098395e68746c049de3 Mon Sep 17 00:00:00 2001
From: JakubWalkowiak <jakub.walkowiak6@wp.pl>
Date: Wed, 16 Dec 2020 21:40:37 +0100
Subject: [PATCH] added login and registration components

---
 .../components/login/login.component.html     | 18 ++++++++++
 .../components/login/login.component.scss     |  0
 .../components/login/login.component.spec.ts  | 25 +++++++++++++
 .../user/components/login/login.component.ts  | 36 +++++++++++++++++++
 .../register/register.component.html          | 29 +++++++++++++++
 .../register/register.component.scss          |  0
 .../register/register.component.spec.ts       | 25 +++++++++++++
 .../components/register/register.component.ts | 36 +++++++++++++++++++
 src/app/user/interfaces/user.interface.ts     |  6 ++++
 src/app/user/services/user.service.ts         | 22 ++++++++++++
 src/app/user/user-routing.module.ts           | 16 +++++++++
 src/app/user/user.module.ts                   | 14 ++++++++
 src/environments/environment.ts               |  4 +++
 13 files changed, 231 insertions(+)
 create mode 100644 src/app/user/components/login/login.component.html
 create mode 100644 src/app/user/components/login/login.component.scss
 create mode 100644 src/app/user/components/login/login.component.spec.ts
 create mode 100644 src/app/user/components/login/login.component.ts
 create mode 100644 src/app/user/components/register/register.component.html
 create mode 100644 src/app/user/components/register/register.component.scss
 create mode 100644 src/app/user/components/register/register.component.spec.ts
 create mode 100644 src/app/user/components/register/register.component.ts
 create mode 100644 src/app/user/interfaces/user.interface.ts
 create mode 100644 src/app/user/services/user.service.ts
 create mode 100644 src/app/user/user-routing.module.ts
 create mode 100644 src/app/user/user.module.ts

diff --git a/src/app/user/components/login/login.component.html b/src/app/user/components/login/login.component.html
new file mode 100644
index 0000000..fd94267
--- /dev/null
+++ b/src/app/user/components/login/login.component.html
@@ -0,0 +1,18 @@
+<div class="login-form-container d-flex justify-content-center">
+    <form [formGroup]="loginForm" class="login-form d-flex flex-column mt-5">
+        
+        <mat-form-field>
+            <mat-label>Username</mat-label>
+            <input matInput formControlName="userName" />
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Password</mat-label>
+            <input matInput formControlName="password" />
+        </mat-form-field>
+
+        <div class="mt-4">
+            <button (click)="onLoginUser()" class="btn btn-primary">Save</button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/app/user/components/login/login.component.scss b/src/app/user/components/login/login.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/user/components/login/login.component.spec.ts b/src/app/user/components/login/login.component.spec.ts
new file mode 100644
index 0000000..d6d85a8
--- /dev/null
+++ b/src/app/user/components/login/login.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user/components/login/login.component.ts b/src/app/user/components/login/login.component.ts
new file mode 100644
index 0000000..7e27853
--- /dev/null
+++ b/src/app/user/components/login/login.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { UserService } from '../../services/user.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  loginForm: FormGroup;
+
+  constructor(private userSerice: UserService) { }
+
+  ngOnInit(): void {
+    this.loginForm = this.createLoginForm();
+  }
+
+
+  createLoginForm(): FormGroup {
+    return new FormGroup({
+      userName: new FormControl('', Validators.required),
+      fullName: new FormControl('', Validators.required),
+      password: new FormControl('', Validators.required),
+      repeatedPassword: new FormControl('', Validators.required)
+    });
+  }
+
+  onRegisterUser(): void {
+    this.userSerice.login(this.loginForm.value).subscribe(() => {
+
+    });
+  }
+
+}
diff --git a/src/app/user/components/register/register.component.html b/src/app/user/components/register/register.component.html
new file mode 100644
index 0000000..aa8dd03
--- /dev/null
+++ b/src/app/user/components/register/register.component.html
@@ -0,0 +1,29 @@
+<div class="register-form-container d-flex justify-content-center">
+    <form [formGroup]="registerForm" class="register-form d-flex flex-column mt-5">
+        
+        <mat-form-field>
+        <mat-label>Username</mat-label>
+        <input matInput formControlName="userName" />
+        </mat-form-field>
+
+        <mat-form-field>
+        <mat-label>Full name</mat-label>
+        <input matInput formControlName="fullName" />
+        </mat-form-field>
+
+        <mat-form-field>
+        <mat-label>Password</mat-label>
+        <input matInput formControlName="password" />
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Repeated password</mat-label>
+            <input matInput formControlName="repeatedPassword" />
+        </mat-form-field>
+
+        <div class="mt-4">
+            <button (click)="onRegisterUser()" class="btn btn-primary">Save</button>
+        </div>
+    </form>
+</div>
+  
diff --git a/src/app/user/components/register/register.component.scss b/src/app/user/components/register/register.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/user/components/register/register.component.spec.ts b/src/app/user/components/register/register.component.spec.ts
new file mode 100644
index 0000000..6c19551
--- /dev/null
+++ b/src/app/user/components/register/register.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user/components/register/register.component.ts b/src/app/user/components/register/register.component.ts
new file mode 100644
index 0000000..2818da5
--- /dev/null
+++ b/src/app/user/components/register/register.component.ts
@@ -0,0 +1,36 @@
+import { UserService } from './../../services/user.service';
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent implements OnInit {
+
+  registerForm: FormGroup;
+
+  constructor(private userSerice: UserService) { }
+
+  ngOnInit(): void {
+    this.registerForm = this.createRegisterForm();
+  }
+
+
+  createRegisterForm(): FormGroup {
+    return new FormGroup({
+      userName: new FormControl('', Validators.required),
+      fullName: new FormControl('', Validators.required),
+      password: new FormControl('', Validators.required),
+      repeatedPassword: new FormControl('', Validators.required)
+    });
+  }
+
+  onRegisterUser(): void {
+    this.userSerice.register(this.registerForm.value).subscribe(() => {
+
+    });
+  }
+
+}
diff --git a/src/app/user/interfaces/user.interface.ts b/src/app/user/interfaces/user.interface.ts
new file mode 100644
index 0000000..3011acb
--- /dev/null
+++ b/src/app/user/interfaces/user.interface.ts
@@ -0,0 +1,6 @@
+export interface User {
+    id?: number;
+    userName: string;
+    fullName: string;
+    password?: string;
+}
diff --git a/src/app/user/services/user.service.ts b/src/app/user/services/user.service.ts
new file mode 100644
index 0000000..88d4fa2
--- /dev/null
+++ b/src/app/user/services/user.service.ts
@@ -0,0 +1,22 @@
+import { environment } from './../../../environments/environment';
+import { User } from './../interfaces/user.interface';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+
+  constructor(private http: HttpClient) { }
+
+  register(user: User): Observable<void> {
+    return this.http.post<void>(environment.host + environment.apiEndpoints.users.register, user);
+  }
+
+  login(user: User): Observable<void> {
+    return this.http.post<void>(environment.host + environment.apiEndpoints.users.login, user);
+  }
+
+}
diff --git a/src/app/user/user-routing.module.ts b/src/app/user/user-routing.module.ts
new file mode 100644
index 0000000..b91c6cf
--- /dev/null
+++ b/src/app/user/user-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LoginComponent } from './components/login/login.component';
+import { RegisterComponent } from './components/register/register.component';
+
+
+const routes: Routes = [
+    { path: '', component: LoginComponent },
+    { path: 'register', component: RegisterComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SubjectRoutingModule { }
diff --git a/src/app/user/user.module.ts b/src/app/user/user.module.ts
new file mode 100644
index 0000000..cc898ff
--- /dev/null
+++ b/src/app/user/user.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RegisterComponent } from './components/register/register.component';
+import { LoginComponent } from './components/login/login.component';
+
+
+
+@NgModule({
+  declarations: [RegisterComponent, LoginComponent],
+  imports: [
+    CommonModule
+  ]
+})
+export class UserModule { }
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 83fefb2..89351a9 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -8,6 +8,10 @@ export const environment = {
       addDeletionRequest: 'api/subjectDeleteRequests/addDeletionRequest',
       approveDeletion: 'api/subjectDeleteRequests/approveDeletion',
       cancelDeletion: 'api/subjectDeleteRequests/cancelDeletion',
+    },
+    users: {
+      register: 'api/users/register',
+      login: 'api/users/login'
     }
   }
 };