fix: use modal for Numbas and enable authentication

src/app/ajs-upgraded-providers.ts

@@ -20,6 +20,7 @@ export const rootScope = new InjectionToken('$rootScope');
 export const calendarModal = new InjectionToken('CalendarModal');
 export const aboutDoubtfireModal = new InjectionToken('AboutDoubtfireModal');
 export const plagiarismReportModal = new InjectionToken('PlagiarismReportModal');
+export const numbasModal = new InjectionToken('NumbasModal');
 
 // Define a provider for the above injection token...
 // It will get the service from AngularJS via the factory
@@ -130,3 +131,9 @@ export const UnitStudentEnrolmentModalProvider = {
   useFactory: (i) => i.get('UnitStudentEnrolmentModal'),
   deps: ['$injector'],
 };
+
+export const numbasModalProvider = {
+  provide: numbasModal,
+  useFactory: (i) => i.get('NumbasModal'),
+  deps: ['$injector'],
+};

src/app/common/numbas-component/numbas-component.component.html

@@ -1,3 +1,4 @@
-<button class="btn btn-default" (click)="launchNumbasTest()">
-  <i class="fa fa-check-square-o"></i> Launch Numbas Test
-</button>
+<div mat-dialog-content>
+  <iframe [src]="iframeSrc"></iframe>
+  <button mat-dialog-close mat-stroked-button color="warn" (click)="removeNumbasTest()">Exit</button>
+</div>

src/app/common/numbas-component/numbas-component.component.scss

@@ -0,0 +1,17 @@
+.mat-dialog-content {
+  position: relative;
+}
+
+iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 95%;
+}
+
+button {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+}

src/app/common/numbas-component/numbas-component.component.ts

@@ -1,7 +1,11 @@
-import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Task } from 'src/app/api/models/task';
 import { NumbasLmsService } from 'src/app/api/services/numbas-lms.service';
-import { NumbasService } from 'src/app/api/services/numbas.service';
+import { UserService } from 'src/app/api/services/user.service';
+import { AppInjector } from 'src/app/app-injector';
+import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
 
 declare global {
   interface Window { API_1484_11: any; }
@@ -10,20 +14,29 @@ declare global {
 @Component({
   selector: 'f-numbas-component',
   templateUrl: './numbas-component.component.html',
-  styleUrls: ['numbas-component.component.scss'],
+  styleUrls: ['./numbas-component.component.scss'],
 })
-export class NumbasComponent implements OnInit, OnChanges {
-  @Input() task: Task;
-
+export class NumbasComponent implements OnInit {
+  task: Task;
   currentMode: 'attempt' | 'review' = 'attempt';
+  iframeSrc: SafeResourceUrl;
 
   constructor(
-    private numbasService: NumbasService,
+    private dialogRef: MatDialogRef<NumbasComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { task: Task, mode: 'attempt' | 'review' },
     private lmsService: NumbasLmsService,
+    private userService: UserService,
+    private sanitizer: DomSanitizer
   ) {}
 
   ngOnInit(): void {
-    this.interceptIframeRequests();
+    this.task = this.data.task;
+    this.lmsService.setTask(this.task);
+
+    this.currentMode = this.data.mode;
+
+    const user = this.userService.currentUser;
+    this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(`${AppInjector.get(DoubtfireConstants).API_URL}/numbas_api/${this.task.taskDefId}/${user.authenticationToken}/${user.username}/index.html`);
 
     window.API_1484_11 = {
       Initialize: () => this.lmsService.Initialize(this.currentMode),
@@ -37,50 +50,7 @@ export class NumbasComponent implements OnInit, OnChanges {
     };
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.task) {
-      this.task = changes.task.currentValue;
-      this.lmsService.setTask(this.task);
-    }
-  }
-
-  launchNumbasTest(mode: 'attempt' | 'review' = 'attempt'): void {
-    this.currentMode = mode;
-
-    const iframe = document.createElement('iframe');
-    iframe.src = `http://localhost:3000/api/numbas_api/${this.task.taskDefId}/index.html`;
-
-    iframe.style.position = 'fixed';
-    iframe.style.top = '0';
-    iframe.style.left = '0';
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    iframe.style.zIndex = '9999';
-
-    document.body.appendChild(iframe);
-  }
-
-  interceptIframeRequests(): void {
-    const originalOpen = XMLHttpRequest.prototype.open;
-    const numbasService = this.numbasService;
-    const taskDefId = this.task.taskDefId;
-    XMLHttpRequest.prototype.open = function (this: XMLHttpRequest, method: string, url: string | URL, async: boolean = true, username?: string | null, password?: string | null) {
-      if (typeof url === 'string' && url.startsWith('/api/numbas_api/')) {
-        const resourcePath = url.replace('/api/numbas_api/', '');
-        this.abort();
-        numbasService.fetchResource(taskDefId, resourcePath).subscribe(
-          (resourceData) => {
-            if (this.onload) {
-              this.onload.call(this, resourceData);
-            }
-          },
-          (error) => {
-            console.error('Error fetching Numbas resource:', error);
-          }
-        );
-      } else {
-        originalOpen.call(this, method, url, async, username, password);
-      }
-    };
+  removeNumbasTest(): void {
+    this.dialogRef.close();
   }
 }

src/app/common/numbas-component/numbas-modal.component.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { NumbasComponent } from './numbas-component.component';
+import { Task } from 'src/app/api/models/task';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NumbasModal {
+  constructor(public dialog: MatDialog) { }
+
+  public show(task: Task, mode: 'attempt' | 'review'): void {
+    let dialogRef: MatDialogRef<NumbasComponent, any>;
+
+    dialogRef = this.dialog.open(NumbasComponent, {
+      data: { task, mode },
+      width: '95%', height: '90%'
+    });
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -231,7 +231,7 @@ import { FTaskDetailsViewComponent } from './units/states/tasks/viewer/directive
 import { FTaskSheetViewComponent } from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
 import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-viewer.component';
 import { NumbasComponent } from './common/numbas-component/numbas-component.component';
-import { NumbasService } from './api/services/numbas.service';
+import { NumbasModal } from './common/numbas-component/numbas-modal.component';
 import { NumbasLmsService } from './api/services/numbas-lms.service';
 
 @NgModule({
@@ -466,7 +466,7 @@ import { NumbasLmsService } from './api/services/numbas-lms.service';
     TasksForInboxSearchPipe,
     IsActiveUnitRole,
     CreateNewUnitModal,
-    NumbasService,
+    NumbasModal,
     NumbasLmsService,
   ],
 })

src/app/doubtfire-angularjs.module.ts

@@ -242,6 +242,7 @@ import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-vi
 
 import { FUnitsComponent } from './admin/states/f-units/f-units.component';
 import { NumbasComponent } from './common/numbas-component/numbas-component.component';
+import { NumbasModal } from './common/numbas-component/numbas-modal.component';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -292,6 +293,7 @@ DoubtfireAngularJSModule.factory('GlobalStateService', downgradeInjectable(Globa
 DoubtfireAngularJSModule.factory('TransitionHooksService', downgradeInjectable(TransitionHooksService));
 DoubtfireAngularJSModule.factory('EditProfileService', downgradeInjectable(EditProfileDialogService));
 DoubtfireAngularJSModule.factory('CreateNewUnitModal', downgradeInjectable(CreateNewUnitModal));
+DoubtfireAngularJSModule.factory('NumbasModal', downgradeInjectable(NumbasModal));
 
 // directive -> component
 DoubtfireAngularJSModule.directive(

src/app/tasks/modals/upload-submission-modal/upload-submission-modal.coffee

@@ -32,7 +32,7 @@ angular.module('doubtfire.tasks.modals.upload-submission-modal', [])
 
   UploadSubmissionModal
 )
-.controller('UploadSubmissionModalCtrl', ($scope, $rootScope, $timeout, $modalInstance, newTaskService, newProjectService, task, reuploadEvidence, alertService, outcomeService, PrivacyPolicy) ->
+.controller('UploadSubmissionModalCtrl', ($scope, $rootScope, $timeout, $modalInstance, NumbasModal, newTaskService, newProjectService, task, reuploadEvidence, alertService, outcomeService, PrivacyPolicy) ->
   $scope.privacyPolicy = PrivacyPolicy
   # Expose task to scope
   $scope.task = task
@@ -155,6 +155,9 @@ angular.module('doubtfire.tasks.modals.upload-submission-modal', [])
     previous: states.previous
   }
 
+  $scope.launchNumbasDialog = ->
+    NumbasModal.show $scope.task, 'attempt'
+
   # Whether or not we should disable this button
   $scope.shouldDisableBtn = {
     next: ->

src/app/tasks/modals/upload-submission-modal/upload-submission-modal.tpl.html

@@ -52,12 +52,14 @@ <h4>
           <h4>
             Attempt Numbas Test
           </h4>
-          <span ng-hide="submissionType == 'need_help'">
+          <span>
             Complete the Numbas test first to proceed to upload evidence of your task completion.
           </span>
         </div>
         <div class="card-body">
-          <f-numbas-component [task]="task"></f-numbas-component>
+          <button class="btn btn-default" ng-click="launchNumbasDialog(); $dismiss()">
+            <i class="fa fa-check-square-o"></i> Launch Numbas Test
+          </button>
         </div>
       </div>
     </div>