CRUD personal books using firebase database and authentication services

Author: masteropen

README.md

@@ -5,19 +5,22 @@ A simple application that lists the books you have at home, in your library. You
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.5.
 
 ## Prerequisites
+To be able to run this application, you need these dependencies
 
-- nodejs
+- nodejs >=v10.13
 - npm package manager
 
-Then you should install `Angular CLI` if it's not already exists.
+Then install Angular CLI `npm install @angular/cli@9.1.5` (add `-g` option if you want install Angular CLI globally).
 
 ## Running application
 
-1. Clone this repository : `https://github.com/masteropen/angular-personal-books-manager.git`.
+1. Clone this repository : `git clone https://github.com/masteropen/angular-personal-books-manager.git`
 
-2. `cd angular-personal-books-manager` and run `ng serve` for a dev server.
+2. Install dependencies `npm install`
+ 
+3. Run Angular built-in dev server `ng serve`
 
-3. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+4. Navigate to `http://localhost:4200`. The app will automatically reload if you change any of the source files.
 
 ## Running unit tests
 

package-lock.json

@@ -20,7 +20,9 @@
     "@angular/platform-browser-dynamic": "~9.1.6",
     "@angular/router": "~9.1.6",
     "bootstrap": "^3.3.7",
+    "firebase": "^7.14.4",
     "rxjs": "~6.5.4",
+    "rxjs-compat": "^6.5.5",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },

package.json

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import * as firebase from 'firebase';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,17 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'my-books-manager';
+  constructor() {
+    const config = {
+      apiKey: "AIzaSyA5fQPALCwF-3AhsSLMgkSMBLquioD4eA0",
+      authDomain: "angular-personal-books.firebaseapp.com",
+      databaseURL: "https://angular-personal-books.firebaseio.com",
+      projectId: "angular-personal-books",
+      storageBucket: "angular-personal-books.appspot.com",
+      messagingSenderId: "48853693820",
+      appId: "1:48853693820:web:9b9a1d0c7615003114e0f9"
+    }
+
+    firebase.initializeApp(config);
+  }
 }

src/app/app.component.ts

@@ -11,16 +11,18 @@ import { HeaderComponent } from './header/header.component';
 import { AuthService } from './services/auth.service';
 import { AuthGuardService } from './services/auth-guard.service';
 import { BooksService } from './services/books.service';
-import {RouterModule, Routes} from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 const appRoutes: Routes = [
   { path: 'auth/signup', component: SignupComponent },
   { path: 'auth/signin', component: SigninComponent },
-  { path: 'books', component: BookListComponent },
-  { path: 'books/new', component: BookFormComponent },
-  { path: 'books/view/:id', component: SingleBookComponent }
+  { path: 'books', component: BookListComponent, canActivate: [AuthGuardService] },
+  { path: 'books/new', component: BookFormComponent, canActivate: [AuthGuardService] },
+  { path: 'books/view/:id', component: SingleBookComponent, canActivate: [AuthGuardService] },
+  { path: '', redirectTo: 'books', pathMatch: 'full' },
+  { path: '**', redirectTo: 'books' }
 ];
 
 @NgModule({
@@ -31,7 +33,7 @@ const appRoutes: Routes = [
     BookListComponent,
     SingleBookComponent,
     BookFormComponent,
-    HeaderComponent
+    HeaderComponent,
   ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -1 +1,25 @@
-<p>signin works!</p>
+<div class="row">
+  <div class="col-sm-8 col-sm-offset-2">
+    <h2>Connexion</h2>
+    <form [formGroup]="signinForm" (ngSubmit)="onSubmit()">
+      <div class="form-group">
+        <label for="email">Adresse mail</label>
+        <input type="text"
+               id="email"
+               class="form-control"
+               formControlName="email">
+      </div>
+      <div class="form-group">
+        <label for="password">Mot de passe</label>
+        <input type="password"
+               id="password"
+               class="form-control"
+               formControlName="password">
+      </div>
+      <button class="btn btn-primary"
+              type="submit"
+              [disabled]="signinForm.invalid">Se connecter</button>
+    </form>
+    <p class="text-danger">{{ errorMessage }}</p>
+  </div>
+</div>

src/app/auth/signin/signin.component.html

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import { AuthService } from "../../services/auth.service";
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-signin',
@@ -7,9 +10,35 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SigninComponent implements OnInit {
 
-  constructor() { }
+  errorMessage: string;
+  signinForm: FormGroup;
+
+  constructor(private formBuilder:FormBuilder,
+              private authService: AuthService,
+              private router: Router) { }
 
   ngOnInit(): void {
+    this.initForm();
+  }
+
+  initForm() {
+    this.signinForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', Validators.required],
+    });
   }
 
+  onSubmit() {
+    const email = this.signinForm.value['email'];
+    const password = this.signinForm.value['password'];
+
+    this.authService.signInUser(email, password).then(
+      () => {
+        this.router.navigate(['/books'])
+      },
+      (error) => {
+        this.errorMessage = error;
+      }
+    );
+  }
 }

src/app/auth/signin/signin.component.ts

@@ -1 +1,25 @@
-<p>signup works!</p>
+<div class="row">
+  <div class="col-sm-8 col-sm-offset-2">
+    <h2>Créer un compte</h2>
+    <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
+      <div class="form-group">
+        <label for="email">Adresse mail</label>
+        <input type="text"
+               id="email"
+               class="form-control"
+               formControlName="email">
+      </div>
+      <div class="form-group">
+        <label for="password">Mot de passe</label>
+        <input type="password"
+               id="password"
+               class="form-control"
+               formControlName="password">
+      </div>
+      <button class="btn btn-primary"
+              type="submit"
+              [disabled]="signupForm.invalid">Créer mon compte</button>
+    </form>
+    <p class="text-danger">{{ errorMessage }}</p>
+  </div>
+</div>

src/app/auth/signup/signup.component.html

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService } from '../../services/auth.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-signup',
@@ -7,9 +10,35 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SignupComponent implements OnInit {
 
-  constructor() { }
+  signupForm: FormGroup;
+  errorMessage: string;
 
-  ngOnInit(): void {
+  constructor(private formBuilder: FormBuilder,
+              private authService: AuthService,
+              private router: Router) { }
+
+  ngOnInit() {
+    this.initForm();
+  }
+
+  initForm() {
+    this.signupForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.pattern(/[0-9a-zA-Z]{6,}/)]] // accept at least 6 alpha-numeric character
+    });
   }
 
+  onSubmit() {
+    const email = this.signupForm.get('email').value;
+    const password = this.signupForm.get('password').value;
+
+    this.authService.createNewUser(email, password).then(
+      () => {
+        this.router.navigate(['/books']);
+      },
+      (error) => {
+        this.errorMessage = error;
+      }
+    );
+  }
 }

src/app/auth/signup/signup.component.ts

@@ -1 +1,27 @@
-<p>book-form works!</p>
+<div class="row">
+  <div class="col-sm-8 col-sm-offset-2">
+    <h2>Enregistrer un nouveau livre</h2>
+    <form [formGroup]="bookForm" (ngSubmit)="onSaveBook()">
+      <div class="form-group">
+        <label for="title">Titre</label>
+        <input type="text" id="title"
+               class="form-control" formControlName="title">
+      </div>
+      <div class="form-group">
+        <label for="author">Auteur</label>
+        <input type="text" id="author"
+               class="form-control" formControlName="author">
+      </div>
+      <div class="form-group">
+        <label for="synopsis">Synopsis</label>
+        <textarea id="synopsis"
+                  class="form-control" formControlName="synopsis">
+        </textarea>
+      </div>
+      <button class="btn btn-success" [disabled]="bookForm.invalid"
+              type="submit">Enregistrer
+      </button>
+
+    </form>
+  </div>
+</div>