diff --git a/ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.html b/ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.html index 724789978..1da17ffe7 100644 --- a/ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.html +++ b/ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.html @@ -1,13 +1,13 @@ - - - + + + Add Network + + + - - - diff --git a/ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.ts b/ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.ts index 47819424d..ede6e6041 100644 --- a/ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.ts +++ b/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 { + 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 { + 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 } - this.wifiService.addWifi(this.ssid) - this.ssid = '' - this.password = '' - this.error = '' - this.navCtrl.back() + if (!success) { + this.wifiService.addWifi(this.ssid) + this.navCtrl.back() + this.wifiService.presentAlertSuccess(this.ssid, current) + } else { + this.wifiService.presentToastFail() + } }).catch (e => { console.error(e) this.error = e.message diff --git a/ui/src/app/pages/server-routes/wifi/wifi.page.ts b/ui/src/app/pages/server-routes/wifi/wifi.page.ts index 7369d3991..1f291b0f2 100644 --- a/ui/src/app/pages/server-routes/wifi/wifi.page.ts +++ b/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 { + 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) - this.error = '' + const success = await this.wifiService.confirmWifi(ssid) + 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 { + this.error = '' this.loader.of({ message: 'Deleting...', spinner: 'lines', diff --git a/ui/src/app/pages/server-routes/wifi/wifi.service.ts b/ui/src/app/pages/server-routes/wifi/wifi.service.ts index 0aa5cd7e9..3112d4271 100644 --- a/ui/src/app/pages/server-routes/wifi/wifi.service.ts +++ b/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) { - 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}"`, - message: old !== null ? message : 'You may now unplug your Embassy from Ethernet.

' + message, - buttons: ['OK'], - }) - await alert.present() - } else { - const toast = await this.toastCtrl.create({ - header: 'Failed to connect:', - message: `Check credentials and try again`, - position: 'bottom', - duration: 4000, - buttons: [ - { - side: 'start', - icon: 'close', - handler: () => { - return true - }, + return this.serverModel.peek().wifi.current === ssid + } + + async presentToastFail (): Promise { + const toast = await this.toastCtrl.create({ + header: 'Failed to connect:', + message: `Check credentials and try again`, + position: 'bottom', + duration: 4000, + buttons: [ + { + 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 { + 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.

' + message, + buttons: ['OK'], + }) + + await alert.present() } }