Port activation to vuejs

dashboard/src/activation.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import '@fontsource/noto-sans';
+
+import i18n from './i18n.js';
+import ActivationView from './views/ActivationView.vue';
+
+import './style.css';
+
+(async function init() {
+  const app = createApp(ActivationView);
+
+  app.use(await i18n());
+
+  app.mount('#app');
+})();

dashboard/src/models/CloudronModel.js

@@ -84,6 +84,17 @@ function create() {
       if (error || result.status !== 200) return [error || result];
       return [null];
     },
+    async createAdmin(data) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/provision/activate`, data);
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 201) return [error || result];
+      return [null, result.token];
+    },
   };
 }
 

dashboard/src/style.css

@@ -235,4 +235,19 @@ tr:hover .table-actions {
 
 fieldset > * {
   margin: 6px 0;
-}
+}
+
+/* Animations */
+.slide-fade-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}

dashboard/src/views/ActivationView.vue

@@ -0,0 +1,154 @@
+<script setup>
+
+import { ref } from 'vue';
+import { Button, FormGroup, TextInput, PasswordInput, EmailInput } from 'pankow';
+import CloudronModel from '../models/CloudronModel.js';
+
+const cloudronModel = CloudronModel.create();
+
+const VIEWS = {
+  OWNER: 'owner',
+  FINISHED: 'finished',
+};
+
+const view = ref(VIEWS.OWNER);
+const error = ref({});
+const busy = ref(false);
+const displayName = ref('');
+const email = ref('');
+const username = ref('');
+const password = ref('');
+const firstTimeLoginUrl = ref('');
+const setupToken = ref('');
+
+async function onOwnerSubmit() {
+  busy.value = true;
+  error.value = {};
+
+  const data = {
+    username: username.value,
+    password: password.value,
+    email: email.value,
+    displayName: displayName.value,
+    setupToken: setupToken.value,
+  };
+
+  const [error, result] = await cloudronModel.createAdmin(data);
+  if (error) {
+    if (error.status === 400) {
+      if (error.body.message === 'Invalid email') {
+        error.value.email = error.body.message;
+        email.value = '';
+      } else {
+        error.value.username = error.body.message;
+        username.value = '';
+      }
+    } else {
+      error.value.generic = error.body ? error.body.message : 'Internal error';
+      console.error('Internal error', error);
+    }
+
+    busy.value = false;
+    return;
+  }
+
+  // set token to autologin on first oidc flow
+  localStorage.cloudronFirstTimeToken = result;
+
+  firstTimeLoginUrl.value = '/openid/auth?client_id=cid-webadmin&scope=openid email profile&response_type=code token&redirect_uri=' + window.location.origin + '/authcallback.html';
+  view.value = VIEWS.FINISHED
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <Transition name="slide-fade" mode="out-in">
+      <div v-if="view === VIEWS.OWNER" class="view">
+        <!-- TODO translate -->
+        <h1>Welcome to Cloudron</h1>
+        <h3>Set up Admin Account</h3>
+
+        <div class="has-error" v-if="error.generic">{{ error.generic }}</div>
+
+        <form @submit.prevent="onOwnerSubmit()" autocomplete="off">
+          <fieldset :disabled="busy">
+            <FormGroup :has-error="error.displayName">
+              <label for="displayNameInput">Full Name</label>
+              <TextInput id="displayNameInput" v-model="displayName" required />
+              <small class="text-danger">{{ error.displayName }}</small>
+            </FormGroup>
+
+            <FormGroup :has-error="error.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>A valid email is required for Let's Encrypt certificates. This email is local to your Cloudron. </small>
+            </FormGroup>
+
+            <FormGroup :has-error="error.username">
+              <label for="usernameInput">Username</label>
+              <TextInput id="usernameInput" v-model="username" required />
+              <small class="text-danger">{{ error.username }}</small>
+            </FormGroup>
+
+            <FormGroup :has-error="error.password">
+              <label for="passwordInput">Password</label>
+              <PasswordInput id="passwordInput" v-model="password" required />
+              <small class="text-danger">{{ error.password }}</small>
+            </FormGroup>
+          </fieldset>
+        </form>
+        <br/>
+        <Button @click="onOwnerSubmit()" :disabled="busy" :loading="busy">Create Admin</Button>
+      </div>
+
+      <div v-else-if="view === VIEWS.FINISHED" class="view">
+        <h1>Cloudron is ready to use</h1>
+
+        <div>
+          &nbsp; &nbsp; Before you start:
+          <ul class="fa-ul">
+            <li><i class="fa-li fa fa-users"></i>
+              <b>User management</b>: Cloudron has a central user directory. When installing an app,
+              you can set it up to authenticate against this directory.
+            </li>
+            <br/>
+            <li><i class="fa-li fa fa-envelope-open"></i>
+              <b>Email Configuration</b>: Apps are configured to send email based on the settings in the Email view.
+              This saves you the trouble of having to configure mail settings inside each app.
+            </li>
+            <br/>
+            <li><i class="fa-li fa fa-archive"></i>
+              <b>Backups</b>: Store your backups on storage services completely independent from your server.
+              You can use backups to seamlessly migrate your setup to another server.
+            </li>
+            <br/>
+            <li><i class="fa-li fa fa-birthday-cake"></i>
+              <b>Updates</b>: The Cloudron team tracks upstream releases and publishes app updates after testing.
+              Your apps are kept fresh &amp; secure.
+            </li>
+          </ul>
+        </div>
+        <br/>
+        <Button :href="firstTimeLoginUrl">Proceed to Dashboard</Button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.view {
+  width: 100%;
+  max-width: 500px;
+}
+
+</style>

dashboard/src/views/AppConfigureView.vue

@@ -248,20 +248,6 @@ onBeforeUnmount(() => {
 
 <style scoped>
 
-.slide-fade-enter-active {
-  transition: all 0.2s ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
-}
-
 .applink {
   display: flex;
   align-items: center;

dashboard/src/views/AppsView.vue

@@ -58,7 +58,15 @@ const listColumns = {
     sort: true,
     hideMobile: true,
   },
-  status: {},
+  status: {
+    label: 'Status',
+    hideMobile: true,
+    sort: (a, b) => {
+      console.log(a, b)
+      if (!a || !b) return -1;
+      return a.installationState < b.installationState ? -1 : (a.installationState > b.installationState ? 1 : 0)
+    },
+  },
   appTitle: {
     label: 'App Title',
     sort: true,