fix alert and toast for wifi connect

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

@@ -1,13 +1,13 @@
 <ion-header>
-  <ion-buttons slot="start">
-    <pwa-back-button></pwa-back-button>
-  </ion-buttons>
   <ion-toolbar>
+    <ion-buttons slot="start">
+      <pwa-back-button></pwa-back-button>
+    </ion-buttons>
     <ion-title>Add Network</ion-title>
+    <ion-buttons slot="end">
+      <badge-menu-button></badge-menu-button>
+    </ion-buttons>
   </ion-toolbar>
-  <ion-buttons slot="end">
-    <badge-menu-button></badge-menu-button>
-  </ion-buttons>
 </ion-header>
 
 <ion-content class="ion-padding-top">

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

@@ -3,6 +3,7 @@ import { NavController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
 import { WifiService } from '../wifi.service'
 import { LoaderService } from 'src/app/services/loader.service'
+import { ServerModel } from 'src/app/models/server-model'
 
 @Component({
   selector: 'wifi-add',
@@ -21,9 +22,11 @@ export class WifiAddPage {
     private readonly apiService: ApiService,
     private readonly loader: LoaderService,
     private readonly wifiService: WifiService,
+    private readonly serverModel: ServerModel,
   ) { }
 
   async add (): Promise<void> {
+    this.error = ''
     this.loader.of({
       message: 'Saving...',
       spinner: 'lines',
@@ -31,9 +34,6 @@ export class WifiAddPage {
     }).displayDuringAsync( async () => {
       await this.apiService.addWifi(this.ssid, this.password, this.countryCode, false)
       this.wifiService.addWifi(this.ssid)
-      this.ssid = ''
-      this.password = ''
-      this.error = ''
       this.navCtrl.back()
     }).catch(e => {
       console.error(e)
@@ -42,19 +42,22 @@ export class WifiAddPage {
   }
 
   async addAndConnect (): Promise<void> {
+    this.error = ''
     this.loader.of({
       message: 'Connecting. This could take while...',
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync( async () => {
+      const current = this.serverModel.peek().wifi.current
       await this.apiService.addWifi(this.ssid, this.password, this.countryCode, true)
       const success = await this.wifiService.confirmWifi(this.ssid)
-      if (!success) { return }
+      if (!success) {
-      this.wifiService.addWifi(this.ssid)
+        this.wifiService.addWifi(this.ssid)
-      this.ssid = ''
+        this.navCtrl.back()
-      this.password = ''
+        this.wifiService.presentAlertSuccess(this.ssid, current)
-      this.error = ''
+      } else {
-      this.navCtrl.back()
+        this.wifiService.presentToastFail()
+      }
     }).catch (e => {
       console.error(e)
       this.error = e.message

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

@@ -71,14 +71,20 @@ export class WifiListPage {
 
   // Let's add country code here.
   async connect (ssid: string): Promise<void> {
+    this.error = ''
     this.loader.of({
       message: 'Connecting. This could take while...',
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync(async () => {
+      const current = this.server.wifi.getValue().current
       await this.apiService.connectWifi(ssid)
-      await this.wifiService.confirmWifi(ssid)
+      const success = await this.wifiService.confirmWifi(ssid)
-      this.error = ''
+      if (success) {
+        this.wifiService.presentAlertSuccess(ssid, current)
+      } else {
+        this.wifiService.presentToastFail()
+      }
     }).catch(e => {
       console.error(e)
       this.error = e.message
@@ -86,6 +92,7 @@ export class WifiListPage {
   }
 
   async delete (ssid: string): Promise<void> {
+    this.error = ''
     this.loader.of({
       message: 'Deleting...',
       spinner: 'lines',

ui/src/app/pages/server-routes/wifi/wifi.service.ts

@@ -31,13 +31,10 @@ export class WifiService {
     const maxAttempts = 5
     let attempts = 0
 
-    let old: string | null
-
     while (attempts < maxAttempts) {
       try {
         const start = new Date().valueOf()
         const { current, ssids } = (await this.apiService.getServer(timeout)).wifi
-        old = current
         const end = new Date().valueOf()
         if (current === ssid) {
           this.serverModel.update({ wifi: { current, ssids } })
@@ -45,7 +42,7 @@ export class WifiService {
         } else {
           attempts++
           const diff = end - start
-          await pauseFor(Math.max(0, timeout - diff))
+          await pauseFor(Math.max(2000, timeout - diff))
           if (attempts === maxAttempts) {
             this.serverModel.update({ wifi: { current, ssids } })
           }
@@ -56,35 +53,38 @@ export class WifiService {
       }
     }
 
-    if (this.serverModel.peek().wifi.current === ssid) {
+    return this.serverModel.peek().wifi.current === ssid
-      let message = 'Note. It may take a few minutes for your Embassy to reconnect over Tor. If it does not reconnect after 5 minutes, please unplug the device and plug it back in. You may also need to hard refresh your browser cache.'
+  }
-      const alert = await this.alertCtrl.create({
+
-        header: `Connected to "${ssid}"`,
+  async presentToastFail (): Promise<void> {
-        message: old !== null ? message : 'You may now unplug your Embassy from Ethernet.<br /></br />' + message,
+    const toast = await this.toastCtrl.create({
-        buttons: ['OK'],
+      header: 'Failed to connect:',
-      })
+      message: `Check credentials and try again`,
-      await alert.present()
+      position: 'bottom',
-    } else {
+      duration: 4000,
-      const toast = await this.toastCtrl.create({
+      buttons: [
-        header: 'Failed to connect:',
+        {
-        message: `Check credentials and try again`,
+          side: 'start',
-        position: 'bottom',
+          icon: 'close',
-        duration: 4000,
+          handler: () => {
-        buttons: [
+            return true
-          {
-            side: 'start',
-            icon: 'close',
-            handler: () => {
-              return true
-            },
           },
-        ],
+        },
-        cssClass: 'notification-toast',
+      ],
-      })
+      cssClass: 'notification-toast',
+    })
 
-      setTimeout(() => toast.present(), 300)
+    await toast.present()
+  }
 
-      return false
+  async presentAlertSuccess (current: string, old?: string): Promise<void> {
-    }
+    let message = 'Note. It may take a few minutes for your Embassy to reconnect over Tor. If it does not reconnect after 5 minutes, please unplug the device and plug it back in. You may also need to hard refresh your browser cache.'
+    const alert = await this.alertCtrl.create({
+      header: `Connected to "${current}"`,
+      message: old ? message : 'You may now unplug your Embassy from Ethernet.<br /></br />' + message,
+      buttons: ['OK'],
+    })
+
+    await alert.present()
   }
 }