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

<script setup>

import { ref, computed, onMounted } from 'vue';
import { Spinner, Button, FormGroup, TextInput } from 'pankow';
import { redirectIfNeeded } from '../utils.js';
import CloudronModel from '../models/CloudronModel.js';
import DomainProviderForm from '../components/DomainProviderForm.vue';

const cloudronModel = CloudronModel.create();

const formError = ref({});
const busy = ref(false);
const ready = ref(false);
const waitingForDnsSetup = ref(false);
const progressMessage = ref('');
const taskMinutesActive = ref(0);
const domain = ref('');
const zoneName = ref('');
const provider = ref('');
const dnsConfig = ref({});
const tlsProvider = ref('');
const advancedVisible = ref(false);

const isValid = computed(() => {
  return true;
});

async function onSubmit() {
  if (!isValid.value) return;

  busy.value = true;
  formError.value = {};
}

onMounted(async () => {
  const [error, result] = await cloudronModel.provisionStatus();
  if (error) return console.error(error);

  if (redirectIfNeeded(result, 'setup')) return; // redirected to some other view...

  ready.value = true;
});

</script>

<template>
  <div class="container" v-if="ready">
    <Transition name="slide-fade" mode="out-in">
      <div class="view" v-if="waitingForDnsSetup">
        <Spinner class="pankow-spinner-large"/>
        <h3>{{ progressMessage }} ...</h3>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <p>
          Please wait while Cloudron is setting up the dashboard.<br/>
          You can follow the logs on the server at <code class="clipboard hand" data-clipboard-text="/home/yellowtent/platformdata/logs/box.log" uib-tooltip="{{ clipboardDone ? 'Copied' : 'Click to copy' }}" tooltip-placement="right">/home/yellowtent/platformdata/logs/box.log</code>
        </p>
        <br/>
        <br/>
        <p v-show="taskMinutesActive >= 4">
          If setup appears stuck, it can be restarted by running <code class="clipboard hand" data-clipboard-text="systemctl restart box" uib-tooltip="{{ clipboardDone ? 'Copied' : 'Click to copy' }}" tooltip-placement="right">systemctl restart box</code> and reloading this page.
        </p>
      </div>

      <div class="view" v-else>
        <h1>Domain Setup</h1>

        <form @submit.prevent="onSubmit()">
          <fieldset :disabled="busy">
            <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 />
              <div class="text-danger" v-show="domain.indexOf('my.') === 0 && domain.length > 3">Are you sure about this domain? The dashboard will be at <b>my.{{ domain }}</b></div>
              <div>Apps will be installed on subdomains of this domain. The dashboard will be available on the <b>my</b> subdomain. You can add more domains later.</div>
            </FormGroup>

            <DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" :domain="domain" />

            <div v-show="advancedVisible">
              <FormGroup>
                <label for="zoneNameInput">DNS Zone Name (Optional) <sup><a href="https://docs.cloudron.io/domains/#zone-name" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
                <TextInput id="zoneNameInput" v-model="zoneName" placeholder="Defaults to TLD" />
              </FormGroup>

              <FormGroup>
                <label>Certificate Provider <sup><a href="https://docs.cloudron.io/certificates/#certificate-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
                <select class="form-control" ng-model="dnsCredentials.tlsConfig.provider" ng-options="a.value as a.name for a in tlsProvider" ng-disabled="dnsCredentials.busy"></select>
              </FormGroup>

              <!-- IPv4 provider -->
              <FormGroup>
                <label class="control-label">IPv4 Configuration  <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
                <select class="form-control" ng-model="ipv4Config.provider" ng-options="a.value as a.name for a in ipProviders"></select>
              </FormGroup>

              <!-- IPv4 Fixed -->
              <FormGroup ng-show="ipv4Config.provider === 'fixed'">
                <label class="control-label">IPv4 Address</label>
                <input type="text" class="form-control" ng-model="ipv4Config.ip" name="ipv4" ng-required="ipv4Config.provider === 'fixed'">
              </FormGroup>

              <!-- IPv4 Network Interface -->
              <FormGroup ng-show="ipv4Config.provider === 'network-interface'">
                <label class="control-label">IPv4 Interface Name</label>
                <input type="text" class="form-control" ng-model="ipv4Config.ifname" name="ifname4" ng-required="ipv4Config.provider === 'network-interface'">
              </FormGroup>

              <!-- IPv6 provider -->
              <FormGroup>
                <label class="control-label">IPv6 Configuration  <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
                <select class="form-control" ng-model="ipv6Config.provider" ng-options="a.value as a.name for a in ipProviders"></select>
              </FormGroup>

              <!-- IPv6 Fixed -->
              <FormGroup ng-show="ipv6Config.provider === 'fixed'">
                <label class="control-label">IPv6 Address</label>
                <input type="text" class="form-control" ng-model="ipv6Config.ip" name="ipv6" ng-required="ipv6Config.provider === 'fixed'">
              </FormGroup>

              <!-- IPv6 Network Interface -->
              <FormGroup ng-show="ipv6Config.provider === 'network-interface'">
                <label class="control-label">IPv6 Interface Name</label>
                <input type="text" class="form-control" ng-model="ipv6Config.ifname" name="ifname6" ng-required="ipv6Config.provider === 'network-interface'">
              </FormGroup>
            </div>

            <div class="actionable" @click="advancedVisible = false" v-if="advancedVisible">Hide Advanced settings</div>
            <div class="actionable" @click="advancedVisible = true" v-else>Advanced settings...</div>
          </fieldset>
        </form>

        <Button @click="onSubmit()" :disabled="busy" :loading="busy">Next</Button>

        <div class="actionable"><small>Looking to <a href="/restore.html">restore?</a></small></div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.view {
  width: 100%;
  max-width: 500px;
}

</style>