don't deprecate wifi

web/projects/ui/src/app/pages/server-routes/server-routing.module.ts

@@ -76,7 +76,7 @@ const routes: Routes = [
       import('./ssh-keys/ssh-keys.module').then(m => m.SSHKeysPageModule),
   },
   {
-    path: 'wifi',
+    path: 'wireless',
     loadChildren: () =>
       import('./wifi/wifi.module').then(m => m.WifiPageModule),
   },

web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html

@@ -50,8 +50,7 @@
       <ion-item
         *ngFor="let button of cat.value"
         button
-        [style.display]="((button.title === 'Repair Disk' && !(showDiskRepair$ | async))) || (button.title === 'WiFi' && !(wifiConnected$ | async)) ? 'none' : 'block'"
-        [color]="button.title === 'WiFi' ? 'warning' : ''"
+        [style.display]="((button.title === 'Repair Disk' && !(showDiskRepair$ | async))) ? 'none' : 'block'"
         [detail]="button.detail"
         [disabled]="button.disabled$ | async"
         (click)="button.action()"

web/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -40,7 +40,6 @@ 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,
@@ -475,11 +474,14 @@ export class ServerShowPage {
         disabled$: of(false),
       },
       {
-        title: 'WiFi',
-        description: 'WiFi is deprecated. Click to learn more.',
+        title: 'Wireless',
+        description:
+          'Connect your server to WiFi instead of Ethernet (not recommended)',
         icon: 'wifi',
         action: () =>
-          this.navCtrl.navigateForward(['wifi'], { relativeTo: this.route }),
+          this.navCtrl.navigateForward(['wireless'], {
+            relativeTo: this.route,
+          }),
         detail: true,
         disabled$: of(false),
       },

web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html

@@ -3,8 +3,8 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="system"></ion-back-button>
     </ion-buttons>
-    <ion-title>WiFi Settings</ion-title>
-    <ion-buttons slot="end">
+    <ion-title>Wireless Settings</ion-title>
+    <ion-buttons slot="end" *ngIf="hasWifi$ | async">
       <ion-button (click)="getWifi()">
         Refresh
         <ion-icon slot="end" name="refresh"></ion-icon>
@@ -13,163 +13,149 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top with-widgets">
-  <ion-item-group>
-    <!-- always -->
-    <ion-item color="warning" class="ion-margin">
-      <ion-icon slot="start" name="warning-outline"></ion-icon>
-      <ion-label>
-        <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-content class="ion-padding with-widgets">
+  <ng-container *ngIf="connection$ | async">
+    <ion-item-group *ngIf="hasWifi$ | async; else noWifi">
+      <ion-item-divider>Country</ion-item-divider>
 
-    <ion-item-divider>Country</ion-item-divider>
-
-    <!-- not loading -->
-    <ion-item
-      button
-      detail="false"
-      (click)="presentAlertCountry()"
-      [disabled]="loading"
-    >
-      <ion-icon slot="start" name="earth-outline" size="large"></ion-icon>
-      <ion-label *ngIf="wifi.country">
-        {{ wifi.country }} - {{ this.countries[wifi.country] }}
-      </ion-label>
-      <ion-label *ngIf="!wifi.country">Select Country</ion-label>
-    </ion-item>
-
-    <!-- loading  -->
-    <ng-container *ngIf="loading">
-      <ion-item-divider>Saved Networks</ion-item-divider>
-      <ion-item *ngFor="let entry of ['', '']" class="skeleton-parts">
-        <ion-button slot="start" fill="clear">
-          <ion-skeleton-text
-            animated
-            style="width: 30px; height: 30px; border-radius: 0"
-          ></ion-skeleton-text>
-        </ion-button>
-        <ion-label>
-          <ion-skeleton-text animated style="width: 18%"></ion-skeleton-text>
-        </ion-label>
-      </ion-item>
-
-      <ion-item-divider>Available Networks</ion-item-divider>
-      <ion-item *ngFor="let entry of ['', '']" class="skeleton-parts">
-        <ion-button slot="start" fill="clear">
-          <ion-skeleton-text
-            animated
-            style="width: 30px; height: 30px; border-radius: 0"
-          ></ion-skeleton-text>
-        </ion-button>
-        <ion-label>
-          <ion-skeleton-text animated style="width: 18%"></ion-skeleton-text>
-        </ion-label>
-      </ion-item>
-    </ng-container>
-
-    <!-- not loading -->
-    <ng-container *ngIf="!loading && wifi.country">
-      <ion-item-divider *ngIf="!(wifi.ssids | empty)">
-        Saved Networks
-      </ion-item-divider>
+      <!-- not loading -->
       <ion-item
         button
         detail="false"
-        *ngFor="let ssid of wifi.ssids | keyvalue"
-        (click)="presentAction(ssid.key)"
+        (click)="presentAlertCountry()"
+        [disabled]="loading"
       >
-        <div
-          *ngIf="ssid.key !== wifi.connected"
-          slot="start"
-          style="padding-right: 32px"
-        ></div>
-        <ion-icon
-          *ngIf="ssid.key === wifi.connected"
-          slot="start"
-          size="large"
-          name="checkmark"
-          color="success"
-        ></ion-icon>
-        <ion-label>{{ ssid.key }}</ion-label>
-        <img
-          *ngIf="ssid.value > 0 && ssid.value < 5"
-          slot="end"
-          src="assets/img/icons/wifi-1.png"
-          style="max-width: 32px"
-        />
-        <img
-          *ngIf="ssid.value >= 5 && ssid.value < 50"
-          slot="end"
-          src="assets/img/icons/wifi-1.png"
-          style="max-width: 32px"
-        />
-        <img
-          *ngIf="ssid.value >= 50 && ssid.value < 90"
-          slot="end"
-          src="assets/img/icons/wifi-2.png"
-          style="max-width: 32px"
-        />
-        <img
-          *ngIf="ssid.value >= 90"
-          slot="end"
-          src="assets/img/icons/wifi-3.png"
-          style="max-width: 32px"
-        />
+        <ion-icon slot="start" name="earth-outline" size="large"></ion-icon>
+        <ion-label *ngIf="wifi.country">
+          {{ wifi.country }} - {{ this.countries[wifi.country] }}
+        </ion-label>
+        <ion-label *ngIf="!wifi.country">Select Country</ion-label>
       </ion-item>
 
-      <ion-item-divider>Available Networks</ion-item-divider>
-      <ng-container *ngFor="let avWifi of wifi.availableWifi">
+      <!-- loading  -->
+      <ng-container *ngIf="loading">
+        <ion-item-divider>Saved Networks</ion-item-divider>
+        <ion-item *ngFor="let entry of ['', '']" class="skeleton-parts">
+          <ion-button slot="start" fill="clear">
+            <ion-skeleton-text
+              animated
+              style="width: 30px; height: 30px; border-radius: 0"
+            ></ion-skeleton-text>
+          </ion-button>
+          <ion-label>
+            <ion-skeleton-text animated style="width: 18%"></ion-skeleton-text>
+          </ion-label>
+        </ion-item>
+
+        <ion-item-divider>Available Networks</ion-item-divider>
+        <ion-item *ngFor="let entry of ['', '']" class="skeleton-parts">
+          <ion-button slot="start" fill="clear">
+            <ion-skeleton-text
+              animated
+              style="width: 30px; height: 30px; border-radius: 0"
+            ></ion-skeleton-text>
+          </ion-button>
+          <ion-label>
+            <ion-skeleton-text animated style="width: 18%"></ion-skeleton-text>
+          </ion-label>
+        </ion-item>
+      </ng-container>
+
+      <!-- not loading -->
+      <ng-container *ngIf="!loading && wifi.country">
+        <ion-item-divider *ngIf="!(wifi.ssids | empty)">
+          Saved Networks
+        </ion-item-divider>
         <ion-item
           button
           detail="false"
-          (click)="presentModalAdd(avWifi.ssid, !!avWifi.security.length)"
-          *ngIf="avWifi.ssid"
+          *ngFor="let ssid of wifi.ssids | keyvalue"
+          (click)="presentAction(ssid.key)"
         >
-          <ion-label>{{ avWifi.ssid }}</ion-label>
+          <div
+            *ngIf="ssid.key !== wifi.connected"
+            slot="start"
+            style="padding-right: 32px"
+          ></div>
+          <ion-icon
+            *ngIf="ssid.key === wifi.connected"
+            slot="start"
+            size="large"
+            name="checkmark"
+            color="success"
+          ></ion-icon>
+          <ion-label>{{ ssid.key }}</ion-label>
           <img
-            *ngIf="avWifi.strength < 5"
+            *ngIf="ssid.value > 0 && ssid.value < 5"
             slot="end"
             src="assets/img/icons/wifi-1.png"
             style="max-width: 32px"
           />
           <img
-            *ngIf="avWifi.strength >= 5 && avWifi.strength < 50"
+            *ngIf="ssid.value >= 5 && ssid.value < 50"
             slot="end"
             src="assets/img/icons/wifi-1.png"
             style="max-width: 32px"
           />
           <img
-            *ngIf="avWifi.strength >= 50 && avWifi.strength < 90"
+            *ngIf="ssid.value >= 50 && ssid.value < 90"
             slot="end"
             src="assets/img/icons/wifi-2.png"
             style="max-width: 32px"
           />
           <img
-            *ngIf="avWifi.strength >= 90"
+            *ngIf="ssid.value >= 90"
             slot="end"
             src="assets/img/icons/wifi-3.png"
             style="max-width: 32px"
           />
         </ion-item>
+
+        <ion-item-divider>Available Networks</ion-item-divider>
+        <ng-container *ngFor="let avWifi of wifi.availableWifi">
+          <ion-item
+            button
+            detail="false"
+            (click)="presentModalAdd(avWifi.ssid, !!avWifi.security.length)"
+            *ngIf="avWifi.ssid"
+          >
+            <ion-label>{{ avWifi.ssid }}</ion-label>
+            <img
+              *ngIf="avWifi.strength < 5"
+              slot="end"
+              src="assets/img/icons/wifi-1.png"
+              style="max-width: 32px"
+            />
+            <img
+              *ngIf="avWifi.strength >= 5 && avWifi.strength < 50"
+              slot="end"
+              src="assets/img/icons/wifi-1.png"
+              style="max-width: 32px"
+            />
+            <img
+              *ngIf="avWifi.strength >= 50 && avWifi.strength < 90"
+              slot="end"
+              src="assets/img/icons/wifi-2.png"
+              style="max-width: 32px"
+            />
+            <img
+              *ngIf="avWifi.strength >= 90"
+              slot="end"
+              src="assets/img/icons/wifi-3.png"
+              style="max-width: 32px"
+            />
+          </ion-item>
+        </ng-container>
+        <ion-item button detail="false" (click)="presentModalAdd()">
+          <ion-icon slot="start" name="add" color="dark"></ion-icon>
+          <ion-label>
+            <b>Join Another Network</b>
+          </ion-label>
+        </ion-item>
       </ng-container>
-      <ion-item button detail="false" (click)="presentModalAdd()">
-        <ion-icon slot="start" name="add" color="dark"></ion-icon>
-        <ion-label>
-          <b>Join Another Network</b>
-        </ion-label>
-      </ion-item>
-    </ng-container>
-  </ion-item-group>
+    </ion-item-group>
+    <ng-template #noWifi>
+      <p>No wireless interface detected.</p>
+    </ng-template>
+  </ng-container>
 </ion-content>

web/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts

@@ -9,11 +9,14 @@ import { WINDOW } from '@ng-web-apis/common'
 import { ErrorService, LoadingService, pauseFor } from '@start9labs/shared'
 import { CT } from '@start9labs/start-sdk'
 import { TuiDialogOptions } from '@taiga-ui/core'
+import { PatchDB } from 'patch-db-client'
 import { FormComponent, FormContext } from 'src/app/components/form.component'
 import { RR } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConfigService } from 'src/app/services/config.service'
+import { ConnectionService } from 'src/app/services/connection.service'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'
 
 export interface WiFiForm {
   ssid: string
@@ -31,6 +34,7 @@ export class WifiPage {
   countries = require('../../../util/countries.json') as {
     [key: string]: string
   }
+  readonly hasWifi$ = this.patch.watch$('serverInfo', 'wifi', 'interface')
 
   constructor(
     private readonly api: ApiService,
@@ -41,6 +45,8 @@ export class WifiPage {
     private readonly errorService: ErrorService,
     private readonly actionCtrl: ActionSheetController,
     private readonly config: ConfigService,
+    private readonly patch: PatchDB<DataModel>,
+    readonly connection$: ConnectionService,
     @Inject(WINDOW) private readonly windowRef: Window,
   ) {}