From cfd8f095a3f539310533bb80fe3826563d6f4f86 Mon Sep 17 00:00:00 2001
From: ShahanaFarooqui <shahana.farooqui@gmail.com>
Date: Sat, 15 Oct 2022 16:35:39 -0700
Subject: [PATCH] DB Validations

---
 backend/controllers/shared/pageSettings.js    |  45 --------
 backend/models/database.model.js              |  26 ++---
 backend/utils/database.js                     |   4 +-
 server/controllers/shared/pageSettings.ts     |  45 --------
 server/models/database.model.ts               |  26 ++---
 server/utils/database.ts                      |   4 +-
 src/app/cln/store/cln.effects.ts              |   5 +-
 .../page-settings.component.html              | 100 ++++++++++--------
 .../page-settings/page-settings.component.ts  |   3 +-
 .../shared/services/consts-enums-functions.ts |   2 +-
 src/app/shared/theme/styles/root.scss         |   2 +-
 src/app/shared/theme/styles/theme-color.scss  |   3 +
 12 files changed, 95 insertions(+), 170 deletions(-)

diff --git a/backend/controllers/shared/pageSettings.js b/backend/controllers/shared/pageSettings.js
index abfc2ef2..09ccd913 100644
--- a/backend/controllers/shared/pageSettings.js
+++ b/backend/controllers/shared/pageSettings.js
@@ -17,51 +17,6 @@ export const getPageSettings = (req, res, next) => {
 };
 export const savePageSettings = (req, res, next) => {
     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Page Settings', msg: 'Saving Page Settings..' });
-    req.body = [
-        {
-            tables: [
-                {
-                    tableId: "payments",
-                    recordsPerPage: 25,
-                    sortBy: "created_at",
-                    sortOrder: "Ascending",
-                    showColumns: [
-                        "msatoshi",
-                    ],
-                },
-                {
-                    tableId: "payments2",
-                    sortBy: "created_at",
-                    sortOrder: "Ascending",
-                    showColumns: [
-                        "created_at",
-                        "type",
-                        "payment_hash",
-                        "msatoshi_sent",
-                        "msatoshi",
-                    ],
-                },
-            ],
-        },
-        {
-            pageId: "invoices",
-            tables: [
-                {
-                    tableId: "invoices3",
-                    sortBy: "expires_at",
-                    sortOrder: "Descending",
-                    showColumns: [
-                        "expires_at",
-                        "paid_at",
-                        "type",
-                        "description",
-                        "msatoshi",
-                        "msatoshi_received",
-                    ],
-                },
-            ],
-        }
-    ];
     return Promise.all(req.body.map((page) => databaseService.update(req.session.selectedNode, CollectionsEnum.PAGE_SETTINGS, page, CollectionFieldsEnum.PAGE_ID, page.pageId))).
         then((values) => {
         logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'PayRequest', msg: 'Payment List Decoded', data: values });
diff --git a/backend/models/database.model.js b/backend/models/database.model.js
index 1d3da57c..4881c507 100644
--- a/backend/models/database.model.js
+++ b/backend/models/database.model.js
@@ -28,16 +28,16 @@ export const validateDocument = (collectionName, documentToValidate) => {
 };
 export const validateOffer = (documentToValidate) => {
     if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.BOLT12)) {
-        return ({ isValid: false, error: CollectionFieldsEnum.BOLT12 + ' is mandatory.' });
+        return ({ isValid: false, error: 'Bolt12 is mandatory.' });
     }
     if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.AMOUNTMSAT)) {
-        return ({ isValid: false, error: CollectionFieldsEnum.AMOUNTMSAT + ' is mandatory.' });
+        return ({ isValid: false, error: 'Amount mSat is mandatory.' });
     }
     if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.TITLE)) {
-        return ({ isValid: false, error: CollectionFieldsEnum.TITLE + ' is mandatory.' });
+        return ({ isValid: false, error: 'Title is mandatory.' });
     }
     if ((typeof documentToValidate[CollectionFieldsEnum.AMOUNTMSAT] !== 'number')) {
-        return ({ isValid: false, error: CollectionFieldsEnum.AMOUNTMSAT + ' should be a number.' });
+        return ({ isValid: false, error: 'Amount mSat should be a number.' });
     }
     return ({ isValid: true });
 };
@@ -77,37 +77,37 @@ export class PageSettings {
 export const validatePageSettings = (documentToValidate) => {
     let errorMessages = '';
     if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.PAGE_ID)) {
-        errorMessages = errorMessages + CollectionFieldsEnum.PAGE_ID + ' is mandatory.';
+        errorMessages = errorMessages + 'Page ID is mandatory.';
     }
     if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.TABLES)) {
-        errorMessages = errorMessages + CollectionFieldsEnum.TABLES + ' is mandatory.';
+        errorMessages = errorMessages + 'Tables is mandatory.';
     }
     const tablesMessages = documentToValidate.tables.reduce((tableAcc, table, tableIdx) => {
         let errMsg = '';
         if (!table.hasOwnProperty(CollectionFieldsEnum.TABLE_ID)) {
-            errMsg = errMsg + CollectionFieldsEnum.TABLE_ID + ' is mandatory.';
+            errMsg = errMsg + 'Table ID is mandatory.';
         }
         if (!table.hasOwnProperty(CollectionFieldsEnum.SORT_BY)) {
-            errMsg = errMsg + CollectionFieldsEnum.SORT_BY + ' is mandatory.';
+            errMsg = errMsg + 'Sort By is mandatory.';
         }
         if (!table.hasOwnProperty(CollectionFieldsEnum.SORT_ORDER)) {
-            errMsg = errMsg + CollectionFieldsEnum.SORT_ORDER + ' is mandatory.';
+            errMsg = errMsg + 'Sort Order is mandatory.';
         }
         if (!table.hasOwnProperty(CollectionFieldsEnum.RECORDS_PER_PAGE)) {
-            errMsg = errMsg + CollectionFieldsEnum.RECORDS_PER_PAGE + ' is mandatory.';
+            errMsg = errMsg + 'Records/Page is mandatory.';
         }
         if (!table.hasOwnProperty(CollectionFieldsEnum.SHOW_COLUMNS)) {
-            errMsg = errMsg + CollectionFieldsEnum.SHOW_COLUMNS + ' is mandatory.';
+            errMsg = errMsg + 'Show Columns is mandatory.';
         }
         if (table[CollectionFieldsEnum.SHOW_COLUMNS].length < 2) {
-            errMsg = errMsg + CollectionFieldsEnum.SHOW_COLUMNS + ' should have at least 2 fields.';
+            errMsg = errMsg + 'Show Columns should have at least 2 fields.';
         }
         if (errMsg.trim() !== '') {
             tableAcc.push({ table: (table.hasOwnProperty(CollectionFieldsEnum.TABLE_ID) ? table[CollectionFieldsEnum.TABLE_ID] : (tableIdx + 1)), message: errMsg });
         }
         return tableAcc;
     }, []);
-    if (errorMessages.trim() === '' && tablesMessages.length && tablesMessages.length === 0) {
+    if (errorMessages.trim() === '' && tablesMessages.length === 0) {
         return ({ isValid: true });
     }
     else {
diff --git a/backend/utils/database.js b/backend/utils/database.js
index 71c5ae40..d7fcc57d 100644
--- a/backend/utils/database.js
+++ b/backend/utils/database.js
@@ -214,7 +214,9 @@ export class DatabaseAdapter {
         }
     }
     insertSession(id = '') {
-        this.userSessions.push(id);
+        if (!this.userSessions.includes(id)) {
+            this.userSessions.push(id);
+        }
     }
     removeSession(sessionID = '') {
         this.userSessions.splice(this.userSessions.findIndex((sId) => sId === sessionID), 1);
diff --git a/server/controllers/shared/pageSettings.ts b/server/controllers/shared/pageSettings.ts
index 1b7dfbcc..97c8f613 100644
--- a/server/controllers/shared/pageSettings.ts
+++ b/server/controllers/shared/pageSettings.ts
@@ -20,51 +20,6 @@ export const getPageSettings = (req, res, next) => {
 
 export const savePageSettings = (req, res, next) => {
   logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Page Settings', msg: 'Saving Page Settings..' });
-  req.body = [
-    {
-      tables: [
-        {
-          tableId: "payments",
-          recordsPerPage: 25,
-          sortBy: "created_at",
-          sortOrder: "Ascending",
-          showColumns: [
-            "msatoshi",
-          ],
-        },
-        {
-          tableId: "payments2",
-          sortBy: "created_at",
-          sortOrder: "Ascending",
-          showColumns: [
-            "created_at",
-            "type",
-            "payment_hash",
-            "msatoshi_sent",
-            "msatoshi",
-          ],
-        },
-      ],
-    },
-    {
-      pageId: "invoices",
-      tables: [
-        {
-          tableId: "invoices3",
-          sortBy: "expires_at",
-          sortOrder: "Descending",
-          showColumns: [
-            "expires_at",
-            "paid_at",
-            "type",
-            "description",
-            "msatoshi",
-            "msatoshi_received",
-          ],
-        },
-      ],
-    }
-  ];
   return Promise.all(req.body.map((page) => databaseService.update(req.session.selectedNode, CollectionsEnum.PAGE_SETTINGS, page, CollectionFieldsEnum.PAGE_ID, page.pageId))).
     then((values) => {
       logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'PayRequest', msg: 'Payment List Decoded', data: values });
diff --git a/server/models/database.model.ts b/server/models/database.model.ts
index e868696d..6b98dccd 100644
--- a/server/models/database.model.ts
+++ b/server/models/database.model.ts
@@ -32,16 +32,16 @@ export const validateDocument = (collectionName: CollectionsEnum, documentToVali
 
 export const validateOffer = (documentToValidate): any => {
   if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.BOLT12)) {
-    return ({ isValid: false, error: CollectionFieldsEnum.BOLT12 + ' is mandatory.' });
+    return ({ isValid: false, error: 'Bolt12 is mandatory.' });
   }
   if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.AMOUNTMSAT)) {
-    return ({ isValid: false, error: CollectionFieldsEnum.AMOUNTMSAT + ' is mandatory.' });
+    return ({ isValid: false, error: 'Amount mSat is mandatory.' });
   }
   if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.TITLE)) {
-    return ({ isValid: false, error: CollectionFieldsEnum.TITLE + ' is mandatory.' });
+    return ({ isValid: false, error: 'Title is mandatory.' });
   }
   if ((typeof documentToValidate[CollectionFieldsEnum.AMOUNTMSAT] !== 'number')) {
-    return ({ isValid: false, error: CollectionFieldsEnum.AMOUNTMSAT + ' should be a number.' });
+    return ({ isValid: false, error: 'Amount mSat should be a number.' });
   }
   return ({ isValid: true });
 };
@@ -88,37 +88,37 @@ export class PageSettings {
 export const validatePageSettings = (documentToValidate): any => {
   let errorMessages = '';
   if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.PAGE_ID)) {
-    errorMessages = errorMessages + CollectionFieldsEnum.PAGE_ID + ' is mandatory.';
+    errorMessages = errorMessages + 'Page ID is mandatory.';
   }
   if (!documentToValidate.hasOwnProperty(CollectionFieldsEnum.TABLES)) {
-    errorMessages = errorMessages + CollectionFieldsEnum.TABLES + ' is mandatory.';
+    errorMessages = errorMessages + 'Tables is mandatory.';
   }
   const tablesMessages = documentToValidate.tables.reduce((tableAcc, table: TableSetting, tableIdx) => {
     let errMsg = '';
     if (!table.hasOwnProperty(CollectionFieldsEnum.TABLE_ID)) {
-      errMsg = errMsg + CollectionFieldsEnum.TABLE_ID + ' is mandatory.';
+      errMsg = errMsg + 'Table ID is mandatory.';
     }
     if (!table.hasOwnProperty(CollectionFieldsEnum.SORT_BY)) {
-      errMsg = errMsg + CollectionFieldsEnum.SORT_BY + ' is mandatory.';
+      errMsg = errMsg + 'Sort By is mandatory.';
     }
     if (!table.hasOwnProperty(CollectionFieldsEnum.SORT_ORDER)) {
-      errMsg = errMsg + CollectionFieldsEnum.SORT_ORDER + ' is mandatory.';
+      errMsg = errMsg + 'Sort Order is mandatory.';
     }
     if (!table.hasOwnProperty(CollectionFieldsEnum.RECORDS_PER_PAGE)) {
-      errMsg = errMsg + CollectionFieldsEnum.RECORDS_PER_PAGE + ' is mandatory.';
+      errMsg = errMsg + 'Records/Page is mandatory.';
     }
     if (!table.hasOwnProperty(CollectionFieldsEnum.SHOW_COLUMNS)) {
-      errMsg = errMsg + CollectionFieldsEnum.SHOW_COLUMNS + ' is mandatory.';
+      errMsg = errMsg + 'Show Columns is mandatory.';
     }
     if (table[CollectionFieldsEnum.SHOW_COLUMNS].length < 2) {
-      errMsg = errMsg + CollectionFieldsEnum.SHOW_COLUMNS + ' should have at least 2 fields.';
+      errMsg = errMsg + 'Show Columns should have at least 2 fields.';
     }
     if (errMsg.trim() !== '') {
       tableAcc.push({ table: (table.hasOwnProperty(CollectionFieldsEnum.TABLE_ID) ? table[CollectionFieldsEnum.TABLE_ID] : (tableIdx + 1)), message: errMsg });
     }
     return tableAcc;
   }, []);
-  if (errorMessages.trim() === '' && tablesMessages.length && tablesMessages.length === 0) {
+  if (errorMessages.trim() === '' && tablesMessages.length === 0) {
     return ({ isValid: true });
   } else {
     const errObj = { page: (documentToValidate.hasOwnProperty(CollectionFieldsEnum.PAGE_ID) ? documentToValidate[CollectionFieldsEnum.PAGE_ID] : 'Unknown') };
diff --git a/server/utils/database.ts b/server/utils/database.ts
index f5af9d15..2c1293d1 100644
--- a/server/utils/database.ts
+++ b/server/utils/database.ts
@@ -212,7 +212,9 @@ export class DatabaseAdapter {
   }
 
   insertSession(id: string = '') {
-    this.userSessions.push(id);
+    if (!this.userSessions.includes(id)) {
+      this.userSessions.push(id);
+    }
   }
 
   removeSession(sessionID: string = '') {
diff --git a/src/app/cln/store/cln.effects.ts b/src/app/cln/store/cln.effects.ts
index 67e9257b..d7c9a0fc 100644
--- a/src/app/cln/store/cln.effects.ts
+++ b/src/app/cln/store/cln.effects.ts
@@ -944,7 +944,7 @@ export class CLNEffects implements OnDestroy {
           this.store.dispatch(updateCLAPICallStatus({ payload: { action: 'FetchPageSettings', status: APICallStatusEnum.COMPLETED } }));
           return {
             type: CLNActions.SET_PAGE_SETTINGS_CLN,
-            payload: pageSettings
+            payload: pageSettings || []
           };
         }),
         catchError((err: any) => {
@@ -966,9 +966,10 @@ export class CLNEffects implements OnDestroy {
             this.logger.info(postRes);
             this.store.dispatch(updateCLAPICallStatus({ payload: { action: 'SavePageSettings', status: APICallStatusEnum.COMPLETED } }));
             this.store.dispatch(closeSpinner({ payload: UI_MESSAGES.UPDATE_PAGE_SETTINGS }));
+            this.store.dispatch(openSnackBar({ payload: 'Page Layout Updated Successfully!' }));
             return {
               type: CLNActions.SET_PAGE_SETTINGS_CLN,
-              payload: postRes
+              payload: postRes || []
             };
           }),
           catchError((err: any) => {
diff --git a/src/app/shared/components/node-config/page-settings/page-settings.component.html b/src/app/shared/components/node-config/page-settings/page-settings.component.html
index f49f39fc..5e8cdf36 100644
--- a/src/app/shared/components/node-config/page-settings/page-settings.component.html
+++ b/src/app/shared/components/node-config/page-settings/page-settings.component.html
@@ -4,57 +4,63 @@
       <fa-icon [icon]="faPenRuler" class="page-title-img mr-1"></fa-icon>
       <span class="page-title">Page Settings</span>
     </div>
-    <div class="p-2 error-border my-2" *ngIf="errorMessage">
-      <mat-list role="list">
-        <mat-panel-title>Page {{errorMessage.page | titlecase}}</mat-panel-title>
-        <mat-list-item><mat-icon class="info-icon mr-1">error</mat-icon>{{errorMessage.message}}</mat-list-item>
-        <mat-list-item *ngFor="let table of errorMessage.tables">
-          <mat-icon class="info-icon mr-1">error</mat-icon>Table {{table.table | titlecase}} {{table.message}}
-        </mat-list-item>
-      </mat-list>      
-    </div>
-    <div *ngIf="!errorMessage">
-      <mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1" expanded="true" *ngFor="let page of pageSettings">
-        <mat-expansion-panel-header class="p-2 error-border my-2" *ngIf="errorMessage?.page === page.pageId">
-          <mat-panel-title>{{page.pageId | titlecase}}</mat-panel-title>
-        </mat-expansion-panel-header>
-        <div fxLayout="column" fxLayoutAlign="start stretch" *ngFor="let table of page.tables">
-          <div fxLayout="row" fxLayoutAlign="space-between center" class="mt-1">
-            <mat-form-field fxFlex="10">
-              <mat-select [(ngModel)]="table.recordsPerPage" placeholder="Records/Page" name="{{table.tableId}}-page-size-options" tabindex="1" required>
-                <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
-                  {{pageSizeOption}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field fxFlex="10">
-              <mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{table.tableId}}-sort-by" tabindex="2" required>
-                <mat-option *ngFor="let field of table.showColumns" [value]="field">
-                  {{field | camelcaseWithReplace:'_'}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field fxFlex="10">
-              <mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{table.tableId}}-sort-order" tabindex="3" required>
-                <mat-option *ngFor="let so of sortOrders" [value]="so">
-                  {{so}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-form-field fxFlex="68">
-              <mat-select [(ngModel)]="table.showColumns" (selectionChange)="onShowColumnsChange(table)" placeholder="Show Columns" name="{{table.tableId}}-show-columns" tabindex="4" multiple required>
-                <mat-option *ngFor="let field of tableFieldsDef[table.tableId]" [value]="field" [disabled]="table.showColumns.length < 3 && table.showColumns.includes(field)">
-                  {{field | camelcaseWithReplace:'_'}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
+    <ng-container *ngIf="errorMessage && errorMessage.page === 'unknown'" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container>
+    <mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1" [ngClass]="{'error-border': errorMessage?.page === page.pageId}" expanded="true" *ngFor="let page of pageSettings">
+      <mat-expansion-panel-header>
+        <mat-panel-title>{{page.pageId | titlecase}}</mat-panel-title>
+      </mat-expansion-panel-header>
+      <div fxLayout="column" fxLayoutAlign="start stretch" *ngFor="let table of page.tables" class="padding-gap-x-large">
+        <div fxLayout="row" fxLayoutAlign="space-between center" class="mt-1">
+          <mat-form-field fxFlex="10">
+            <mat-select [(ngModel)]="table.recordsPerPage" placeholder="Records/Page" name="{{table.tableId}}-page-size-options" tabindex="1" required>
+              <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
+                {{pageSizeOption}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field fxFlex="10">
+            <mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{table.tableId}}-sort-by" tabindex="2" required>
+              <mat-option *ngFor="let field of table.showColumns" [value]="field">
+                {{field | camelcaseWithReplace:'_'}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field fxFlex="10">
+            <mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{table.tableId}}-sort-order" tabindex="3" required>
+              <mat-option *ngFor="let so of sortOrders" [value]="so">
+                {{so}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field fxFlex="68">
+            <mat-select [(ngModel)]="table.showColumns" (selectionChange)="onShowColumnsChange(table)" placeholder="Show Columns" name="{{table.tableId}}-show-columns" tabindex="4" multiple required>
+              <mat-option *ngFor="let field of tableFieldsDef[table.tableId]" [value]="field" [disabled]="table.showColumns.length < 3 && table.showColumns.includes(field)">
+                {{field | camelcaseWithReplace:'_'}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
         </div>
-      </mat-expansion-panel>
-    </div>
+      </div>
+      <ng-container *ngIf="errorMessage && errorMessage?.page === page.pageId" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container>
+    </mat-expansion-panel>
   </form>
   <div fxLayout="row" class="mt-1">
     <button class="mr-1" mat-stroked-button color="primary" (click)="onResetPageSettings()" tabindex="10">Reset</button>
     <button mat-flat-button color="primary" (click)="onUpdatePageSettings()" tabindex="11">Save</button>
   </div>
 </div>
+<ng-template #errorObjectBlock let-error="error">
+  <div [ngClass]="{'error-border p-2': errorMessage.page === 'unknown'}">
+    <mat-panel-title *ngIf="errorMessage.page === 'unknown'">Page {{error.page | titlecase}}</mat-panel-title>
+    <mat-list role="list">
+      <mat-list-item *ngIf="error.message">
+        <mat-icon class="ml-1 icon-small red">close</mat-icon>
+        <span>{{error.message}}</span>      
+      </mat-list-item>
+      <mat-list-item *ngFor="let table of error.tables">
+        <mat-icon class="ml-1 icon-small red">close</mat-icon>
+        <span>Table {{table.table | titlecase}} {{table.message}}</span>
+      </mat-list-item>
+    </mat-list>
+  </div>
+</ng-template>
diff --git a/src/app/shared/components/node-config/page-settings/page-settings.component.ts b/src/app/shared/components/node-config/page-settings/page-settings.component.ts
index b7fb890b..33580022 100644
--- a/src/app/shared/components/node-config/page-settings/page-settings.component.ts
+++ b/src/app/shared/components/node-config/page-settings/page-settings.component.ts
@@ -3,7 +3,7 @@ import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { Actions } from '@ngrx/effects';
-import { faPenRuler } from '@fortawesome/free-solid-svg-icons';
+import { faPenRuler, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 import { APICallStatusEnum, CLNActions, CLN_DEFAULT_PAGE_SETTINGS, CLN_TABLE_FIELDS_DEF, PAGE_SIZE_OPTIONS, ScreenSizeEnum, SORT_ORDERS } from '../../../services/consts-enums-functions';
 import { LoggerService } from '../../../services/logger.service';
@@ -22,6 +22,7 @@ import { ApiCallStatusPayload } from '../../../models/apiCallsPayload';
 export class PageSettingsComponent implements OnInit, OnDestroy {
 
   public faPenRuler = faPenRuler;
+  public faExclamationTriangle = faExclamationTriangle;
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
diff --git a/src/app/shared/services/consts-enums-functions.ts b/src/app/shared/services/consts-enums-functions.ts
index aaaad3d5..7b3083d9 100644
--- a/src/app/shared/services/consts-enums-functions.ts
+++ b/src/app/shared/services/consts-enums-functions.ts
@@ -326,7 +326,7 @@ export const UI_MESSAGES = {
   LIST_NETWORK_NODES: 'Getting Network Nodes List...',
   GET_PAGE_SETTINGS: 'Getting Page Settings...',
   SET_PAGE_SETTINGS: 'Setting Page Settings...',
-  UPDATE_PAGE_SETTINGS: 'Updating Page Settings...',
+  UPDATE_PAGE_SETTINGS: 'Updating Page Layout...',
   LOG_OUT: 'Logging Out...'
 };
 
diff --git a/src/app/shared/theme/styles/root.scss b/src/app/shared/theme/styles/root.scss
index 5c919105..261ef948 100644
--- a/src/app/shared/theme/styles/root.scss
+++ b/src/app/shared/theme/styles/root.scss
@@ -1544,7 +1544,7 @@ th.mat-header-cell:last-of-type, td.mat-cell:last-of-type, td.mat-footer-cell:la
   border-radius: 2px;
   background: none;
   & .mat-expansion-panel-header {
-    padding: 0 $gap*3 0 $gap*3;
+    padding: 0 $gap*2 0 $gap*2;
     @include for_screensize(tab-port) {
       padding: 0 $gap 0 $gap;
     }
diff --git a/src/app/shared/theme/styles/theme-color.scss b/src/app/shared/theme/styles/theme-color.scss
index edd59c7d..da221582 100644
--- a/src/app/shared/theme/styles/theme-color.scss
+++ b/src/app/shared/theme/styles/theme-color.scss
@@ -207,6 +207,9 @@
 
   .mat-expansion-panel {
     border: 1px solid $foreground-divider;
+    &.error-border {
+      border: 1px solid red;
+    }
   }
 
   .more-button {