Implemented a simpler fix for just Cancel

This solution does not fix the problem when using the Back button. Maybe we don't care?

Author: josephmyers

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-usfm-format/draft-usfm-format.component.html

@@ -58,7 +58,7 @@ <h1>{{ t("formatting_options") }}</h1>
       </form>
 
       <div class="actions">
-        <button mat-button class="back" (click)="close()"><mat-icon>close</mat-icon>{{ t("cancel") }}</button>
+        <button mat-button class="back" (click)="cancelClicked()"><mat-icon>close</mat-icon>{{ t("cancel") }}</button>
         <div class="save-container">
           <div class="progress" [class.saving]="saving">
             <mat-spinner diameter="24"></mat-spinner>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-usfm-format/draft-usfm-format.component.ts

@@ -197,6 +197,11 @@ export class DraftUsfmFormatComponent extends DataLoadingComponent implements Af
     this.reloadText();
   }
 
+  async cancelClicked(): Promise<void> {
+    if (!(await this.confirmLeave())) return;
+    this.close();
+  }
+
   close(): void {
     this.location.back();
   }