ami: add instanceId input box

dashboard/src/views/SetupView.vue

@@ -19,6 +19,7 @@ const ipProviders = [
   { name: 'Network Interface', value: 'network-interface' }
 ];
 
+const serverProvider = ref('');
 const formError = ref({});
 const busy = ref(false);
 const ready = ref(false);
@@ -58,7 +59,7 @@ async function waitForDnsSetup () {
 
   if (!result.setup.active) {
     if (!result.adminFqdn || result.setup.errorMessage) { // setup reset or errored. start over
-      formError.value.dnsWait = result.setup.errorMessage;
+      formError.value.generic = result.setup.errorMessage;
       waitingForDnsSetup.value = false;
     } else { // proceed to activation
       window.location.href = 'https://' + result.adminFqdn + '/activation.html' + (window.location.search);
@@ -99,22 +100,13 @@ async function onSubmit() {
       ip: ipv6Provider.value === 'fixed' ? ipv6Address.value : '',
       ifname: ipv6Provider.value === 'network-interface' ? ipv6Interface.value : '',
     },
-    providerToken: instanceId.value,
+    providerToken: instanceId.value, // currently only for AMI
   };
 
   const [error] = await provisionModel.setup(data);
   busy.value = false; // so we can come back to this view if dns setup errors later
   if (error) {
-    if (error.status === 422) {
-      if (provider.value === 'ami') {
-        formError.value.ami = error.body.message;
-      } else {
-        formError.value.setup = error.body.message;
-      }
-    } else {
-      formError.value.generic = error.body ? error.body.message : 'Internal error';
-    }
-
+    formError.value.generic = error.body ? error.body.message : 'Internal error';
     return;
   }
 
@@ -131,22 +123,21 @@ watchEffect(() => {
 });
 
 onMounted(async () => {
-  const search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
-
   const [error, status] = await provisionModel.status();
   if (error) return console.error(error);
 
   if (redirectIfNeeded(status, 'setup')) return; // redirected to some other view...
 
-  if (status.provider === 'digitalocean' || status.provider === 'digitalocean-mp') {
+  serverProvider.value = status.provider;
+  if (serverProvider.value === 'digitalocean' || serverProvider.value === 'digitalocean-mp') {
     provider.value = 'digitalocean';
-  } else if (status.provider === 'linode' || status.provider === 'linode-oneclick' || status.provider === 'linode-stackscript') {
+  } else if (serverProvider.value === 'linode' || serverProvider.value === 'linode-oneclick' || serverProvider.value === 'linode-stackscript') {
     provider.value = 'linode';
-  } else if (status.provider === 'vultr' || status.provider === 'vultr-mp') {
+  } else if (serverProvider.value === 'vultr' || serverProvider.value === 'vultr-mp') {
     provider.value = 'vultr';
-  } else if (status.provider === 'gce') {
+  } else if (serverProvider.value === 'gce') {
     provider.value = 'gcdns';
-  } else if (status.provider === 'ami') {
+  } else if (serverProvider.value === 'ami') {
       // aws marketplace made a policy change that they one cannot provide route53 IAM credentials
     provider.value = 'wildcard';
   }
@@ -157,8 +148,6 @@ onMounted(async () => {
   ipv4Provider.value = result.ipv4 ? 'generic' : 'noop';
   ipv6Provider.value = result.ipv6 ? 'generic' : 'noop';
 
-  instanceId.value = search.instanceId;
-
   ready.value = true;
 
   if (status.setup.active) return waitForDnsSetup();
@@ -184,14 +173,18 @@ onMounted(async () => {
       <div class="view" v-else style="max-width: 500px">
         <h1 style="text-align: center">Domain Setup</h1>
 
-        <div class="text-danger" v-if="formError.dnsWait">{{ formError.dnsWait }}</div>
-        <div class="text-danger" v-if="formError.setup">{{ formError.setup }}</div>
         <div class="text-danger" v-if="formError.generic">{{ formError.generic }}</div>
 
         <form ref="form" @submit.prevent="onSubmit()" @input="checkValidity()">
           <fieldset :disabled="busy">
             <input type="submit" style="display: none"/>
 
+            <FormGroup v-if="serverProvider === 'ami'">
+              <label for="amiInstanceIdInput">EC2 Instance ID</label>
+              <TextInput id="amiInstanceIdInput" v-model="instanceId" placeholder="i-0123456789abcdef0" required />
+              <small class="helper-text">Can be found in the AWS Console</small>
+            </FormGroup>
+
             <FormGroup>
               <label for="domainInput">Domain  <sup><a href="https://docs.cloudron.io/installation/#domain-setup" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
               <TextInput id="domainInput" v-model="domain" placeholder="example.com" required />