Revert "Merge pull request #932 from bcgov/feature/DSS-1154"

This reverts commit bc8552d, reversing
changes made to b6d8c06.

Author: Sai Krishna Metpalli

frontend/nginx.local.conf

@@ -79,7 +79,7 @@ http {
         # See https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
         # See https://content-security-policy.com/nonce/
         # See https://angular.io/guide/security#content-security-policy
-        add_header content-security-policy "default-src 'self'; style-src 'self' 'nonce-$cspNonce' ; script-src 'self' 'nonce-$cspNonce'; font-src 'self'; frame-src loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca; connect-src 'self' loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca server.arcgisonline.com; img-src 'self' https://tile.openstreetmap.org data: server.arcgisonline.com www.w3.org; frame-ancestors https://loginproxy.gov.bc.ca https://dev.loginproxy.gov.bc.ca https://test.loginproxy.gov.bc.ca; object-src 'none'; base-uri 'self'; form-action 'self';";
+        add_header content-security-policy "default-src 'self'; style-src 'self' 'nonce-$cspNonce' 'unsafe-inline'; script-src 'self' 'nonce-$cspNonce'; font-src 'self'; frame-src loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca; connect-src 'self' loginproxy.gov.bc.ca dev.loginproxy.gov.bc.ca test.loginproxy.gov.bc.ca server.arcgisonline.com; img-src 'self' https://tile.openstreetmap.org data: server.arcgisonline.com www.w3.org; frame-ancestors https://loginproxy.gov.bc.ca https://dev.loginproxy.gov.bc.ca https://test.loginproxy.gov.bc.ca; object-src 'none'; base-uri 'self'; form-action 'self';";
 
         include /nginx/nginx.conf;
 

frontend/src/app/app.config.ts

@@ -1,8 +1,8 @@
-import { APP_INITIALIZER, ApplicationConfig, CSP_NONCE, importProvidersFrom } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig, CSP_NONCE } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
+import { KeycloakService } from 'keycloak-angular';
 import { environment } from '../environments/environment';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
@@ -17,12 +17,6 @@ export const appConfig: ApplicationConfig = {
         provideAnimations(),
         provideHttpClient(withInterceptors([authInterceptor, errorInterceptor])),
         provideRouter(routes),
-        // Provide CSP_NONCE first so it can be injected by other providers
-        {
-            provide: CSP_NONCE,
-            useFactory: () => document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content'),
-        },
-        // Use standard PrimeNG provider
         providePrimeNG({
             theme: {
                 preset: Aura,
@@ -33,15 +27,18 @@ export const appConfig: ApplicationConfig = {
                 }
             }
         }),
-        // Use modern provider pattern for Keycloak
-        importProvidersFrom(KeycloakAngularModule),
+        KeycloakService,
         {
             provide: APP_INITIALIZER,
             useFactory: initializeKeycloak,
             multi: true,
             deps: [KeycloakService],
         },
         MessageService,
+        {
+            provide: CSP_NONCE,
+            useValue: document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content'),
+        },
     ],
 }
 

frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html

@@ -16,7 +16,7 @@ <h4>Takedown Requests for each platform are aggregated into a CSV file and sent
             size="small" [(selection)]="selectedListings">
             <ng-template pTemplate="header">
                 <tr>
-                    <th class="width-4rem" aria-labelledby="selectAll_checkbox_header">
+                    <th style="width: 4rem" aria-labelledby="selectAll_checkbox_header">
                         <p-tableHeaderCheckbox id="selectAll_checkbox_header"
                             ariaLabel="'Select or Deselect All'"></p-tableHeaderCheckbox>
                     </th>
@@ -142,8 +142,8 @@ <h4>Takedown Requests for each platform are aggregated into a CSV file and sent
         (click)="submit()">Review</button>
     <button pButton id="cancel-btn" class="outline-btn" (click)="cancel()">Cancel</button>
 </div>
-<p-dialog class="preview-dialog width-50vw" header="Send Takedown Request" [(visible)]="showPreviewDialog" [modal]="true"
-    [draggable]="false" [resizable]="false">
+<p-dialog class="preview-dialog" header="Send Takedown Request" [(visible)]="showPreviewDialog" [modal]="true"
+    [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
 
     <div class="note">
         <div class="title">

frontend/src/app/features/components/compliance-notice/compliance-notice.component.html

@@ -129,7 +129,7 @@
 </form>
 
 <p-dialog [modal]="true" id="preview-dialog" [closable]="false" header="Notice of Non-Compliance"
-    [(visible)]="isPreviewVisible" class="width-50vw">
+    [(visible)]="isPreviewVisible" [style]="{width: '50vw'}">
     <p [innerText]="previewText"> </p>
     <div class="spacer-hr"></div>
     <div class="comment-section">
@@ -139,7 +139,7 @@
             </div>
             <div class="form-group-row-col">
                 <p-editor appendTo="body" id="comment" name="comment" [(ngModel)]="comment"
-                    placeholder="Enter Additional Comment Here..." class="height-320px">
+                    placeholder="Enter Additional Comment Here..." [style]="{ height: '320px' }">
                     <ng-template pTemplate="header">
                         <span class="ql-formats">
                             <button type="button" class="ql-bold" aria-label="Bold"></button>

frontend/src/app/features/components/delisting-request/delisting-request.component.html

@@ -115,7 +115,7 @@ <h4>Add Details of your request</h4>
 </form>
 
 <p-dialog [modal]="true" id="preview-dialog" [closable]="false" header="Takedown Request" [(visible)]="isPreviewVisible"
-    class="width-50vw">
+    [style]="{width: '50vw'}">
     <p [innerText]="previewText">
     </p>
     <div class="actions">

frontend/src/app/features/components/listings-table/aggregated-listings-table/aggregated-listings-table.component.html

@@ -61,7 +61,7 @@ <h2 class="title">Aggregated Listings</h2>
 
             <ng-template pTemplate="header">
                 <tr>
-                    <th [ariaLabel]="'expand-listing'" class="width-2rem"> </th>
+                    <th [ariaLabel]="'expand-listing'" style="width: 2rem"> </th>
                     <th class="sortable-header" id="primaryHostNm_header"
                         [class.sorted]="this.sort && this.sort.prop === 'effectiveHostNm'"
                         (click)="onSort('effectiveHostNm')">Primary Host Name
@@ -253,7 +253,7 @@ <h2 class="title">Aggregated Listings</h2>
 </p-paginator>
 </p-panel>
 
-<p-dialog header="Legend" class="width-50vw" [modal]="true" [(visible)]="isLegendShown">
+<p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" [style]="{width: '50vw'}">
     <span>
         <strong>Status:</strong> Status of the listing using the following categories:
         <ul class="statuses">

frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html

@@ -470,8 +470,8 @@ <h2>Detailed Listing Information for</h2>
     </div>
 </div>
 
-<p-dialog header="Match a Business Licence to Listing" class="bl-match-popup width-50vw" [modal]="true" [closable]="false"
-    [(visible)]="isMatchBlShown">
+<p-dialog header="Match a Business Licence to Listing" class="bl-match-popup" [modal]="true" [closable]="false"
+    [(visible)]="isMatchBlShown" [style]="{width: '50vw'}">
     <div class="search-label"><strong>Enter a Business Licence Number</strong></div>
     <div class="search-row">
         <input pInputText type="text" class="full-width-text-field" [(ngModel)]="searchBlText"
@@ -502,8 +502,8 @@ <h2>Detailed Listing Information for</h2>
     </ng-template>
 </p-dialog>
 
-<p-dialog header="Unlink a business licence from Listing" class="bl-unlink-popup width-50vw" [modal]="true" [closable]="false"
-    [(visible)]="isUnlinkBlShow">
+<p-dialog header="Unlink a business licence from Listing" class="bl-unlink-popup" [modal]="true" [closable]="false"
+    [(visible)]="isUnlinkBlShow" [style]="{width: '50vw'}">
     <div class="search-label" *ngIf="this.listing && this.listing.bizLicenceInfo"><strong>Are you sure you want to
             unlink business
             licence number
@@ -518,7 +518,7 @@ <h2>Detailed Listing Information for</h2>
     </ng-template>
 </p-dialog>
 
-<p-dialog header="Legend" class="width-50vw" [modal]="true" [(visible)]="isLegendShown">
+<p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" [style]="{width: '50vw'}">
     <span>
         <strong>Status:</strong> Status of the listing using the following categories:
         <ul class="statuses">
@@ -578,8 +578,8 @@ <h2>Detailed Listing Information for</h2>
     </p>
 </p-dialog>
 
-<p-dialog header="Suggest a New Address" class="address-change-popup width-50vw" [modal]="true" [closable]="false"
-    [(visible)]="isEditAddressShown">
+<p-dialog header="Suggest a New Address" class="address-change-popup" [modal]="true" [closable]="false"
+    [(visible)]="isEditAddressShown" [style]="{width: '50vw'}">
     <div class="content" *ngIf="listing">
         <div class="message warn" *ngIf="isJurisdictionDifferent">
             <div class="header">

frontend/src/app/features/components/listings-table/listings-table.component.html

@@ -61,7 +61,7 @@ <h2 class="title">Individual Listings</h2>
             [tableStyle]="{ 'min-width': '50rem' }" [selectionPageOnly]="true">
             <ng-template pTemplate="header">
                 <tr>
-                    <th [ariaLabel]="'select-listing'" class="width-4rem">
+                    <th [ariaLabel]="'select-listing'" style="width: 4rem">
                         <p-tableHeaderCheckbox inputId="select-all-chb"></p-tableHeaderCheckbox>
                     </th>
                     <th class="sortable-header" id="status_header"
@@ -102,7 +102,7 @@ <h2 class="title">Individual Listings</h2>
                             *ngIf="this.sort && this.sort.prop === 'registrationNumber' && this.sort.dir === 'asc'"></i>
                     </th>
 
-                    <th class="text-align-center">Details</th>
+                    <th style="text-align: center;">Details</th>
 
                     <th class="sortable-header" id="addressNormalized_header"
                         [class.sorted]="this.sort && this.sort.prop === 'matchAddressTxt'"
@@ -250,7 +250,7 @@ <h2 class="title">Individual Listings</h2>
             [currentPageReportTemplate]="'Rows per page: {rows} &nbsp; {first}-{last} of {totalRecords}'"></p-paginator>
     </p-panel>
 
-    <p-dialog header="Legend" class="width-50vw" [modal]="true" [(visible)]="isLegendShown"
+    <p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" ess [style]="{width: '50vw'}"
         [closeOnEscape]="true">
         <span>
             <strong>Status:</strong> Status of the listing using the following categories:

frontend/src/app/features/components/manage-jurisdictions/manage-jurisdictions.component.html

@@ -7,8 +7,8 @@ <h2>Manage Jurisdictions</h2>
         [tableStyle]="{ 'min-width': '60rem' }" size="small">
         <ng-template pTemplate="header">
             <tr class="header-panel">
-                <th class="width-4rem"></th>
-                <th class="width-24rem sortable-header" id="organizationNm_header"
+                <th style="width: 4rem"></th>
+                <th style="width: 24rem" class="sortable-header" id="organizationNm_header"
                     [class.sorted]="this.sort && this.sort.prop === 'organizationNm'"
                     (click)="onSort('organizationNm')">Local Government Name
                     <i class="pi pi-angle-down"
@@ -40,13 +40,13 @@ <h2>Manage Jurisdictions</h2>
                     <i class="pi pi-angle-up"
                         *ngIf="this.sort && this.sort.prop === 'businessLicenceFormatTxt' && this.sort.dir === 'asc'"></i>
                 </th>
-                <th *ngIf="canEdit" class="width-19rem">Update Local Government Information</th>
+                <th *ngIf="canEdit" style="width: 19rem">Update Local Government Information</th>
             </tr>
         </ng-template>
 
         <ng-template pTemplate="body" let-jurisdiction let-index="rowIndex" let-expanded="expanded">
             <tr>
-                <td class="width-4rem">
+                <td style="width: 4rem">
                     <button [disabled]="!jurisdiction.jurisdictions || !jurisdiction.jurisdictions.length"
                         [pRowTogglerDisabled]="!jurisdiction.jurisdictions || !jurisdiction.jurisdictions.length"
                         pButton [pTooltip]="(!jurisdiction.jurisdictions || !jurisdiction.jurisdictions.length)?
@@ -58,7 +58,7 @@ <h2>Manage Jurisdictions</h2>
                 <td>{{jurisdiction.localGovernmentTypeNm || '-'}}</td>
                 <td>{{jurisdiction.organizationCd || '-'}}</td>
                 <td>{{jurisdiction.businessLicenceFormatTxt || '-'}} </td>
-                <td *ngIf="canEdit" class="text-align-center">
+                <td *ngIf="canEdit" style="text-align: center">
                     <a id="lg-edit-{{index}}-icon"
                         [routerLink]="'/update-local-government-information/'+jurisdiction.organizationId">
                         <span class="edit-icon"></span>
@@ -143,7 +143,7 @@ <h2>Manage Jurisdictions</h2>
                 <td>{{jurisdiction.isStraaExempt?'Yes':'No'}} </td>
                 <td>{{jurisdiction.isBusinessLicenceRequired?'Yes':'No'}} </td>
                 <td>{{jurisdiction.isActive?'Yes':'No'}} </td>
-                <td *ngIf="canEdit" class="text-align-center">
+                <td *ngIf="canEdit" style="text-align: center">
                     <a id="jurisdiction-edit-{{index}}-icon"
                         [routerLink]="'/update-jurisdiction-information/'+jurisdiction.organizationId">
                         <span class="edit-icon"></span>

frontend/src/app/features/components/roles-list/role-details/role-details.component.html

@@ -51,4 +51,4 @@ <h2 class="header" *ngIf="role && !isEdit && !isCreate">Short Term Rental Platfo
         Role</button>
 </div>
 
-<p-confirmDialog class="width-50vw"></p-confirmDialog>
+<p-confirmDialog [style]="{width: '50vw'}"></p-confirmDialog>