Finalizing The WebUI for alpha/beta testing next week.

The WebUI is mostly done for now, The only missing piece is backend view, which isn't something we will include in the first release.

frontend/pages/report.vue

@@ -17,16 +17,31 @@
     </div>
 
     <div class="column is-12">
-      <Message message_class="is-warning">
+
+      <Message message_class="is-warning" title="Warning" v-if="show_report_warning">
         <p>Beware, while we try to make sure no sensitive information is leaked via the report, it's possible that
           something might be missed. Please review the report before posting it. If you notice
           any sensitive information, please report it to the developers. so we can fix it.</p>
+        <div class="mt-4">
+          <button class="button is-block is-fullwidth is-primary" @click="show_report_warning = false">
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-exclamation"></i></span>
+              <span>I Understand, show report.</span>
+            </span>
+          </button>
+        </div>
       </Message>
-    </div>
 
-    <div class="column is-12" v-if="data.length>0">
-      <pre style="min-height: 60vh;max-height:80vh; overflow-y: scroll"
-      ><code><span v-for="(item, index) in data" :key="index" class="is-block">{{ item }}</span></code></pre>
+      <Message message_class="is-info" v-if="!show_report_warning && data.length<1">
+        <span class="icon"><i class="fas fa-spinner fa-pulse"></i></span>
+        <span>Generating the report. Please wait...</span>
+      </Message>
+
+      <template v-if="!show_report_warning && data.length>0">
+        <pre style="min-height: 60vh;max-height:80vh; overflow-y: scroll"
+        ><code><span v-for="(item, index) in data" :key="index" class="is-block">{{ item }}</span></code></pre>
+      </template>
+
     </div>
   </div>
 </template>
@@ -35,12 +50,17 @@
 useHead({title: `System Report`})
 
 const data = ref([])
+const show_report_warning = ref(true)
 
-onMounted(async () => {
-  const response = await request(`/system/report`);
+watch(show_report_warning, async (value) => {
+  if (false !== value) {
+    return
+  }
+  const response = await request(`/system/report`)
   data.value = await response.json()
-});
+})
 
 const copyAPI = navigator.clipboard
+
 const copyContent = () => navigator.clipboard.writeText(data.value.join('\n'));
 </script>