1111 type =" text"
1212 class =" form-control"
1313 name =" aws_access_key"
14+ v-on:blur =" load_regions"
1415 v-model =" aws_access_key"
1516 />
1617 </div >
2122 type =" password"
2223 class =" form-control"
2324 name =" aws_secret_key"
25+ v-on:blur =" load_regions"
2426 v-model =" aws_secret_key" >
2527 </div >
28+ <div class =" form-group" >
29+ <label v-if =" lightsail_regions.length === 0" >Please enter Access key and Secret key to select region</label >
30+ <label v-if =" is_loading" >Loading regions...</label >
31+ <label v-if =" lightsail_regions.length > 0" >What region should the server be located in?</label >
32+ <select name =" region"
33+ class =" form-control"
34+ v-model =" region"
35+ v-bind:disabled =" is_region_disabled" >
36+ <option value disabled >Select region</option >
37+ <option
38+ v-for =" (region, i) in lightsail_regions"
39+ v-bind:key =" region.displayName"
40+ v-bind:value =" region.name"
41+ >{{region.displayName}}</option >
42+ </select >
43+
44+ </div >
2645 <button class =" btn btn-primary"
2746 type =" button"
2847 v-on:click =" submit"
@@ -37,19 +56,48 @@ module.exports = {
3756 data : function () {
3857 return {
3958 aws_access_key: null ,
40- aws_secret_key: null
59+ aws_secret_key: null ,
60+ region: null ,
61+ lightsail_regions: [],
62+ is_loading: false
4163 };
4264 },
4365 computed: {
4466 is_valid () {
45- return this .aws_access_key && this .aws_secret_key ;
67+ return this .aws_access_key && this .aws_secret_key && this .region ;
68+ },
69+ is_region_disabled () {
70+ return ! (this .aws_access_key && this .aws_secret_key ) || this .is_loading ;
4671 }
4772 },
4873 methods: {
74+ load_regions () {
75+ if (this .aws_access_key && this .aws_secret_key && this .lightsail_regions .length === 0 ) {
76+ this .is_loading = true ;
77+ fetch (' /lightsail_regions' , {
78+ method: ' post' ,
79+ headers: {
80+ ' Content-Type' : ' application/json'
81+ },
82+ body: JSON .stringify ({
83+ aws_access_key: this .aws_access_key ,
84+ aws_secret_key: this .aws_secret_key
85+ })
86+ })
87+ .then (r => r .json ())
88+ .then (data => {
89+ this .lightsail_regions = data .regions ;
90+ })
91+ .finally (() => {
92+ this .is_loading = false ;
93+ });
94+ }
95+ },
4996 submit () {
5097 this .$emit (' submit' , {
5198 aws_access_key: this .aws_access_key ,
52- aws_secret_key: this .aws_secret_key
99+ aws_secret_key: this .aws_secret_key ,
100+ region: this .region
53101 });
54102 }
55103 }
0 commit comments