This tutorial continues the previous one, [Strapi v4 Authentication and Authorization with Angular 13 on a Quiz App: Part 1 - Strapi App](https://strapi.io/blog/strapi-v4-authentication-and-authorization-with-angular-13-on-a-quiz-app-strapi-app) The first tutorial explained setting up a Strapi v4 app to manage questions, quizzes, answers, and scores. The Strapi app would also handle authentication and authorization using its *Users and Permissions* plugin. A tutorial titled [**Build a Quiz App using a Strapi API with Angular**](https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular) preceded part 1. It outlined how to create an Angular 11 quiz app with a Strapi v3 backend. The app displayed a list of quizzes, let users answer questions, and presented their results. It did not track how they performed or allowed them to sign in. This tutorial will build on the initial Angular 11 quiz app. To start, upgrade the app to the current major version of Angular, v13 (as of the date this was published). Then, add services to handle authentication and scoring. Moreover, you will create a login page, a signup page, and a score list page. The services will interface with the Strapi app you created in part 1 to manage the quiz and score content. The Strapi app will also handle authentication as well as authorization. By the end of the tutorial, users of the quiz app should be able to sign up or log in, see a list of quizzes and attempt them, and see their past scores. [Here’s a video showing the completed quiz app in action.](https://youtu.be/ZPFLyTlFNE4) ## Goals In this tutorial, you will: - Upgrade the original quiz app from Angular 11 to 13. - Add new data and core models to structure scoring and authentication data. - Add new and modify existing services to manage grading, errors, and authentication. - Create access restriction guards to prevent unauthenticated access to parts of the app. - Add new and modify existing support components for error handling and navigation. - Add new pages and alter existing ones to display scores and handle authentication. # Prerequisites To follow along, you should have: - Node.js installed on your local machine. [Strapi requires either v12 or v14 of Node.js but recommends v14](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#preparing-the-installation). [Pre-built Node.js installers are available on the Node.js downloads page.](https://nodejs.org/en/download/) - [Angular CLI v13](https://angular.io/cli) on your local machine. You will use it to generate parts of the app and run it. You can install the CLI by running the command below: npm install -g @angular/cli@13.1.0 - A fundamental understanding of Angular. [The Angular docs are an amazing place to start learning about it.](https://angular.io/docs) ## The Angular App As mentioned earlier, in this tutorial, you will be building out an existing Angular 11 quiz app built in the [“](https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular)[**Build a Quiz App using a Strapi API with Angular**](https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular)[”](https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular) tutorial. Clone it from GitHub by running this command on your terminal: ``` git clone https://github.com/zaracooper/quiz-app ``` Change the directory to `quiz-app` to start working on the app: ``` cd quiz-app ``` ## Step 1 - Upgrading the App from Angular 11 to Angular 13 The current major version of Angular is v13. We built the initial quiz app with Angular 11; since v11 is outdated, the app may have vulnerable dependencies. In this step, you will update the app’s Angular core and CLI dependencies. The update involves first updating from v11 to v12, then from v12 to v13. You’ll perform two upgrades because it’s impossible to perform a migration between multiple major versions of Angular. To begin, install the app’s dependencies on your terminal: ``` npm i ``` Once the installation is complete, make sure that the repository is clean by committing any changes that result from the dependency installation. Then, run the following command to update Angular core and CLI from v11 to v12 and **ng-bootstrap** to a version compatible with Angular v12: ``` npx @angular/cli@12 update @angular/core@12 @angular/cli@12 @ng-bootstrap/ng-bootstrap@10.0.0 ``` You may have to use the `--force` flag if the update is unable to complete due to Angular CLI failing to resolve some dependencies. Continue the update of Angular core and CLI from v12 to v13 and **ng-bootstrap** to an Angular-v13-compatible-version by running: ``` ng update @angular/core@13 @angular/cli@13 @ng-bootstrap/ng-bootstrap@11.0.0 ``` # Step 2 - Updating the Environment Variables and Fonts In this step, you will update the Strapi API URL and how fonts are loaded onto the project. Strapi v4 changed its API URL to include an `/api` path segment suffix. So the Strapi API environment variable will change from `http://localhost:1337` to `http://localhost:1337/api`. You’ll need to modify this in the **src/environments/environment.ts** file. Replace the content of that file with: ``` export const environment = { production: false, strapiUrl: 'http://localhost:1337/api' }; ``` The highlighted portion is what changes. Next, update the fonts used in the app. Begin by removing all the `@font-face` styling from **src/styles.css.** After that, ****delete all fonts from the **src/assets** folder with this command: ``` rm -rf src/assets/fonts ``` Then, in the **src/index.html** file, add these links within the `head` tag: # Step 3 - Adding New Data and Core Models In this step, you will add new models to the *Core* and *Data* modules. These models are used to structure data from the Strapi app. - You’ll add a `User` model that represents a user in the *Core* module. - In the *Data* module, you will remove the `UserAnswer` model and replace it with an `Answer` model. This enables it to reflect the `a``nswer` content type in the Strapi app accurately. - Then, you’ll add a `ScoreResponse` model to reflect the responses you get from the Strapi *Score* API. - Lastly, you’ll modify the existing `Quiz`, `Question`, and `Score` models to match their corresponding content types on Strapi. To begin, create the new models and delete the old ones. If you are currently running the Angular server, it may stop working because of the changes you’ll make. Run the following commands on your terminal: ``` ng generate interface core/models/user ng generate interface data/models/answer ng generate interface data/models/score-response rm src/app/data/models/user-answer.ts ``` The highlighted portions of the code blocks below indicate the updates made to the existing models. Add this to **src/app/core/models/user.ts**: ``` export interface User { id: string, username: string, email: string } ``` Add this to **src/app/data/models/answer.ts**: ``` import { Question } from "./question"; export interface Answer { id?: number; question: Question; value: string; correct?: boolean; correctValue?: string; } ``` Update **src/app/data/models/question.ts** using the code below: ``` export interface Question { id: number; text?: string; a?: string; b?: string; c?: string; d?: string; answer?: string; } ``` Update **src/app/data/models/quiz.ts** with the code below: ``` import { Question } from "./question"; export interface Quiz { id: number; title?: string; description?: string; questions?: Question[]; } ``` Add the following code to **src/app/data/models/score-response.ts**: ``` import { Quiz } from "./quiz"; import { Score } from "./score"; export interface ScoreResponse { questionCount: number; quiz: Quiz; score: Score; scoreTotal: number; } ``` Update **src/app/data/models/score.ts** with the following code: ``` import { Answer } from "./answer"; import { Quiz } from "./quiz"; export interface Score { id: number; answers: Answer[]; createdAt: Date; quiz?: Quiz; } ``` # Step 4 - Add New and Update Existing Core and Data Module Services In this step, you will add new services and update existing ones. ## A. Core Module Services The **Core** module currently has no services. Add the three services outlined below to it: - An **Authentication** service: It is responsible for user signup, login, and logout and fetching user data and authentication credentials. - A **Storage** service that interfaces with local storage: It is primarily used for persisting session data. Session management is outside the purview of this article, so this service is a simpler, improvised, and less secure solution to persisting a session for the sake of this tutorial. [It](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage) [](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage)i[s not advisable to store credentials in local storage as it](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage) [](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage)i[s susceptible to Cross](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage)[-](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage)[Site Scripting](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage). - A **Toast** service: It displays toast messages to the user and will mostly show login or signup notifications. To generate these new services run the command below: ``` for service in authentication storage toast; do ng generate service "core/services/${service}"; done ``` 1. The Storage Service This service interfaces with local storage. It adds a namespace prefix to each key name that’s used. Add the code below to **src/app/core/services/storage.service.ts**: ``` import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class StorageService { private namespace = "s"; constructor() { } getItem(key: string): string | null { return window.localStorage.getItem(`${this.namespace}_${key}`); } setItem(key: string, value: string) { window.localStorage.setItem(`${this.namespace}_${key}`, value); } removeItem(key: string) { window.localStorage.removeItem(`${this.namespace}_${key}`); } clear() { window.localStorage.clear(); } } ``` The **storage** service has four methods: - `getItem` to get values from local storage. - `setItem` to add values to local storage. - `removeItem` to remove items from local storage. - `clear` to clear the content of local storage. 2. The Toast service This service shows toast messages. A toast component which you will create in a later step will use this service to manage messages, titles, and styling options for the notifications it shows. Add this code to **src/app/core/services/toast.service.ts**: ``` import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class ToastService { toasts: any[] = []; constructor() { } show(text: string, options: any = {}) { this.toasts.push({ text, ...options }); } showDanger(text: string, options: any = {}) { this.toasts.push({text, classname: 'bg-danger text-light', header: 'Error', ...options}); } showWarning(text: string, options: any = {}) { this.toasts.push({text, classname: 'bg-warning text-dark', header: 'Warning', ...options}); } showSuccess(text: string, options: any = {}) { this.toasts.push({text, classname: 'bg-success text-light', header: 'Success', ...options}); } showPrimary(text: string, options: any = {}) { this.toasts.push({text, classname: 'bg-primary text-light', ...options}); } showInfo(text: string, options: any = {}) { this.toasts.push({text, classname: 'bg-info text-light', header: 'Info', ...options}); } showDark(text: string, options: any = {}) { this.toasts.push({text, classname: 'bg-dark text-light', ...options}); } } ``` The **Toast** service has seven methods: - `show` to display generic toast messages - `showDanger` to display danger toast messages - `showWarning` to display warning toast messages - `showSuccess` to display success toast messages - `showPrimary` to display primary toast messages - `showInfo` to display informational toast messages - `showDark` to display toast messages styled in a dark theme 3. The Authentication service This service is responsible for authentication. In **src/app/core/services/authentication.service.ts**, add this code: ``` import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { environment } from 'src/environments/environment'; import { User } from '../models/user'; import { StorageService } from './storage.service'; interface AuthResponse { jwt: string; user: User; } @Injectable({ providedIn: 'root' }) export class AuthenticationService { private url = `${environment.strapiUrl}/auth/local`; private loginTracker = new BehaviorSubject(this.checkIfLoggedIn()); loggedInStatus$ = this.loginTracker.asObservable(); constructor(private http: HttpClient, private ss: StorageService) { } login(identifier: string, password: string) { return this.http.post(this.url, { identifier, password }); } register(username: string, email: string, password: string) { return this.http.post(`${this.url}/register`, { username, email, password }); } checkIfLoggedIn() { return this.ss.getItem('loggedIn') === 'true'; } persistUser(resp: AuthResponse) { [ ['userId', resp.user.id], ['userEmail', resp.user.email], ['username', resp.user.username], ['loggedIn', 'true'], ['token', resp.jwt] ].forEach(item => this.ss.setItem(item[0], item[1])); this.loginTracker.next(true); } getPersistedUser(): User { return { id: this.ss.getItem('userId') || '', username: this.ss.getItem('username') || '', email: this.ss.getItem('userEmail') || '' }; } getPersistedToken(): string { return this.ss.getItem('token') || ''; } logout() { ['userId', 'userEmail', 'username', 'loggedIn', 'token'].forEach(item => this.ss.removeItem(item)); this.loginTracker.next(false); } getAuthHeader() { return { headers: { 'Authorization': `Bearer ${this.getPersistedToken()}` } }; }; } ``` The **Authentication** service has eight methods: - `login` : It takes an `identifier` (email) and `password` and makes a `POST` request to the `/auth/local` endpoint of the Strapi app to login a user. It returns the user’s information and a JWT if successful. - `register`: It signs up a user. It takes a `username`, `email`, and `password`, makes a `POST` request to the Strapi `/auth/local` endpoint, and returns the new user’s information and a JWT. - `checkLoggedIn`: It checks whether the user is logged in based on a value stored in local storage that is set when they log in. - `persistUser`: It saves user information using the **Storage** service when they log in and updates their login status through the `loginTracker`. - `getPersistedUser`: This method gets the current user’s information from the **Storage** service. - `getPersistedToken`: It gets the user’s token from the **Storage** service. - `logout`: This method logs out the user by clearing their information from storage and updates their login status using `loginTracker`. - `getAuthHeader`: It creates an authentication header using the persisted token to use in requests to Strapi. The `loggedInStatus$` observed tracks whether the user has logged in and shares this status with components that subscribe to it. The service uses the `HttpClient` to request Strapi and the `StorageService` to persist information. They are both injected in its constructor. `AuthResponse` models the response received from Strapi’s `/auth/local` endpoint. ## B. Data Module Services The **Data** module only has one service, the **Quiz** service. Modify this service and add two newer ones to the module. These new services are: - A **Score** service to interface with the Strapi **Score** API. - A **Normalization** service to normalize data from the Strapi API. Normalization is necessary because [how data is returned from the Strapi API has been overhauled in v4 and looks completely different from how it was returned in v3](https://forum.strapi.io/t/discussion-regarding-the-complex-response-structure-for-rest-graphql-developer-experience/13400). Since the original Angular app used the v3 Strapi API as a backend, we’ll need to rewrite major portions of the app to accommodate the new data structure. It’s much easier to just convert the data to what it looked like in Strapi v3 once it’s received from the Strapi v4 app. To generate these new services, run: ``` for service in score normalization; do ng generate service "data/services/${service}"; done ``` 1. The Normalization Service [Strapi v4 overhauled how data is returned and is drastically different from what Strapi v3 returned.](https://forum.strapi.io/t/discussion-regarding-the-complex-response-structure-for-rest-graphql-developer-experience/13400) For example, [ single entries are returned in an object under a data property and their attributes under an attributes property. Strapi v3 did not have this nested object structure. ](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#get-an-entry). [Strapi v3 did not have this nested object structure.](https://docs-v3.strapi.io/developer-docs/latest/developer-resources/content-api/content-api.html#get-an-entry) Since the Angular app was initially built using Strapi v3, we need to make many changes to make to work with data from Strapi v4. A normalization service would restructure the data from the Strapi v4 app to something similar to what Strapi v3 returned. In the **src/app/data/services/normalization.service.ts** file, add the code below: ``` import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { map, switchMap, toArray } from 'rxjs/operators'; interface StrapiEntry { id: number, attributes: any } interface StrapiSingleEntryData { data: StrapiEntry } interface StrapiMultiEntryData { data: StrapiEntry[] } @Injectable({ providedIn: 'root' }) export class NormalizationService { constructor() { } restructureAttributes(nestedAttribute?: string): (source$: Observable) => Observable { return source$ => source$.pipe( map(v => this.restructureNestedAttributes(v.data, nestedAttribute)), ); } restructureArrayedAttributes(nestedAttribute?: string): (source$: Observable) => Observable { return source$ => source$.pipe( map(v => v.data), switchMap(v => v), map(v => this.restructureNestedAttributes(v, nestedAttribute)), toArray() ); } private restructureNestedAttributes(v: StrapiEntry, nestedAttribute?: string) { if (nestedAttribute) { v.attributes[nestedAttribute] = v.attributes[nestedAttribute].data.map((nv: StrapiEntry) => ({ id: nv.id, ...nv.attributes })); } return { id: v.id, ...v.attributes }; } } ``` The **Normalization** service has two public methods: - `restructureAttributes` flattens a single entry Strapi response. It returns the single entry from the `data` property. The content of the `attributes` property of the single entry are placed at the same level as the entry’s `id`. For example, `{ data: { id: 3, attributes: { title:` `'``quiz``'` `}}` would be converted to `{ id: 3, title:` `'``quiz``'` `}`. - `restructureArrayedAttributes` works similar to `restructureAttributes` but it flattens data with multiple entries that are in an array. 2. The Quiz Service Since the `QuizService` is a pre-existing service, it only has to be modified to normalize data. Also, since there is a new *Score* API on Strapi, there will be a new *Score* service on the Angular app to interface with it. The `score` method is no longer needed on the `QuizService` and will be removed. Replace the content of **src/app/data/services/quiz.service.ts** with the code below: ``` import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { environment } from 'src/environments/environment'; import { Quiz } from '../models/quiz'; import { NormalizationService } from './normalization.service'; interface StrapiResponse { data: any; } @Injectable({ providedIn: 'root' }) export class QuizService { private url = `${environment.strapiUrl}/quizzes`; private populateQuestionsParam = { params: new HttpParams().set('populate', '*') }; constructor(private http: HttpClient, private ns: NormalizationService) { } getQuizzes(): Observable { return this.http.get( this.url, this.populateQuestionsParam ).pipe(this.ns.restructureArrayedAttributes('questions')); } getQuiz(id: number): Observable { return this.http.get(`${this.url}/${id}`, this.populateQuestionsParam ).pipe(this.ns.restructureAttributes('questions')); } } ``` The Quiz service injects two services into its constructor, `HttpClient`, to make requests to the Strapi app and `NormalizationService` to normalize the data returned from Strapi. Its two methods are: - `getQuizzes`, which returns all the quizzes. - `getQuiz`, which returns a single quiz identified by its `id`. `populateQuestionsParam` is passed to each request to make sure that each returned quiz is populated with its questions. 3. The Score service This service interfaces with the Strapi Score API. In the **src/app/data/services/score.service.ts** file, add the code below: ``` import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { environment } from 'src/environments/environment'; import { ScoreResponse } from '../models/score-response'; import { Answer } from '../models/answer'; import { Quiz } from '../models/quiz'; import { Observable } from 'rxjs'; import { AuthenticationService } from 'src/app/core/services/authentication.service'; @Injectable({ providedIn: 'root' }) export class ScoreService { private url = `${environment.strapiUrl}/scores`; constructor(private http: HttpClient, private auth: AuthenticationService) { } createScore(quiz: Quiz, answers: Answer[]): Observable { return this.http.post( this.url, { quiz, answers }, this.auth.getAuthHeader() ); } getScore(id: number): Observable { return this.http.get( `${this.url}/${id}`, this.auth.getAuthHeader() ); } getScores(): Observable { return this.http.get(this.url, { params: new HttpParams({ fromObject: { 'sort': 'createdAt:desc', 'pagination[pageSize]': 10 } }), ...this.auth.getAuthHeader() } ); } } ``` The **Score** service uses the `HttpClient` service to make a request to Strapi and the `AuthenticationService` to create authentication headers for the requests. It has three methods: - `createScore`, which creates scores given a user’s `answers` and a `quiz` to score it against. - `getScore`, which gets a single score identified by the provided `id`. - `getScores`, which gets all the scores belonging to the authenticated user. The data returned by the Strapi **Score** API does not need to be normalized because the controllers that create and fetch scores were modified to return data that takes a `ScoreResponse` structure. # Step 5 - Add Access Restriction Guards In this step, you will add restriction guards that will prevent access to **Quiz**, **Score,** and **Signup** pages. Both guards will be placed in the **Core** module; they are: - `LoggedInGuard`, which prevents unauthenticated users from taking quizzes on the **Quiz** page and viewing scores on the **Score** and **Scores** pages. - `SignupGuard`, which prevents logged-in users from accessing the signup page. This is done because already logged-in users don’t need to create accounts. If they wish to create new accounts, they need to log out first. To generate the guards, run this command on your terminal: ``` for guard in "logged-in" signup; do ng generate guard "core/guards/${guard}"; done ``` When prompted on what interface they should implement, select `CanActivate`. ## A. Logged-in Guard Replace the content of **src/app/core/guards/logged-in.guard.ts** with this code: ``` import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthenticationService } from '../services/authentication.service'; import { StorageService } from '../services/storage.service'; @Injectable({ providedIn: 'root' }) export class LoggedInGuard implements CanActivate { constructor( private auth: AuthenticationService, private router: Router, private ss: StorageService ) { } canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { if (this.auth.checkIfLoggedIn()) { return true; } this.ss.setItem('attemptedRoute', state.url); return this.router.parseUrl('/'); } } ``` The logged-in guard uses three other injected services: `AuthenticationService` to check if a user is logged in, `StorageService` to store the route they attempted but were denied access, and `Router` to parse string URLs into URL trees. If an authenticated user attempts to access a route, they can activate it. If they are unauthenticated, the route they’re trying to access is saved in storage and they are redirected to the **Quizzes** page. When they login, they are redirected to the route they attempted before but were denied. ## B. Signup Guard Replace the content of **src/app/core/guards/signup.guard.ts** with this code: ``` import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthenticationService } from '../services/authentication.service'; @Injectable({ providedIn: 'root' }) export class SignupGuard implements CanActivate { constructor(private auth: AuthenticationService, private router: Router) { } canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { return this.auth.checkIfLoggedIn() ? this.router.parseUrl('/') : true; } } ``` The signup guard uses two injected services: `AuthenticationService` to check if a user is logged in and `Router` to parse string URLs into URL trees. When an authenticated user attempts to access the **Signup** page, they are redirected to the **Quizzes** page. If they are unauthenticated, they can create an account on the **Signup** page. # Step 6 - Add and Modify Support Components In this step, you will create new components to display error and general messages. You will also modify the `HeaderComponent` to add the login, signup, and user profile buttons. Lastly, you will modify the existing `QuestionComponent` to work with the newer data models. ## A. Core Module Support Components Two new components will be added to the **Core** module. The `T``oastComponent` shows toasts, and the `MessageComponent` shows an error or general messages on separate pages. To generate both, run: ``` for comp in toast message; do ng generate component "core/components/${comp}"; done ``` The `TitleComponent` displays titles on pages and in other components. Initially, the only stand-alone pages were in the **Quiz** module. However, now that you will be adding additional pages in other modules, the `TitleComponent` will also be used in them. It makes sense to move this component from the **Quiz** module to the **Core** module. To do this, run the following command: ``` mv src/app/features/quiz/components/title src/app/core/components ``` You need to update **src/app/features/quiz/quiz.module.ts** to reflect this removal by deleting the `TitleComponent` import and declaration. The `QuizModule` declarations should now look like this: ``` @NgModule({ declarations: [ QuestionComponent, QuizzesComponent, QuizComponent, ScoreComponent], imports: [ CommonModule, QuizRoutingModule, NgbModule, ReactiveFormsModule] }) export class QuizModule { } Next, update **src/app/core/core.module.ts** to include `TitleComponent` as a declaration and export of `CoreModule`. The highlighted portions are all the code you need to add. import { TitleComponent } from './components/title/title.component'; @NgModule({ declarations: [ HeaderComponent, NotFoundComponent, ToastComponent, MessageComponent, TitleComponent], imports: [ CommonModule, RouterModule ], exports: [ HeaderComponent, NotFoundComponent, TitleComponent ] }) export class CoreModule { } ``` 1. The Header Component In the original header component, the template only consisted of the app title and a home button. In this section, you will add: - A login button - A logout button - A signup button - A profile button that takes a user to their **Scores** page This is what the initial header looked like: ![Screenshot of initial header](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643913393790_Screen+Shot+2022-02-03+at+9.35.55+PM.png) To add functionality for the four additions mentioned above, replace the content of **src/app/core/components/header/header.component.ts** with this: ``` import { Component, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { AuthenticationService } from '../../services/authentication.service'; import { ToastService } from '../../services/toast.service'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit, OnDestroy { isLoggedIn = false; avatarInitial = ''; username = ''; authStatus!: Subscription; constructor( private auth: AuthenticationService, private router: Router, private toast: ToastService ) { } ngOnInit(): void { this.authStatus = this.auth.loggedInStatus$.subscribe(status => { this.isLoggedIn = status; if (status) { this.username = this.auth.getPersistedUser().username; this.avatarInitial = this.username[0] || 'Q'; } }); } ngOnDestroy(): void { this.authStatus.unsubscribe(); } logout() { this.auth.logout(); this.toast.showSuccess('Successfully logged out.'); this.router.navigateByUrl('/'); } } ``` The **Header** component injects three services: `AuthenticationService` to log in and out, `Router` for navigation, and `ToastService` to display toasts. When the component is initialized, a check is done to confirm whether the user is already logged in. If they are, their `username` is fetched from storage and used in the profile button. Their login status, `isLoggedIn`, is also tracked and used to determine the visibility of the login, logout, and signup buttons. If the user is logged in, the logout and profile buttons are shown. If they are not logged in, the signup and login buttons are shown instead. When they log out, the `logout` method is called. In this method, the `AuthenticationService` logs them out, a successful toast is displayed using the `ToastService`, and they are directed to the home page. To add all the buttons, change the content of **src/app/core/components/header/header.component.html** to the code below: ```

QuizApp

``` To style the buttons, add this to **src/app/core/components/header/header.component.css**: ``` .avatar { width: 40px; height: 40px; } .avatar-text { margin: 0; padding: 0; font-weight: bold; } ``` Here’s what the header should look like when a user is signed in: ![Screenshot of header when user is signed in](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643914690791_Screen+Shot+2022-02-03+at+9.56.30+PM.png) Here’s a screenshot of what it should look like when a user is not signed in: ![Screenshot of header when user is not signed in](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643914708682_Screen+Shot+2022-02-03+at+9.55.14+PM.png) 2. The Message Component This component shows an error message on a separate page in three instances: - When a user attempts to score a quiz without providing answers, - When a user visits the scores page but has not taken any quizzes before and there are no scores to be displayed, and - When the requested page cannot be found (404). Change the content of **src/app/core/components/message/message.component.ts** to this: ``` import { Component, Input } from '@angular/core'; @Component({ selector: 'app-message', templateUrl: './message.component.html', styleUrls: ['./message.component.css'] }) export class MessageComponent { @Input() title = ''; @Input() subtitle = ''; @Input() message = ''; @Input() buttonText = ''; @Input() redirectPath = ''; constructor() { } } ``` The Message component takes five inputs: - `title`: The title of the page - `subtitle`: The text that appears under the title - `message`: The general or error message to be displayed - `buttonText`: The text shown on a button under the message - `redirectPath`: The path that the user is redirected to when they click the button above Add this to **src/app/core/components/message/message.component.html**: ```

``` To style this component, add this to **src/app/core/components/message/message.component.css**: ``` .message { width: 40vw; } ``` You will see screenshots of this component in use in **step 7**. 3. The Toast Component This component shows toast messages. Replace the content of **src/app/core/components/toast/toast.component.ts** with this: ``` import { Component } from '@angular/core'; import { ToastService } from '../../services/toast.service'; @Component({ selector: 'app-toast', templateUrl: './toast.component.html', host: { '[class.ngb-toasts]': 'true' }, styleUrls: ['./toast.component.css'] }) export class ToastComponent { show = true; constructor(public toastService: ToastService) { } close() { this.show = false; } } ``` The toast component only displays toast messages. It uses the `ToastService` to manage different messages sent from across the app. The `close` method dismisses the toast message. Replace the content of **src/app/core/components/toast/toast.component.html** with this: ``` {{ toast.text }} ``` Here’s a screenshot of a sample toast message: ![Screenshot of toast displayed when you log out](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643918848368_Screen+Shot+2022-02-03+at+11.06.51+PM.png) 4. The Title Component The pages that display quizzes and scores heavily rely on the `TitleComponent` to show their information. Since some properties in the `Quiz` and `Score` models aren’t always guaranteed, the `TitleComponent` has to be able to accept undefined values as input. To make the `TitleComponent` inputs take undefined values, modify them in the **src/app/core/components/title/title.component.ts** file as shown below: ``` export class TitleComponent { @Input() title: string | undefined = ''; @Input() subtitle: string | undefined = ''; constructor() { } } ``` ## B. Quiz Module Support Components There is only one support component in the **Quiz** module. It’s already an existing component from the initial Angular app. 1. The Question Component In this component, you will update some of the answer models it imports and uses. Replace the content of the **src/app/features/quiz/components/question/question.component.ts** file with the code below: ``` import { Component, Input, Output, EventEmitter } from '@angular/core'; import { Answer } from 'src/app/data/models/answer'; import { Question } from 'src/app/data/models/question'; @Component({ selector: 'app-question', templateUrl: './question.component.html', styleUrls: ['./question.component.css'] }) export class QuestionComponent { @Input() question = {} as Question; @Input() number = 0; @Output() setAnswer = new EventEmitter(); selectedAnswer = ''; constructor() { } pickAnswer(id: number, answer: string, value: string = '') { this.selectedAnswer = `[${answer}] ${value}`; this.setAnswer.emit({ question: { id }, value: answer }); } } ``` In this file, you will replace the `UserAnswer` model which you removed in **step 3** with the new `Answer` model. # Step 7 - Add New Pages and Modify Existing Ones In this step, you will add new pages for logging in, signing up, and showing all scores. You will also modify the **Quiz, Quizzes, Not-Found,** and single **Score** pages. ## A. Auth Module Pages This is a new module that contains the signup and login pages. Since it didn’t exist in the initial app, you’ll have to generate it by running the code below: ``` ng generate module features/auth --routing ``` The `--routing` flag adds an `AuthRoutingModule` to handle routing for the `AuthModule`. To generate the login and signup pages run the following code: for page in login signup; do ng generate component "features/auth/pages/${page}"; done Running the above command will generate both the `LoginComponent` and `SignupComponent` at **src/app/features/auth/pages**. 1. The Signup Page This page enables users to register accounts. A user will provide a username, email, and password to a form to create an account. Replace the content of **src/app/features/auth/pages/signup/signup.component.ts** with this: ``` import { Component, OnDestroy } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { AuthenticationService } from 'src/app/core/services/authentication.service'; import { StorageService } from 'src/app/core/services/storage.service'; import { ToastService } from 'src/app/core/services/toast.service'; @Component({ selector: 'app-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnDestroy { signupForm = this.fb.group({ username: ['', [Validators.required]], email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(8)]] }); private registrationSub: Subscription | undefined; constructor( private fb: FormBuilder, private auth: AuthenticationService, private router: Router, private ss: StorageService, private toast: ToastService) { } ngOnDestroy(): void { if (this.registrationSub) { this.registrationSub.unsubscribe(); } } get password() { return this.signupForm.get('password'); } signup() { const user = this.signupForm.value; this.registrationSub = this.auth.register( user.username, user.email, user.password ).subscribe( resp => { this.signupForm.reset(); this.auth.persistUser(resp); this.toast.showSuccess('Successfully created account. Redirecting you to the quizzes.'); const attemptedRoute = this.ss.getItem('attemptedRoute'); this.ss.removeItem('attemptedRoute'); this.router.navigateByUrl(attemptedRoute || '/') }, () => { this.toast.showDanger('There was a problem registering your account.'); } ); } } ``` This component injects four services into its constructor: `FormBuilder` to create and manage the signup form, `AuthenticationService` to make a user registration request to Strapi, `StorageService` to retrieve any route the user attempted and was denied, and `ToastService` to display toast messages. `signupForm` is a form group that contains the username, email, and password form controls. `registrationSub` holds the subscription returned when a user signs up; it is unsubscribed from in the `ngDestroy` method when the component is destroyed. The component has two methods: - `password` to get the password value from the `signupForm` - `signup`, which creates the new user using the `AuthenticationService` When the `signup` method is called, all the values from the `signupForm` are passed to the `register` method of the `AuthenticationService`. Once a successful response is received, the `signupForm` is reset, user details are persisted, and a success toast is displayed. If the user attempted to access a route but was prevented access by a guard, the route they tried to access is retrieved using the `StorageService`. The user is then redirected to that route and the initially attempted route is removed from storage. If registration is unsuccessful, an error toast message is displayed. Replace the content of the **src/app/features/auth/pages/signup/signup.component.html** template with this: ```

``` In this template, the form controls are added to an HTML form. If the password entered fails validation as specified in the component (it is a required value with a minimum length of 8), an error message is displayed. To style the form, add this to **src/app/features/auth/pages/signup/signup.component.css**: ``` .signup-input { min-width: 25vw; } ``` Here is a screenshot of the signup page: ![Screenshot of the Signup Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643957145541_Screen+Shot+2022-02-04+at+9.44.33+AM.png) 2. The Login Page On this page, the user provides their email and password to sign in. There’s a login form containing input fields for these values to be entered and submitted in the template. Replace the content of **src/app/features/auth/pages/login/login.component.ts** with this: ``` import { Component, OnDestroy } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { AuthenticationService } from 'src/app/core/services/authentication.service'; import { StorageService } from 'src/app/core/services/storage.service'; import { ToastService } from 'src/app/core/services/toast.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnDestroy { loginForm = this.fb.group({ email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required]] }); private loginSub: Subscription | undefined; constructor(private fb: FormBuilder, private auth: AuthenticationService, private router: Router, private toast: ToastService, private ss: StorageService) { } ngOnDestroy(): void { if (this.loginSub) { this.loginSub.unsubscribe(); } } login() { const credentials = this.loginForm.value; this.loginSub = this.auth.login( credentials.email, credentials.password ).subscribe( resp => { this.loginForm.reset(); this.auth.persistUser(resp); this.toast.showSuccess('Successfully logged in.'); const attemptedRoute = this.ss.getItem('attemptedRoute'); this.ss.removeItem('attemptedRoute'); this.router.navigateByUrl(attemptedRoute || '/') }, () => { this.toast.showDanger('Login unsuccessful. Check your credentials.'); } ); } } ``` Four services are injected into this component’s constructor: `FormBuilder` to create the login form, `AuthenticationService` to make a login request to Strapi, `ToastService` to send toast messages, and `StorageService` to get routes that the user attempted but was denied. `loginForm` is the form group that contains the email and password form controls. `loginSub` holds the subscription returned when making a request to login using the `AuthenticationService`. When the component is destroyed, `loginSub` is unsubscribed from to prevent memory leaks. The only method `LoginComponent` has is `login`. When it is called, the email and password values from the `loginForm` are passed to `AuthenticationService`'s `login` method which makes a request to Strapi to log in. If the request is successful, the `loginForm` is reset, the user details persisted, and a success toast message is displayed. If the user attempted to access a route but was denied because they were unauthenticated, they will be redirected to that route and it will be removed from storage. An error toast message is displayed if the signin was unsuccessful. Add this code to the **src/app/features/auth/pages/login/login.component.html** template: ```

``` The `loginForm` can only be submitted when the form is valid i.e. all the form controls pass the validators set in `LoginComponent`. The submit button is disabled until then. To style the template, add the code below to **src/app/features/auth/pages/login/login.component.css**: ``` .login-input { min-width: 25vw; } ``` Here is a screenshot of the login page: ![Screenshot of the Login Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643957236168_Screen+Shot+2022-02-04+at+9.44.46+AM.png) ## B. Quiz module pages The `QuizModule` in the initial version of the Angular app had three pages: the **Quiz** page, the **Quizzes** page, and the **Score** page. You will modify these pages to use the updated data models and services. You will also add a new **Scores** page to show a complete list of the user’s previous scores on quizzes. To generate the new **Scores** page, run the command below: ``` ng generate component features/quiz/pages/scores ``` 1. **Quizzes page** This page is responsible for displaying a complete list of available quizzes. Modify this page to disable the `Take Quiz` buttons on each quiz card if a user is unauthenticated. A user can only take a quiz if they are logged in. Begin by replacing the content of **src/app/features/quiz/pages/quizzes/quizzes.component.ts** with the code below: ``` import { Component } from '@angular/core'; import { AuthenticationService } from 'src/app/core/services/authentication.service'; import { QuizService } from 'src/app/data/services/quiz.service'; @Component({ selector: 'app-quizzes', templateUrl: './quizzes.component.html', styleUrls: ['./quizzes.component.css'] }) export class QuizzesComponent { quizzes$ = this.quizService.getQuizzes(); constructor(private quizService: QuizService, public auth: AuthenticationService) { } } ``` The major change made here is the injection of the `AuthenticationService` in the constructor. It determines if the user is logged in or not. Proceed to replace the content of **src/app/features/quiz/pages/quizzes/quizzes.component.html** with this: ```

Questions: {{quiz.questions?.length}}

``` The main change in this template is the replacement of the `Take Quiz` link with a button that is disabled if the user is not logged in. How some quiz and question attributes are accessed have also been modified to be in line with the new data models. The highlighted portions show all the changes that were made. Because the `Take Quiz` link was replaced with a button that can be disabled, styling for the template had to be modified to reflect the change. Since this styling file is rather large, its source code won’t be placed here. [Visit this link for the styling source](https://raw.githubusercontent.com/zaracooper/quiz-app/feat-scores/src/app/features/quiz/pages/quizzes/quizzes.component.css), copy it, and replace the content of **src/app/features/quiz/pages/quizzes/quizzes.component.css** with it. Here’s a screenshot of the quizzes page when a user is not logged in. Notice how all the buttons are labeled `Login to attempt` and are disabled. ![Screenshot of Quizzes page if user is not logged in](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643959430027_Screen+Shot+2022-02-04+at+10.23.26+AM.png) Here’s a screenshot of the same page when a user is logged in. Once you login, the button text changes to `Take Quiz` and is enabled. ![Screenshot of Quizzes page if user is logged in](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643959501851_Screen+Shot+2022-02-04+at+10.24.33+AM.png) 2. Quiz page The main update made on this page is the change of the `UserAnswer` model to the `Answer` model. Replace the content of **src/app/features/quiz/pages/quiz/quiz.component.ts** to this: ``` import { Component, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { Quiz } from 'src/app/data/models/quiz'; import { QuizService } from 'src/app/data/services/quiz.service'; import { switchMap } from 'rxjs/operators'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Answer } from 'src/app/data/models/answer'; @Component({ selector: 'app-quiz', templateUrl: './quiz.component.html', styleUrls: ['./quiz.component.css'] }) export class QuizComponent implements OnInit, OnDestroy { quiz!: Quiz; quizForm: FormGroup = new FormGroup({}); quizId = 0; private quizSub!: Subscription; constructor( private quizService: QuizService, private route: ActivatedRoute, private router: Router ) { } ngOnDestroy(): void { this.quizSub.unsubscribe(); } ngOnInit(): void { this.quizSub = this.route.paramMap.pipe( switchMap(params => { this.quizId = Number(params.get('id')); return this.quizService.getQuiz(this.quizId); }) ).subscribe( quiz => { this.quiz = quiz; if (quiz.questions) { quiz.questions.forEach(question => { this.quizForm.addControl(question.id.toString(), new FormControl('', Validators.required)); }); } } ); } setAnswerValue(answ: Answer) { this.quizForm.controls[answ.question.id].setValue(answ.value); } score() { this.router.navigateByUrl(`/quizzes/${this.quizId}/score`, { state: this.quizForm.value }); } } ``` The highlighted portions are the changes that were made to the file. Most of the changes reflect the substitution of `UserAnswer` for `Answer`. The `quizSub` subscription was made private as it’s not used outside the component. Also, the score page URL changed from `/quiz/${this.quizId}/score` to `/quizzes/${this.quizId}/score` in the `score` method to better conform to REST resource naming best practices (quiz is plural now). The **src/app/features/quiz/pages/quiz/quiz.component.html** template also needs modifying to conform to the new data models. Replace all its content with this: ```

This quiz has no questions.

See More Quizzes

``` The highlighted portions are the changes made to the template. Nothing has changed in the appearance of the page from the initial version of the app, but here’s a screenshot of what it looks like: ![Screenshot of the Quiz Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643961445573_Screen+Shot+2022-02-04+at+10.57.07+AM.png) 3. The Score Page The **score** page shows individual scores. It’s used in two instances: to show a calculated score immediately a user submit answers to a quiz and to show a score for a past attempted quiz. The major changes you’ll make to this file are updating the data models and services it uses. Replace the content of **src/app/features/quiz/pages/score/score.component.ts** with this: ``` import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { iif, Observable } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { Answer } from 'src/app/data/models/answer'; import { ScoreResponse } from 'src/app/data/models/score-response'; import { ScoreService } from 'src/app/data/services/score.service'; @Component({ selector: 'app-score', templateUrl: './score.component.html', styleUrls: ['./score.component.css'] }) export class ScoreComponent implements OnInit { scoreResp$: Observable | undefined; id = 0; constructor(private route: ActivatedRoute, private scoreService: ScoreService) { } ngOnInit(): void { this.scoreResp$ = this.route.paramMap .pipe( switchMap(params => { const state = window.history.state; this.id = Number(params.get('id')); if (window.location.pathname.startsWith('/quizzes/')) { let reqBody: Answer[] = []; for (const [qstId, answ] of Object.entries(state)) { if (typeof answ === 'string') { reqBody.push({ question: { id: Number(qstId) }, value: answ.toLowerCase() }); } } return iif(() => reqBody.length > 0, this.scoreService.createScore({ id: this.id }, reqBody)); } return this.scoreService.getScore(this.id); }) ); } } ``` Two services are injected into this component’s constructor: `ActivatedRoute` to get the quiz id from the route params and `ScoreService` to create and fetch individual scores. `scoreResp$` holds the results from a request to the Strapi **Score** API. `id` is either a quiz or score id. When the component is initialized, the answers the user gave and the quiz/score `id` are retrieved from `window.history.state`, and the route params respectively. If the page route path is `/quizzes/{id}/score`, a score is created using the answers and quiz `id`. A request body is constructed from the answers and a request is made using the `ScoreService`'s `createScore` method to create a score. If no answers are provided, no request is made. If the page route path is `/scores/{id}`, then an existing score is fetched using the `id`. In this case, `id` is a score identifier and not a quiz identifier as in the former case. Update the content of the **src/app/features/quiz/pages/score/score.component.html** template to this: ```

{{scoreResp.score.createdAt | date:'fullDate'}} - {{scoreResp.score.createdAt | date:'shortTime'}}

You scored:

{{scoreResp.scoreTotal}}/{{scoreResp.questionCount}}

Your answers:

#	Picked	Right?	Correct
{{no + 1}}	{{answ.value \| uppercase}}	{{answ.correct ? '✅' : '❌'}}	{{(answ.correctValue \|\| answ.value) \| uppercase}}

``` In this template, the values changed in the component are updated to match. How a **“no answers”** error is displayed (in the event that answers are not provided) is also modified. `app-message` is used to display the aforementioned error. A timestamp is also added and displayed for the score. Lastly, we need to update the styling. Here’s a screenshot of the new **Score** page: ![Screenshot of Score Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643967495233_Screen+Shot+2022-02-04+at+12.37.35+PM.png) Here’s a screenshot of the error displayed when no answers are provided or a previous score cannot be found: ![Screenshot of Error on Score Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643967614687_Screen+Shot+2022-02-04+at+12.37.18+PM.png) 4. The Scores Page This page displays all the user’s scores for quizzes they attempted in the past. The component didn’t exist before because previous scores were not saved and tracked. Replace the content of **src/app/features/quiz/pages/scores/scores.component.ts** with: ``` import { Component } from '@angular/core'; import { ScoreService } from 'src/app/data/services/score.service'; @Component({ selector: 'app-scores', templateUrl: './scores.component.html', styleUrls: ['./scores.component.css'] }) export class ScoresComponent { scores$ = this.score.getScores(); constructor(private score: ScoreService) { } } ``` This component’s constructor has only one service injected, `ScoreService`. You’ll use this service to fetch all the logged-in user’s scores. The `scores$` observable manages these scores and is returned when the `getScores` method of `ScoreService` is called. In the **src/app/features/quiz/pages/scores/scores.component.html** template, add the code below: ```

{{scoreResp.quiz.description}}.

{{scoreResp.score.createdAt | date:'fullDate'}} - {{scoreResp.score.createdAt | date:'shortTime'}}

``` In this template, all the returned scores are iterated over and added to the page. If the user has no previous scores, a **“No scores”** message is displayed on the page. To style the template, add this to **src/app/features/quiz/pages/scores/scores.component.css**: ``` .score { min-width: 35vw; } ``` Here’s a screenshot of the scores page with a logged-in user’s scores: ![Screenshot of the Scores Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643968365146_Screen+Shot+2022-02-04+at+12.52.24+PM.png) Here’s a screenshot of the message displayed if the user has no past scores: ![Screenshot of “No Scores” Message on Scores Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643968574669_Screen+Shot+2022-02-04+at+12.55.30+PM.png) ## C. Core module There is only one page in the Core module, the **not-found** page, and it was already present in the initial version of the app. 1. Not Found Component Now that the new `MessageComponent` exists, you can take advantage of it to simplify how the not-found page displays its message. Replace the content of the **src/app/core/pages/not-found/not-found.component.html** template with: ``` ``` Here’s a screenshot of this page: ![Screenshot of Not Found Page](https://paper-attachments.dropbox.com/s_B35DEAB09BEB8851728F960D70BA599694F6464A3B846F9CAB3DB7A3DBFDFDD9_1643969258146_Screen+Shot+2022-02-04+at+1.07.10+PM.png) # Step 8 - Add Routes for New Pages, Update Module Options, and Place Finishing Touches In this step, you will add routes for the new pages you created in **step 7**. You will also update module options like imports and exports. Lastly, you will put finishing touches on the app like updating `AppComponent`. ## A. Core Module Since the `ToastComponent`, and `MessageComponent` are used in other modules, you’ll need to export them from the `CoreModule` by including them in `CoreModule`'s `exports` option. In the **src/app/core/core.module.ts** file, import the `ToastComponent` and `MessageComponent` and add them to the `exports` option as highlighted below. You’ll also need to add `NgbModule` to the `imports` option because the `ToastComponent` relies on it to display toast messages. ``` import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { ToastComponent } from './components/toast/toast.component'; import { MessageComponent } from './components/message/message.component'; @NgModule({ declarations: [ HeaderComponent, NotFoundComponent, TitleComponent, ToastComponent, MessageComponent ], imports: [ CommonModule, RouterModule, NgbModule ], exports: [ HeaderComponent, NotFoundComponent, TitleComponent, ToastComponent, MessageComponent ] }) export class CoreModule { } ``` ## B. Auth Module This module is missing some imports that its components rely on. The login and signup pages use form controls, validators, and form groups from the `ReactiveModule`. These pages also use the `TitleComponent` from the `CoreModule` to show page titles. So you’ll have to include those in the **src/app/features/auth/auth.module.ts** file. Add the highlighted parts to the aforementioned file. ``` import { ReactiveFormsModule } from '@angular/forms'; import { CoreModule } from 'src/app/core/core.module'; @NgModule({ declarations: [ LoginComponent, SignupComponent], imports: [ CommonModule, AuthRoutingModule, ReactiveFormsModule, CoreModule ] }) export class AuthModule { } ``` ## C. The Auth-Routing Module To set up routes for the login and signup pages, you’ll have to add them in the `AuthRoutingModule` . Replace the content of the **src/app/features/auth/auth-routing.module.t**s file with the code below. ``` import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { SignupGuard } from 'src/app/core/guards/signup.guard'; import { LoginComponent } from './pages/login/login.component'; import { SignupComponent } from './pages/signup/signup.component'; const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'signup', canActivate: [SignupGuard], component: SignupComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class AuthRoutingModule { } ``` The highlighted portions are the changes that were made to the file. The login page is available at the `/login` path and the signup page at the `/signup` path. These are just the latter parts of the paths for the auth pages. An `/auth` prefix is added in a later section. The signup page uses the `SignupGuard` to deny access to the page to authenticated users. ## D. The Quiz Module Since the `TitleComponent` was moved to the `CoreModule`, it is no longer accessible to the `QuizModule`. So, you’ll have to add the `CoreModule` to `QuizModule`’s imports. Add the highlighted snippets below to the **src/app/features/quiz/quiz.module.ts** file. ``` import { CoreModule } from 'src/app/core/core.module'; @NgModule({ declarations: [ QuestionComponent, QuizzesComponent, QuizComponent, ScoreComponent, ScoresComponent], imports: [ CommonModule, QuizRoutingModule, NgbModule, ReactiveFormsModule, CoreModule ] }) export class QuizModule { } ``` ## E. The Quiz-Routing Module We need to add some routes to `QuizRoutingModule` and modifications to some existing routes. The new and modified routes include: - `/quizzes/{id}` for the `QuizComponent`. This changed from `/quiz/{id}` to better conform to REST resource naming conventions. - `/quizzes/{id}/score` for the `ScoreComponent` used when creating new scores after taking a quiz. This changes from `quiz/{id}/score` for the same reason supplied above. - `/scores/{id}` for the `ScoreComponent` to show a saved score from a past quiz attempt. This is a new route. - `/scores` for the `ScoresComponent` to display all of a user’s past scores. This is also a new route. All the routes are protected from unauthenticated user access using the `LogggedInGuard`. This is because you need a user to create and fetch scores. Add the highlighted portions to the **src/app/features/quiz/quiz-routing.module.ts** file: ``` import { ScoresComponent } from './pages/scores/scores.component'; import { LoggedInGuard } from 'src/app/core/guards/logged-in.guard'; const routes: Routes = [ { path: '', component: QuizzesComponent }, { path: 'quizzes', canActivate: [LoggedInGuard], children: [ { path: ':id', component: QuizComponent }, { path: ':id/score', component: ScoreComponent } ] }, { path: 'scores', canActivate: [LoggedInGuard], children: [ { path: '', component: ScoresComponent }, { path: ':id', component: ScoreComponent } ] } ]; ``` ## F. App-Routing Module The last route you have to add to the app is for the `AuthModule`. It should be available at the `/auth/` path. In the **src/app/app-routing.module.ts** file, add the highlighted portions. ``` const routes: Routes = [ { path: 'auth', loadChildren: () => import('./features/auth/auth.module').then(m => m.AuthModule) }, { path: '', loadChildren: () => import('./features/quiz/quiz.module').then(m => m.QuizModule) }, { path: '404', component: NotFoundComponent }, { path: '**', component: NotFoundComponent } ]; ``` ## G. App Component One last finishing touch you have to make to the app is adding the `ToastComponent` to `AppComponent`. It helps to display toast messages on all the app’s pages. Add the highlighted code snippet below to the **src/app/component/app.component.html** file. ```

``` To position the toast component so that it does not obstruct the header, add this styling to the **src/app/component/app.component.css** file. ``` .toast-msg { margin-top: 4rem; } ``` # Step 9 - Run the App Before you can run the Angular app, ensure that the Strapi app you created in **part 1** is running. You can start it using the command below on your terminal within the `strapi-quiz-app` directory. ``` npm run develop ``` To run the Angular app, navigate to its root directory and run the command below: ``` ng serve ``` The quiz app will be available at http://localhost:4200. [Here’s a video showing your finished app in action.](https://youtu.be/ZPFLyTlFNE4) # Conclusion In this tutorial, you updated the quiz app from the initial [“](https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular)[**Build a Quiz App using a Strapi API with Angular**](https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular)[”](https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular) tutorial from Angular 11 to 13. You added new user, score, and answer data models to match the Strapi v4 content types created in **part 1**. Additionally, you created new services to interface with and modified data from the Strapi Score API built in **part 1** as well. You then added services to handle authentication using Strapi. New support components like a toasts component were added. Other components like the header were modified to include login, signup, and profile buttons. Several new pages like the **Scores, Login,** and **Signup** pages were built, and routes were added for them on the app. Suppose you’d like to further build on the app. In that case, you can add proper **User Profile** pages where users can modify their information, change passwords, delete their accounts, etc. You can also extend the **Scores** page so users can delete past scores. You can find the source code for this tutorial on [this GitHub repository](https://github.com/zaracooper/quiz-app) [under the feat-scores branch](https://github.com/zaracooper/quiz-app/tree/feat-scores). [The](https://github.com/zaracooper/quiz-app/commits/tut-feat-scores) `[tut-feat-scores](https://github.com/zaracooper/quiz-app/commits/tut-feat-scores)` [branch](https://github.com/zaracooper/quiz-app/commits/tut-feat-scores) has commits that correspond to each step in this tutorial. To learn more about Strapi and its other superior features, check out [the Strapi website](https://strapi.io/) and [the Strapi documentation and resources site for v4](https://strapi.io/resource-center).

QuizApp

{{avatarInitial | uppercase}}

{{message}}

{{quiz.title}}

This quiz has no questions.

{{scoreResp.score.createdAt | date:'fullDate'}} - {{scoreResp.score.createdAt | date:'shortTime'}}

You scored:

{{scoreResp.scoreTotal}}/{{scoreResp.questionCount}}

{{scoreResp.scoreTotal}}/{{scoreResp.questionCount}}

Your answers:

{{scoreResp.quiz.title}}

{{scoreResp.scoreTotal+'/'+scoreResp.questionCount}}