Patch up activation view with current Cloudron provision status

dashboard/src/views/ActivationView.vue

@@ -1,8 +1,9 @@
 <script setup>
 
-import { ref } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { Button, FormGroup, TextInput, PasswordInput, EmailInput } from 'pankow';
 import CloudronModel from '../models/CloudronModel.js';
+import { redirectIfNeeded } from '../utils.js';
 
 const cloudronModel = CloudronModel.create();
 
@@ -11,8 +12,8 @@ const VIEWS = {
   FINISHED: 'finished',
 };
 
-const view = ref(VIEWS.OWNER);
-const error = ref({});
+const view = ref('');
+const formError = ref({});
 const busy = ref(false);
 const displayName = ref('');
 const email = ref('');
@@ -21,9 +22,20 @@ const password = ref('');
 const firstTimeLoginUrl = ref('');
 const setupToken = ref('');
 
+const isValid = computed(() => {
+  if (!displayName.value) return false;
+  if (!email.value) return false;
+  if (!username.value) return false;
+  if (!password.value) return false;
+
+  return true;
+});
+
 async function onOwnerSubmit() {
+  if (!isValid.value) return;
+
   busy.value = true;
-  error.value = {};
+  formError.value = {};
 
   const data = {
     username: username.value,
@@ -37,14 +49,14 @@ async function onOwnerSubmit() {
   if (error) {
     if (error.status === 400) {
       if (error.body.message === 'Invalid email') {
-        error.value.email = error.body.message;
+        formError.value.email = error.body.message;
         email.value = '';
       } else {
-        error.value.username = error.body.message;
+        formError.value.username = error.body.message;
         username.value = '';
       }
     } else {
-      error.value.generic = error.body ? error.body.message : 'Internal error';
+      formError.value.generic = error.body ? error.body.message : 'Internal error';
       console.error('Internal error', error);
     }
 
@@ -59,6 +71,15 @@ async function onOwnerSubmit() {
   view.value = VIEWS.FINISHED
 }
 
+onMounted(async () => {
+  const [error, result] = await cloudronModel.provisionStatus();
+  console.log(error, result)
+
+  if (redirectIfNeeded(result, 'activation')) return; // redirected to some other view...
+
+  view.value = VIEWS.OWNER;
+});
+
 </script>
 
 <template>
@@ -69,38 +90,41 @@ async function onOwnerSubmit() {
         <h1>Welcome to Cloudron</h1>
         <h3>Set up Admin Account</h3>
 
-        <div class="has-error" v-if="error.generic">{{ error.generic }}</div>
+        <div class="has-error" v-if="formError.generic">{{ formError.generic }}</div>
 
         <form @submit.prevent="onOwnerSubmit()" autocomplete="off">
           <fieldset :disabled="busy">
-            <FormGroup :has-error="error.displayName">
+            <input type="submit" style="display: none;"/>
+
+            <FormGroup :has-error="formError.displayName">
               <label for="displayNameInput">Full Name</label>
               <TextInput id="displayNameInput" v-model="displayName" required />
-              <small class="text-danger">{{ error.displayName }}</small>
+              <small class="text-danger">{{ formError.displayName }}</small>
             </FormGroup>
 
-            <FormGroup :has-error="error.email">
+            <FormGroup :has-error="formError.email">
               <label for="emailInput">Email <sup><a href="https://docs.cloudron.io/installation/#admin-account" target="_blank" tabIndex="-1"><i class="fa fa-question-circle"></i></a></sup></label>
               <EmailInput id="emailInput" v-model="email" required />
-              <small class="text-danger">{{ error.email }}</small>
+              <small class="text-danger">{{ formError.email }}</small>
               <small>A valid email is required for Let's Encrypt certificates. This email is local to your Cloudron. </small>
             </FormGroup>
 
-            <FormGroup :has-error="error.username">
+            <FormGroup :has-error="formError.username">
               <label for="usernameInput">Username</label>
               <TextInput id="usernameInput" v-model="username" required />
-              <small class="text-danger">{{ error.username }}</small>
+              <small class="text-danger">{{ formError.username }}</small>
             </FormGroup>
 
-            <FormGroup :has-error="error.password">
+            <FormGroup :has-error="formError.password">
               <label for="passwordInput">Password</label>
               <PasswordInput id="passwordInput" v-model="password" required />
-              <small class="text-danger">{{ error.password }}</small>
+              <small class="text-danger">{{ formError.password }}</small>
             </FormGroup>
+
+            <Button :disabled="busy || !isValid" :loading="busy" @click="onOwnerSubmit()">Create Admin</Button>
           </fieldset>
         </form>
-        <br/>
-        <Button @click="onOwnerSubmit()" :disabled="busy" :loading="busy">Create Admin</Button>
+
       </div>
 
       <div v-else-if="view === VIEWS.FINISHED" class="view">