fix: resolve merge conflicts

Author: nicoalee

src/app/pages/participant/error-page/error-page.component.html

@@ -0,0 +1,52 @@
+<div style="width: 100%; min-height: 100vh; padding: 4rem 0">
+    <div class="flex-column-center">
+        <div style="width: 50%">
+            <h6 style="font-size: 2rem; color: salmon" class="mb-4">We encountered an error.</h6>
+            <div style="font-size: 1.5rem; line-height: normal" class="mb-4">
+                While running the task, we ran into an error. In order to report this and help us fix it as fast as
+                possible, please do the following:
+            </div>
+            <div class="steps-container">
+                <div class="number-container text">1</div>
+                <div class="content-container">
+                    <span class="my-3" style="font-size: 1.5rem; line-height: normal">
+                        The task information and error is displayed below. Please click the
+                        <span style="color: #3f51b5">Copy Error</span> button to copy it to your clipboard.
+                    </span>
+                    <div style="background-color: rgb(233, 233, 233); padding: 1rem; border-radius: 8px">
+                        <div style="text-align: start" class="mb-2">
+                            <button mat-flat-button [cdkCopyToClipboard]="copyableErrString" color="primary">
+                                <span>Copy Error</span>
+                                <mat-icon class="ml-3">content_copy</mat-icon>
+                            </button>
+                        </div>
+                        <div style="color: salmon; max-height: 200px; overflow-y: auto; white-space: pre-line">
+                            {{ copyableErrString }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="steps-container">
+                <div class="number-container text">2</div>
+                <div class="content-container">
+                    <span class="my-2" style="font-size: 1.5rem; line-height: normal">
+                        Paste the error into an email and send it to
+                        <a href="mailto:[email protected]">sharplab.neuro&#64;mcgill.ca</a>
+                    </span>
+                </div>
+            </div>
+            <div class="steps-container">
+                <div class="number-container text">3</div>
+                <div class="content-container">
+                    <span class="my-2" style="font-size: 1.5rem; line-height: normal"> Go back to the main menu.</span>
+                    <span style="font-size: 1.5rem; line-height: normal">
+                        Thank for your participation and your assistance!
+                    </span>
+                    <div class="mt-2">
+                        <button mat-flat-button color="primary" (click)="navigateToMain()">Back to main menu</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/participant/error-page/error-page.component.scss

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { SessionStorageService } from '../../../services/sessionStorage.service';
+import { SnackbarService } from '../../../services/snackbar/snackbar.service';
+import { Role } from 'src/app/models/enums';
+import { UserStateService } from 'src/app/services/user-state-service';
+
+export interface IErrorNavigationState {
+    studyId?: number;
+    taskIndex?: number;
+    stackTrace?: string;
+    userId?: string;
+}
+
+@Component({
+    selector: 'app-error-page',
+    templateUrl: './error-page.component.html',
+    styleUrls: ['./error-page.component.scss', '../final-page/final-page.component.scss'],
+})
+export class ErrorPageComponent implements OnInit {
+    constructor(
+        private _snackbar: SnackbarService,
+        private _router: Router,
+        private _sessionStorage: SessionStorageService,
+        private _userStateService: UserStateService
+    ) {
+        const params = this._router.getCurrentNavigation()?.extras?.state as IErrorNavigationState;
+        this.copyableErrString = `User ID: ${params?.userId}\nStudy ID: ${params?.studyId}\nTask Index: ${params?.taskIndex}\n\n${params?.stackTrace}`;
+        this.copyableErrString = this.copyableErrString.trim();
+    }
+
+    copyableErrString: string = '';
+
+    ngOnInit(): void {}
+
+    navigateToMain() {
+        if (this._userStateService.isCrowdsourcedUser) {
+            if (this._userStateService.currentlyRunningStudyId) {
+                this._router.navigateByUrl(
+                    `crowdsource-participant?studyid=${this._userStateService.currentlyRunningStudyId}`
+                );
+            } else {
+                this._router.navigate([`crowdsource-participant`]);
+            }
+        } else if (this._userStateService.userIsAdmin) {
+            this._router.navigate([`admin-dashboard`]);
+        } else if (this._userStateService.userIsParticipant) {
+            this._router.navigate([`participant-dashboard`]);
+        } else if (this._userStateService.userIsGuest || this._userStateService.userIsOrgMember) {
+            this._router.navigate([`organization-member-dashboard`]);
+        } else {
+            throw new Error('Unsupported user role!');
+        }
+    }
+}

src/app/pages/participant/error-page/error-page.component.ts

@@ -11,12 +11,14 @@ import { FinalPageComponent } from './final-page/final-page.component';
 import { ConsentDialogComponent } from './participant-dashboard/participant-studies/consent-dialog/consent-dialog.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { LanguageDialogComponent } from './participant-dashboard/language-dialog/language-dialog.component';
+import { ErrorPageComponent } from './error-page/error-page.component';
 
 @NgModule({
     declarations: [
         ParticipantDashboardComponent,
         ParticipantStudiesComponent,
         FinalPageComponent,
+        ErrorPageComponent,
         ConsentDialogComponent,
         LanguageDialogComponent,
     ],

src/app/pages/participant/participant.module.ts

@@ -41,6 +41,10 @@ const routes: Routes = [
         path: 'playtask',
         component: TaskPlayerComponent,
     },
+    {
+        path: 'error',
+        component: ErrorPageComponent,
+    },
     {
         path: 'studies',
         children: [