add qr code to insights->about->tor (#2379)

* add qr code to insights->about->tor

* fix address PR feedback from @elvece; inject modelCtrl in ctor

frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.module.ts

@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
 import { ServerSpecsPage } from './server-specs.page'
 import { EmverPipesModule } from '@start9labs/shared'
 import { TuiLetModule } from '@taiga-ui/cdk'
+import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
 
 const routes: Routes = [
   {
@@ -18,6 +19,7 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
+    QRComponentModule,
     EmverPipesModule,
     TuiLetModule,
   ],

frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.html

@@ -32,9 +32,27 @@
         <h2>Tor</h2>
         <p>{{ server['tor-address'] }}</p>
       </ion-label>
-      <ion-button slot="end" fill="clear" (click)="copy(server['tor-address'])">
-        <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
+      <div slot="end">
+        <ion-button
+          fill="clear"
+          (click)="showQR(server['tor-address'])"
+        >
+          <ion-icon
+            slot="icon-only"
+            name="qr-code-outline"
+            size="small"
+          ></ion-icon>
         </ion-button>
+        <ion-button
+          fill="clear"
+          (click)="copy(server['tor-address'])">
+          <ion-icon
+            slot="icon-only"
+            name="copy-outline"
+            size="small"
+          ></ion-icon>
+        </ion-button>
+      </div>
     </ion-item>
     <ion-item>
       <ion-label class="break-all">

frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { ToastController } from '@ionic/angular'
+import { ModalController, ToastController } from '@ionic/angular'
 import { PatchDB } from 'patch-db-client'
 import { ConfigService } from 'src/app/services/config.service'
+import { QRComponent } from 'src/app/components/qr/qr.component'
 import { copyToClipboard } from '@start9labs/shared'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 
@@ -16,6 +17,7 @@ export class ServerSpecsPage {
 
   constructor(
     private readonly toastCtrl: ToastController,
+    private readonly modalCtrl: ModalController,
     private readonly patch: PatchDB<DataModel>,
     private readonly config: ConfigService,
   ) {}
@@ -40,6 +42,17 @@ export class ServerSpecsPage {
     await toast.present()
   }
 
+  async showQR(text: string): Promise<void> {
+    const modal = await this.modalCtrl.create({
+      component: QRComponent,
+      componentProps: {
+        text,
+      },
+      cssClass: 'qr-modal',
+    })
+    await modal.present()
+  }
+
   asIsOrder(a: any, b: any) {
     return 0
   }