├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── e2e
    ├── protractor.conf.js
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app-routing.module.ts
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── components
    │   │   ├── admin
    │   │   │   └── list-books
    │   │   │   │   ├── list-books.component.css
    │   │   │   │   ├── list-books.component.html
    │   │   │   │   ├── list-books.component.spec.ts
    │   │   │   │   └── list-books.component.ts
    │   │   ├── details-book
    │   │   │   ├── details-book.component.css
    │   │   │   ├── details-book.component.html
    │   │   │   ├── details-book.component.spec.ts
    │   │   │   └── details-book.component.ts
    │   │   ├── hero
    │   │   │   ├── hero.component.css
    │   │   │   ├── hero.component.html
    │   │   │   ├── hero.component.spec.ts
    │   │   │   └── hero.component.ts
    │   │   ├── home
    │   │   │   ├── home.component.css
    │   │   │   ├── home.component.html
    │   │   │   ├── home.component.spec.ts
    │   │   │   └── home.component.ts
    │   │   ├── modal
    │   │   │   ├── modal.component.css
    │   │   │   ├── modal.component.html
    │   │   │   ├── modal.component.spec.ts
    │   │   │   └── modal.component.ts
    │   │   ├── navbar
    │   │   │   ├── navbar.component.css
    │   │   │   ├── navbar.component.html
    │   │   │   ├── navbar.component.spec.ts
    │   │   │   └── navbar.component.ts
    │   │   ├── offers
    │   │   │   ├── offers.component.css
    │   │   │   ├── offers.component.html
    │   │   │   ├── offers.component.spec.ts
    │   │   │   └── offers.component.ts
    │   │   ├── page404
    │   │   │   ├── page404.component.css
    │   │   │   ├── page404.component.html
    │   │   │   ├── page404.component.spec.ts
    │   │   │   └── page404.component.ts
    │   │   └── users
    │   │   │   ├── login
    │   │   │       ├── login.component.css
    │   │   │       ├── login.component.html
    │   │   │       ├── login.component.spec.ts
    │   │   │       └── login.component.ts
    │   │   │   ├── profile
    │   │   │       ├── profile.component.css
    │   │   │       ├── profile.component.html
    │   │   │       ├── profile.component.spec.ts
    │   │   │       └── profile.component.ts
    │   │   │   └── register
    │   │   │       ├── register.component.css
    │   │   │       ├── register.component.html
    │   │   │       ├── register.component.spec.ts
    │   │   │       └── register.component.ts
    │   ├── guards
    │   │   ├── auth.guard.spec.ts
    │   │   └── auth.guard.ts
    │   ├── models
    │   │   ├── book.ts
    │   │   └── user.ts
    │   └── services
    │   │   ├── auth.service.spec.ts
    │   │   ├── auth.service.ts
    │   │   ├── data-api.service.spec.ts
    │   │   └── data-api.service.ts
    ├── assets
    │   └── .gitkeep
    ├── browserslist
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── karma.conf.js
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    ├── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    └── tslint.json
├── tsconfig.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | yarn-error.log
34 | testem.log
35 | /typings
36 | 
37 | # System Files
38 | .DS_Store
39 | Thumbs.db
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # BookStore
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.3.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "bookStore": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "dist/bookStore",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "src/tsconfig.app.json",
 21 |             "assets": [
 22 |               "src/favicon.ico",
 23 |               "src/assets"
 24 |             ],
 25 |             "styles": [
 26 |               "./node_modules/bootstrap/dist/css/bootstrap.css",
 27 |               "./node_modules/font-awesome/css/font-awesome.css",
 28 |               "src/styles.css"
 29 |             ],
 30 |             "scripts": [
 31 |               "./node_modules/jquery/dist/jquery.min.js",
 32 |               "./node_modules/popper.js/dist/umd/popper.js",
 33 |               "./node_modules/bootstrap/dist/js/bootstrap.js"
 34 |             ]
 35 |           },
 36 |           "configurations": {
 37 |             "production": {
 38 |               "fileReplacements": [
 39 |                 {
 40 |                   "replace": "src/environments/environment.ts",
 41 |                   "with": "src/environments/environment.prod.ts"
 42 |                 }
 43 |               ],
 44 |               "optimization": true,
 45 |               "outputHashing": "all",
 46 |               "sourceMap": false,
 47 |               "extractCss": true,
 48 |               "namedChunks": false,
 49 |               "aot": true,
 50 |               "extractLicenses": true,
 51 |               "vendorChunk": false,
 52 |               "buildOptimizer": true,
 53 |               "budgets": [
 54 |                 {
 55 |                   "type": "initial",
 56 |                   "maximumWarning": "2mb",
 57 |                   "maximumError": "5mb"
 58 |                 }
 59 |               ]
 60 |             }
 61 |           }
 62 |         },
 63 |         "serve": {
 64 |           "builder": "@angular-devkit/build-angular:dev-server",
 65 |           "options": {
 66 |             "browserTarget": "bookStore:build"
 67 |           },
 68 |           "configurations": {
 69 |             "production": {
 70 |               "browserTarget": "bookStore:build:production"
 71 |             }
 72 |           }
 73 |         },
 74 |         "extract-i18n": {
 75 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 76 |           "options": {
 77 |             "browserTarget": "bookStore:build"
 78 |           }
 79 |         },
 80 |         "test": {
 81 |           "builder": "@angular-devkit/build-angular:karma",
 82 |           "options": {
 83 |             "main": "src/test.ts",
 84 |             "polyfills": "src/polyfills.ts",
 85 |             "tsConfig": "src/tsconfig.spec.json",
 86 |             "karmaConfig": "src/karma.conf.js",
 87 |             "styles": [
 88 |               "src/styles.css"
 89 |             ],
 90 |             "scripts": [],
 91 |             "assets": [
 92 |               "src/favicon.ico",
 93 |               "src/assets"
 94 |             ]
 95 |           }
 96 |         },
 97 |         "lint": {
 98 |           "builder": "@angular-devkit/build-angular:tslint",
 99 |           "options": {
100 |             "tsConfig": [
101 |               "src/tsconfig.app.json",
102 |               "src/tsconfig.spec.json"
103 |             ],
104 |             "exclude": [
105 |               "**/node_modules/**"
106 |             ]
107 |           }
108 |         }
109 |       }
110 |     },
111 |     "bookStore-e2e": {
112 |       "root": "e2e/",
113 |       "projectType": "application",
114 |       "prefix": "",
115 |       "architect": {
116 |         "e2e": {
117 |           "builder": "@angular-devkit/build-angular:protractor",
118 |           "options": {
119 |             "protractorConfig": "e2e/protractor.conf.js",
120 |             "devServerTarget": "bookStore:serve"
121 |           },
122 |           "configurations": {
123 |             "production": {
124 |               "devServerTarget": "bookStore:serve:production"
125 |             }
126 |           }
127 |         },
128 |         "lint": {
129 |           "builder": "@angular-devkit/build-angular:tslint",
130 |           "options": {
131 |             "tsConfig": "e2e/tsconfig.e2e.json",
132 |             "exclude": [
133 |               "**/node_modules/**"
134 |             ]
135 |           }
136 |         }
137 |       }
138 |     }
139 |   },
140 |   "defaultProject": "bookStore"
141 | }


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to bookStore!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "book-store",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~7.0.0",
15 |     "@angular/common": "~7.0.0",
16 |     "@angular/compiler": "~7.0.0",
17 |     "@angular/core": "~7.0.0",
18 |     "@angular/fire": "^5.1.0",
19 |     "@angular/forms": "~7.0.0",
20 |     "@angular/http": "~7.0.0",
21 |     "@angular/platform-browser": "~7.0.0",
22 |     "@angular/platform-browser-dynamic": "~7.0.0",
23 |     "@angular/router": "~7.0.0",
24 |     "bootstrap": "^4.1.3",
25 |     "core-js": "^2.5.4",
26 |     "firebase": "^5.5.8",
27 |     "font-awesome": "^4.7.0",
28 |     "jquery": "^3.3.1",
29 |     "ngx-spinner": "^6.1.2",
30 |     "popper.js": "^1.14.4",
31 |     "rxjs": "~6.3.3",
32 |     "zone.js": "~0.8.26"
33 |   },
34 |   "devDependencies": {
35 |     "@angular-devkit/build-angular": "~0.10.0",
36 |     "@angular/cli": "~7.0.3",
37 |     "@angular/compiler-cli": "~7.0.0",
38 |     "@angular/language-service": "~7.0.0",
39 |     "@types/node": "~8.9.4",
40 |     "@types/jasmine": "~2.8.8",
41 |     "@types/jasminewd2": "~2.0.3",
42 |     "codelyzer": "~4.5.0",
43 |     "jasmine-core": "~2.99.1",
44 |     "jasmine-spec-reporter": "~4.2.1",
45 |     "karma": "~3.0.0",
46 |     "karma-chrome-launcher": "~2.2.0",
47 |     "karma-coverage-istanbul-reporter": "~2.0.1",
48 |     "karma-jasmine": "~1.1.2",
49 |     "karma-jasmine-html-reporter": "^0.2.2",
50 |     "protractor": "~5.4.0",
51 |     "ts-node": "~7.0.0",
52 |     "tslint": "~5.11.0",
53 |     "typescript": "~3.1.1"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule, CanActivate } from '@angular/router';
 3 | import { HomeComponent } from './components/home/home.component';
 4 | import { OffersComponent } from 'src/app/components/offers/offers.component';
 5 | import { DetailsBookComponent } from './components/details-book/details-book.component';
 6 | import { ListBooksComponent } from './components/admin/list-books/list-books.component';
 7 | import { LoginComponent } from 'src/app/components/users/login/login.component';
 8 | import { RegisterComponent } from 'src/app/components/users/register/register.component';
 9 | import { ProfileComponent } from 'src/app/components/users/profile/profile.component';
10 | import { Page404Component } from './components/page404/page404.component';
11 | import { AuthGuard } from './guards/auth.guard';
12 | 
13 | 
14 | const routes: Routes = [
15 |   { path: '', component: HomeComponent },
16 |   { path: 'offers', component: OffersComponent, canActivate: [AuthGuard] },
17 |   { path: 'book/:id', component: DetailsBookComponent },
18 |   { path: 'admin/list-books', component: ListBooksComponent, canActivate: [AuthGuard] },
19 |   { path: 'user/login', component: LoginComponent },
20 |   { path: 'user/register', component: RegisterComponent },
21 |   { path: 'user/profile', component: ProfileComponent, canActivate: [AuthGuard] },
22 |   { path: '**', component: Page404Component }
23 | 
24 | ];
25 | 
26 | @NgModule({
27 |   imports: [RouterModule.forRoot(routes)],
28 |   exports: [RouterModule]
29 | })
30 | export class AppRoutingModule { }
31 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/app.component.css


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <app-navbar></app-navbar>
2 | <div class="container">
3 |   <router-outlet></router-outlet>
4 | </div>


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.debugElement.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'bookStore'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.debugElement.componentInstance;
26 |     expect(app.title).toEqual('bookStore');
27 |   });
28 | 
29 |   it('should render title in a h1 tag', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.debugElement.nativeElement;
33 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to bookStore!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'bookStore';
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppRoutingModule } from './app-routing.module';
 5 | import { AppComponent } from './app.component';
 6 | import { ListBooksComponent } from './components/admin/list-books/list-books.component';
 7 | import { DetailsBookComponent } from './components/details-book/details-book.component';
 8 | import { HeroComponent } from './components/hero/hero.component';
 9 | import { HomeComponent } from './components/home/home.component';
10 | import { ModalComponent } from './components/modal/modal.component';
11 | import { NavbarComponent } from './components/navbar/navbar.component';
12 | import { OffersComponent } from './components/offers/offers.component';
13 | import { LoginComponent } from './components/users/login/login.component';
14 | import { ProfileComponent } from './components/users/profile/profile.component';
15 | import { RegisterComponent } from './components/users/register/register.component';
16 | import { Page404Component } from './components/page404/page404.component';
17 | import { FormsModule } from '@angular/forms';
18 | import { environment } from '../environments/environment';
19 | 
20 | import { AngularFireModule } from '@angular/fire';
21 | import { AngularFireDatabaseModule } from '@angular/fire/database';
22 | import { AngularFireAuth } from '@angular/fire/auth';
23 | import { AngularFireStorageModule } from '@angular/fire/storage';
24 | import { AngularFirestore } from '@angular/fire/firestore';
25 | 
26 | 
27 | @NgModule({
28 |   declarations: [
29 |     AppComponent,
30 |     ListBooksComponent,
31 |     DetailsBookComponent,
32 |     HeroComponent,
33 |     HomeComponent,
34 |     ModalComponent,
35 |     NavbarComponent,
36 |     OffersComponent,
37 |     LoginComponent,
38 |     ProfileComponent,
39 |     RegisterComponent,
40 |     Page404Component
41 |   ],
42 |   imports: [
43 |     BrowserModule,
44 |     AppRoutingModule,
45 |     FormsModule,
46 |     AngularFireModule.initializeApp(environment.firebaseConfig),
47 |     AngularFireDatabaseModule,
48 |     AngularFireStorageModule,
49 |   ],
50 |   providers: [AngularFireAuth, AngularFirestore],
51 |   bootstrap: [AppComponent]
52 | })
53 | export class AppModule { }
54 | 


--------------------------------------------------------------------------------
/src/app/components/admin/list-books/list-books.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/components/admin/list-books/list-books.component.css


--------------------------------------------------------------------------------
/src/app/components/admin/list-books/list-books.component.html:
--------------------------------------------------------------------------------
 1 | <section class="row mt-5">
 2 |   <div class="col">
 3 |     <button class="btn btn-primary float-right mb-3" data-toggle="modal" data-target="#modalBook">New Book</button>
 4 |     <table class="table table-hover">
 5 |       <thead>
 6 |         <tr>
 7 |           <th scope="col">#</th>
 8 |           <th scope="col">Titulo</th>
 9 |           <th scope="col">Autor</th>
10 |           <th scope="col">Idioma</th>
11 |           <th scope="col">Precio</th>
12 |           <th scope="col">Oferta</th>
13 |           <th scope="col">&nbsp;</th>
14 |           <th scope="col">&nbsp;</th>
15 |         </tr>
16 |       </thead>
17 |       <tbody>
18 |         <tr *ngFor="let book of books; index as i">
19 |           <th scope="row">{{i+1}}</th>
20 |           <td>{{book.titulo}}</td>
21 |           <td>{{book.autor}}</td>
22 |           <td>{{book.idioma}}</td>
23 |           <td>{{book.precio}}</td>
24 |           <td>{{book.oferta == 1 ? 'Sí': 'No'}}</td>
25 |           <td *ngIf="book.userUid == userUid || isAdmin == true; else noOwner">
26 |             <button class="btn btn-primary" data-toggle="modal" data-target="#modalBook" (click)="onPreUpdateBook(book)">Update</button>
27 |           </td>
28 |           <ng-template #noOwner>
29 |             <td>
30 |               <button class="btn btn-secondary" disabled="true">Update</button>
31 |             </td>
32 |           </ng-template>
33 |           <td *ngIf="isAdmin == true; else noAdmin">
34 |             <button class="btn btn-danger" (click)="onDeleteBook(book.id)">Delete</button>
35 |           </td>
36 |           <ng-template #noAdmin>
37 |             <td>
38 |               <button class="btn btn-danger" disabled="true">Delete</button>
39 |             </td>
40 |           </ng-template>
41 |         </tr>
42 |       </tbody>
43 |     </table>
44 |   </div>
45 | </section>
46 | <app-modal [userUid]="userUid"></app-modal>


--------------------------------------------------------------------------------
/src/app/components/admin/list-books/list-books.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ListBooksComponent } from './list-books.component';
 4 | 
 5 | describe('ListBooksComponent', () => {
 6 |   let component: ListBooksComponent;
 7 |   let fixture: ComponentFixture<ListBooksComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ ListBooksComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ListBooksComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/admin/list-books/list-books.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { DataApiService } from '../../../services/data-api.service';
 3 | import { BookInterface } from '../../../models/book';
 4 | import { NgForm } from '@angular/forms';
 5 | import { AuthService } from '../../../services/auth.service';
 6 | import { AngularFireAuth } from '@angular/fire/auth';
 7 | import { UserInterface } from '../../../models/user';
 8 | 
 9 | @Component({
10 |   selector: 'app-list-books',
11 |   templateUrl: './list-books.component.html',
12 |   styleUrls: ['./list-books.component.css']
13 | })
14 | export class ListBooksComponent implements OnInit {
15 | 
16 |   constructor(private dataApi: DataApiService, private authService: AuthService) { }
17 |   private books: BookInterface[];
18 |   public isAdmin: any = null;
19 |   public userUid: string = null;
20 | 
21 |   ngOnInit() {
22 |     this.getListBooks();
23 |     this.getCurrentUser();
24 |   }
25 | 
26 |   getCurrentUser() {
27 |     this.authService.isAuth().subscribe(auth => {
28 |       if (auth) {
29 |         this.userUid = auth.uid;
30 |         this.authService.isUserAdmin(this.userUid).subscribe(userRole => {
31 |           this.isAdmin = Object.assign({}, userRole.roles).hasOwnProperty('admin');
32 |           // this.isAdmin = true;
33 |         })
34 |       }
35 |     })
36 |   }
37 |   getListBooks() {
38 |     this.dataApi.getAllBooks()
39 |       .subscribe(books => {
40 |         this.books = books;
41 |       });
42 |   }
43 | 
44 |   onDeleteBook(idBook: string): void {
45 |     const confirmacion = confirm('Are you sure?');
46 |     if (confirmacion) {
47 |       this.dataApi.deleteBook(idBook);
48 |     }
49 |   }
50 | 
51 |   onPreUpdateBook(book: BookInterface) {
52 |     console.log('BOOK', book);
53 |     this.dataApi.selectedBook = Object.assign({}, book);
54 |   }
55 | 
56 | }
57 | 


--------------------------------------------------------------------------------
/src/app/components/details-book/details-book.component.css:
--------------------------------------------------------------------------------
1 | p.card-text{
2 |   text-align: justify;
3 | }


--------------------------------------------------------------------------------
/src/app/components/details-book/details-book.component.html:
--------------------------------------------------------------------------------
 1 | <section id="book" class="mt-5">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-xs-12 col-sm-6 col-md-4 mx-auto">
 5 |         <div class="card_book">
 6 |           <div class="card">
 7 |             <div class="card-body text-center">
 8 |               <p>
 9 |                 <img class="img-fluid" src="{{book.portada}}" alt="{{book.titulo}}">
10 |               </p>
11 |               <h4 class="card-title">{{book.titulo}}</h4>
12 |               <p class="card-text">
13 |                 {{book.descripcion}}
14 |               </p>
15 |               <a href="{{book.link_amazon}}" target="_blank" class="btn btn-block btn-primary">Buy</a>
16 |             </div>
17 |           </div>
18 |         </div>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </section>


--------------------------------------------------------------------------------
/src/app/components/details-book/details-book.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { DetailsBookComponent } from './details-book.component';
 4 | 
 5 | describe('DetailsBookComponent', () => {
 6 |   let component: DetailsBookComponent;
 7 |   let fixture: ComponentFixture<DetailsBookComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ DetailsBookComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(DetailsBookComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/details-book/details-book.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { DataApiService } from '../../services/data-api.service';
 3 | import { BookInterface } from '../../models/book';
 4 | import { ActivatedRoute, Params } from '@angular/router';
 5 | 
 6 | @Component({
 7 |   selector: 'app-details-book',
 8 |   templateUrl: './details-book.component.html',
 9 |   styleUrls: ['./details-book.component.css']
10 | })
11 | export class DetailsBookComponent implements OnInit {
12 | 
13 |   constructor(private dataApi: DataApiService, private route: ActivatedRoute) { }
14 |   public book: BookInterface = {};
15 | 
16 |   ngOnInit() {
17 |     const idBook = this.route.snapshot.params['id'];
18 |     this.getDetails(idBook);
19 |   }
20 | 
21 |   getDetails(idBook: string): void {
22 |     this.dataApi.getOneBook(idBook).subscribe(book => {
23 |       this.book = book;
24 |     });
25 |   }
26 | 
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/components/hero/hero.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/components/hero/hero.component.css


--------------------------------------------------------------------------------
/src/app/components/hero/hero.component.html:
--------------------------------------------------------------------------------
 1 | <!-- Main jumbotron for a primary marketing message or call to action -->
 2 | <div class="jumbotron">
 3 |   <div class="container">
 4 |     <h1 class="display-3">Hello, world!</h1>
 5 |     <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and
 6 |       three supporting pieces of content. Use it as a starting point to create something more unique.</p>
 7 |     <p>
 8 |       <a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
 9 |     </p>
10 |   </div>
11 | </div>


--------------------------------------------------------------------------------
/src/app/components/hero/hero.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HeroComponent } from './hero.component';
 4 | 
 5 | describe('HeroComponent', () => {
 6 |   let component: HeroComponent;
 7 |   let fixture: ComponentFixture<HeroComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ HeroComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HeroComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/hero/hero.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-hero',
 5 |   templateUrl: './hero.component.html',
 6 |   styleUrls: ['./hero.component.css']
 7 | })
 8 | export class HeroComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/components/home/home.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/components/home/home.component.css


--------------------------------------------------------------------------------
/src/app/components/home/home.component.html:
--------------------------------------------------------------------------------
 1 | <section id="books" class="mt-5">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-xs-12 col-sm-6 col-md-4" *ngFor="let book of books">
 5 |         <div class="card_book">
 6 |           <div class="card">
 7 |             <div class="card-body text-center">
 8 |               <p>
 9 |                 <img class="img-fluid" src="{{book.portada}}" alt="{{book.titulo}}">
10 |               </p>
11 |               <h4 routerLink="/book/{{book.id}}" class="card-title">{{book.titulo}}</h4>
12 |               <p class="card-text">
13 |                 {{book.descripcion }}
14 |               </p>
15 |               <div class="container-precio-idioma">
16 |                 <p class="badge badge-info">
17 |                   {{book.precio}}€
18 |                 </p>
19 |                 <p class="badge badge-info">
20 |                   {{book.idioma}}
21 |                 </p>
22 |               </div>
23 |               <a href="{{book.link_amazon}}" class="btn btn-block btn-primary" target="_blank">Buy</a>
24 |             </div>
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </div>
30 | </section>


--------------------------------------------------------------------------------
/src/app/components/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HomeComponent } from './home.component';
 4 | 
 5 | describe('HomeComponent', () => {
 6 |   let component: HomeComponent;
 7 |   let fixture: ComponentFixture<HomeComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ HomeComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HomeComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { DataApiService } from '../../services/data-api.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-home',
 6 |   templateUrl: './home.component.html',
 7 |   styleUrls: ['./home.component.css']
 8 | })
 9 | export class HomeComponent implements OnInit {
10 | 
11 |   constructor(private dataApi: DataApiService) { }
12 |   public books = [];
13 |   public book = '';
14 | 
15 |   ngOnInit() {
16 |     this.dataApi.getAllBooks().subscribe(books => {
17 |       console.log('BOOKS', books);
18 |       this.books = books;
19 |     })
20 |   }
21 | 
22 | 
23 | 
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app/components/modal/modal.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/components/modal/modal.component.css


--------------------------------------------------------------------------------
/src/app/components/modal/modal.component.html:
--------------------------------------------------------------------------------
 1 | <div class="modal fade" id="modalBook" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 2 |   <div class="modal-dialog" role="document">
 3 |     <div class="modal-content">
 4 |       <div class="modal-header">
 5 |         <h5 class="modal-title" id="exampleModalLabel">
 6 |           {{ !this.dataApi.selectedBook.id ? 'New Book' : 'Update Book'}}
 7 |         </h5>
 8 |         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 9 |           <span aria-hidden="true">&times;</span>
10 |         </button>
11 |       </div>
12 |       <div class="modal-body">
13 |         <form name="formBook" #formBook="ngForm" (ngSubmit)="onSaveBook(formBook)">
14 |           <input type="hidden" name="id" [(ngModel)]="this.dataApi.selectedBook.id">
15 |           <input type="hidden" name="userUid" [value]="userUid">
16 |           <div class="form-group">
17 |             <label for="titulo" class="col-form-label">Titulo:</label>
18 |             <input type="text" class="form-control" name="titulo" [(ngModel)]="this.dataApi.selectedBook.titulo">
19 |           </div>
20 |           <div class="form-row">
21 |             <div class="form-group col-md-6">
22 |               <label for="idioma">Idioma</label>
23 |               <select name="idioma" class="form-control" [(ngModel)]="this.dataApi.selectedBook.idioma">
24 |                 <option value="Inglés">Inglés</option>
25 |                 <option value="Castellano">Castellano</option>
26 |               </select>
27 |             </div>
28 |             <div class="form-group col-md-6">
29 |               <label for="precio">Precio</label>
30 |               <input type="text" name="precio" class="form-control" placeholder="0,00€" [(ngModel)]="this.dataApi.selectedBook.precio">
31 |             </div>
32 |           </div>
33 |           <div class="form-row">
34 |             <div class="form-group col-md-6">
35 |               <label for="autor">Autor</label>
36 |               <input type="text" name="autor" class="form-control" placeholder="Autor" [(ngModel)]="this.dataApi.selectedBook.autor">
37 |             </div>
38 |             <div class="form-group col-md-6">
39 |               <label for="oferta">Oferta</label>
40 |               <select name="oferta" class="form-control" [(ngModel)]="this.dataApi.selectedBook.oferta">
41 |                 <option value="1">Sí</option>
42 |                 <option value="0">No</option>
43 |               </select>
44 |             </div>
45 |           </div>
46 |           <div class="form-row">
47 |             <div class="form-group col-md-6">
48 |               <label for="portada">Portada</label>
49 |               <input type="text" name="portada" class="form-control" placeholder="Portada" [(ngModel)]="this.dataApi.selectedBook.portada">
50 |             </div>
51 |             <div class="form-group col-md-6">
52 |               <label for="link_amazon">Link Amazon</label>
53 |               <input type="text" name="link_amazon" class="form-control" placeholder="Link amazon" [(ngModel)]="this.dataApi.selectedBook.link_amazon">
54 |             </div>
55 |           </div>
56 |           <div class="form-group">
57 |             <label for="descripcion" class="col-form-label">Descripcion:</label>
58 |             <textarea class="form-control" name="descripcion" [(ngModel)]="this.dataApi.selectedBook.descripcion"></textarea>
59 |           </div>
60 |           <div class="modal-footer">
61 |             <button type="button" class="btn btn-secondary" #btnClose data-dismiss="modal">Close</button>
62 |             <button type="submit" class="btn btn-primary">Save Book</button>
63 |           </div>
64 |         </form>
65 |       </div>
66 | 
67 |     </div>
68 |   </div>
69 | </div>


--------------------------------------------------------------------------------
/src/app/components/modal/modal.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ModalComponent } from './modal.component';
 4 | 
 5 | describe('ModalComponent', () => {
 6 |   let component: ModalComponent;
 7 |   let fixture: ComponentFixture<ModalComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ ModalComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ModalComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/modal/modal.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
 2 | import { DataApiService } from '../../services/data-api.service';
 3 | import { BookInterface } from '../../models/book';
 4 | import { NgForm } from '@angular/forms';
 5 | 
 6 | @Component({
 7 |   selector: 'app-modal',
 8 |   templateUrl: './modal.component.html',
 9 |   styleUrls: ['./modal.component.css']
10 | })
11 | export class ModalComponent implements OnInit {
12 | 
13 |   constructor(private dataApi: DataApiService) { }
14 |   @ViewChild('btnClose') btnClose: ElementRef;
15 |   @Input() userUid: string;
16 |   ngOnInit() {
17 |   }
18 | 
19 |   onSaveBook(bookForm: NgForm): void {
20 |     if (bookForm.value.id == null) {
21 |       // New 
22 |       bookForm.value.userUid = this.userUid;
23 |       this.dataApi.addBook(bookForm.value);
24 |     } else {
25 |       // Update
26 |       this.dataApi.updateBook(bookForm.value);
27 |     }
28 |     bookForm.resetForm();
29 |     this.btnClose.nativeElement.click();
30 |   }
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/navbar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/components/navbar/navbar.component.css


--------------------------------------------------------------------------------
/src/app/components/navbar/navbar.component.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
 2 |   <a class="navbar-brand" routerLink="/">{{app_name}}</a>
 3 |   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar"
 4 |     aria-expanded="false" aria-label="Toggle navigation">
 5 |     <span class="navbar-toggler-icon"></span>
 6 |   </button>
 7 | 
 8 |   <div class="collapse navbar-collapse" id="mainNavbar">
 9 |     <ul class="navbar-nav mr-auto">
10 |       <li class="nav-item" *ngIf="isLogged">
11 |         <a class="nav-link" routerLink="/offers">Offers
12 |         </a>
13 |       </li>
14 |     </ul>
15 |     <ul class="navbar-nav ml-auto">
16 |       <li class="nav-item" *ngIf="!isLogged">
17 |         <a class="nav-link" routerLink="/user/register">Register
18 |         </a>
19 |       </li>
20 |       <li class="nav-item" *ngIf="isLogged">
21 |         <a class="nav-link" routerLink="/user/profile">Profile</a>
22 |       </li>
23 |       <li class="nav-item" *ngIf="isLogged">
24 |         <a class="nav-link" routerLink="/admin/list-books">List Books</a>
25 |       </li>
26 |       <li class="nav-item" *ngIf="!isLogged">
27 |         <a class="nav-link" routerLink="/user/login">Login
28 |         </a>
29 |       </li>
30 |       <li class="nav-item" *ngIf="isLogged">
31 |         <a href="#" class="nav-link" (click)="onLogout()">Logout
32 |         </a>
33 |       </li>
34 |     </ul>
35 |   </div>
36 | </nav>


--------------------------------------------------------------------------------
/src/app/components/navbar/navbar.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { NavbarComponent } from './navbar.component';
 4 | 
 5 | describe('NavbarComponent', () => {
 6 |   let component: NavbarComponent;
 7 |   let fixture: ComponentFixture<NavbarComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ NavbarComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(NavbarComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { AuthService } from '../../services/auth.service';
 3 | import { AngularFireAuth } from '@angular/fire/auth';
 4 | 
 5 | @Component({
 6 |   selector: 'app-navbar',
 7 |   templateUrl: './navbar.component.html',
 8 |   styleUrls: ['./navbar.component.css']
 9 | })
10 | export class NavbarComponent implements OnInit {
11 | 
12 |   constructor(private authService: AuthService, private afsAuth: AngularFireAuth) { }
13 |   public app_name: string = 'BookStore';
14 |   public isLogged: boolean = false;
15 |   ngOnInit() {
16 |     this.getCurrentUser();
17 |   }
18 | 
19 |   getCurrentUser() {
20 |     this.authService.isAuth().subscribe(auth => {
21 |       if (auth) {
22 |         console.log('user logged');
23 |         this.isLogged = true;
24 |       } else {
25 |         console.log('NOT user logged');
26 |         this.isLogged = false;
27 |       }
28 |     });
29 |   }
30 | 
31 |   onLogout() {
32 |     this.afsAuth.auth.signOut();
33 |   }
34 | 
35 | 
36 | }
37 | 


--------------------------------------------------------------------------------
/src/app/components/offers/offers.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/components/offers/offers.component.css


--------------------------------------------------------------------------------
/src/app/components/offers/offers.component.html:
--------------------------------------------------------------------------------
 1 | <section id="books" class="mt-5">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-xs-12 col-sm-6 col-md-4" *ngFor="let book of books">
 5 |         <div class="card_book">
 6 |           <div class="card">
 7 |             <div class="card-body text-center">
 8 |               <p>
 9 |                 <img class="img-fluid" src="{{book.portada}}" alt="{{book.titulo}}">
10 |               </p>
11 |               <h4 routerLink="/book/{{book.id}}" class="card-title">{{book.titulo}}</h4>
12 |               <p class="card-text">
13 |                 {{book.descripcion}}
14 |               </p>
15 |               <div class="container-precio-idioma">
16 |                 <p class="badge badge-info">
17 |                   {{book.precio}}€
18 |                 </p>
19 |                 <p class="badge badge-info">
20 |                   {{book.idioma}}
21 |                 </p>
22 |               </div>
23 |               <a href="{{book.link_amazon}}" class="btn btn-block btn-primary" target="_blank">Buy</a>
24 |             </div>
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </div>
30 | </section>


--------------------------------------------------------------------------------
/src/app/components/offers/offers.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { OffersComponent } from './offers.component';
 4 | 
 5 | describe('OffersComponent', () => {
 6 |   let component: OffersComponent;
 7 |   let fixture: ComponentFixture<OffersComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ OffersComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(OffersComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/offers/offers.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { DataApiService } from '../../services/data-api.service';
 3 | import { BookInterface } from 'src/app/models/book';
 4 | 
 5 | @Component({
 6 |   selector: 'app-offers',
 7 |   templateUrl: './offers.component.html',
 8 |   styleUrls: ['./offers.component.css']
 9 | })
10 | export class OffersComponent implements OnInit {
11 | 
12 |   constructor(private dataApi: DataApiService) { }
13 |   private books: BookInterface[];
14 |   ngOnInit() {
15 |     this.getOffers();
16 |     console.log('OFERTAS', this.books);
17 |   }
18 | 
19 | 
20 |   getOffers() {
21 |     this.dataApi.getAllBooksOffers().subscribe(offers => this.books = offers);
22 |   }
23 | 
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app/components/page404/page404.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/app/components/page404/page404.component.css


--------------------------------------------------------------------------------
/src/app/components/page404/page404.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   page404 works!
3 | </p>
4 | 


--------------------------------------------------------------------------------
/src/app/components/page404/page404.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { Page404Component } from './page404.component';
 4 | 
 5 | describe('Page404Component', () => {
 6 |   let component: Page404Component;
 7 |   let fixture: ComponentFixture<Page404Component>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ Page404Component ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(Page404Component);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/page404/page404.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-page404',
 5 |   templateUrl: './page404.component.html',
 6 |   styleUrls: ['./page404.component.css']
 7 | })
 8 | export class Page404Component implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/components/users/login/login.component.css:
--------------------------------------------------------------------------------
 1 | .form-control.login-user {
 2 |   border: 0 solid #fff !important;
 3 | }
 4 | .btn-social{
 5 |   position: relative;
 6 |   text-align: center;
 7 |   white-space: nowrap;
 8 |   overflow: hidden;
 9 |   text-overflow: ellipsis;
10 |   color: #fff;
11 |   border-color: rgba(0,0,0,0.2);
12 | }
13 | 
14 | .btn-facebook{
15 |   background: #3b5998;
16 | }
17 | .btn-google{
18 |   background: #dd4b39;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app/components/users/login/login.component.html:
--------------------------------------------------------------------------------
 1 | <section id="login" class="mb-5 mt-5">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-xs-12 col-sm-6 col-md-4 mx-auto">
 5 |         <div class="card_login">
 6 |           <div class="card">
 7 |             <div class="card-body text-center">
 8 |               <form #formLogin="ngForm" (submit)="onLogin()">
 9 |                 <h1 class="h3 mb-3 font-weight-normal" *ngIf="!isError">Login</h1>
10 |                 <div class="alert alert-danger" role="alert" *ngIf="isError">
11 |                   Something is wrong!
12 |                 </div>
13 |                 <div class="form-group">
14 |                   <input [(ngModel)]="email" type="email" id="email" name="email" class="form-control" placeholder="Email" required>
15 |                 </div>
16 |                 <div class="form-group">
17 |                   <input [(ngModel)]="password" type="password" id="password" name="password" class="form-control" placeholder="Password" required>
18 |                 </div>
19 |                 <button type="submit" class="btn btn-lg btn-primary btn-block">Login</button>
20 |                 <div class="form-group">
21 |                   <a routerLink="/user/register" class="form-control login-user">Are you new ?</a>
22 |                 </div>
23 |                 <div class="form-group">
24 |                   <button class="btn btn-block btn-social btn-facebook" (click)="onLoginFacebook()">
25 |                     <span class="fa fa-facebook"></span>
26 |                     FACEBOOK
27 |                   </button>
28 |                   <button class="btn btn-block btn-social btn-google" (click)="onLoginGoogle()">
29 |                     <span class="fa fa-google"></span>
30 |                     GOOGLE
31 |                   </button>
32 |                 </div>
33 |               </form>
34 |             </div>
35 |           </div>
36 |         </div>
37 |       </div>
38 |     </div>
39 |   </div>
40 | </section>


--------------------------------------------------------------------------------
/src/app/components/users/login/login.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { LoginComponent } from './login.component';
 4 | 
 5 | describe('LoginComponent', () => {
 6 |   let component: LoginComponent;
 7 |   let fixture: ComponentFixture<LoginComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ LoginComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(LoginComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/users/login/login.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { AngularFireAuth } from '@angular/fire/auth';
 3 | import { auth } from 'firebase/app';
 4 | import { Router } from '@angular/router';
 5 | import { AuthService } from '../../../services/auth.service';
 6 | 
 7 | @Component({
 8 |   selector: 'app-login',
 9 |   templateUrl: './login.component.html',
10 |   styleUrls: ['./login.component.css']
11 | })
12 | export class LoginComponent implements OnInit {
13 | 
14 |   constructor(public afAuth: AngularFireAuth, private router: Router, private authService: AuthService) { }
15 |   public email: string = '';
16 |   public password: string = '';
17 |   ngOnInit() {
18 |   }
19 | 
20 |   onLogin(): void {
21 |     this.authService.loginEmailUser(this.email, this.password)
22 |       .then((res) => {
23 |         this.onLoginRedirect();
24 |       }).catch(err => console.log('err', err.message));
25 |   }
26 | 
27 |   onLoginGoogle(): void {
28 |     this.authService.loginGoogleUser()
29 |       .then((res) => {
30 |         this.onLoginRedirect();
31 |       }).catch(err => console.log('err', err.message));
32 |   }
33 |   onLoginFacebook(): void {
34 |     this.authService.loginFacebookUser()
35 |       .then((res) => {
36 |         this.onLoginRedirect();
37 |       }).catch(err => console.log('err', err.message));
38 |   }
39 | 
40 |   onLogout() {
41 |     this.authService.logoutUser();
42 |   }
43 |   onLoginRedirect(): void {
44 |     this.router.navigate(['admin/list-books']);
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/app/components/users/profile/profile.component.css:
--------------------------------------------------------------------------------
 1 | .main-section {
 2 |   border: 1px solid #007bff;
 3 |   background: #fff;
 4 | }
 5 | .profile-header {
 6 |   background: #007bff;
 7 |   height: 150px;
 8 | }
 9 | .user-detail {
10 |   margin: -50px 0 30px 0;
11 | }
12 | 
13 | img {
14 |   height: 100px;
15 |   width: 100px;
16 | }
17 | .user-details h5 {
18 |   margin: 15px 0 5px 0;
19 | }


--------------------------------------------------------------------------------
/src/app/components/users/profile/profile.component.html:
--------------------------------------------------------------------------------
 1 | <section id="profile" class="container">
 2 |   <div class="row mt-5">
 3 |     <div class="offset-lg-4 col-lg-4 col-sm-6 col-12 main-section text-center card">
 4 |       <div class="row">
 5 |         <div class="col-lg-12 col-sm-12 col-12 profile-header"></div>
 6 |       </div>
 7 |       <div class="row user-details">
 8 |         <div class="col-12">
 9 |           <img src="{{user.photoUrl}}" class="rounded-circle img-thumbnail" alt="profile">
10 |           <h5 *ngIf="providerId != 'password'">{{user.name}}</h5>
11 |           <p>
12 |             {{user.email}}
13 |           </p>
14 | 
15 |           <hr>
16 |           <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores suscipit itaque minima quae.</span>
17 |         </div>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </section>


--------------------------------------------------------------------------------
/src/app/components/users/profile/profile.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProfileComponent } from './profile.component';
 4 | 
 5 | describe('ProfileComponent', () => {
 6 |   let component: ProfileComponent;
 7 |   let fixture: ComponentFixture<ProfileComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ ProfileComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ProfileComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/users/profile/profile.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { AuthService } from '../../../services/auth.service';
 3 | import { UserInterface } from '../../../models/user';
 4 | 
 5 | @Component({
 6 |   selector: 'app-profile',
 7 |   templateUrl: './profile.component.html',
 8 |   styleUrls: ['./profile.component.css']
 9 | })
10 | export class ProfileComponent implements OnInit {
11 | 
12 |   constructor(private authService: AuthService) { }
13 |   user: UserInterface = {
14 |     name: '',
15 |     email: '',
16 |     photoUrl: '',
17 |     roles: {}
18 |   };
19 | 
20 |   public providerId: string = 'null';
21 |   ngOnInit() {
22 |     this.authService.isAuth().subscribe(user => {
23 |       if (user) {
24 |         this.user.name = user.displayName;
25 |         this.user.email = user.email;
26 |         this.user.photoUrl = user.photoURL;
27 |         this.providerId = user.providerData[0].providerId;
28 |       }
29 |     })
30 |   }
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/components/users/register/register.component.css:
--------------------------------------------------------------------------------
 1 | .form-control.login-user {
 2 |   border: 0px solid #fff !important;
 3 | }
 4 | .btn-social{
 5 |   position: relative;
 6 |   text-align: center;
 7 |   white-space: nowrap;
 8 |   overflow: hidden;
 9 |   text-overflow: ellipsis;
10 |   color: #fff;
11 |   border-color: rgba(0,0,0,0.2);
12 | }
13 | 
14 | .btn-facebook{
15 |   background: #3b5998;
16 | }
17 | .btn-google{
18 |   background: #dd4b39;
19 | }


--------------------------------------------------------------------------------
/src/app/components/users/register/register.component.html:
--------------------------------------------------------------------------------
 1 | <section id="register" class="mb-5 mt-5">
 2 |   <div class="container">
 3 |     <div class="row">
 4 | 
 5 |       <div class="col-xs-12 col-sm-6 col-md-4 mx-auto">
 6 |         <div class="card_register">
 7 |           <div class="card">
 8 |             <div class="card-body text-center">
 9 |               <form #formRegister="ngForm" (ngSubmit)="onAddUser()">
10 |                 <h1 class="h3 mb-3 font-weight-normal">Register</h1>
11 |                 <div class="alert alert-danger" role="alert" *ngIf="isError">
12 |                   {{msgError}}
13 |                 </div>
14 |                 <div class="form-group">
15 |                   <input type="email" name="email" class="form-control" placeholder="Email" [(ngModel)]="email" required minlength="8">
16 |                 </div>
17 |                 <div class="alert alert-danger" role="alert" *ngIf="email.touched && !email.valid">
18 |                   <div *ngIf="email.errors.required">Email is required</div>
19 |                   <div *ngIf="email.errors.minlength">Email must be at least 8 characters</div>
20 |                 </div>
21 |                 <div class="form-group">
22 |                   <input type="password" name="password" class="form-control" placeholder="Password" [(ngModel)]="password" required minlength="5"
23 |                     maxlength="10">
24 |                 </div>
25 |                 <div class="alert alert-danger" role="alert" *ngIf="password.touched && !password.valid">
26 |                   <div *ngIf="password.errors.required">Password is required</div>
27 |                   <div *ngIf="password.errors.minlength">Password must be at least 5 characters</div>
28 |                 </div>
29 |                 <hr>
30 |                 <div class="form-group">
31 |                   <h5>Seleccionar image:</h5>
32 |                   <input type="file" accept=".png, .jpg" (change)="onUpload($event)">
33 |                 </div>
34 |                 <div class="progress">
35 |                   <div [style.visibility]="(uploadPercent == 0) ? 'hidden' : 'visible'" class="progress-bar progress-bar-striped bg-success"
36 |                     role="progressbar" [style.width]="(uploadPercent | async) +'%'">
37 | 
38 |                     <!-- <span class="progressText" *ngIf="urlImage | async">
39 |                       Ok!!</span> -->
40 |                   </div>
41 |                 </div>
42 |                 <br>
43 |                 <input #imageUser type="hidden" [value]="urlImage | async">
44 |                 <button *ngIf="urlImage | async; else btnDisabled" type="submit" class="btn btn-lg btn-primary btn-block">Register</button>
45 |                 <ng-template #btnDisabled>
46 |                   <button type="submit" disabled=true class="btn btn-lg btn-secondary btn-block">Register</button>
47 |                 </ng-template>
48 |                 <div class="form-group">
49 |                   <a routerLink="/user/login" class="form-control login-user">Do you have account?</a>
50 |                 </div>
51 |                 <div class="form-group">
52 |                   <button class="btn btn-block btn-social btn-facebook" (click)="onLoginFacebook()">
53 |                     <span class="fa fa-facebook"></span>
54 |                     FACEBOOK
55 |                   </button>
56 |                   <button class="btn btn-block btn-social btn-google" (click)="onLoginGoogle()">
57 |                     <span class="fa fa-google"></span>
58 |                     GOOGLE
59 |                   </button>
60 |                 </div>
61 |               </form>
62 | 
63 |             </div>
64 |           </div>
65 |         </div>
66 |       </div>
67 |     </div>
68 |   </div>
69 | </section>


--------------------------------------------------------------------------------
/src/app/components/users/register/register.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { RegisterComponent } from './register.component';
 4 | 
 5 | describe('RegisterComponent', () => {
 6 |   let component: RegisterComponent;
 7 |   let fixture: ComponentFixture<RegisterComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ RegisterComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(RegisterComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/users/register/register.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 2 | import { AuthService } from '../../../services/auth.service';
 3 | import { Router } from '@angular/router';
 4 | import { AngularFireStorage } from '@angular/fire/storage';
 5 | import { finalize } from 'rxjs/operators';
 6 | import { Observable } from 'rxjs/internal/Observable';
 7 | 
 8 | 
 9 | 
10 | @Component({
11 |   selector: 'app-register',
12 |   templateUrl: './register.component.html',
13 |   styleUrls: ['./register.component.css']
14 | })
15 | export class RegisterComponent implements OnInit {
16 | 
17 |   constructor(private router: Router, private authService: AuthService, private storage: AngularFireStorage) { }
18 |   @ViewChild('imageUser') inputImageUser: ElementRef;
19 | 
20 |   public email: string = '';
21 |   public password: string = '';
22 | 
23 |   uploadPercent: Observable<number>;
24 |   urlImage: Observable<string>;
25 | 
26 |   ngOnInit() {
27 |   }
28 | 
29 |   onUpload(e) {
30 |     // console.log('subir', e.target.files[0]);
31 |     const id = Math.random().toString(36).substring(2);
32 |     const file = e.target.files[0];
33 |     const filePath = `uploads/profile_${id}`;
34 |     const ref = this.storage.ref(filePath);
35 |     const task = this.storage.upload(filePath, file);
36 |     this.uploadPercent = task.percentageChanges();
37 |     task.snapshotChanges().pipe(finalize(() => this.urlImage = ref.getDownloadURL())).subscribe();
38 |   }
39 |   onAddUser() {
40 |     this.authService.registerUser(this.email, this.password)
41 |       .then((res) => {
42 |         this.authService.isAuth().subscribe(user => {
43 |           if (user) {
44 |             user.updateProfile({
45 |               displayName: '',
46 |               photoURL: this.inputImageUser.nativeElement.value
47 |             }).then(() => {
48 |               this.router.navigate(['admin/list-books']);
49 |             }).catch((error) => console.log('error', error));
50 |           }
51 |         });
52 |       }).catch(err => console.log('err', err.message));
53 |   }
54 |   onLoginGoogle(): void {
55 |     this.authService.loginGoogleUser()
56 |       .then((res) => {
57 |         this.onLoginRedirect();
58 |       }).catch(err => console.log('err', err.message));
59 |   }
60 |   onLoginFacebook(): void {
61 |     this.authService.loginFacebookUser()
62 |       .then((res) => {
63 |         this.onLoginRedirect();
64 |       }).catch(err => console.log('err', err.message));
65 |   }
66 | 
67 |   onLoginRedirect(): void {
68 |     this.router.navigate(['admin/list-books']);
69 |   }
70 | 
71 | }
72 | 


--------------------------------------------------------------------------------
/src/app/guards/auth.guard.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async, inject } from '@angular/core/testing';
 2 | 
 3 | import { AuthGuard } from './auth.guard';
 4 | 
 5 | describe('AuthGuard', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [AuthGuard]
 9 |     });
10 |   });
11 | 
12 |   it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
13 |     expect(guard).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/src/app/guards/auth.guard.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 3 | import { Observable } from 'rxjs';
 4 | import { AngularFireAuth } from '@angular/fire/auth';
 5 | import { take, map, tap } from 'rxjs/operators';
 6 | 
 7 | @Injectable({
 8 |   providedIn: 'root'
 9 | })
10 | export class AuthGuard implements CanActivate {
11 |   constructor(private afsAuth: AngularFireAuth, private router: Router) { }
12 |   canActivate(
13 |     next: ActivatedRouteSnapshot,
14 |     state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
15 | 
16 |     return this.afsAuth.authState
17 |       .pipe(take(1))
18 |       .pipe(map(authState => !!authState))
19 |       .pipe(tap(auth => {
20 |         if (!auth) {
21 |           this.router.navigate(['/user/login']);
22 |         }
23 |       }));
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app/models/book.ts:
--------------------------------------------------------------------------------
 1 | export interface BookInterface {
 2 |   titulo?: string;
 3 |   idioma?: string;
 4 |   descripcion?: string;
 5 |   portada?: string;
 6 |   precio?: string;
 7 |   link_amazon?: string;
 8 |   autor?: string;
 9 |   oferta?: string;
10 |   id?: string;
11 |   userUid?: string;
12 | }


--------------------------------------------------------------------------------
/src/app/models/user.ts:
--------------------------------------------------------------------------------
 1 | export interface Roles {
 2 |   editor?: boolean;
 3 |   admin?: boolean;
 4 | }
 5 | 
 6 | export interface UserInterface {
 7 |   id?: string;
 8 |   name?: string;
 9 |   email?: string;
10 |   password?: string;
11 |   photoUrl?: string;
12 |   roles: Roles;
13 | }


--------------------------------------------------------------------------------
/src/app/services/auth.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AuthService } from './auth.service';
 4 | 
 5 | describe('AuthService', () => {
 6 |   beforeEach(() => TestBed.configureTestingModule({}));
 7 | 
 8 |   it('should be created', () => {
 9 |     const service: AuthService = TestBed.get(AuthService);
10 |     expect(service).toBeTruthy();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/app/services/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { AngularFireAuth } from '@angular/fire/auth';
 3 | import { map } from 'rxjs/operators';
 4 | import { auth } from 'firebase/app';
 5 | 
 6 | import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
 7 | import { UserInterface } from '../models/user';
 8 | 
 9 | @Injectable({
10 |   providedIn: 'root'
11 | })
12 | export class AuthService {
13 | 
14 |   constructor(private afsAuth: AngularFireAuth, private afs: AngularFirestore) { }
15 | 
16 |   registerUser(email: string, pass: string) {
17 |     return new Promise((resolve, reject) => {
18 |       this.afsAuth.auth.createUserWithEmailAndPassword(email, pass)
19 |         .then(userData => {
20 |           resolve(userData),
21 |             this.updateUserData(userData.user)
22 |         }).catch(err => console.log(reject(err)))
23 |     });
24 |   }
25 | 
26 |   loginEmailUser(email: string, pass: string) {
27 |     return new Promise((resolve, reject) => {
28 |       this.afsAuth.auth.signInWithEmailAndPassword(email, pass)
29 |         .then(userData => resolve(userData),
30 |         err => reject(err));
31 |     });
32 |   }
33 | 
34 |   loginFacebookUser() {
35 |     return this.afsAuth.auth.signInWithPopup(new auth.FacebookAuthProvider())
36 |       .then(credential => this.updateUserData(credential.user))
37 |   }
38 | 
39 |   loginGoogleUser() {
40 |     return this.afsAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
41 |       .then(credential => this.updateUserData(credential.user))
42 |   }
43 | 
44 |   logoutUser() {
45 |     return this.afsAuth.auth.signOut();
46 |   }
47 | 
48 |   isAuth() {
49 |     return this.afsAuth.authState.pipe(map(auth => auth));
50 |   }
51 | 
52 |   private updateUserData(user) {
53 |     const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
54 |     const data: UserInterface = {
55 |       id: user.uid,
56 |       email: user.email,
57 |       roles: {
58 |         editor: true
59 |       }
60 |     }
61 |     return userRef.set(data, { merge: true })
62 |   }
63 | 
64 | 
65 |   isUserAdmin(userUid) {
66 |     return this.afs.doc<UserInterface>(`users/${userUid}`).valueChanges();
67 |   }
68 | 
69 | 
70 | }
71 | 


--------------------------------------------------------------------------------
/src/app/services/data-api.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { DataApiService } from './data-api.service';
 4 | 
 5 | describe('DataApiService', () => {
 6 |   beforeEach(() => TestBed.configureTestingModule({}));
 7 | 
 8 |   it('should be created', () => {
 9 |     const service: DataApiService = TestBed.get(DataApiService);
10 |     expect(service).toBeTruthy();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/app/services/data-api.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
 3 | import { BookInterface } from '../models/book';
 4 | import { Observable } from 'rxjs/internal/Observable';
 5 | import { map } from 'rxjs/operators';
 6 | @Injectable({
 7 |   providedIn: 'root'
 8 | })
 9 | export class DataApiService {
10 | 
11 |   constructor(private afs: AngularFirestore) { }
12 |   private booksCollection: AngularFirestoreCollection<BookInterface>;
13 |   private books: Observable<BookInterface[]>;
14 |   private bookDoc: AngularFirestoreDocument<BookInterface>;
15 |   private book: Observable<BookInterface>;
16 |   public selectedBook: BookInterface = {
17 |     id: null
18 |   };
19 | 
20 |   getAllBooks() {
21 |     this.booksCollection = this.afs.collection<BookInterface>('books');
22 |     return this.books = this.booksCollection.snapshotChanges()
23 |       .pipe(map(changes => {
24 |         return changes.map(action => {
25 |           const data = action.payload.doc.data() as BookInterface;
26 |           data.id = action.payload.doc.id;
27 |           return data;
28 |         });
29 |       }));
30 |   }
31 | 
32 | 
33 |   getAllBooksOffers() {
34 |     this.booksCollection = this.afs.collection('books', ref => ref.where('oferta', '==', '1'));
35 |     return this.books = this.booksCollection.snapshotChanges()
36 |       .pipe(map(changes => {
37 |         return changes.map(action => {
38 |           const data = action.payload.doc.data() as BookInterface;
39 |           data.id = action.payload.doc.id;
40 |           return data;
41 |         });
42 |       }));
43 |   }
44 | 
45 |   getOneBook(idBook: string) {
46 |     this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
47 |     return this.book = this.bookDoc.snapshotChanges().pipe(map(action => {
48 |       if (action.payload.exists === false) {
49 |         return null;
50 |       } else {
51 |         const data = action.payload.data() as BookInterface;
52 |         data.id = action.payload.id;
53 |         return data;
54 |       }
55 |     }));
56 |   }
57 | 
58 |   addBook(book: BookInterface): void {
59 |     this.booksCollection.add(book);
60 |   }
61 |   updateBook(book: BookInterface): void {
62 |     let idBook = book.id;
63 |     this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
64 |     this.bookDoc.update(book);
65 |   }
66 |   deleteBook(idBook: string): void {
67 |     this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
68 |     this.bookDoc.delete();
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false,
 7 |   firebaseConfig: {
 8 |     apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
 9 |     authDomain: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
10 |     databaseURL: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
11 |     projectId: 'XXXXXXXXX',
12 |     storageBucket: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
13 |     messagingSenderId: 'XXXXXXXXX'
14 |   }
15 | };
16 | 
17 | /*
18 |  * For easier debugging in development mode, you can import the following file
19 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
20 |  *
21 |  * This import should be commented out in production mode because it will have a negative impact
22 |  * on performance if an error is thrown.
23 |  */
24 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
25 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/domini-code/angular7_firebase/1b6ec79ce492da4cd8f1ed96e6aff4d9ba42c220/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>BookStore</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /**
38 |  * If the application will be indexed by Google Search, the following is required.
39 |  * Googlebot uses a renderer based on Chrome 41.
40 |  * https://developers.google.com/search/docs/guides/rendering
41 |  **/
42 | // import 'core-js/es6/array';
43 | 
44 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
45 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
46 | 
47 | /** IE10 and IE11 requires the following for the Reflect API. */
48 | // import 'core-js/es6/reflect';
49 | 
50 | /**
51 |  * Web Animations `@angular/platform-browser/animations`
52 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
53 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
54 |  **/
55 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
56 | 
57 | /**
58 |  * By default, zone.js will patch all possible macroTask and DomEvents
59 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
60 |  */
61 | 
62 |  // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
63 |  // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
64 |  // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
65 | 
66 |  /*
67 |  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
68 |  * with the following flag, it will bypass `zone.js` patch for IE/Edge
69 |  */
70 | // (window as any).__Zone_enable_cross_context_check = true;
71 | 
72 | /***************************************************************************************************
73 |  * Zone JS is required by default for Angular itself.
74 |  */
75 | import 'zone.js/dist/zone';  // Included with Angular CLI.
76 | 
77 | 
78 | /***************************************************************************************************
79 |  * APPLICATION IMPORTS
80 |  */
81 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | #books {
 3 |   border-radius: 0.25rem;
 4 |   background: #f9f9f9 !important;
 5 | }
 6 | section {
 7 |   padding: 20px 0;
 8 | }
 9 | #books .card {
10 |   border: none;
11 |   background: #fff;
12 | }
13 | .card_book {
14 |   position: relative;
15 |   -webkit-transform: rotateY(0deg);
16 |   z-index: 2;
17 |   margin-bottom: 30px;
18 | }
19 | 
20 | .card_book .card {
21 |   min-height: 312px;
22 | }
23 | 
24 | p.card-text,
25 | h4.card-title {
26 |   min-height: 96px !important;
27 | }
28 | 
29 | .card-title {
30 |   color: #007bff;
31 |   cursor: pointer;
32 | }
33 | 
34 | .card_book .card .card-body img {
35 |   width: 120px;
36 |   height: 120px;
37 |   border-radius: 50%;
38 | }
39 | 
40 | div.container-precio-idioma{
41 |   display: flex;
42 |   justify-content: space-between;
43 | }
44 | 
45 | 
46 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "exclude": [
 8 |     "test.ts",
 9 |     "**/*.spec.ts"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "target": "es5",
13 |     "typeRoots": [
14 |       "node_modules/@types"
15 |     ],
16 |     "lib": [
17 |       "es2018",
18 |       "dom"
19 |     ]
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-redundant-jsdoc": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "no-output-on-prefix": true,
121 |     "use-input-property-decorator": true,
122 |     "use-output-property-decorator": true,
123 |     "use-host-property-decorator": true,
124 |     "no-input-rename": true,
125 |     "no-output-rename": true,
126 |     "use-life-cycle-interface": true,
127 |     "use-pipe-transform-interface": true,
128 |     "component-class-suffix": true,
129 |     "directive-class-suffix": true
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------