Added loading indication for DO regions

Author: summerisgone

app/static/app.js

@@ -86,6 +86,7 @@ new Vue({
   el: '#provider_app',
   data: {
     loading: false,
+    do_region_loading: false,
     do_regions: [],
     extra_args: provider_extra_args,
     providers_map: [
@@ -115,6 +116,7 @@ new Vue({
         this.extra_args.do_token
       ) {
         this.loading = true;
+        this.do_region_loading = true;
         fetch('/do/regions', {
           method: 'POST',
           headers: {
@@ -128,6 +130,7 @@ new Vue({
           })
           .finally(() => {
             this.loading = false;
+            this.do_region_loading = false;
           });
       }
     }
@@ -161,6 +164,9 @@ new Vue({
     },
     show_backdrop() {
       return this.status === 'running';
+    },
+    is_success() {
+      return this.result === 0;
     }
   },
   watch: {

app/static/index.html

@@ -5,8 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css"
-          integrity="sha256-uTIrmf95e6IHlacC0wpDaPS58eWF314UC7OgdrD6AdU=" crossorigin="anonymous"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" 
         integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
     <style>
@@ -178,8 +176,14 @@ <h4>Digital Ocean Options</h4>
                                 @blur="load_do_regions"/>
                         </div>
                         <div class="form-group">
-                            <label for="id_region">What region should the server be located in?</label>
-                            <select name="region" id="id_region" class="form-control" v-model="extra_args.region">
+                            <label v-if="do_regions.length > 0" for="id_region">What region should the server be located in?</label>
+                            <label v-if="do_regions.length === 0" for="id_region">Please enter API key above to select region</label>
+                            <label v-if="do_region_loading" for="id_region">Loading regions...</label>
+                            <select name="region"
+                                id="id_region"
+                                class="form-control"
+                                v-model="extra_args.region"
+                                v-bind:disabled="do_region_loading">
                                 <option value="" disabled>Select region</option>
                                 <option
                                     v-for="(region, index) in do_regions"
@@ -213,7 +217,8 @@ <h4>Digital Ocean Options</h4>
         </div>
         <div v-if="status === 'done'">
             <pre class="console">{{program.join(' ')}}</pre>
-            <div class="text-success">Done!</div>
+            <div v-if="is_success" class="text-success">Done!</div>
+            <div v-else class="text-danger">Failed!</div>
         </div>
     </div>
 </footer>