Asynchronous E bidding application using Angular and Firebase

Coding Phase 1

app.component.ts // Main component of the application

import { Component } from '@angular/core';
import { AuthenticationService } from './shared/authentication.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {

email: string;
password: string;

constructor(public authenticationService: AuthenticationService) {}

signUp() {
this.authenticationService.SignUp(this.email, this.password);
this.email = '';
this.password = '';
}

signIn() {
this.email = '';
 this.password = '';
}

signOut() {
this.authenticationService.SignOut();
}

app.component.html // The UI of the app component

<h1 *ngIf="authenticationService.userData | async">Hello {{
(authenticationService.userData | async)?.email }}</h1>

<div *ngIf="!(authenticationService.userData | async)">

<input type="text" [(ngModel)]="email" placeholder="email">
<input type="password" [(ngModel)]="password" placeholder="password">

<button (click)="signUp()">Sign Up</button>

<button (click)="signIn()">Login</button>
</div>

<button (click)="signOut()" *ngIf="authenticationService.userData |

async">Logout</button>

Packages.json // Specifies the dependencies of the application

{
"name": "firebase-authentication-angular8",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.0.3",
"@angular/cdk": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/fire": "^5.2.1",
"@angular/forms": "~8.0.0",
"@angular/material": "^7.3.2",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"firebase": "^6.1.0",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
 "@angular-devkit/build-angular": "^0.803.24",
"@angular/cli": "~8.0.1",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}

App-routing.ts // Handles the routing of the application

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.material.ts // specifies the material used by the UI

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import {
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatBadgeModule,
MatSidenavModule,
MatListModule,
MatGridListModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
 MatPaginatorModule,
MatCardModule
} from '@angular/material';

@NgModule({
imports: [
CommonModule,
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule,
MatCardModule
],
exports: [
MatButtonModule,
 MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule,
MatCardModule
],
providers: [
MatDatepickerModule,
]
})

export class AngularMaterialModule { }

authentication.service.ts // Handles authentication

import { Injectable } from '@angular/core';

import { AngularFireAuth } from "@angular/fire/auth";
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})

export class AuthenticationService {

userData: Observable<firebase.User>;

constructor(private angularFireAuth: AngularFireAuth) {

this.userData = angularFireAuth.authState;
}

/* Sign up */
SignUp(email: string, password: string) {
this.angularFireAuth
.auth
.createUserWithEmailAndPassword(email, password)
.then(res => {
console.log('Successfully signed up!', res);
})
.catch(error => {
console.log('Something is wrong:', error.message);
});
}

/* Sign in */
SignIn(email: string, password: string) {
 this.angularFireAuth
.auth
.signInWithEmailAndPassword(email, password)
.then(res => {
console.log('Successfully signed in!');
})
.catch(err => {
console.log('Something is wrong:',err.message);
});
}

/* Sign out */
SignOut() {
this.angularFireAuth
.auth
.signOut();
}