Refactored language files to break out reports and tutorial

CSETWebNg/src/app/app.module.ts

@@ -630,6 +630,7 @@ import { OtherRemarksComponent } from './assessment/questions/other-remarks/othe
 import { CmuOtherRemarksComponent } from './reports/cmu/cmu-other-remarks/cmu-other-remarks.component';
 import { TranslocoRootModule } from './transloco-root.module';
 import { TranslocoService } from '@jsverse/transloco';
+import { provideTranslocoScope } from '@jsverse/transloco';
 import { UserLanguageComponent } from './dialogs/user-language/user-language.component';
 import { MalcolmUploadErrorComponent } from './dialogs/malcolm/malcolm-upload-error.component';
 import { FooterService } from './services/footer.service';
@@ -1323,8 +1324,10 @@ import { AnalyticsResultsComponent } from './assessment/results/analytics-result
         CodeEditorModule.forRoot({
             typingsWorkerUrl: 'assets/workers/typings-worker.js',
             baseUrl: 'assets/monaco'
-        })], providers: [
+        })], 
+        providers: [
         TranslocoService,
+        provideTranslocoScope('tutorial', 'reports'),
         ConfigService,
         AuthenticationService,
         {

CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cmmc2/tutorial-cmmc2.component.html

@@ -21,7 +21,7 @@
   SOFTWARE.
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-  *transloco="let t; read: 'tutorials.cmmc2'">
+  *transloco="let t; read: 'tutorial.cmmc2'">
   <h3 class="wrap-text mb-3">{{t('title')}}</h3>
 
   <div>

CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cpg/tutorial-cpg.component.html

@@ -21,101 +21,101 @@
   SOFTWARE.
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-    *transloco="let t; read: 'tutorials.cpg'">
-    <h3 class="wrap-text mb-3">{{t('title')}}</h3>
-    <div *transloco="let k">
-        <h5 >{{k('titles.overview')}}</h5>
-        <p>{{t('1')}}</p>
+    *transloco="let ttcpg; read: 'tutorial.cpg'">
+    <h3 class="wrap-text mb-3">{{ttcpg('title')}}</h3>
+    <div *transloco="let t">
+        <h5 >{{t('titles.overview')}}</h5>
+        <p>{{ttcpg('1')}}</p>
 
-        <p>{{t('2')}}</p>
+        <p>{{ttcpg('2')}}</p>
 
-        <h5 >{{k('titles.assessment')}}</h5>
-        <p>{{t('3')}}</p>
+        <h5 >{{t('titles.assessment')}}</h5>
+        <p>{{ttcpg('3')}}</p>
         <ul>
-            <li>{{t('3a')}}</li>
-            <li>{{t('3b')}}</li>
-            <li>{{t('3c')}}</li>
-            <li>{{t('3d')}}</li>
-            <li>{{t('3e')}}</li>
+            <li>{{ttcpg('3a')}}</li>
+            <li>{{ttcpg('3b')}}</li>
+            <li>{{ttcpg('3c')}}</li>
+            <li>{{ttcpg('3d')}}</li>
+            <li>{{ttcpg('3e')}}</li>
         </ul>
 
-        <p>{{t('4')}}</p>
+        <p>{{ttcpg('4')}}</p>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture1.png" style="width: 550px">
         </div>
 
-        <h6>{{k('tutorials.function')}}</h6>
+        <h6>{{t('tutorial.function')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture2.png" style="width: 350px">
         </div>
-        <p>{{t('5')}}</p>
+        <p>{{ttcpg('5')}}</p>
 
-        <h6>{{k('tutorials.practice identifier')}}</h6>
+        <h6>{{t('tutorial.practice identifier')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture3.png" style="width: 60px">
         </div>
-        <p>{{t('6')}}</p>
+        <p>{{ttcpg('6')}}</p>
 
-        <h6>{{k('tutorials.security practice')}}</h6>
+        <h6>{{t('tutorial.security practice')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture4.png" style="width: 60px">
         </div>
-        <p>{{t('7')}}</p>
+        <p>{{ttcpg('7')}}</p>
 
-        <h6>{{k('tutorials.outcome')}}</h6>
+        <h6>{{t('tutorial.outcome')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture5.png" style="width: 250px">
         </div>
-        <p>{{t('8')}}</p>
+        <p>{{ttcpg('8')}}</p>
 
-        <h6>{{k('titles.cset icons')}}</h6>
+        <h6>{{t('titles.cset icons')}}</h6>
         <div class="img-frame">
             <img src="assets/images/icons/cset-icons.png" style="width: 300px">
         </div>
 
-        <p>{{t('9')}}</p>
+        <p>{{ttcpg('9')}}</p>
         <ul>
-            <li>{{t('9a')}}</li>
+            <li>{{ttcpg('9a')}}</li>
             <ul>
-                <li>{{t('9a1')}}</li>
+                <li>{{ttcpg('9a1')}}</li>
             </ul>
-            <li>{{t('9b')}}</li>
+            <li>{{ttcpg('9b')}}</li>
             <ul>
-                <li>{{t('9b1')}}</li>
+                <li>{{ttcpg('9b1')}}</li>
             </ul>
         </ul>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture6.png" style="width: 400px">
         </div>
-        <p>{{t('10')}}</p>
+        <p>{{ttcpg('10')}}</p>
         <ul>
-            <li>{{t('10a')}}</li>
+            <li>{{ttcpg('10a')}}</li>
             <ul>
-                <li>{{t('10a1')}}</li>
+                <li>{{ttcpg('10a1')}}</li>
             </ul>
-            <li>{{t('10b')}}</li>
+            <li>{{ttcpg('10b')}}</li>
             <ul>
-                <li>{{t('10b1')}}</li>
+                <li>{{ttcpg('10b1')}}</li>
             </ul>
         </ul>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture7.png" style="width: 400px">
         </div>
 
-        <h6>{{k('titles.answer buttons')}}</h6>
+        <h6>{{t('titles.answer buttons')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture8.png" style="width: 300px">
         </div>
-        <p>{{t('11')}}</p>
+        <p>{{ttcpg('11')}}</p>
         <ul>
-            <li><b>{{k('answer-options.labels.imp-cpg')}}</b> {{t('11a')}}</li>
-            <li><b>{{k('answer-options.labels.prog-cpg')}}</b> {{t('11b')}}</li>
-            <li><b>{{k('answer-options.labels.scoped-cpg')}}</b> {{t('11c')}}</li>
-            <li><b>{{k('answer-options.labels.not-cpg')}}</b> {{t('11d')}}</li>
+            <li><b>{{t('answer-options.labels.imp-cpg')}}</b> {{ttcpg('11a')}}</li>
+            <li><b>{{t('answer-options.labels.prog-cpg')}}</b> {{ttcpg('11b')}}</li>
+            <li><b>{{t('answer-options.labels.scoped-cpg')}}</b> {{ttcpg('11c')}}</li>
+            <li><b>{{t('answer-options.labels.not-cpg')}}</b> {{ttcpg('11d')}}</li>
         </ul>
-        <h5>{{k('titles.additional resources')}}</h5>
-        <p>{{k('tutorials.additional resources')}}</p>
-        <p>{{k('tutorials.please visit')}} <a href="https://www.cisa.gov/cpgs" target="_blank">https://www.cisa.gov/cpgs</a> {{k('tutorials.for more information')}}</p>
+        <h5>{{t('titles.additional resources')}}</h5>
+        <p>{{t('tutorial.additional resources')}}</p>
+        <p>{{t('tutorial.please visit')}} <a href="https://www.cisa.gov/cpgs" target="_blank">https://www.cisa.gov/cpgs</a> {{t('tutorial.for more information')}}</p>
     </div>
     <app-nav-back-next [page]="'tutorial-cpg'"></app-nav-back-next>
 </div>

CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cpg/tutorial-cpg.component.ts

@@ -24,6 +24,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { LayoutService } from '../../../../services/layout.service';
+import { TranslocoService } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-tutorial-cpg',
@@ -40,8 +41,11 @@ export class TutorialCpgComponent implements OnInit {
 
 
   constructor(
-    public layoutSvc: LayoutService
-  ) { }
+    public layoutSvc: LayoutService, 
+    public tSvc: TranslocoService
+  ) { 
+    //this.tSvc.load('tutorial').subscribe();
+  }
 
   ngOnInit(): void {
 

CSETWebNg/src/app/assessment/prepare/maturity/tutorial-mvra/tutorial-mvra.component.html

@@ -21,7 +21,7 @@
   SOFTWARE. 
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-    *transloco="let t; read: 'tutorials.mvra'">
+    *transloco="let t; read: 'tutorial.mvra'">
     <h3 class="wrap-text mb-3">{{t('title')}}</h3>
     <div *transloco="let k">
         <h5 >{{k('titles.overview')}}</h5>
@@ -35,11 +35,11 @@ <h5 >{{k('extras.scope')}}</h5>
 
         <p>{{t('4')}}</p>
 
-        <h5 >{{k('tutorials.critical service')}}</h5>
+        <h5 >{{k('tutorial.critical service')}}</h5>
 
         <p>{{t('5')}}</p>
 
-        <h5 >{{k('tutorials.asset types')}}</h5>
+        <h5 >{{k('tutorial.asset types')}}</h5>
 
         <p>{{t('6')}}</p>
         <ul>
@@ -77,13 +77,13 @@ <h6>{{k('titles.goal')}}</h6>
         </div>
         <p>{{t('11')}}</p>
 
-        <h6>{{k('tutorials.practice')}}</h6>
+        <h6>{{k('tutorial.practice')}}</h6>
         <div class="img-frame">
             <img src="assets/images/MVRA/tutorial/Picture4.png" style="width: 550px">
         </div>
         <p>{{t('12')}}</p>
 
-        <h6>{{k('tutorials.practice identifier')}}</h6>
+        <h6>{{k('tutorial.practice identifier')}}</h6>
         <div class="img-frame">
             <img src="assets/images/MVRA/tutorial/Picture5.png" style="width: 100px">
         </div>
@@ -118,7 +118,7 @@ <h6>{{k('titles.answer buttons')}}</h6>
 
         </ul>
         <h5>{{k('titles.additional resources')}}</h5>
-        <p>{{k('tutorials.additional resources')}}</p>
+        <p>{{k('tutorial.additional resources')}}</p>
 
     </div>
     <app-nav-back-next [page]="'tutorial-mvra'"></app-nav-back-next>

CSETWebNg/src/app/assessment/prepare/maturity/tutorial-rra/tutorial-rra.component.html

@@ -21,7 +21,7 @@
   SOFTWARE. 
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-    *transloco="let t; read: 'tutorials.rra'">
+    *transloco="let t; read: 'tutorial.rra'">
     <h3 class="wrap-text mb-3">{{t('title')}}</h3>
     <div *transloco="let k">
         <h5 >{{k('titles.overview')}}</h5>
@@ -62,7 +62,7 @@ <h6>{{k('titles.goal')}}</h6>
         </div>
 
         <p>{{t('8')}}</p>
-        <h6>{{k('tutorials.practice identifier')}}</h6>
+        <h6>{{k('tutorial.practice identifier')}}</h6>
 
         <div class="img-frame">
             <img src="assets/images/RRA/tutorial/Picture9.png" style="width: 100px">
@@ -98,8 +98,8 @@ <h6>{{k('titles.answer buttons')}}</h6>
             <li><b>{{k('answer-options.button-labels.no')}}</b> {{t('15b')}}</li>
         </ul>
         <h5>{{k('titles.additional resources')}}</h5>
-        <p>{{k('tutorials.additional resources')}}</p>
-        <p>{{k('tutorials.please visit')}} <a href ="https://www.cisa.gov/stopransomware">https://www.cisa.gov/stopransomware</a> {{k('tutorials.for more information')}}</p>
+        <p>{{k('tutorial.additional resources')}}</p>
+        <p>{{k('tutorial.please visit')}} <a href ="https://www.cisa.gov/stopransomware">https://www.cisa.gov/stopransomware</a> {{k('tutorial.for more information')}}</p>
     </div>
     <app-nav-back-next [page]="'tutorial-rra'"></app-nav-back-next>
 </div>

CSETWebNg/src/app/transloco-root.module.ts

@@ -1,13 +1,14 @@
 import { provideTransloco, TranslocoModule, Translation, TranslocoLoader } from '@jsverse/transloco';
 import { inject, Injectable, isDevMode, NgModule } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 
 @Injectable({ providedIn: 'root' })
 export class TranslocoHttpLoader implements TranslocoLoader {
   private http = inject(HttpClient);
 
-  getTranslation(lang: string) {
+  getTranslation(lang: string): Observable<any> {
     return this.http.get<Translation>(`assets/i18n/${lang}.json`);
   }
 }