Change the setup page to display a message on con

Grow-local · Jun 19, 2020 · 43643d3 · 43643d3
1 parent 0d7d4fc
commit 43643d3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/data/www/index.html b/data/www/index.html
@@ -39,7 +39,7 @@ <h3 class="mb-0 d-inline">
 				</div>
 			</div>
 		</div>
-		<div class="modal fade" id="networkModal" tabindex="-1" role="dialog" aria-labelledby="networkModalLabel"
+		<div v-if="!joining" class="modal fade" id="networkModal" tabindex="-1" role="dialog" aria-labelledby="networkModalLabel"
 			aria-hidden="true">
 			<div class="modal-dialog" role="document">
 				<div class="modal-content">
@@ -51,11 +51,35 @@ <h5 class="modal-title" id="networkModalLabel">Join {{ selectedNetwork.ssid }}</
 					</div>
 					<div class="modal-body">
 						<label for="password">Password</label>
-						<input v-model="password" type="password" class="form-control" id="password" placeholder="Password">
+						<input v-model="password" type="password" class="form-control" id="password"
+							placeholder="Password">
 					</div>
 					<div class="modal-footer">
 						<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-						<button type="button" class="btn btn-primary" v-on:click="joinNetwork"><span v-if="!submitted">Join Network</span><div v-if="submitted" class="spinner-border text-center" role="status"><span class="sr-only">Loading...</span></div></button>
+						<button type="button" class="btn btn-primary" v-on:click="joinNetwork"><span
+								v-if="!submitted">Join Network</span>
+							<div v-if="submitted" class="spinner-border text-center" role="status"><span
+									class="sr-only">Loading...</span></div>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div v-if="joining" class="modal fade" id="connectModal" tabindex="-1" role="dialog" aria-labelledby="connectModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="connectModalLabel">Joining {{ selectedNetwork.ssid }}</h5>
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<p>Please close this tab/window and reconnect your device to your network. Further setup can be completed on the Grow.local base station.</p>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-primary" data-dismiss="modal">close</button>
 					</div>
 				</div>
 			</div>

diff --git a/data/www/js/main.js b/data/www/js/main.js
@@ -5,7 +5,8 @@ var app = new Vue({
 		selectedNetwork: {},
 		networks: [],
 		loading: false,
-		submitted: false
+		submitted: false,
+		joining: false
 	},
 	methods: {
 		getNetworks() {
@@ -19,7 +20,7 @@ var app = new Vue({
 		joinNetwork() {
 			this.submitted = true;
 			axios.post("http://grow.local/join", { ssid: this.selectedNetwork.ssid, password: this.password }).then(() => {
-
+				this.joining = true;
 			});
 		}
 	},