Secrets from env for EC2 provider

app/static/provider-do.vue

@@ -1,22 +1,15 @@
 <template>
   <div>
-    <div class="form-group">
-      <label for="id_do_token">
-          Enter your API token. The token must have read and write permissions
-          <a href="https://cloud.digitalocean.com/settings/api/tokens" title="https://cloud.digitalocean.com/settings/api/tokens" class="badge bagde-pill badge-primary" target="_blank" rel="noopener noreferrer">?</a>
-      </label>
     <div v-if="ui_token_from_env">
-        <input
-          type="password"
-          class="form-control"
-          v-bind:disabled="ui_loading_check"
-          v-bind:value="'1234567890abcdef'"
-        />
       <div v-if="ui_token_from_env" class="form-text alert alert-success" role="alert">
         The token was read from the environment variable
       </div>
     </div>
-      <div v-else>
+    <div class="form-group" v-else>
+      <label for="id_do_token">
+          Enter your API token. The token must have read and write permissions
+          <a href="https://cloud.digitalocean.com/settings/api/tokens" title="https://cloud.digitalocean.com/settings/api/tokens" class="badge bagde-pill badge-primary" target="_blank" rel="noopener noreferrer">?</a>
+      </label>
       <input
         type="text"
         class="form-control"
@@ -27,8 +20,6 @@
         @blur="load_regions"
       />
     </div>
-      
-    </div>
     <region-select v-model="region"
       v-bind:options="ui_region_options"
       v-bind:loading="ui_loading_check || ui_loading_regions"

app/static/provider-ec2.vue

@@ -1,5 +1,12 @@
 <template>
   <div>
+    <div v-if="ui_config_error && ui_config_error === 'missing_boto'" class="form-text alert alert-danger" role="alert">
+      Python module "boto3" is missing, please install it to proceed
+    </div>
+    <div v-if="ui_env_secrets" class="form-text alert alert-success" role="alert">
+      AWS credentials were read from the environment variables
+    </div>
+    <div v-else>
       <div class="form-group">
         <label>
           Enter your AWS Access Key
@@ -49,29 +56,12 @@
           v-model="aws_secret_key"
         />
       </div>
-    <div class="form-group">
-      <label v-if="region_options.length === 0"
-        >Please enter Access key and Secret key to select region</label
-      >
-      <label v-if="is_loading">Loading regions...</label>
-      <label v-if="region_options.length > 0"
-        >What region should the server be located in?</label
-      >
-      <select
-        name="region"
-        class="form-control"
-        v-model="region"
-        v-bind:disabled="is_region_disabled"
-      >
-        <option value disabled>Select region</option>
-        <option
-          v-for="(region, i) in region_options"
-          v-bind:key="i"
-          v-bind:value="region.RegionName"
-          >{{ region.RegionName }}</option
-        >
-      </select>
     </div>
+    <region-select v-model="region"
+      v-bind:options="ui_region_options"
+      v-bind:loading="ui_loading_check || ui_loading_regions"
+      v-bind:error="ui_region_error">
+    </region-select>
     <button
       class="btn btn-primary"
       type="button"
@@ -87,53 +77,96 @@
 module.exports = {
   data: function() {
     return {
-      // options for
       aws_access_key: null,
       aws_secret_key: null,
       region: null,
-      // helper variables
+      // ui helper variables
-      region_options: [],
+      ui_region_options: [],
-      is_loading: false
+      ui_env_secrets: null,
+      ui_loading_check: false,
+      ui_loading_regions: false,
+      ui_config_error: null,
+      ui_region_error: null
     };
   },
   computed: {
     is_valid() {
-      return this.aws_access_key && this.aws_secret_key && this.region;
+      return this.has_secrets && this.region;
     },
-    is_region_disabled() {
+    has_secrets() {
-      return !(this.aws_access_key && this.aws_secret_key) || this.is_loading;
+      return this.ui_env_secrets || (this.aws_access_key && this.aws_secret_key);
-    }
+    },
+  },
+  created: function() {
+    this.check_config();
   },
   methods: {
+    check_config() {
+      this.ui_loading_check = true;
+      fetch("/aws_config")
+        .then(r => {
+          if (r.status === 200 || r.status === 400) {
+            return r.json();
+          }
+          throw new Error(r.status);
+        })
+        .then(response => {
+          if (response.has_secret) {
+            this.ui_env_secrets = true;
+            this.load_regions();
+          } else if (response.error) {
+            this.ui_config_error = response.error;
+          }
+        })
+        .finally(() => {
+          this.ui_loading_check = false;
+        });
+    },
     load_regions() {
-      if (this.aws_access_key && this.aws_secret_key && this.region_options.length === 0) {
+      if (this.has_secrets && this.ui_region_options.length === 0) {
-        this.is_loading = true;
+        this.ui_loading_regions = true;
+        this.ui_region_error = false;
+        const payload = this.ui_env_secrets ? {} : {
+          aws_access_key: this.aws_access_key,
+          aws_secret_key: this.aws_secret_key
+        }
         fetch('/ec2_regions', {
           method: 'post',
           headers: {
             'Content-Type': 'application/json'
           },
-          body: JSON.stringify({
+          body: JSON.stringify(payload)
-            aws_access_key: this.aws_access_key,
-            aws_secret_key: this.aws_secret_key
         })
+        .then((r) => {
+          if (r.status === 200) {
+            return r.json();
+          }
+          throw new Error(r.status);
         })
-        .then(r => r.json())
         .then(data => {
-          this.region_options = data;
+          this.ui_region_options = data.map(i => ({key: i.RegionName, value: i.RegionName}));
+        })
+        .catch((err) => {
+          this.ui_region_error = err;
         })
         .finally(() => {
-          this.is_loading = false;
+          this.ui_loading_regions = false;
         });
       }
     },
     submit() {
-      this.$emit('submit', {
+      let submit_value = {
-        aws_access_key: this.aws_access_key,
-        aws_secret_key: this.aws_secret_key,
         region: this.region
-      });
       }
+      if (!this.ui_env_secrets) {
+        submit_value['aws_access_key'] = this.aws_access_key;
+        submit_value['aws_secret_key'] = this.aws_secret_key;
+      }
+      this.$emit('submit', submit_value);
+    }
+  },
+  components: {
+    "region-select": window.httpVueLoader("/static/region-select.vue"),
   }
 };
 </script>