|
1 | 1 | <template> |
2 | 2 | <div> |
3 | | - <div class="form-group"> |
4 | | - <label> |
5 | | - Enter your AWS Access Key |
6 | | - <a |
7 | | - href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
8 | | - title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
9 | | - target="_blank" |
10 | | - rel="noreferrer noopener" |
11 | | - class="badge bagde-pill badge-primary" |
12 | | - >?</a |
13 | | - > |
14 | | - <br /> |
15 | | - Note: Make sure to use an IAM user with an acceptable policy attached |
16 | | - (see |
17 | | - <a |
18 | | - href="https://github.com/trailofbits/algo/blob/master/docs/deploy-from-ansible.md" |
19 | | - target="_blank" |
20 | | - rel="noreferrer noopener" |
21 | | - >docs</a |
22 | | - >) |
23 | | - </label> |
24 | | - <input |
25 | | - type="text" |
26 | | - class="form-control" |
27 | | - name="aws_access_key" |
28 | | - v-on:blur="load_regions" |
29 | | - v-model="aws_access_key" |
30 | | - /> |
| 3 | + <div v-if="ui_config_error && ui_config_error === 'missing_boto'" class="form-text alert alert-danger" role="alert"> |
| 4 | + Python module "boto3" is missing, please install it to proceed |
31 | 5 | </div> |
32 | | - <div class="form-group"> |
33 | | - <label |
34 | | - >Enter your AWS Secret Key |
35 | | - <a |
36 | | - href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
37 | | - title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
38 | | - target="_blank" |
39 | | - rel="noreferrer noopener" |
40 | | - class="badge bagde-pill badge-primary" |
41 | | - >?</a |
42 | | - ></label |
43 | | - > |
44 | | - <input |
45 | | - type="password" |
46 | | - class="form-control" |
47 | | - name="aws_secret_key" |
48 | | - v-on:blur="load_regions" |
49 | | - v-model="aws_secret_key" |
50 | | - /> |
| 6 | + <div v-if="ui_env_secrets" class="form-text alert alert-success" role="alert"> |
| 7 | + AWS credentials were read from the environment variables |
51 | 8 | </div> |
52 | | - <div class="form-group"> |
53 | | - <label v-if="region_options.length === 0" |
54 | | - >Please enter Access key and Secret key to select region</label |
55 | | - > |
56 | | - <label v-if="is_loading">Loading regions...</label> |
57 | | - <label v-if="region_options.length > 0" |
58 | | - >What region should the server be located in?</label |
59 | | - > |
60 | | - <select |
61 | | - name="region" |
62 | | - class="form-control" |
63 | | - v-model="region" |
64 | | - v-bind:disabled="is_region_disabled" |
65 | | - > |
66 | | - <option value disabled>Select region</option> |
67 | | - <option |
68 | | - v-for="(region, i) in region_options" |
69 | | - v-bind:key="i" |
70 | | - v-bind:value="region.RegionName" |
71 | | - >{{ region.RegionName }}</option |
| 9 | + <div v-else> |
| 10 | + <div class="form-group"> |
| 11 | + <label> |
| 12 | + Enter your AWS Access Key |
| 13 | + <a |
| 14 | + href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
| 15 | + title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
| 16 | + target="_blank" |
| 17 | + rel="noreferrer noopener" |
| 18 | + class="badge bagde-pill badge-primary" |
| 19 | + >?</a |
| 20 | + > |
| 21 | + <br /> |
| 22 | + Note: Make sure to use an IAM user with an acceptable policy attached |
| 23 | + (see |
| 24 | + <a |
| 25 | + href="https://github.com/trailofbits/algo/blob/master/docs/deploy-from-ansible.md" |
| 26 | + target="_blank" |
| 27 | + rel="noreferrer noopener" |
| 28 | + >docs</a |
| 29 | + >) |
| 30 | + </label> |
| 31 | + <input |
| 32 | + type="text" |
| 33 | + class="form-control" |
| 34 | + name="aws_access_key" |
| 35 | + v-on:blur="load_regions" |
| 36 | + v-model="aws_access_key" |
| 37 | + /> |
| 38 | + </div> |
| 39 | + <div class="form-group"> |
| 40 | + <label |
| 41 | + >Enter your AWS Secret Key |
| 42 | + <a |
| 43 | + href="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
| 44 | + title="http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html" |
| 45 | + target="_blank" |
| 46 | + rel="noreferrer noopener" |
| 47 | + class="badge bagde-pill badge-primary" |
| 48 | + >?</a |
| 49 | + ></label |
72 | 50 | > |
73 | | - </select> |
| 51 | + <input |
| 52 | + type="password" |
| 53 | + class="form-control" |
| 54 | + name="aws_secret_key" |
| 55 | + v-on:blur="load_regions" |
| 56 | + v-model="aws_secret_key" |
| 57 | + /> |
| 58 | + </div> |
74 | 59 | </div> |
| 60 | + <region-select v-model="region" |
| 61 | + v-bind:options="ui_region_options" |
| 62 | + v-bind:loading="ui_loading_check || ui_loading_regions" |
| 63 | + v-bind:error="ui_region_error"> |
| 64 | + </region-select> |
75 | 65 | <button |
76 | 66 | class="btn btn-primary" |
77 | 67 | type="button" |
|
87 | 77 | module.exports = { |
88 | 78 | data: function() { |
89 | 79 | return { |
90 | | - // options for |
91 | 80 | aws_access_key: null, |
92 | 81 | aws_secret_key: null, |
93 | 82 | region: null, |
94 | | - // helper variables |
95 | | - region_options: [], |
96 | | - is_loading: false |
| 83 | + // ui helper variables |
| 84 | + ui_region_options: [], |
| 85 | + ui_env_secrets: null, |
| 86 | + ui_loading_check: false, |
| 87 | + ui_loading_regions: false, |
| 88 | + ui_config_error: null, |
| 89 | + ui_region_error: null |
97 | 90 | }; |
98 | 91 | }, |
99 | 92 | computed: { |
100 | 93 | is_valid() { |
101 | | - return this.aws_access_key && this.aws_secret_key && this.region; |
| 94 | + return this.has_secrets && this.region; |
102 | 95 | }, |
103 | | - is_region_disabled() { |
104 | | - return !(this.aws_access_key && this.aws_secret_key) || this.is_loading; |
105 | | - } |
| 96 | + has_secrets() { |
| 97 | + return this.ui_env_secrets || (this.aws_access_key && this.aws_secret_key); |
| 98 | + }, |
| 99 | + }, |
| 100 | + created: function() { |
| 101 | + this.check_config(); |
106 | 102 | }, |
107 | 103 | methods: { |
| 104 | + check_config() { |
| 105 | + this.ui_loading_check = true; |
| 106 | + fetch("/aws_config") |
| 107 | + .then(r => { |
| 108 | + if (r.status === 200 || r.status === 400) { |
| 109 | + return r.json(); |
| 110 | + } |
| 111 | + throw new Error(r.status); |
| 112 | + }) |
| 113 | + .then(response => { |
| 114 | + if (response.has_secret) { |
| 115 | + this.ui_env_secrets = true; |
| 116 | + this.load_regions(); |
| 117 | + } else if (response.error) { |
| 118 | + this.ui_config_error = response.error; |
| 119 | + } |
| 120 | + }) |
| 121 | + .finally(() => { |
| 122 | + this.ui_loading_check = false; |
| 123 | + }); |
| 124 | + }, |
108 | 125 | load_regions() { |
109 | | - if (this.aws_access_key && this.aws_secret_key && this.region_options.length === 0) { |
110 | | - this.is_loading = true; |
| 126 | + if (this.has_secrets && this.ui_region_options.length === 0) { |
| 127 | + this.ui_loading_regions = true; |
| 128 | + this.ui_region_error = false; |
| 129 | + const payload = this.ui_env_secrets ? {} : { |
| 130 | + aws_access_key: this.aws_access_key, |
| 131 | + aws_secret_key: this.aws_secret_key |
| 132 | + } |
111 | 133 | fetch('/ec2_regions', { |
112 | 134 | method: 'post', |
113 | 135 | headers: { |
114 | 136 | 'Content-Type': 'application/json' |
115 | 137 | }, |
116 | | - body: JSON.stringify({ |
117 | | - aws_access_key: this.aws_access_key, |
118 | | - aws_secret_key: this.aws_secret_key |
119 | | - }) |
| 138 | + body: JSON.stringify(payload) |
| 139 | + }) |
| 140 | + .then((r) => { |
| 141 | + if (r.status === 200) { |
| 142 | + return r.json(); |
| 143 | + } |
| 144 | + throw new Error(r.status); |
120 | 145 | }) |
121 | | - .then(r => r.json()) |
122 | 146 | .then(data => { |
123 | | - this.region_options = data; |
| 147 | + this.ui_region_options = data.map(i => ({key: i.RegionName, value: i.RegionName})); |
| 148 | + }) |
| 149 | + .catch((err) => { |
| 150 | + this.ui_region_error = err; |
124 | 151 | }) |
125 | 152 | .finally(() => { |
126 | | - this.is_loading = false; |
| 153 | + this.ui_loading_regions = false; |
127 | 154 | }); |
128 | 155 | } |
129 | 156 | }, |
130 | 157 | submit() { |
131 | | - this.$emit('submit', { |
132 | | - aws_access_key: this.aws_access_key, |
133 | | - aws_secret_key: this.aws_secret_key, |
| 158 | + let submit_value = { |
134 | 159 | region: this.region |
135 | | - }); |
| 160 | + } |
| 161 | + if (!this.ui_env_secrets) { |
| 162 | + submit_value['aws_access_key'] = this.aws_access_key; |
| 163 | + submit_value['aws_secret_key'] = this.aws_secret_key; |
| 164 | + } |
| 165 | + this.$emit('submit', submit_value); |
136 | 166 | } |
| 167 | + }, |
| 168 | + components: { |
| 169 | + "region-select": window.httpVueLoader("/static/region-select.vue"), |
137 | 170 | } |
138 | 171 | }; |
139 | 172 | </script> |
0 commit comments