Removed do regions request, re-added run and status

app/server.py

@@ -100,20 +100,6 @@ async def post_config(request):
             return web.json_response({'ok': True})
 
 
-@routes.post('/do/regions')
-async def get_do_regions(request):
-    data = await request.json()
-    async with aiohttp.ClientSession() as session:
-        url = 'https://api.digitalocean.com/v2/regions'
-        headers = {
-            'Content-Type': 'application/json',
-            'Authorization': 'Bearer {0}'.format(data['token']),
-        }
-        async with session.get(url, headers=headers) as r:
-            json_body = await r.json()
-            return web.json_response(json_body)
-
-
 app = web.Application()
 app.router.add_routes(routes)
 web.run_app(app, port=9000)

app/static/command-preview.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="row">
+    <h2 class="col-12">
+      <button type="button" class="btn btn-secondary back-button" v-on:click="$emit('back')"><</button>
+      🧐 Review and Start!
+    </h2>
+    <section class="my-3">
+      <pre class="code"><code>
+        {{cli_preview}}
+      </code></pre>
+      <button v-on:click="$emit('submit')" class="btn btn-primary" type="button">Run!</button>
+    </section>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: ['extra_args'],
+  computed: {
+    cli_preview: function() {
+      let args = "";
+      for (arg in this.extra_args) {
+        args += `${arg}=${this.extra_args[arg]} `;
+      }
+      return `ansible-playbook main.yml --extra-vars ${args}`;
+    }
+  }
+}
+</script>
+<style scoped>
+  .back-button {
+    position: absolute;
+    border-radius: 50%;
+    left: -2em;
+  }
+  .code {
+    white-space: normal;
+    background: black;
+    color: lightgrey;
+    padding: 1em;
+  }
+</style>

app/static/index.html

@@ -28,16 +28,28 @@
         <user-config class="col-md-4 order-md-2 mb-4"></user-config>
         <vpn-setup class="col-md-8 order-md-1"
           v-bind:extra_args="extra_args"
-          v-on:submit="set_step('provider'); update_extra_args"></vpn-setup>
+          v-on:submit="step = 'provider'"></vpn-setup>
       </div>
     </transition>
     <transition name="fade">
       <provider-setup v-if="step == 'provider'"
                       v-bind:extra_args="extra_args"
-                      v-on:submit="update_extra_args"
-                      v-on:back="set_step('setup')">
+                      v-on:submit="step = 'command'"
+                      v-on:back="step = 'setup'">
       </provider-setup>
     </transition>
+    <transition name="fade">
+      <command-preview v-if="step == 'command'"
+                      v-bind:extra_args="extra_args"
+                      v-on:submit="start(); step = 'running';"
+                      v-on:back="step = 'provider'">
+      </command-preview>
+    </transition>
+    <transition name="fade">
+      <status-running v-if="step == 'running'"
+                       v-on:submit="stop(); step = 'setup';">
+      </status-running>
+    </transition>
   </div>
 
   <script>
@@ -47,7 +59,7 @@
         playbook: {},
         step: 'setup',
         extra_args: {
-          server_name: "algo",
+          server_name: 'algo2',
           ondemand_cellular: false,
           ondemand_wifi: false,
           dns_adblocking: false,
@@ -65,13 +77,32 @@
         'user-config': window.httpVueLoader('/static/user-config.vue'),
         'vpn-setup': window.httpVueLoader('/static/vpn-setup.vue'),
         'provider-setup': window.httpVueLoader('/static/provider-setup.vue'),
+        'command-preview': window.httpVueLoader('/static/command-preview.vue'),
+        'status-running': window.httpVueLoader('/static/status-running.vue'),
+      },
+      created() {
+        fetch("/playbook")
+          .then(r => r.json())
+          .then(data => {
+            if (data.status === 'running') {
+              this.step = 'running';
+            }
+          });
       },
       methods: {
-        set_step: function(step) {
-          this.step = step;
+        start: function() {
+          fetch("/playbook", {
+            method: "POST",
+            body: JSON.stringify(this.extra_args),
+            headers: {
+              "Content-Type": "application/json"
+            }
+          });
         },
-        update_extra_args: function(extra_args) {
-          Object.assign(this.extra_args, extra_args);
+        stop() {
+          fetch("/playbook", {
+            method: "DELETE"
+          });
         }
       }
     })

app/static/provider-do.vue

@@ -56,12 +56,11 @@ module.exports = {
   methods: {
     load_do_regions: function () {
       this.do_region_loading = true;
-        fetch("/do/regions", {
-          method: "POST",
+        fetch('https://api.digitalocean.com/v2/regions', {
           headers: {
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({ token: this.do_token })
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.do_token}`
+          }
         })
           .then(r => r.json())
           .then(r => {
@@ -79,4 +78,4 @@ module.exports = {
     }
   }
 };
-</script>
+</script>

app/static/provider-setup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row" id="prodiver_id">
+  <div class="row">
     <h2 class="col-12">
       <button type="button" class="btn btn-secondary back-button" v-on:click="$emit('back')"><</button>
       <span v-if="provider">{{ provider.name }} Setup</span>
@@ -12,7 +12,7 @@
           v-bind:key="item.alias">
           <a
             class="nav-link"
-            href="#prodiver_id"
+            href="#"
             v-bind:class="{ active: item.alias === (provider && provider.alias) }"
             v-on:click="set_provider(item)"
           >{{item.name}}</a>
@@ -49,12 +49,16 @@ module.exports = {
       ]
     }
   },
+  // Warning: Mutable Object to edit parent props
+  props: ['extra_args'],
   methods: {
     set_provider(provider) {
       this.provider = provider;
+      this.extra_args.provider = provider.alias;
     },
     on_provider_submit(extra_args) {
-      this.$emit('submit', Object.assign({provider: this.provider.alias}, extra_args));
+      Object.assign(this.extra_args, extra_args);
+      this.$emit('submit');
     }
   },
   components: {

app/static/status-running.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="row status-container">
+    <h2 class="col-12"><span class="spin">🙃</span>Please be patient</h2>
+    <section class="status-text">
+      <p>VPN set up usually takes 5-15 minutes</p>
+      <p>You can close tab and open it again</p>
+      <p>You can try to <button type="button" class="btn btn-link back-button" v-on:click="$emit('submit')">STOP</button> setup and run it again</p>
+      <p>Don’t close terminal!</p>
+    </section>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: function() {
+    // Warning: Mutable Object to edit partent props
+    extra_args: Object
+  },
+  computed: {
+    cli_preview() {
+      return 'ansible-playbook main.yml --extra-vars "server_name=algo ondemand_cellular=true ondemand_wifi=true dns_adblocking=false ssh_tunneling=false store_pki=false ondemand_wifi_exclude=[] provider=digitalocean do_token=ad6b4405df208053e7b41e1c9e74b97364af1d6b902f6b6bb1d5575c52eca0c3 region=blr1"';
+    }
+  }
+}
+</script>
+<style scoped>
+  .back-button {
+    color: red;
+  }
+  .status-container {
+    display: flex;
+    flex-direction: column;
+  }
+  .status-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .spin {
+    animation-name: spin;
+    animation-duration: 5000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+
+    display: block;
+    animation-delay: 5s;
+    width: 1em;
+    height: 100%;
+  }
+  @keyframes spin {
+    from {
+      transform:rotate(0deg);
+    }
+    to {
+      transform:rotate(360deg);
+    }
+  }
+</style>

app/static/vpn-setup.vue

@@ -103,9 +103,7 @@
 
 <script>
 module.exports = {
-  props: {
-    // Warning: Mutable Object to edit partent props
-    extra_args: Object
-  }
+  // Warning: Mutable Object to edit partent props
+  props: ['extra_args']
 }
 </script>