Secrets from env for EC2 provider

app/static/provider-do.vue

@@ -1,33 +1,24 @@
 <template>
   <div>
-    <div class="form-group">
+    <div v-if="ui_token_from_env">
+      <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 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>
-      <div v-if="ui_token_from_env">
+      <input
-        <input
+        type="text"
-          type="password"
+        class="form-control"
-          class="form-control"
+        id="id_do_token"
-          v-bind:disabled="ui_loading_check"
+        name="do_token"
-          v-bind:value="'1234567890abcdef'"
+        v-bind:disabled="ui_loading_check"
-        />
+        v-model="do_token"
-        <div v-if="ui_token_from_env" class="form-text alert alert-success" role="alert">
+        @blur="load_regions"
-          The token was read from the environment variable
+      />
-        </div>
-      </div>
-      <div v-else>
-        <input
-          type="text"
-          class="form-control"
-          id="id_do_token"
-          name="do_token"
-          v-bind:disabled="ui_loading_check"
-          v-model="do_token"
-          @blur="load_regions"
-        />
-      </div>
-      
     </div>
     <region-select v-model="region"
       v-bind:options="ui_region_options"

app/static/provider-ec2.vue

@@ -1,77 +1,67 @@
 <template>
   <div>
-    <div class="form-group">
+    <div v-if="ui_config_error && ui_config_error === 'missing_boto'" class="form-text alert alert-danger" role="alert">
-      <label>
+      Python module "boto3" is missing, please install it to proceed
-        Enter your AWS Access Key
+    </div>
-        <a
+    <div v-if="ui_env_secrets" class="form-text alert alert-success" role="alert">
-          href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
+      AWS credentials were read from the environment variables
-          title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
+    </div>
-          target="_blank"
+    <div v-else>
-          rel="noreferrer noopener"
+      <div class="form-group">
-          class="badge bagde-pill badge-primary"
+        <label>
-          >?</a
+          Enter your AWS Access Key
+          <a
+            href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
+            title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
+            target="_blank"
+            rel="noreferrer noopener"
+            class="badge bagde-pill badge-primary"
+            >?</a
+          >
+          <br />
+          Note: Make sure to use an IAM user with an acceptable policy attached
+          (see
+          <a
+            href="https://github.com/trailofbits/algo/blob/master/docs/deploy-from-ansible.md"
+            target="_blank"
+            rel="noreferrer noopener"
+            >docs</a
+          >)
+        </label>
+        <input
+          type="text"
+          class="form-control"
+          name="aws_access_key"
+          v-on:blur="load_regions"
+          v-model="aws_access_key"
+        />
+      </div>
+      <div class="form-group">
+        <label
+          >Enter your AWS Secret Key
+          <a
+            href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
+            title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
+            target="_blank"
+            rel="noreferrer noopener"
+            class="badge bagde-pill badge-primary"
+            >?</a
+          ></label
         >
-        <br />
+        <input
-        Note: Make sure to use an IAM user with an acceptable policy attached
+          type="password"
-        (see
+          class="form-control"
-        <a
+          name="aws_secret_key"
-          href="https://github.com/trailofbits/algo/blob/master/docs/deploy-from-ansible.md"
+          v-on:blur="load_regions"
-          target="_blank"
+          v-model="aws_secret_key"
-          rel="noreferrer noopener"
+        />
-          >docs</a
+      </div>
-        >)
-      </label>
-      <input
-        type="text"
-        class="form-control"
-        name="aws_access_key"
-        v-on:blur="load_regions"
-        v-model="aws_access_key"
-      />
-    </div>
-    <div class="form-group">
-      <label
-        >Enter your AWS Secret Key
-        <a
-          href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
-          title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html"
-          target="_blank"
-          rel="noreferrer noopener"
-          class="badge bagde-pill badge-primary"
-          >?</a
-        ></label
-      >
-      <input
-        type="password"
-        class="form-control"
-        name="aws_secret_key"
-        v-on:blur="load_regions"
-        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>