update to Angular 13 and Ionic 6

ui/.gitignore

@@ -22,6 +22,7 @@ npm-debug.log*
 
 postprocess.js
 
+/.angular
 /.idea
 /.ionic
 /.sass-cache

ui/package.json

@@ -13,44 +13,45 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/common": "^12.2.4",
-    "@angular/core": "^12.2.4",
-    "@angular/forms": "^12.2.4",
-    "@angular/platform-browser": "^12.2.4",
-    "@angular/platform-browser-dynamic": "^12.2.4",
-    "@angular/router": "^12.2.4",
-    "@ionic/angular": "^5.7.0",
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@angular/forms": "^13.0.0",
+    "@angular/platform-browser": "^13.0.0",
+    "@angular/platform-browser-dynamic": "^13.0.0",
+    "@angular/router": "^13.0.0",
+    "@ionic/angular": "^6.0.0-rc.2",
     "@ionic/storage-angular": "^3.0.6",
     "@start9labs/emver": "0.1.5",
     "ajv": "^6.12.6",
     "ansi-to-html": "^0.7.2",
-    "core-js": "^3.17.2",
+    "core-js": "^3.19.0",
+    "dompurify": "^2.3.3",
     "fast-json-patch": "^3.1.0",
     "fuse.js": "^6.4.6",
-    "marked": "3.0.2",
+    "marked": "4.0.1",
     "mustache": "^4.2.0",
-    "ng-qrcode": "^5.0.0",
+    "ng-qrcode": "^5.2.0",
     "patch-db-client": "file: ../../../patch-db/client",
     "rxjs": "^6.6.7",
     "uuid": "^8.3.2",
     "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.4",
-    "@angular/cli": "^12.2.4",
-    "@angular/compiler": "^12.2.4",
-    "@angular/compiler-cli": "^12.2.4",
-    "@angular/language-service": "^12.2.4",
-    "@ionic/angular-toolkit": "^4.0.0",
+    "@angular-devkit/build-angular": "^13.0.0",
+    "@angular/cli": "^13.0.0",
+    "@angular/compiler": "^13.0.0",
+    "@angular/compiler-cli": "^13.0.0",
+    "@ionic/angular-toolkit": "^5.0.0",
     "@types/json-pointer": "^1.0.31",
-    "@types/marked": "^3.0.0",
+    "@types/dompurify": "^2.3.1",
+    "@types/marked": "^4.0.0",
     "@types/mustache": "^4.1.2",
-    "@types/node": "^16.7.13",
+    "@types/node": "^16.11.0",
     "@types/uuid": "^8.3.1",
-    "node-html-parser": "^4.1.4",
+    "node-html-parser": "^5.1.0",
     "raw-loader": "^4.0.2",
-    "ts-node": "^10.2.0",
+    "ts-node": "^10.4.0",
     "tslint": "^6.1.3",
-    "typescript": "4.3.5"
+    "typescript": "4.4.4"
   }
 }

ui/src/app/pages/apps-routes/app-list/app-list.page.html

@@ -26,7 +26,8 @@
     </div>
 
     <ng-template #list>
-      <ion-item-group *ngIf="pkgs.length">
+      <ng-container *ngIf="pkgs.length">
+        <!-- header -->
         <ion-item-divider>
           {{ reordering ? 'Reorder' : 'Installed Services' }}
           <ion-button slot="end" fill="clear" (click)="toggleReorder()">
@@ -89,50 +90,44 @@
         </ion-grid>
 
         <!-- reordering -->
-        <ion-grid *ngIf="reordering">
-          <ion-row>
-            <ion-col size="12" style="padding: 0;">
-              <ion-reorder-group disabled="false" (ionItemReorder)="reorder($event)">
-                <div *ngFor="let pkg of pkgs" style="padding: 5px;">
-                  <ion-reorder>
-                    <ion-item style="--background: var(--ion-color-medium-shade);">
-                      <div
-                        *ngIf="!pkg.error"
-                        slot="start"
-                        class="bulb"
-                        [style.background-color]="connectionFailure ? 'var(--ion-color-dark)' : 'var(--ion-color-' + pkg.primaryRendering.color + ')'"
-                      ></div>
-                      <ion-icon
-                        *ngIf="pkg.error"
-                        slot="start"
-                        class="warning-icon"
-                        name="warning-outline"
-                        size="small"
-                        color="warning"
-                      ></ion-icon>
-                      <ion-thumbnail slot="start" class="ion-margin-start">
-                        <img [src]="pkg.entry['static-files'].icon" />
-                      </ion-thumbnail>
-                      <ion-label>
-                        <h2>{{ pkg.entry.manifest.title }}</h2>
-                        <p>{{ pkg.entry.manifest.version | displayEmver }}</p>
-                        <status
-                          [disconnected]="connectionFailure"
-                          [rendering]="pkg.primaryRendering"
-                          [installProgress]="pkg.installProgress?.totalProgress"
-                          weight="bold"
-                          size="small"
-                        ></status>
-                      </ion-label>
-                      <ion-icon slot="end" name="reorder-three" color="dark"></ion-icon>
-                    </ion-item>
-                  </ion-reorder>
-                </div>
-              </ion-reorder-group>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-item-group>
+        <ion-list>
+          <ion-reorder-group *ngIf="reordering" disabled="false" (ionItemReorder)="reorder($event)">
+            <ion-reorder *ngFor="let pkg of pkgs">
+              <ion-item style="--background: var(--ion-color-medium-shade);">
+                <div
+                  *ngIf="!pkg.error"
+                  slot="start"
+                  class="bulb"
+                  [style.background-color]="connectionFailure ? 'var(--ion-color-dark)' : 'var(--ion-color-' + pkg.primaryRendering.color + ')'"
+                ></div>
+                <ion-icon
+                  *ngIf="pkg.error"
+                  slot="start"
+                  class="warning-icon"
+                  name="warning-outline"
+                  size="small"
+                  color="warning"
+                ></ion-icon>
+                <ion-thumbnail slot="start" class="ion-margin-start">
+                  <img [src]="pkg.entry['static-files'].icon" />
+                </ion-thumbnail>
+                <ion-label>
+                  <h2>{{ pkg.entry.manifest.title }}</h2>
+                  <p>{{ pkg.entry.manifest.version | displayEmver }}</p>
+                  <status
+                    [disconnected]="connectionFailure"
+                    [rendering]="pkg.primaryRendering"
+                    [installProgress]="pkg.installProgress?.totalProgress"
+                    weight="bold"
+                    size="small"
+                  ></status>
+                </ion-label>
+                <ion-icon slot="end" name="reorder-three" color="dark"></ion-icon>
+              </ion-item>
+            </ion-reorder>
+          </ion-reorder-group>
+        </ion-list>
+      </ng-container>
 
       <ng-container *ngIf="recoveredPkgs.length && !reordering">
         <ion-item-group>

ui/src/app/pages/apps-routes/app-list/app-list.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core'
+import { ItemReorderEventDetail } from '@ionic/core'
 import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionFailure, ConnectionService } from 'src/app/services/connection.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
@@ -104,23 +105,14 @@ export class AppListPage {
 
   toggleReorder (): void {
     if (this.reordering) {
-      const newPkgs = []
-      this.order.forEach(id => {
-        const pkg = this.pkgs.find(pkg => pkg.entry.manifest.id === id)
-        if (pkg) {
-          newPkgs.push(pkg)
-        }
-      })
-      this.pkgs = newPkgs
+      this.order = this.pkgs.map(pkg => pkg.entry.manifest.id)
       this.setOrder()
     }
     this.reordering = !this.reordering
   }
 
-  async reorder (ev: any): Promise<void> {
-    ev.detail.complete()
-    const toMove = this.order.splice(ev.detail.from, 1)[0]
-    this.order.splice(ev.detail.to, 0, toMove)
+  async reorder (ev: CustomEvent<ItemReorderEventDetail>): Promise<void> {
+    this.pkgs = ev.detail.complete(this.pkgs)
   }
 
   async install (pkg: RecoveredInfo): Promise<void> {

ui/src/app/pipes/markdown.pipe.ts

@@ -1,5 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import * as marked from 'marked'
+import { marked } from 'marked'
+import * as DOMPurify from 'dompurify'
 
 @Pipe({
   name: 'markdown',
@@ -7,7 +8,9 @@ import * as marked from 'marked'
 export class MarkdownPipe implements PipeTransform {
   transform (value: any): any {
     if (value && value.length > 0) {
-      return marked(value)
+      const html = marked(value)
+      const sanitized = DOMPurify.sanitize(html)
+      return sanitized
     }
     return value
   }

ui/src/global.scss

@@ -182,14 +182,8 @@ ion-button {
   white-space: nowrap;
 }
 
-.modal-wrapper.sc-ion-modal-md {
-  border-radius: 6px;
-  border: 2px solid rgba(255,255,255,.03);
-  box-shadow: 0 0 70px 70px black;
-}
-
 .qr-modal {
-  .modal-wrapper {
+  &::part(content) {
     width: 400px !important;
     height: 400px !important;
     top: unset !important;
@@ -197,28 +191,31 @@ ion-button {
   }
 }
 
-.modal-wrapper {
+ion-modal::part(content) {
   position: absolute;
   height: 90% !important;
   top: 5%;
   width: 90% !important;
   left: 5%;
   display: block;
+
+  border-radius: 6px;
+  border: 2px solid rgba(255,255,255,.03);
+  box-shadow: 0 0 70px 70px black;
 }
 
 @media (min-width:1000px) {
-  .modal-wrapper {
+  ion-modal::part(content) {
     position: absolute;
     height: 80% !important;
     top: 10%;
     width: 50% !important;
     left: 25%;
-    display: block;
   }
 }
 
 .alertlike-modal {
-  .modal-wrapper {
+  &::part(content) {
     max-height: 380px !important;
     top: 25% !important;
     width: 90% !important;
@@ -229,7 +226,7 @@ ion-button {
 
 @media (min-width:1000px) {
   .alertlike-modal {
-    .modal-wrapper {
+    &::part(content) {
       width: 60% !important;
       left: 20% !important;
     }

ui/tsconfig.json

@@ -12,6 +12,7 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "strictNullChecks": false,
+    "skipLibCheck": true,
     "target": "es2015",
     "paths": {
       "stream": ["./node_modules/stream-browserify"],