3 files changed, 191 insertions, 0 deletions
diff --git a/src/app/components/register/register.component.css b/src/app/components/register/register.component.css
new file mode 100644
index 0000000..93d8006
--- /dev/null
+++ b/src/app/components/register/register.component.css
@@ -0,0 +1,40 @@
+/* A lot of stuff are moved to the global styles! */
+
+* {
+  transition: 0.2s;
+}
+
+form {
+  width: 100%;
+}
+
+@media screen and (max-height: 630px) {
+  #content {
+    height: fit-content !important;
+  }
+}
+
+#content hr {
+  width: 100%;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+.input-selection:nth-of-type(1) {
+  margin-top: 1.2em;
+}
+
+.submit-btn {
+  margin-bottom: .2em;
+}
+
+.redirect-to-login {
+  color: var(--focus-color);
+  background-color: var(--bg-color);
+  border-color: var(--focus-color);
+}
+
+.redirect-to-login:hover {
+  border-color: black !important;
+  color: black;
+}
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
new file mode 100644
index 0000000..4e67e0e
--- /dev/null
+++ b/src/app/components/register/register.component.html
@@ -0,0 +1,65 @@
+<div id="content">
+	<div class="title">Register</div>
+
+	<form [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
+		<hr>
+		<!-- Value: {{ registerUserFormGroup.value | json }}
+		<hr> -->
+
+		<div class="input-selection">
+			<input type="text" placeholder="Goshko, is that u?" class="input-field" formControlName="firstName" required>
+			<label class="input-field-label">First Name</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" placeholder="Trapov? Really??" class="input-field" formControlName="lastName" required>
+			<label class="input-field-label">Last Name</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" placeholder="Think of something cool to flex on other kids" class="input-field" formControlName="username" required>
+			<label class="input-field-label">Username</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" placeholder="You expect an email joke? I have none, mail me one" class="input-field" formControlName="email" required>
+			<label class="input-field-label">Email</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('email')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="password" placeholder="Make sure it's long & strong (just like my d***)" class="input-field" formControlName="password" required>
+			<label class="input-field-label">Password</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+				<label *ngIf="registerUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label>
+			</div>
+		</div>
+
+		<hr>
+		<button class="submit-btn" type="submit">Submit</button>
+		<app-error-bar></app-error-bar>
+	</form>
+	<button class="submit-btn redirect-to-login" (click)="onRedirectLogin()">Already have an account? Login here</button>
+</div>
diff --git a/src/app/components/register/register.component.ts b/src/app/components/register/register.component.ts
new file mode 100644
index 0000000..36eaa55
--- /dev/null
+++ b/src/app/components/register/register.component.ts
@@ -0,0 +1,86 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { TokenService } from 'src/app/services/token.service';
+import { UserService } from 'src/app/services/user.service';
+import { ErrorBarComponent } from '../error-bar/error-bar.component';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.css']
+})
+export class RegisterComponent implements OnInit {
+  @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
+  private _title = 'Register';
+  public registerUserFormGroup: FormGroup;
+
+  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _tokenService: TokenService) {
+    this._titleService.setTitle(this._title);
+  }
+
+  ngOnInit(): void {
+    this.registerUserFormGroup = this._fb.group({
+      firstName: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3)
+      ]),
+      lastName: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3)
+      ]),
+      username: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3)
+      ]),
+      email: new FormControl('', [
+        Validators.required,
+        Validators.email,
+      ]),
+      password: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.pattern('.*[0-9].*') // Check if password contains atleast one number
+      ]),
+    });
+
+    // this.registerUserFormGroup.valueChanges.subscribe(console.log);
+  }
+
+  onSubmit(): void {
+    this._userService.registerUserRequest(this.registerUserFormGroup).subscribe(
+        res => {
+          this._tokenService.setUserTokenToSessionStorage(res);
+          this._router.navigate(['/']);
+        },
+        (err: HttpErrorResponse) => {
+          this._errorBar.showError(err);
+        }
+    );
+  }
+  onRedirectLogin(): void {
+    this._router.navigate(['/login']);
+  }
+
+  get firstName(): AbstractControl | null  {
+    return this.registerUserFormGroup.get('firstName');
+  }
+
+  get lastName(): AbstractControl | null  {
+    return this.registerUserFormGroup.get('lastName');
+  }
+
+  get username(): AbstractControl | null  {
+    return this.registerUserFormGroup.get('username');
+  }
+
+  get email(): AbstractControl | null {
+    return this.registerUserFormGroup.get('email');
+  }
+
+  get password(): AbstractControl | null  {
+    return this.registerUserFormGroup.get('password');
+  }
+}