cloudron-box/dashboard/src/views/ActivationView.vue

<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>