Notes trying times

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

src/app/app-routing.module.ts

@@ -1,25 +1,42 @@
+import { PendingComponent } from './book/pending/pending.component';
+import { BoardAdminComponent } from './user/board-admin/board-admin.component';
+import { BoardUserComponent } from './user/board-user/board-user.component';
+import { ProfileComponent } from './user/profile/profile.component';
+import { RegisterComponent } from './auth/register/register.component';
+import { LoginComponent } from './auth/login/login.component';
+import { NoteComponent } from './note/note.component';
+import { NoteFormComponent } from './note/note-form/note-form.component';
 import { BookFormComponent } from './book/book-form/book-form.component';
 import { BookComponent } from './book/book.component';
-import { RegistrationComponent } from './user/registration/registration.component';
-import { UserComponent } from './user/user.component';
+import { HomeComponent } from './home/home.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
+import { SiteInDevelopmentComponent } from './site-in-development/site-in-development.component';
 
 const routes: Routes = [
-  {path:'', redirectTo:'/book', pathMatch:'full'},
+  {path:'', redirectTo:'/home', pathMatch:'full'},
+  {path: 'home', component: HomeComponent },
+  {path: 'login', component: LoginComponent},
+  {path: 'register', component: RegisterComponent},
+  {path: 'profile', component: ProfileComponent},
+  {path: 'user', component: BoardUserComponent},
+  {path: 'admin', component: BoardAdminComponent},
   {
     path: 'book', component: BookComponent,
     children: [
       {path:'book-form', component: BookFormComponent}
+
     ]
   },
-  { 
-    path: 'user', component: UserComponent,
+  {path: 'pending', component: PendingComponent},
+  {
+    path: 'note', component: NoteComponent,
     children: [
-      {path: 'registration', component: RegistrationComponent}
+      {path: 'note-form', component: NoteFormComponent}
     ]
-  }
+  },
+  {path:'site-in-development', component: SiteInDevelopmentComponent}
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,3 +1,104 @@
-<div class="container">
-  <router-outlet></router-outlet>
-</div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+  <a class="navbar-brand" href="#">FavoriteBooks.com</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarNavDropdown">
+  <ul class="navbar-nav">
+
+    <li class="nav-item">
+      <a href="/note" class="nav-link" routerLink="note">Moja kolekcja książek</a>
+    </li>
+    <li class="nav-item">
+
+      <a href="/site-in-development" class="nav-link" routerLink="site-in-development">Oczekujące na potwierdzenie</a>
+    </li>
+    <li class="nav-item">
+
+      <a href="/site-in-development" class="nav-link" routerLink="site-in-development">Użytkownicy</a>
+    </li>
+    <li class="nav-item">
+
+      <a href="/book" class="nav-link" routerLink="book">Książki</a>
+    </li>
+
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
+        aria-haspopup="true" aria-expanded="false">KONTO</a>
+      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+        <a  class="dropdown-item" href="/site-in-development" routerLink="site-in-development">Ustawienia</a>
+        <hr class="dropdown-divider" role="separator">
+        <a  class="dropdown-item" href="/login" routerLink="login">Zaloguj</a>
+        <a  class="dropdown-item" href="/logout" routerLink="logout">Wyloguj</a>
+        <a  class="dropdown-item" href="/register" routerLink="register">Zarejestruj</a>
+      </div>
+    </li>
+  </ul>
+</div>
+</nav>
+
+
+<!-- 
+
+<div id="app">
+  <nav class="navbar navbar-expand-lg navbar-light bg-transparent border-bottom">
+    <a href="#" class="navbar-brand">BookStore</a>
+    <ul class="navbar-nav mr-auto" routerLinkActive="active">
+      <li class="nav-item">
+        <a href="/home" class="nav-link" routerLink="home">Home </a>
+      </li>
+      <li class="nav-item">
+        <a href="/book" class="nav-link" routerLink="book">Book </a>
+      </li>
+      <li class="nav-item">
+        <a href="/note" class="nav-link" routerLink="note">Note </a>
+      </li>
+      <li class="nav-item" *ngIf="showAdminBoard">
+        <a href="/admin" class="nav-link" routerLink="admin">Admin Board</a>
+      </li>
+      <li class="nav-item" *ngIf="showModeratorBoard">
+        <a href="/mod" class="nav-link" routerLink="mod">Moderator Board</a>
+      </li>
+      <li class="nav-item">
+        <a href="/user" class="nav-link" *ngIf="isLoggedIn" routerLink="user">User</a>
+      </li>
+    </ul>
+
+    <ul class="navbar-nav ml-auto" *ngIf="!isLoggedIn">
+      <li class="nav-item">
+        <a href="/register" class="nav-link" routerLink="register">Sign Up</a>
+      </li>
+      <li class="nav-item">
+        <a href="/login" class="nav-link" routerLink="login">Login</a>
+      </li>
+    </ul>
+
+    <ul class="navbar-nav ml-auto" *ngIf="isLoggedIn">
+      <li class="nav-item">
+        <a href="/profile" class="nav-link" routerLink="profile">{{ username }}</a>
+      </li>
+      <li class="nav-item">
+        <a href class="nav-link" (click)="logout()">LogOut</a>
+      </li>
+    </ul>
+  </nav> -->
+
+  <div class="container">
+     <!-- <nav class="navbar navbar-expand-lg navbar-light bg-transparent border-bottom">
+    <a class="navbar-brand" href="#">Home</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="book">Book</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="note">Note</a>
+        </li>
+      </ul>
+    </div>
+  </nav> -->
+    <router-outlet></router-outlet>
+  </div>

src/app/app.component.ts

@@ -1,10 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { TokenStorageService } from './shared/token-storage.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'BookStoreApp';
-}
+  private roles: string[] = [];
+  isLoggedIn = false;
+  showAdminBoard = false;
+  showModeratorBoard = false;
+  username?: string;
+
+  constructor(private tokenStorageService: TokenStorageService) { }
+
+  ngOnInit(): void {
+    this.isLoggedIn = !!this.tokenStorageService.getToken();
+
+    if (this.isLoggedIn) {
+      const user = this.tokenStorageService.getUser();
+      this.roles = user.roles;
+
+      this.showAdminBoard = this.roles.includes('ROLE_ADMIN');
+      this.showModeratorBoard = this.roles.includes('ROLE_MODERATOR');
+
+      this.username = user.username;
+    }
+  }
+
+  logout(): void {
+    this.tokenStorageService.signOut();
+    window.location.reload();
+  }
+}

src/app/app.module.ts

@@ -1,4 +1,8 @@
-import { UserService } from './shared/user.service';
+import { ProfileComponent } from './user/profile/profile.component';
+import { BoardUserComponent } from './user/board-user/board-user.component';
+import { BoardAdminComponent } from './user/board-admin/board-admin.component';
+import { LoginComponent } from './auth/login/login.component';
+import { RegisterComponent } from './auth/register/register.component';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -8,29 +12,37 @@ import { ToastrModule } from 'ngx-toastr';
 import { AppComponent } from './app.component';
 import { BookComponent } from './book/book.component';
 import { BookFormComponent } from './book/book-form/book-form.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { UserComponent } from './user/user.component';
-import { RegistrationComponent } from './user/registration/registration.component';
+import { NoteComponent } from './note/note.component';
+import { NoteFormComponent } from './note/note-form/note-form.component';
+import { HomeComponent } from './home/home.component';
+import { FormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 
+import {authInterceptorProviders} from './auth/helpers/auth.interceptor';
+
 @NgModule({
   declarations: [
     AppComponent,
     BookComponent,
     BookFormComponent,
-    UserComponent,
-    RegistrationComponent
+    NoteComponent,
+    NoteFormComponent,
+    HomeComponent,
+    RegisterComponent,
+    LoginComponent,
+    BoardAdminComponent,
+    BoardUserComponent,
+    ProfileComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule,
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
-    AppRoutingModule,
-    ReactiveFormsModule
+    AppRoutingModule
   ],
-  providers: [UserService],
+  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/auth/helpers/auth.interceptor.ts

@@ -0,0 +1,26 @@
+import { HTTP_INTERCEPTORS, HttpEvent } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
+import { TokenStorageService } from '../../shared/token-storage.service';
+import { Observable } from 'rxjs';
+
+const TOKEN_HEADER_KEY = 'Authorization';       // for Spring Boot back-end
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  constructor(private token: TokenStorageService) { }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    let authReq = req;
+    const token = this.token.getToken();
+    if (token != null) {
+      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });
+    }
+    return next.handle(authReq);
+  }
+}
+
+export const authInterceptorProviders = [
+  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
+];

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

@@ -0,0 +1,75 @@
+<div class="col-md-12 mt-5">
+    <div class="card card-container">
+      <!-- <img
+        id="profile-img"
+        src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
+        class="profile-img-card"
+      /> -->
+      <form
+        *ngIf="!isLoggedIn"
+        name="form"
+        (ngSubmit)="f.form.valid && onSubmit()"
+        #f="ngForm"
+        novalidate
+      >
+        <div class="form-group">
+          <label for="username">Nazwa użytkownika</label>
+          <input
+            type="text"
+            class="form-control"
+            name="username"
+            [(ngModel)]="form.username"
+            required
+            #username="ngModel"
+          />
+          <div
+            class="alert alert-danger"
+            role="alert"
+            *ngIf="username.errors && f.submitted"
+          >
+            Username is required!
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="password">Hasło</label>
+          <input
+            type="password"
+            class="form-control"
+            name="password"
+            [(ngModel)]="form.password"
+            required
+            minlength="4"
+            #password="ngModel"
+          />
+          <div
+            class="alert alert-danger"
+            role="alert"
+            *ngIf="password.errors && f.submitted"
+          >
+            <div *ngIf="password.errors?.['required']">Hasło jest wymagane</div>
+            <div *ngIf="password.errors?.['minlength']">
+              Hasło musi mieć conajmniej 4 znaki
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <button class="btn btn-primary btn-block">
+            Zaloguj
+          </button>
+        </div>
+        <div class="form-group">
+          <div
+            class="alert alert-danger"
+            role="alert"
+            *ngIf="f.submitted && isLoginFailed"
+          >
+            Nieudane logowanie: {{ errorMessage }}
+          </div>
+        </div>
+      </form>
+
+      <div class="alert alert-success" *ngIf="isLoggedIn">
+        Zalogowano jako {{ roles }}.
+      </div>
+    </div>
+  </div>