General: Warn users again before reloading certain pages with unsaved changes

src/main/webapp/app/admin/standardized-competencies/standardized-competency-management.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, inject } from '@angular/core';
 import { faChevronRight, faDownLeftAndUpRightToCenter, faEye, faFileExport, faFileImport, faPlus, faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons';
 import {
     KnowledgeAreaDTO,
@@ -595,4 +595,18 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
     get canDeactivateWarning(): string {
         return this.translateService.instant('pendingChanges');
     }
+
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.canDeactivateWarning;
+        }
+        return true;
+    }
 }

src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, HostListener, OnInit, ViewChild, inject } from '@angular/core';
 import { CompetencyService } from 'app/course/competencies/competency.service';
 import { AlertService } from 'app/core/util/alert.service';
 import { onError } from 'app/shared/util/global.utils';
@@ -246,4 +246,18 @@ export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeacti
     get canDeactivateWarning(): string {
         return this.translateService.instant('pendingChanges');
     }
+
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.canDeactivateWarning;
+        }
+        return true;
+    }
 }

src/main/webapp/app/course/competencies/import-standardized-competencies/course-import-standardized-course-competencies.component.ts

@@ -10,7 +10,7 @@ import {
 } from 'app/entities/competency/standardized-competency.model';
 import { faBan, faDownLeftAndUpRightToCenter, faFileImport, faSort, faTrash, faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import { onError } from 'app/shared/util/global.utils';
 import { forkJoin, map } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -178,4 +178,18 @@ export abstract class CourseImportStandardizedCourseCompetenciesComponent extend
         const competencyForTree: StandardizedCompetencyForImport = { ...competencyDTO, isVisible: isVisible, knowledgeAreaTitle: knowledgeAreaTitle, selected: selected };
         return competencyForTree;
     }
+
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.canDeactivateWarning;
+        }
+        return true;
+    }
 }

src/main/webapp/app/course/competencies/import/import-course-competencies.component.ts

@@ -4,7 +4,7 @@ import { CourseCompetency, CourseCompetencyType } from 'app/entities/competency.
 import { AlertService } from 'app/core/util/alert.service';
 import { SortService } from 'app/shared/service/sort.service';
 import { onError } from 'app/shared/util/global.utils';
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import { faBan, faFileImport, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { ButtonType } from 'app/shared/components/button.component';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -206,4 +206,18 @@ export abstract class ImportCourseCompetenciesComponent implements OnInit, Compo
     get canDeactivateWarning(): string {
         return this.translateService.instant('pendingChanges');
     }
+
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.canDeactivateWarning;
+        }
+        return true;
+    }
 }

src/main/webapp/app/exam/participate/exam-participation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, QueryList, ViewChildren, inject } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, QueryList, ViewChildren, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { WebsocketService } from 'app/core/websocket/websocket.service';
 import { ExamParticipationService } from 'app/exam/participate/exam-participation.service';
@@ -264,6 +264,20 @@ export class ExamParticipationComponent implements OnInit, OnDestroy, ComponentC
         });
     }
 
+    /**
+     * Make sure to warn the user before leaving (or reloading) the page in exam mode
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    beforeUnloadHandler(event: BeforeUnloadEvent) {
+        if (this.examStartConfirmed && !this.isOver()) {
+            event.preventDefault();
+            return this.translateService.instant('artemisApp.examParticipation.reloadWarning');
+        }
+        return true;
+    }
+
     loadAndDisplaySummary() {
         this.examParticipationService.loadStudentExamWithExercisesForSummary(this.courseId, this.examId, this.studentExam.id!).subscribe({
             next: (studentExamWithExercises: StudentExam) => {

src/main/webapp/app/exercises/modeling/participate/modeling-submission.component.ts

@@ -1,5 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, HostListener, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Patch, Selection, UMLDiagramType, UMLElementType, UMLModel, UMLRelationshipType } from '@ls1intum/apollon';
 import { WebsocketService } from 'app/core/websocket/websocket.service';
@@ -57,6 +57,7 @@ import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 import { captureException } from '@sentry/angular';
 import { RatingComponent } from 'app/exercises/shared/rating/rating.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'jhi-modeling-submission',
@@ -95,6 +96,7 @@ export class ModelingSubmissionComponent implements OnInit, OnDestroy, Component
     private participationWebsocketService = inject(ParticipationWebsocketService);
     private guidedTourService = inject(GuidedTourService);
     private accountService = inject(AccountService);
+    private translateService = inject(TranslateService);
 
     readonly addParticipationToResult = addParticipationToResult;
     readonly buildFeedbackTextForReview = buildFeedbackTextForReview;
@@ -829,6 +831,20 @@ export class ModelingSubmissionComponent implements OnInit, OnDestroy, Component
         return !this.modelHasUnsavedChanges(model) && explanationIsUpToDate;
     }
 
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.translateService.instant('pendingChanges');
+        }
+        return true;
+    }
+
     /**
      * Checks whether there are pending changes in the current model. Returns true if there are unsaved changes, false otherwise.
      */

src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, inject } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges, ViewChild, inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { isEmpty as _isEmpty, fromPairs, toPairs, uniq } from 'lodash-es';
 import { CodeEditorFileService } from 'app/exercises/programming/shared/code-editor/service/code-editor-file.service';
@@ -25,6 +25,7 @@ import { Course } from 'app/entities/course.model';
 import { ConnectionError } from 'app/exercises/programming/shared/code-editor/service/code-editor-repository.service';
 import { Annotation, CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { KeysPipe } from 'app/shared/pipes/keys.pipe';
+import { ComponentCanDeactivate } from 'app/shared/guard/can-deactivate.model';
 
 export enum CollapsableCodeEditorElement {
     FileBrowser,
@@ -46,7 +47,7 @@ export enum CollapsableCodeEditorElement {
         KeysPipe,
     ],
 })
-export class CodeEditorContainerComponent implements OnChanges {
+export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeactivate {
     private translateService = inject(TranslateService);
     private alertService = inject(AlertService);
     private fileService = inject(CodeEditorFileService);
@@ -300,4 +301,25 @@ export class CodeEditorContainerComponent implements OnChanges {
         this.annotations = annotations;
         this.errorFiles = uniq(annotations.filter((a) => a.type === 'error').map((a) => a.fileName));
     }
+
+    /**
+     * The user will be warned if there are unsaved changes when trying to leave the code-editor.
+     */
+    canDeactivate() {
+        return _isEmpty(this.unsavedFiles);
+    }
+
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.translateService.instant('pendingChanges');
+        }
+        return true;
+    }
 }

src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnChanges, OnInit, SimpleChanges, ViewChild, ViewEncapsulation, inject } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnChanges, OnInit, SimpleChanges, ViewChild, ViewEncapsulation, inject } from '@angular/core';
 import { DifficultyPickerComponent } from 'app/exercises/shared/difficulty-picker/difficulty-picker.component';
 import { ExerciseTitleChannelNameComponent } from 'app/exercises/shared/exercise-title-channel-name/exercise-title-channel-name.component';
 import { IncludedInOverallScorePickerComponent } from 'app/exercises/shared/included-in-overall-score-picker/included-in-overall-score-picker.component';
@@ -375,6 +375,20 @@ export class QuizExerciseUpdateComponent extends QuizExerciseValidationDirective
         return !this.pendingChangesCache;
     }
 
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.translateService.instant('pendingChanges');
+        }
+        return true;
+    }
+
     /**
      * @desc Callback for datepicker to decide whether given date should be disabled
      * All dates which are in the past (< today) are disabled

src/main/webapp/app/exercises/text/participate/text-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject, input } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
 import { AlertService } from 'app/core/util/alert.service';
@@ -51,6 +51,7 @@ import { UpperCasePipe } from '@angular/common';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 import { onTextEditorTab } from 'app/utils/text.utils';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'jhi-text-editor',
@@ -89,6 +90,7 @@ export class TextEditorComponent implements OnInit, OnDestroy, ComponentCanDeact
     private accountService = inject(AccountService);
     private profileService = inject(ProfileService);
     private irisSettingsService = inject(IrisSettingsService);
+    private translateService = inject(TranslateService);
 
     readonly ButtonType = ButtonType;
     readonly MAX_CHARACTER_COUNT = MAX_SUBMISSION_TEXT_LENGTH;
@@ -376,6 +378,20 @@ export class TextEditorComponent implements OnInit, OnDestroy, ComponentCanDeact
         return this.submission.text === this.answer;
     }
 
+    /**
+     * Displays the alert for confirming refreshing or closing the page if there are unsaved changes
+     * NOTE: while the beforeunload event might be deprecated in the future, it is currently the only way to display a confirmation dialog when the user tries to leave the page
+     * @param event the beforeunload event
+     */
+    @HostListener('window:beforeunload', ['$event'])
+    unloadNotification(event: BeforeUnloadEvent) {
+        if (!this.canDeactivate()) {
+            event.preventDefault();
+            return this.translateService.instant('pendingChanges');
+        }
+        return true;
+    }
+
     submit() {
         if (this.isSaving) {
             return;

src/main/webapp/i18n/de/exam.json

@@ -340,7 +340,8 @@
                 "button": "Zusammenfassung der Klausur anzeigen{{ countdown }}"
             },
             "saveExercise": "Aufgabe speichern",
-            "exerciseSaved": "Aufgabe gespeichert"
+            "exerciseSaved": "Aufgabe gespeichert",
+            "reloadWarning": "Durch das Neuladen der Seite gehen alle ungespeicherten Änderungen verloren. Bist du sicher, dass du die Seite neu laden möchtest?"
         },
         "exerciseGroup": {
             "created": "Neue Aufgabengruppe erstellt",

src/main/webapp/i18n/en/exam.json

@@ -340,7 +340,8 @@
                 "button": "Show exam summary{{countdown}}"
             },
             "saveExercise": "Save exercise",
-            "exerciseSaved": "Exercise saved"
+            "exerciseSaved": "Exercise saved",
+            "reloadWarning": "You are about to reload the page. All unsaved changes will be lost. Are you sure you want to continue?"
         },
         "exerciseGroup": {
             "created": "New exercise group created",