Improve waiting for dns screen

dashboard/src/views/SetupView.vue

@@ -1,7 +1,8 @@
 <script setup>
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Spinner, Button, SingleSelect, FormGroup, TextInput } from 'pankow';
+import { Spinner, Button, SingleSelect, FormGroup, TextInput, Notification } from 'pankow';
+import { copyToClipboard } from 'pankow/utils';
 import { redirectIfNeeded } from '../utils.js';
 import DomainsModel from '../models/DomainsModel.js';
 import ProvisionModel from '../models/ProvisionModel.js';
@@ -19,7 +20,7 @@ const ipProviders = [
 const formError = ref({});
 const busy = ref(false);
 const ready = ref(false);
-const waitingForDnsSetup = ref(false);
+const waitingForDnsSetup = ref(true);
 const progressMessage = ref('');
 const taskMinutesActive = ref(0);
 const domain = ref('');
@@ -120,6 +121,11 @@ async function onSubmit() {
   waitForDnsSetup();
 }
 
+function onCopyToClipboard(value) {
+  copyToClipboard(value);
+  window.pankow.notify('copied to clipboard');
+}
+
 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; }, {});
 
@@ -138,18 +144,16 @@ onMounted(async () => {
 
 <template>
   <div class="container" v-if="ready">
+    <Notification/>
+
     <Transition name="slide-fade" mode="out-in">
       <div class="view" v-if="waitingForDnsSetup" style="text-align: center; max-width: unset;">
         <Spinner class="pankow-spinner-large"/>
         <h3>{{ progressMessage }} ...</h3>
-        <div>
-          Please wait while Cloudron is setting up the dashboard.
+        <div style="font-size: 13px">
+          Please wait while Cloudron is setting up the dashboard. Follow the logs on the server at <span class="highlight" @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</span>
           <br/>
-          <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>
-          <br/>
-          <br/>
-          <span v-show="taskMinutesActive >= 4">If setup appears stuck, it can be restarted by running <code>systemctl restart box</code> and reloading this page.</span>
+          <span v-show="taskMinutesActive >= 4">If setup appears stuck, it can be restarted by running <span class="highlight" @click="onCopyToClipboard('systemctl restart box')">systemctl restart box</span> and reloading this page.</span>
         </div>
       </div>
 
@@ -248,4 +252,9 @@ h1 {
   max-width: 500px;
 }
 
+.highlight {
+  font-family: monospace;
+  cursor: copy;
+}
+
 </style>