From 932b53d92d6118b37faad83190af0cad48a42ca5 Mon Sep 17 00:00:00 2001
From: Matt Hill <mattnine@protonmail.com>
Date: Tue, 9 Apr 2024 21:06:06 -0600
Subject: [PATCH] deprecate wifi

---
 web/package-lock.json                         |  4 +--
 .../ui/src/app/app/menu/menu.component.html   |  6 +++++
 .../ui/src/app/app/menu/menu.component.ts     |  2 ++
 .../server-show/server-show.page.html         |  4 +--
 .../server-show/server-show.page.ts           |  3 ++-
 .../pages/server-routes/wifi/wifi.page.html   | 27 ++++++++++---------
 .../app/pages/server-routes/wifi/wifi.page.ts | 12 ++++++++-
 7 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 90a6ad58d..68156eb21 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "startos-ui",
-  "version": "0.3.5.1",
+  "version": "0.3.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "startos-ui",
-      "version": "0.3.5.1",
+      "version": "0.3.5.2",
       "dependencies": {
         "@angular/animations": "^14.1.0",
         "@angular/common": "^14.1.0",
diff --git a/web/projects/ui/src/app/app/menu/menu.component.html b/web/projects/ui/src/app/app/menu/menu.component.html
index 6db19dea6..0814c81ad 100644
--- a/web/projects/ui/src/app/app/menu/menu.component.html
+++ b/web/projects/ui/src/app/app/menu/menu.component.html
@@ -22,6 +22,12 @@
       <ion-label class="label montserrat" routerLinkActive="label_selected">
         {{ page.title }}
       </ion-label>
+      <ion-icon
+        *ngIf="page.url === '/system' && (wifiConnected$ | async)"
+        color="warning"
+        size="small"
+        name="warning"
+      ></ion-icon>
       <ion-icon
         *ngIf="page.url === '/system' && (showEOSUpdate$ | async)"
         color="success"
diff --git a/web/projects/ui/src/app/app/menu/menu.component.ts b/web/projects/ui/src/app/app/menu/menu.component.ts
index 7a7eb5d29..5c1fbe8bd 100644
--- a/web/projects/ui/src/app/app/menu/menu.component.ts
+++ b/web/projects/ui/src/app/app/menu/menu.component.ts
@@ -64,6 +64,8 @@ export class MenuComponent {
     'unreadNotificationCount',
   )
 
+  readonly wifiConnected$ = this.patch.watch$('serverInfo', 'wifi', 'selected')
+
   readonly snekScore$ = this.patch.watch$('ui', 'gaming', 'snake', 'highScore')
 
   readonly showEOSUpdate$ = this.eosService.showUpdate$
diff --git a/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html b/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
index 02cba9052..01ecf897e 100644
--- a/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
+++ b/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
@@ -50,7 +50,8 @@
       <ion-item
         *ngFor="let button of cat.value"
         button
-        [style.display]="(button.title === 'Repair Disk' && !(showDiskRepair$ | async)) ? 'none' : 'block'"
+        [style.display]="((button.title === 'Repair Disk' && !(showDiskRepair$ | async))) || (button.title === 'WiFi' && !(wifiConnected$ | async)) ? 'none' : 'block'"
+        [color]="button.title === 'WiFi' ? 'warning' : ''"
         [detail]="button.detail"
         [disabled]="button.disabled$ | async"
         (click)="button.action()"
@@ -59,7 +60,6 @@
         <ion-label>
           <h2>{{ button.title }}</h2>
           <p *ngIf="button.description">{{ button.description }}</p>
-
           <!-- "Create Backup" button only -->
           <p *ngIf="button.title === 'Create Backup'">
             <ng-container *ngIf="server.statusInfo as statusInfo">
diff --git a/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts b/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
index b479f1750..73763578e 100644
--- a/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
@@ -40,6 +40,7 @@ export class ServerShowPage {
   readonly server$ = this.patch.watch$('serverInfo')
   readonly showUpdate$ = this.eosService.showUpdate$
   readonly showDiskRepair$ = this.ClientStorageService.showDiskRepair$
+  readonly wifiConnected$ = this.patch.watch$('serverInfo', 'wifi', 'selected')
 
   constructor(
     private readonly alertCtrl: AlertController,
@@ -553,7 +554,7 @@ export class ServerShowPage {
       },
       {
         title: 'WiFi',
-        description: 'Add or remove WiFi networks',
+        description: 'WiFi is deprecated. Click to learn more.',
         icon: 'wifi',
         action: () =>
           this.navCtrl.navigateForward(['wifi'], { relativeTo: this.route }),
diff --git a/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html b/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html
index 011704cc2..08387fcbc 100644
--- a/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html
+++ b/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html
@@ -16,21 +16,22 @@
 <ion-content class="ion-padding-top with-widgets">
   <ion-item-group>
     <!-- always -->
-    <ion-item>
+    <ion-item color="warning" class="ion-margin">
+      <ion-icon slot="start" name="warning-outline"></ion-icon>
       <ion-label>
-        <h2>
-          Adding WiFi credentials to your StartOS allows you to remove the
-          Ethernet cable and move the device anywhere you want. StartOS will
-          automatically connect to available networks.
-          <a
-            href="https://docs.start9.com/0.3.5.x/user-manual/wifi"
-            target="_blank"
-            rel="noreferrer"
-          >
-            View instructions
-          </a>
-        </h2>
+        <h2 style="font-weight: bold">WiFi is deprecated</h2>
+        <p style="font-weight: 600">
+          WiFi will be eliminated from StartOS in version v0.4.0, expected soon.
+          Before then, we highly recommend switching your server to a direct,
+          Ethernet connection, which is faster and more reliable. If using
+          Ethernet is not possible for you, we recommend using a WiFi extender
+          instead.
+        </p>
       </ion-label>
+      <ion-button slot="end" color="light" (click)="openDocs()">
+        Learn More
+        <ion-icon slot="end" name="open-outline"></ion-icon>
+      </ion-button>
     </ion-item>
 
     <ion-item-divider>Country</ion-item-divider>
diff --git a/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts b/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts
index bac270613..e6d5da252 100644
--- a/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts
+++ b/web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, Inject } from '@angular/core'
 import {
   ActionSheetController,
   AlertController,
@@ -14,6 +14,7 @@ import { RR } from 'src/app/services/api/api.types'
 import { pauseFor, ErrorToastService } from '@start9labs/shared'
 import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
 import { ConfigService } from 'src/app/services/config.service'
+import { WINDOW } from '@ng-web-apis/common'
 
 @Component({
   selector: 'wifi',
@@ -36,12 +37,21 @@ export class WifiPage {
     private readonly errToast: ErrorToastService,
     private readonly actionCtrl: ActionSheetController,
     private readonly config: ConfigService,
+    @Inject(WINDOW) private readonly windowRef: Window,
   ) {}
 
   async ngOnInit() {
     await this.getWifi()
   }
 
+  async openDocs() {
+    this.windowRef.open(
+      'https://docs.start9.com/user-manual/wifi.html',
+      '_blank',
+      'noreferrer',
+    )
+  }
+
   async getWifi(timeout: number = 0): Promise<void> {
     this.loading = true
     try {