From 34068ef6339b4b5a95301fcc0e71f5ad69b14c45 Mon Sep 17 00:00:00 2001
From: Benjamin B <7598058+BBlackwo@users.noreply.github.com>
Date: Thu, 2 Jun 2022 07:43:57 +1000
Subject: [PATCH] Link to tor address on LAN setup page (#1277) (#1466)

* style: format lan page component

* Link to tor address on LAN setup page (#1277)
---
 .../app/pages/server-routes/lan/lan.page.html | 48 ++++++++++++++-----
 .../app/pages/server-routes/lan/lan.page.ts   | 19 ++++----
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html b/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html
index 9854cbbd9..229f1e925 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html
@@ -8,36 +8,62 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-
   <ion-item-group>
     <!-- about -->
     <ion-item class="ion-padding-bottom">
       <ion-label>
         <h2>
-          Connecting to your Embassy over LAN provides a lightning fast experience and is a reliable fallback in case Tor is having problems. To connect to your Embassy's .local address, you must:
+          Connecting to your Embassy over LAN provides a lightning fast
+          experience and is a reliable fallback in case Tor is having problems.
+          To connect to your Embassy's .local address, you must:
           <ol>
-            <li>Be connected to the same Local Area Network (LAN) as your Embassy.</li>
-            <li>Download and trust your Embassy's SSL Certificate Authority (below).</li>
+            <li>
+              Be connected to the same Local Area Network (LAN) as your Embassy.
+            </li>
+            <li>
+              Download and trust your Embassy's SSL Certificate Authority
+              (below).
+            </li>
           </ol>
-          View the full <a href="https://start9.com/latest/user-manual/connecting/connecting-lan" target="_blank" rel="noreferrer">instructions</a>.
+          View the full
+          <a
+            href="https://start9.com/latest/user-manual/connecting/connecting-lan"
+            target="_blank"
+            rel="noreferrer"
+            >instructions</a
+          >.
         </h2>
-        <ng-container *ngIf="lanDisabled">
+        <ng-container *ngIf="downloadIsDisabled && server$ | async as server">
           <br />
-          <ion-text color="warning" [innerHtml]="lanDisabled"></ion-text>
+          <ion-text color="warning">
+            For security reasons, you must setup LAN over a
+            <a
+              [attr.href]="server['tor-address']"
+              target="_blank"
+              rel="noreferrer"
+              >Tor connection</a
+            >.
+          </ion-text>
         </ng-container>
       </ion-label>
     </ion-item>
 
-    <ion-item button (click)="installCert()" [disabled]="lanDisabled">
+    <ion-item button (click)="installCert()" [disabled]="downloadIsDisabled">
       <ion-icon slot="start" name="download-outline" size="large"></ion-icon>
       <ion-label>
         <h1>Download Root CA</h1>
-        <p>Download and trust your Embassy's Root Certificate Authority to establish a secure, https connection over LAN.</p>
+        <p>
+          Download and trust your Embassy's Root Certificate Authority to
+          establish a secure, https connection over LAN.
+        </p>
       </ion-label>
     </ion-item>
   </ion-item-group>
 
   <!-- hidden element for downloading cert -->
-  <a id="install-cert" href="/public/eos/local.crt" download="Embassy Local CA.crt"></a>
-
+  <a
+    id="install-cert"
+    href="/public/eos/local.crt"
+    download="Embassy Local CA.crt"
+  ></a>
 </ion-content>
diff --git a/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.ts b/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.ts
index 3c95b8252..5943d1ad6 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core'
 import { ConfigService } from 'src/app/services/config.service'
+import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
   selector: 'lan',
@@ -7,20 +8,20 @@ import { ConfigService } from 'src/app/services/config.service'
   styleUrls: ['./lan.page.scss'],
 })
 export class LANPage {
-  lanAddress: string
-  lanDisabled: string
+  downloadIsDisabled: boolean
 
-  constructor (
+  readonly server$ = this.patch.watch$('server-info')
+
+  constructor(
     private readonly config: ConfigService,
-  ) { }
+    private readonly patch: PatchDbService,
+  ) {}
 
-  ngOnInit () {
-    if (!this.config.isTor()) {
-      this.lanDisabled = 'For security reasons, you must setup LAN over a Tor connection. Please navigate to your Embassy Tor Address and try again.'
-    }
+  ngOnInit() {
+    this.downloadIsDisabled = !this.config.isTor()
   }
 
-  installCert (): void {
+  installCert(): void {
     document.getElementById('install-cert').click()
   }
 }