Add basic module and component, update packages

frontend/package.json

@@ -17,6 +17,7 @@
     "@angular/platform-browser": "~10.0.0",
     "@angular/platform-browser-dynamic": "~10.0.0",
     "@angular/router": "~10.0.0",
+    "@nebular/auth": "^6.2.1",
     "@nebular/eva-icons": "5.0.0",
     "@nebular/theme": "^5.0.0",
     "@types/papaparse": "^5.0.3",
@@ -28,7 +29,7 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1000.0",
+    "@angular-devkit/build-angular": "^0.1002.0",
     "@angular/cli": "~10.0.0",
     "@angular/compiler-cli": "~10.0.0",
     "@angular/language-service": "~10.0.0",

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

@@ -12,6 +12,10 @@ const routes: Routes = [
     loadChildren: () =>
       import('./main-view/main-view.module').then((m) => m.MainViewModule),
   },
+  {
+    path: 'auth',
+    loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule),
+  },
 ];
 
 @NgModule({

frontend/src/app/app.module.ts

@@ -14,6 +14,7 @@ import {
   NbMenuModule,
   NbToastrModule,
 } from '@nebular/theme';
+import { NbPasswordAuthStrategy, NbAuthModule } from '@nebular/auth';
 
 import { FrontPageModule } from './front-page/front-page.module';
 import { SharedDataService } from './_services/shared-data.service';
@@ -32,6 +33,26 @@ import { SidebarItemsService } from './_services/sidebar-items.service';
     NbEvaIconsModule,
     FrontPageModule,
     NbToastrModule.forRoot(),
+    NbAuthModule.forRoot({
+      strategies: [
+        NbPasswordAuthStrategy.setup({
+          name: 'email',
+          login: {
+            redirect: {
+              success: '/view/',
+              failure: null,
+            },
+          },
+          register: {
+            redirect: {
+              success: '/my-account/',
+              failure: null,
+            },
+          },
+        }),
+      ],
+      forms: {},
+    }),
   ],
   bootstrap: [AppComponent],
   providers: [SharedDataService, NbSidebarService, SidebarItemsService],

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

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NbAuthComponent } from '@nebular/auth';
+import { LoginComponent } from './login/login.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: NbAuthComponent,
+    children: [
+      {
+        path: 'login',
+        component: LoginComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AuthRoutingModule {}

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

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { AuthRoutingModule } from './auth-routing.module';
+import { NbAuthModule } from '@nebular/auth';
+import {
+  NbAlertModule,
+  NbButtonModule,
+  NbCheckboxModule,
+  NbInputModule,
+} from '@nebular/theme';
+import { LoginComponent } from './login/login.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NbAlertModule,
+    NbInputModule,
+    NbButtonModule,
+    NbCheckboxModule,
+    AuthRoutingModule,
+    NbAuthModule,
+  ],
+  declarations: [LoginComponent],
+})
+export class AuthModule {}

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

@@ -0,0 +1,98 @@
+<h1 id="title" class="title">Logowanie</h1>
+<p class="sub-title">Zaloguj się przy pomocy adresu e-mail</p>
+
+<nb-alert
+  *ngIf="showMessages.error && errors?.length && !submitted"
+  outline="danger"
+  role="alert"
+>
+  <p class="alert-title"><b>Pojawił się błąd!</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)="login()" #form="ngForm" aria-labelledby="title">
+  <div class="form-control-group">
+    <label class="label" for="input-email">Adres email:</label>
+    <input
+      nbInput
+      fullWidth
+      [(ngModel)]="user.email"
+      #email="ngModel"
+      name="email"
+      id="input-email"
+      pattern=".+@.+\..+"
+      placeholder="Email address"
+      autofocus
+      [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">
+      <p class="error-message" *ngIf="email.errors?.required">
+        E-mail jest wymagany!
+      </p>
+      <p class="error-message" *ngIf="email.errors?.pattern">
+        Adres e-mail powinien być prawdziwy!
+      </p>
+    </ng-container>
+  </div>
+
+  <div class="form-control-group">
+    <label class="label" for="input-password">Hasło:</label>
+    <input
+      nbInput
+      fullWidth
+      [(ngModel)]="user.password"
+      #password="ngModel"
+      name="password"
+      type="password"
+      id="input-password"
+      placeholder="Password"
+      [status]="
+        password.dirty ? (password.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">
+      <p class="error-message" *ngIf="password.errors?.required">
+        Hasło jest wymagane
+      </p>
+      <p
+        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
+      </p>
+    </ng-container>
+  </div>
+  <button
+    nbButton
+    fullWidth
+    status="success"
+    [disabled]="submitted || !form.valid"
+    [class.btn-pulse]="submitted"
+  >
+    Zaloguj
+  </button>
+</form>

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

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

frontend/src/styles.scss

@@ -1,9 +1,11 @@
 @import "themes";
 
 @import "~@nebular/theme/styles/globals";
+@import "~@nebular/auth/styles/globals";
 
 @include nb-install() {
   @include nb-theme-global();
+  @include nb-auth-global();
 }
 /* You can add global styles to this file, and also import other style files */
 .menu-title {