Add register page

frontend/src/app/app.module.ts

@@ -14,7 +14,7 @@ import {
   NbMenuModule,
   NbToastrModule,
 } from '@nebular/theme';
-import { NbPasswordAuthStrategy, NbAuthModule } from '@nebular/auth';
+import { NbPasswordAuthStrategy, NbAuthModule, NbAuthJWTToken } from '@nebular/auth';
 
 import { FrontPageModule } from './front-page/front-page.module';
 import { SharedDataService } from './_services/shared-data.service';
@@ -43,6 +43,9 @@ import { SidebarItemsService } from './_services/sidebar-items.service';
               failure: null,
             },
           },
+          token: {
+            class: NbAuthJWTToken
+          },
           register: {
             redirect: {
               success: '/my-account/',

frontend/src/app/auth/auth-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { NbAuthComponent } from '@nebular/auth';
 import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 
 export const routes: Routes = [
   {
@@ -12,6 +13,10 @@ export const routes: Routes = [
         path: 'login',
         component: LoginComponent,
       },
+      {
+        path: 'register',
+        component: RegisterComponent
+      }
     ],
   },
 ];

frontend/src/app/auth/auth.module.ts

@@ -12,6 +12,7 @@ import {
   NbInputModule,
 } from '@nebular/theme';
 import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 
 @NgModule({
   imports: [
@@ -25,6 +26,6 @@ import { LoginComponent } from './login/login.component';
     AuthRoutingModule,
     NbAuthModule,
   ],
-  declarations: [LoginComponent],
+  declarations: [LoginComponent, RegisterComponent],
 })
 export class AuthModule {}

frontend/src/app/auth/register/register.component.html

@@ -0,0 +1,190 @@
+<h1 id="title" class="title">Rejestracja</h1>
+
+<nb-alert
+  *ngIf="showMessages.error && errors?.length && !submitted"
+  outline="danger"
+  role="alert"
+>
+  <p class="alert-title"><b>Coś nie wyszło!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
+
+<nb-alert
+  *ngIf="showMessages.success && messages?.length && !submitted"
+  outline="success"
+  role="alert"
+>
+  <p class="alert-title"><b>Udało się!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">
+      {{ message }}
+    </li>
+  </ul>
+</nb-alert>
+
+<form (ngSubmit)="register()" #form="ngForm" aria-labelledby="title">
+  <div class="form-control-group">
+    <label class="label" for="input-name">Imię i nazwisko</label>
+    <input
+      nbInput
+      [(ngModel)]="user.fullName"
+      #fullName="ngModel"
+      id="input-name"
+      name="fullName"
+      placeholder="Full name"
+      autofocus
+      fullWidth
+      [status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
+      [required]="getConfigValue('forms.validation.fullName.required')"
+      [minlength]="getConfigValue('forms.validation.fullName.minLength')"
+      [maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
+      [attr.aria-invalid]="fullName.invalid && fullName.touched ? true : null"
+    />
+    <ng-container *ngIf="fullName.invalid && fullName.touched">
+      <nb-alert
+        status="danger"
+        class="custom-size-error"
+        *ngIf="fullName.errors?.required"
+      >
+        Imię i nazwisko jest wymagane!
+      </nb-alert>
+      <nb-alert
+        status="danger"
+        class="custom-size-error"
+        *ngIf="fullName.errors?.minlength || fullName.errors?.maxlength"
+      >
+        Dane powinny zawierać od
+        {{ getConfigValue("forms.validation.fullName.minLength") }} do
+        {{ getConfigValue("forms.validation.fullName.maxLength") }}
+        znaków
+      </nb-alert>
+    </ng-container>
+  </div>
+
+  <div class="form-control-group">
+    <label class="label" for="input-email">Adres e-mail:</label>
+    <input
+      nbInput
+      [(ngModel)]="user.email"
+      #email="ngModel"
+      id="input-email"
+      name="email"
+      pattern=".+@.+..+"
+      placeholder="Adres e-mail"
+      fullWidth
+      [status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
+      [required]="getConfigValue('forms.validation.email.required')"
+      [attr.aria-invalid]="email.invalid && email.touched ? true : null"
+    />
+    <ng-container *ngIf="email.invalid && email.touched">
+      <nb-alert
+        status="danger"
+        *ngIf="email.errors?.required"
+        class="custom-size-error"
+      >
+        Email jest wymagany!
+      </nb-alert>
+      <nb-alert
+        status="danger"
+        class="custom-size-error"
+        *ngIf="email.errors?.pattern"
+      >
+        Nieprawidłowy mail!
+      </nb-alert>
+    </ng-container>
+  </div>
+
+  <div class="form-control-group">
+    <label class="label" for="input-password">Hasło:</label>
+    <input
+      nbInput
+      [(ngModel)]="user.password"
+      #password="ngModel"
+      type="password"
+      id="input-password"
+      name="password"
+      placeholder="Wprowadź bezpieczne hasło"
+      fullWidth
+      [status]="email.dirty ? (email.invalid ? 'danger' : 'success') : 'basic'"
+      [required]="getConfigValue('forms.validation.password.required')"
+      [minlength]="getConfigValue('forms.validation.password.minLength')"
+      [maxlength]="getConfigValue('forms.validation.password.maxLength')"
+      [attr.aria-invalid]="password.invalid && password.touched ? true : null"
+    />
+    <ng-container *ngIf="password.invalid && password.touched">
+      <nb-alert
+        status="danger"
+        class="custom-size-error"
+        *ngIf="password.errors?.required"
+      >
+        Hasło jest wymagane!
+      </nb-alert>
+      <nb-alert
+        status="danger"
+        class="error-message"
+        *ngIf="password.errors?.minlength || password.errors?.maxlength"
+      >
+        Hasło powinno zawierać od
+        {{ getConfigValue("forms.validation.password.minLength") }} do
+        {{ getConfigValue("forms.validation.password.maxLength") }}
+        znaków
+      </nb-alert>
+    </ng-container>
+  </div>
+
+  <div class="form-control-group">
+    <label class="label" for="input-re-password">Repeat password:</label>
+    <input
+      nbInput
+      [(ngModel)]="user.confirmPassword"
+      #rePass="ngModel"
+      type="password"
+      id="input-re-password"
+      name="rePass"
+      placeholder="Confirm Password"
+      fullWidth
+      [status]="
+        email.dirty
+          ? email.invalid || password.value != rePass.value
+            ? 'danger'
+            : 'success'
+          : 'basic'
+      "
+      [required]="getConfigValue('forms.validation.password.required')"
+      [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null"
+    />
+    <ng-container *ngIf="rePass.invalid && rePass.touched">
+      <nb-alert
+        status="danger"
+        class="custom-size-error"
+        *ngIf="rePass.errors?.required"
+      >
+        Musisz potwierdzić hasło!
+      </nb-alert>
+      <nb-alert
+        status="danger"
+        class="custom-size-error"
+        *ngIf="password.value != rePass.value && !rePass.errors?.required"
+      >
+        Hasła się nie zgadzają
+      </nb-alert>
+    </ng-container>
+  </div>
+
+  <button
+    nbButton
+    fullWidth
+    status="success"
+    [disabled]="submitted || !form.valid"
+    [class.btn-pulse]="submitted"
+  >
+    Utwórz konto
+  </button>
+</form>
+
+<section class="another-action" aria-label="Sign in">
+  Posiadasz już konto?
+  <a class="text-link" routerLink="../login">Zaloguj się</a>
+</section>

frontend/src/app/auth/register/register.component.scss

@@ -0,0 +1,5 @@
+.custom-size-error {
+    padding: 0.5rem !important;
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+}

frontend/src/app/auth/register/register.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { NbRegisterComponent } from '@nebular/auth';
+
+@Component({
+  selector: 'register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss'],
+})
+export class RegisterComponent extends NbRegisterComponent {
+  
+}

frontend/src/app/front-page/front-page.component.html

@@ -3,8 +3,9 @@
     <div class="header__container">
       <div class="header__logo-container"><span>nkadf</span></div>
       <div class="header__buttons-container">
-        <!-- <button nbButton outline status="primary">Zaloguj</button>
-        <button nbButton outline status="success">Utwórz konto</button> -->
+        <!-- TODO: Opakowanie wszystkiego ładnym komponentem, gdy user jest zalogowany, to wyświetlić ładny napis "Zapraszamy" czy coś w ten deseń -->
+        <button nbButton outline status="primary" (click)="login()">Zaloguj</button>
+        <button nbButton outline status="success" (click)="register()">Zarejestruj się</button>
       </div>
     </div>
   </nb-layout-header>

frontend/src/app/front-page/front-page.component.ts

@@ -30,7 +30,6 @@ export class FrontPageComponent {
 
   openFileDialog(event: any): void {
     event.preventDefault();
-
     const element: HTMLElement = document.getElementById(
       'input-for-file'
     ) as HTMLElement;
@@ -43,6 +42,14 @@ export class FrontPageComponent {
     this.isFileFetched = true;
   }
 
+  login(): void {
+    this.router.navigate(['/auth/login']);
+  }
+
+  register(): void {
+    this.router.navigate(['/auth/register']);
+  }
+
   sendFile(event: any): void {
     this.sendDataService.postFile(this.file).subscribe(
       (res: any) => {