More styling fixes

CSETWebNg/src/app/assessment/diagram/diagram-inventory/components/diagram-components.component.ts

@@ -87,14 +87,18 @@ export class DiagramComponentsComponent implements OnInit {
    * can build SELECT controls for Asset Type.
    */
   getSymbols() {
-    this.diagramSvc.getSymbols().subscribe((g: any) => {
+    this.diagramSvc.getSymbols().subscribe((g: any[]) => {
       this.symbols = [];
+
       g.forEach(gg => {
         gg.symbols.forEach(s => {
           this.symbols.push(s);
         });
       });
 
+      // don't include 'Connector' in symbol select for inventory
+      this.symbols = this.symbols.filter(s => s.symbol_Name != 'Connector');
+
       this.symbols.sort((a, b) => a.symbol_Name.localeCompare(b.symbol_Name));
     });
   }

CSETWebNg/src/app/assessment/diagram/diagram-inventory/diagram-inventory.component.html

@@ -36,7 +36,7 @@ <h5>Component Inventory</h5>
       <input id="csafUpload" type="file" accept=".json" multiple (change)="fileSelect($event)" class="display-none">
     </div>
     <div class="row stretch mb-3">
-      <div class="col-12">
+      <div class="col-12 mb-5">
         <mat-tab-group style="overflow: auto" class="mb-3">
           <mat-tab *ngIf="showVulnerabilitiesTab()" label="Vulnerabilities">
             <app-diagram-vulnerabilities (componentsChange)="onChange($event)"></app-diagram-vulnerabilities>

CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config-iod/assessment-config-iod.component.html

@@ -179,30 +179,28 @@ <h5>{{ assessment.typeTitle || 'Blank Assessment' }}</h5>
       </label>
 
       <div>
-        <div>
-          Most important:
-          <select [ngClass]="{ 'alert-danger' : !iodDemographics.disruptedSector1 }" class="form-select mb-3"
-            name="disruptedSector1" tabindex="0" [(ngModel)]="iodDemographics.disruptedSector1"
-            (change)="updateDemographicsIod()">
-            <option [ngValue]="null">-- Select --</option>
-            <option *ngFor="let i of iodDemographics.listSectors" [ngValue]="i.optionValue"
-              [selected]="i.optionValue === iodDemographics.disruptedSector1">
-              {{ i.optionText }}
-            </option>
-          </select>
-        </div>
-        <div>
-          Second most important:
-          <select [ngClass]="{ 'alert-danger' : !iodDemographics.disruptedSector2 }" class="form-select mb-3"
-            name="disruptedSector2" tabindex="0" [(ngModel)]="iodDemographics.disruptedSector2"
-            (change)="updateDemographicsIod()">
-            <option [ngValue]="null">-- Select --</option>
-            <option *ngFor="let i of iodDemographics.listSectors" [ngValue]="i.optionValue"
-              [selected]="i.optionValue === iodDemographics.disruptedSector2">
-              {{ i.optionText }}
-            </option>
-          </select>
-        </div>
+        <label class="form-label">Most important</label>
+        <select [ngClass]="{ 'alert-danger' : !iodDemographics.disruptedSector1 }" class="form-select mb-3"
+          name="disruptedSector1" tabindex="0" [(ngModel)]="iodDemographics.disruptedSector1"
+          (change)="updateDemographicsIod()">
+          <option [ngValue]="null">-- Select --</option>
+          <option *ngFor="let i of iodDemographics.listSectors" [ngValue]="i.optionValue"
+            [selected]="i.optionValue === iodDemographics.disruptedSector1">
+            {{ i.optionText }}
+          </option>
+        </select>
+      </div>
+      <div>
+        <label class="form-label">Second most important</label>
+        <select [ngClass]="{ 'alert-danger' : !iodDemographics.disruptedSector2 }" class="form-select mb-3"
+          name="disruptedSector2" tabindex="0" [(ngModel)]="iodDemographics.disruptedSector2"
+          (change)="updateDemographicsIod()">
+          <option [ngValue]="null">-- Select --</option>
+          <option *ngFor="let i of iodDemographics.listSectors" [ngValue]="i.optionValue"
+            [selected]="i.optionValue === iodDemographics.disruptedSector2">
+            {{ i.optionText }}
+          </option>
+        </select>
       </div>
     </div>
 

CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-iod/demographics-iod.component.html

@@ -154,13 +154,13 @@ <h6 class="p-3 mb-4 alert-warning">
     </label>
 
     <div class="btn-group col-4" role="group" data-toggle="buttons">
-      <label class="btn btn-level btn-rounded form-check-label" [class.active]="demographicData.usesStandard"
+      <label class="btn btn-level btn-rounded" [class.active]="demographicData.usesStandard"
         (change)="changeUsesStandard(true)">
         <input class="btn-check" name="standardYes" id="standardYes" type="radio" autocomplete="off" tabindex="0"
           [checked]="demographicData.usesStandard" />
         Yes
       </label>
-      <label class="btn btn-level btn-rounded form-check-label" [class.active]="!demographicData.usesStandard"
+      <label class="btn btn-level btn-rounded" [class.active]="!demographicData.usesStandard"
         (change)="changeUsesStandard(false)">
         <input class="btn-check" name="standardNo" id="standardNo" type="radio" autocomplete="off" tabindex="0"
           [checked]="!demographicData.usesStandard" />
@@ -175,13 +175,13 @@ <h6 class="p-3 mb-4 alert-warning">
       </div>
 
       <div>
-        <label for="standard1" class="form-label">Most important:</label>
+        <label for="standard1" class="form-label">Most important</label>
         <input [ngClass]="{ 'alert-danger' : !demographicData.standard1 }" type="text" maxlength="250"
           class="form-control mb-3" id="standard1" name="standard1" list="listStandards"
           [(ngModel)]="demographicData.standard1" (blur)="newUpdate('STANDARD1', $event, 'string')" />
       </div>
       <div>
-        <label for="standard2" class="form-label">Second most important:</label>
+        <label for="standard2" class="form-label">Second most important</label>
         <input [ngClass]="{ 'alert-danger' : !demographicData.standard2 }" type="text" maxlength="250"
           class="form-control mb-3" id="standard2" name="standard2" list="listStandards"
           [(ngModel)]="demographicData.standard2" (blur)="newUpdate('STANDARD2', $event, 'string')" />
@@ -200,13 +200,13 @@ <h6 class="p-3 mb-4 alert-warning">
     </label>
 
     <div class="btn-group col-4" role="group" data-toggle="buttons">
-      <label class="btn btn-level btn-rounded form-check-label" [class.active]="demographicData.requiredToComply"
+      <label class="btn btn-level btn-rounded" [class.active]="demographicData.requiredToComply"
         (change)="setRequireComply(true)">
         <input class="btn-check" name="complyYes" id="complyYes" type="radio" autocomplete="off" tabindex="0"
           [checked]="demographicData.requiredToComply" />
         Yes
       </label>
-      <label class="btn btn-level btn-rounded form-check-label" [class.active]="!demographicData.requiredToComply"
+      <label class="btn btn-level btn-rounded" [class.active]="!demographicData.requiredToComply"
         (change)="setRequireComply(false)">
         <input class="btn-check" name="complyNo" id="complyNo" type="radio" autocomplete="off" tabindex="0"
           [checked]="!demographicData.requiredToComply" />
@@ -222,7 +222,7 @@ <h6 class="p-3 mb-4 alert-warning">
 
       <div>
         <div class="mb-3">
-          <label class="form-label">Regulation Type 1:</label>
+          <label class="form-label">Regulation Type 1</label>
           <ng-container *ngFor="let reg of demographicData.listRegulationTypes">
             <input class="radio-custom" name="regtype1" [id]="'regtype1-' + reg.optionValue" type="radio"
               autocomplete="off" tabindex="0" (click)="changeRegType1(reg, $event)"
@@ -231,13 +231,13 @@ <h6 class="p-3 mb-4 alert-warning">
           </ng-container>
         </div>
 
-        <label class="form-label">Regulation 1:</label>
+        <label class="form-label">Regulation 1</label>
         <input class="form-control" type="text" name="reg1Other" [(ngModel)]="demographicData.reg1Other"
           (blur)="newUpdate('REG-1-OTHER', $event, 'string')" />
       </div>
 
       <div>
-        <label class="form-label">Regulation Type 2:</label>
+        <label class="form-label">Regulation Type 2</label>
         <div class="mb-3">
           <ng-container *ngFor="let reg of demographicData.listRegulationTypes">
             <input class="radio-custom" name="regtype2" [id]="'regtype2-' + reg.optionValue" type="radio"
@@ -247,7 +247,7 @@ <h6 class="p-3 mb-4 alert-warning">
           </ng-container>
         </div>
 
-        <label class="form-label">Regulation 2:</label>
+        <label class="form-label">Regulation 2</label>
         <input class="form-control" type="text" name="reg2Other" [(ngModel)]="demographicData.reg2Other"
           (blur)="newUpdate('REG-2-OTHER', $event, 'string')" />
       </div>
@@ -289,11 +289,11 @@ <h6 class="p-3 mb-4 alert-warning">
       <div class="fst-italic my-2">
         If the name of the barrier is not listed please enter it directly into each box as applicable.
       </div>
-      <label for="barrier1" class="form-label">Most significant:</label>
+      <label for="barrier1" class="form-label">Most significant</label>
       <input [ngClass]="{ 'alert-danger' : !demographicData.barrier1 }" type="text" maxlength="250"
         class="form-control mb-3" id="barrier1" name="barrier1" list="listBarriers"
         [(ngModel)]="demographicData.barrier1" (blur)="newUpdate('BARRIER1', $event, 'string')" />
-      <label for="barrier2" class="form-label">Second most significant:</label>
+      <label for="barrier2" class="form-label">Second most significant</label>
       <input [ngClass]="{ 'alert-danger' : !demographicData.barrier2 }" type="text" maxlength="250"
         class="form-control mb-3" id="barrier2" name="barrier2" list="listBarriers"
         [(ngModel)]="demographicData.barrier2" (blur)="newUpdate('BARRIER2', $event, 'string')" />

CSETWebNg/src/app/assessment/prepare/csi/csi-service-composition/csi-service-composition.component.html

@@ -33,15 +33,15 @@ <h5>General Critical Services Description</h5>
       }
     </style>
 
-    <div>
+    <div class="mb-4">
       <label for="networksDescription" class="form-label">Networks (wireless networks, wired networks, etc.)</label>
       <textarea [ngClass]="{
           'alert-danger': !serviceComposition.networksDescription && showErrors()
         }" class="form-control" tabindex="0" type="text" maxlength="400" name="networksDescription"
         id="networksDescription" [(ngModel)]="serviceComposition.networksDescription" placeholder="Networks Description"
         (change)="update()"></textarea>
     </div>
-    <div>
+    <div class="mb-4">
       <label for="servicesDescription" class="form-label">Services (computer services, e-mail servers, web servers, control services,
         etc.)</label>
       <textarea [ngClass]="{
@@ -50,7 +50,7 @@ <h5>General Critical Services Description</h5>
         id="servicesDescription" [(ngModel)]="serviceComposition.servicesDescription" placeholder="Servers Description"
         (change)="update()"></textarea>
     </div>
-    <div>
+    <div class="mb-4">
       <label for="applicationsDescription" class="form-label">Applications (computer programs, ERP software, shareware user-added
         non-company software, etc.)</label>
       <textarea [ngClass]="{
@@ -59,7 +59,7 @@ <h5>General Critical Services Description</h5>
         id="applicationsDescription" [(ngModel)]="serviceComposition.applicationsDescription"
         placeholder="Applications Description" (change)="update()"></textarea>
     </div>
-    <div>
+    <div class="mb-4">
       <label for="connectionsDescription" class="form-label">Connections (VPN access by subcontractors, portable devices connected to
         organization services,
         interconnections between networks, connection of a Critical Service to the Internet, etc.)</label>
@@ -69,7 +69,7 @@ <h5>General Critical Services Description</h5>
         id="connectionsDescription" [(ngModel)]="serviceComposition.connectionsDescription"
         placeholder="Connections Description" (change)="update()"></textarea>
     </div>
-    <div class="form-group" *ngIf="showCriticalServiceIdentifyingInfo()">
+    <div  class="mb-4" *ngIf="showCriticalServiceIdentifyingInfo()">
       <label for="personnelDescription" class="form-label">Individuals (key IT/OT security professionals, including administrators, users,
         and third-party vendors)</label>
       <textarea [ngClass]="{

CSETWebNg/src/app/assessment/prepare/csi/csi-service-demographics/csi-service-demographics.component.html

@@ -69,7 +69,7 @@ <h4>{{t('titles.service demographics')}}</h4>
           (change)="update()" [disabled]="!csiServiceDemographic.multiSite" />
       </div>
     </ng-container>
-    <div class="mb-3">
+    <div class="my-3">
       <div>
         <label class="form-label" for="budgetBasis">What is the basis of the cybersecurity budget for this Critical
           Service?</label>

CSETWebNg/src/app/assessment/prepare/sals/sal-gen/sal-gen.component.html

@@ -25,7 +25,7 @@
         <h4>{{t('titles.sal.overall sal')}}</h4>
         <div class="btn-group btn-group-toggle" data-toggle="buttons">
             <ng-template ngFor let-level [ngForOf]="salsSvc.levels">
-                <label [attr.csetid]="'OverallSAL' + level.value" class="btn btn-level btn-rounded form-check-label"
+                <label [attr.csetid]="'OverallSAL' + level.value" class="btn btn-level btn-rounded"
                     [class.active]="level.value === this.salsSvc.selectedSAL?.selected_Sal_Level"
                     (click)="saveLevel(level.value,'std')">
                     <input class="btn-check" tabindex="0" type="radio" autocomplete="off" name="sal_main"

CSETWebNg/src/app/assessment/prepare/sals/sals.component.html

@@ -71,19 +71,19 @@ <h3 class="mb-3">{{t('titles.sal.security assurance level (sal)')}}</h3>
         {{t('titles.sal.choose methodology')}}
       </div>
       <div class="btn-group-toggle" data-toggle="buttons">
-        <label csetid="SimpleSalLevelSelector" class="btn btn-sal-select btn-rounded form-check-label"
+        <label csetid="SimpleSalLevelSelector" class="btn btn-sal-select btn-rounded"
           [class.active]="selectedMethodology === 'Simple'" (click)="changeMethodology('Simple')">
           <input class="btn-check" type="radio" autocomplete="off" name="sal_type_selector"
             [checked]="selectedMethodology === 'Simple'">{{t('titles.sal.simple')}}
         </label>
 
-        <label csetid="GeneralRiskSalLevelSelector" class="btn btn-sal-select btn-rounded form-check-label"
+        <label csetid="GeneralRiskSalLevelSelector" class="btn btn-sal-select btn-rounded"
           [class.active]="selectedMethodology === 'GENERAL'" (click)="changeMethodology('GENERAL')">
           <input class="btn-check" type="radio" autocomplete="off" name="sal_type_selector"
             [checked]="selectedMethodology === 'GENERAL'">{{t('titles.sal.general risk based')}}
         </label>
 
-        <label csetid="NistSalLevelSelector" class="btn btn-sal-select btn-rounded form-check-label"
+        <label csetid="NistSalLevelSelector" class="btn btn-sal-select btn-rounded"
           [class.active]="selectedMethodology === 'NIST'" (click)="changeMethodology('NIST')">
           <input class="btn-check" type="radio" autocomplete="off" name="sal_type_selector"
             [checked]="selectedMethodology === 'NIST'">{{t('titles.sal.nist 60 fips 199')}}

CSETWebNg/src/app/dialogs/change-password/change-password.component.html

@@ -55,7 +55,7 @@
     <form #fReg="ngForm" (ngSubmit)="onPasswordChangeClick(fReg)" class="pe-3">
       <div class="form-group">
         <div class="d-flex justify-content-between">
-          <label required for="currentPassword">{{ t('change password.current password') }}</label>
+          <label required for="currentPassword" class="form-label">{{ t('change password.current password') }}</label>
           <div *ngIf="!showPassword" class="show-hide-password" (click)="togglePasswordVisibility()">
             {{ t('change password.show passwords') }}<i class="fas fa-eye ms-1"></i>
           </div>
@@ -67,12 +67,12 @@
           class="form-control" required [(ngModel)]="cpwd.currentPassword">
       </div>
       <div class="form-group">
-        <label required for="password">{{ t('change password.new password') }}</label>
+        <label required for="password" class="form-label">{{ t('change password.new password') }}</label>
         <input [type]="showPassword ? 'text' : 'password'" name="password" id="password" class="form-control"
           (ngModelChange)="checkPassword($event)" [(ngModel)]="cpwd.newPassword" required>
       </div>
-      <div class="form-group">
-        <label required for="confirmPassword">{{ t('change password.confirm new password') }}</label>
+      <div class="form-group mb-4">
+        <label required for="confirmPassword" class="form-label">{{ t('change password.confirm new password') }}</label>
         <input [type]="showPassword ? 'text' : 'password'" class="form-control" id="confirmPassword"
           name="confirmPassword" [(ngModel)]="cpwd.confirmPassword" appConfirmEqualValidator="password" required>
       </div>

CSETWebNg/src/app/dialogs/user-language/user-language.component.html

@@ -33,7 +33,7 @@
                 <p>
                     {{ t('note language change') }}
                 </p>
-                <label class="mb-1 fw-600" for="selectLang">{{t('user language')}}</label>
+                <label class="fw-600 form-label" for="selectLang">{{t('user language')}}</label>
                 <select class="form-select" id="langSelection" name="langSelection" [(ngModel)]="langSelection">
                     <option *ngFor="let o of languageOptions" [value]="o.value">{{o.name}}</option>
                 </select>