4 | No sauces to display! 5 |
6 |THE SAUCES
7 |
8 |
14 |
9 | ![Hot sauce bottle]()
10 |
13 | {{ sauce.name | uppercase }}
11 |Heat: {{ sauce.heat }}/10
12 |
3 | ![]()
4 |
29 |
--------------------------------------------------------------------------------
/src/app/auth/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3 | import { AuthService } from '../../services/auth.service';
4 | import { Router } from '@angular/router';
5 | import { catchError, EMPTY, tap } from 'rxjs';
6 |
7 | @Component({
8 | selector: 'app-login',
9 | templateUrl: './login.component.html',
10 | styleUrls: ['./login.component.scss']
11 | })
12 | export class LoginComponent implements OnInit {
13 |
14 | loginForm!: FormGroup;
15 | loading!: boolean;
16 | errorMsg!: string;
17 |
18 | constructor(private formBuilder: FormBuilder,
19 | private auth: AuthService,
20 | private router: Router) { }
21 |
22 | ngOnInit() {
23 | this.loginForm = this.formBuilder.group({
24 | email: [null, [Validators.required, Validators.email]],
25 | password: [null, Validators.required]
26 | });
27 | }
28 |
29 | onLogin() {
30 | this.loading = true;
31 | const email = this.loginForm.get('email')!.value;
32 | const password = this.loginForm.get('password')!.value;
33 | this.auth.loginUser(email, password).pipe(
34 | tap(() => {
35 | this.loading = false;
36 | this.router.navigate(['/sauces']);
37 | }),
38 | catchError(error => {
39 | this.loading = false;
40 | this.errorMsg = error.message;
41 | return EMPTY;
42 | })
43 | ).subscribe();
44 | }
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/src/app/auth/signup/signup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3 | import { AuthService } from '../../services/auth.service';
4 | import { Router } from '@angular/router';
5 | import { catchError, EMPTY, switchMap, tap } from 'rxjs';
6 |
7 | @Component({
8 | selector: 'app-signup',
9 | templateUrl: './signup.component.html',
10 | styleUrls: ['./signup.component.scss']
11 | })
12 | export class SignupComponent implements OnInit {
13 |
14 | signupForm!: FormGroup;
15 | loading!: boolean;
16 | errorMsg!: string;
17 |
18 | constructor(private formBuilder: FormBuilder,
19 | private auth: AuthService,
20 | private router: Router) { }
21 |
22 | ngOnInit() {
23 | this.signupForm = this.formBuilder.group({
24 | email: [null, [Validators.required, Validators.email]],
25 | password: [null, Validators.required]
26 | });
27 | }
28 |
29 | onSignup() {
30 | this.loading = true;
31 | const email = this.signupForm.get('email')!.value;
32 | const password = this.signupForm.get('password')!.value;
33 | this.auth.createUser(email, password).pipe(
34 | switchMap(() => this.auth.loginUser(email, password)),
35 | tap(() => {
36 | this.loading = false;
37 | this.router.navigate(['/sauces']);
38 | }),
39 | catchError(error => {
40 | this.loading = false;
41 | this.errorMsg = error.message;
42 | return EMPTY;
43 | })
44 | ).subscribe();
45 | }
46 |
47 | }
48 |
--------------------------------------------------------------------------------
/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'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/hot-takes'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/src/app/sauce-form/sauce-form.component.html:
--------------------------------------------------------------------------------
1 |
5 |
28 | {{ sauce?.name }}
6 |by {{ sauce?.manufacturer }}
7 |Description
8 |{{ sauce.description }}
9 | 19 |
20 |
22 |
27 |