Register almost? implementation

13 files changed, 310 insertions, 1 deletions

diff --git a/src/DevHive.Angular/src/app/app.component.html b/src/DevHive.Angular/src/app/app.component.html
index ea11f83..fb45f37 100644
--- a/src/DevHive.Angular/src/app/app.component.html
+++ b/src/DevHive.Angular/src/app/app.component.html
@@ -1,5 +1,6 @@
 <div>
   <app-login></app-login>
+  <app-register></app-register>
 </div>
 
 <!-- <router-outlet></router-outlet> -->
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index e337abf..20d9173 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -5,11 +5,13 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './components/register/register.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent
+    LoginComponent,
+    RegisterComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.css b/src/DevHive.Angular/src/app/components/login/login.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/login/login.component.css
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html
new file mode 100644
index 0000000..5fd3c3c
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/login/login.component.html
@@ -0,0 +1,15 @@
+<div id="content">
+	<div id="title">
+		Login
+	</div>
+	<hr>
+	<form action="" method="get">
+		<input type="text" placeholder="Username">
+		<input type="text" placeholder="Password">
+	</form>
+	<hr>
+	<div id="submit-btn">
+		Continue
+		<input type="submit">
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.spec.ts b/src/DevHive.Angular/src/app/components/login/login.component.spec.ts
new file mode 100644
index 0000000..d2c0e6c
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/login/login.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await 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/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts
new file mode 100644
index 0000000..4f58421
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css
new file mode 100644
index 0000000..a01992c
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/register/register.component.css
@@ -0,0 +1,64 @@
+#content {
+	height: 100%;
+	max-width: 80%;
+	margin-left: auto;
+	margin-right: auto;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+#title {
+	font-size: 2em;
+	font-weight: bold;
+}
+
+#content input {
+	border: 2px solid black;
+	border-radius: 0.4em;
+	box-sizing: border-box;
+	width: 100%;
+	margin-top: 0.5em;
+	font-size: 0.8em;
+	padding: 0.3em;
+}
+
+#content > input[type=text]:nth-last-of-type(1) {
+	margin-bottom: 0.5em;
+}
+
+input[type=text]:focus {
+	outline: 0;
+}
+
+#content > hr {
+	width: 100%;
+	border: 1px solid black;
+	box-sizing: border-box;
+}
+
+#submit-btn {
+  border: 2px solid black;
+	border-radius: 0.4em;
+	box-sizing: border-box;
+	width: 100%;
+	
+	background-color: black;
+	color: white;
+	text-align: center;
+	padding: 0.2em;
+	margin-top: 0.5em;
+}
+
+#submit-btn:hover {
+	border-color: darkgrey;
+	background-color: darkgrey;
+}
+
+#submit-btn > input[type=submit] {
+	width: 100%;
+	height: 100%;
+	display: none;
+}
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html
new file mode 100644
index 0000000..e394ace
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -0,0 +1,18 @@
+<div id="content">
+	<div id="title">Register</div>
+	
+	<form [formGroup]="registerUserFormGroup">
+		<hr>
+		Value: {{ registerUserFormGroup.value | json }}
+		<hr>
+		
+		<input type="text" placeholder="First Name" formControlName="firstName">
+		<input type="text" placeholder="Last Name" formControlName="lastName">
+		<input type="text" placeholder="Username" formControlName="username">
+		<input type="text" placeholder="Password" formControlName="password">
+		<input type="text" placeholder="Email" formControlName="email">
+
+		<hr>
+		<button type="submit" value="Submit" id="submit-btn">Submit</button>
+	</form>
+</div>
\ No newline at end of file
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.spec.ts b/src/DevHive.Angular/src/app/components/register/register.component.spec.ts
new file mode 100644
index 0000000..f6db869
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/register/register.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async () => {
+    await 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/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts
new file mode 100644
index 0000000..dee928a
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.css']
+})
+export class RegisterComponent implements OnInit {
+  public registerUserFormGroup: FormGroup;
+
+  private _title = 'Register';
+
+  constructor(private titleService: Title, private fb: FormBuilder) {
+    titleService.setTitle(this._title);
+  }
+
+  ngOnInit(): void {
+    this.registerUserFormGroup = this.fb.group({
+      firstName: ['', [
+        Validators.required,
+        Validators.minLength(3)
+      ]],
+      lastName: ['', [
+        Validators.required,
+        Validators.minLength(3)
+      ]],
+      age: [null, [
+        Validators.required,
+        Validators.min(14),
+        Validators.max(120),
+      ]],
+      username: ['', [
+        Validators.required,
+        Validators.minLength(3)
+      ]],
+      email: ['', [
+        Validators.required,
+        Validators.email,
+      ]],
+      password: ['', [
+        Validators.required,
+        //Add password pattern
+      ]],
+    });
+
+    this.registerUserFormGroup.valueChanges.subscribe(console.log);
+  }
+
+  get firstName() {
+    return this.registerUserFormGroup.get('firstName');
+  }
+
+  get lastName() {
+    return this.registerUserFormGroup.get('lastName');
+  }
+
+  get age() {
+    return this.registerUserFormGroup.get('age');
+  }
+
+  get username() {
+    return this.registerUserFormGroup.get('username');
+  }
+
+  get email() {
+    return this.registerUserFormGroup.get('email');
+  }
+
+  get password() {
+    return this.registerUserFormGroup.get('password');
+  }
+}
\ No newline at end of file
diff --git a/src/DevHive.Angular/src/app/services/register.service.spec.ts b/src/DevHive.Angular/src/app/services/register.service.spec.ts
new file mode 100644
index 0000000..2ba3960
--- /dev/null
+++ b/src/DevHive.Angular/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/src/DevHive.Angular/src/app/services/register.service.ts b/src/DevHive.Angular/src/app/services/register.service.ts
new file mode 100644
index 0000000..52cb38e
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/register.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RegisterService {
+
+  constructor() { } 
+
+  
+}
diff --git a/src/DevHive.Angular/src/reset.css b/src/DevHive.Angular/src/reset.css
new file mode 100644
index 0000000..27acba5
--- /dev/null
+++ b/src/DevHive.Angular/src/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file