wip

src/App.vue

@@ -1,53 +1,95 @@
 <script setup lang="ts">
-import { ref, onMounted, onUpdated, nextTick } from 'vue'
-import { createIcons, icons } from 'lucide'
+import { ref, onMounted, onUpdated, nextTick, onBeforeMount } from "vue";
+import { createIcons, icons } from "lucide";
+import { WhoIs } from "./lib/whois";
+import { DomainFactory } from "./lib/factory";
 
-const visible = ref<boolean>(false)
+const visible = ref<boolean>(false);
+const whois = ref<WhoIs>(new WhoIs());
+const factory = ref<DomainFactory>(new DomainFactory());
+const domain = ref<string | null>(null);
+const domainAvailable = ref<boolean | null>(null);
+const lang = ref<string>("english");
+const loading = ref<boolean>(true);
+const fetching = ref<boolean>(false);
+const error = ref<string | null>(null);
 
+function newDomain() {
+  if (!factory.value.error) {
+    fetching.value = true;
+    factory.value
+      .next(lang.value)
+      .then((value) => {
+        domain.value = value;
+        checkAvailability();
+      })
+      .catch((err: unknown) => {
+        throw err;
+      });
+  }
+}
+
+function checkAvailability() {
+  domainAvailable.value = null;
+  if (!whois.value.error && domain.value) {
+    whois.value
+      .isDomainAvailable(domain.value)
+      .then((available) => {
+        domainAvailable.value = available;
+        fetching.value = false;
+        if (!available) {
+          newDomain();
+        }
+      })
+      .catch((err: unknown) => {
+        throw err;
+      });
+  }
+}
+
+onBeforeMount(async () => {
+  await whois.value.init();
+  await factory.value.init();
+  newDomain();
+  loading.value = false;
+});
 onMounted(() => {
   setTimeout(() => {
-    visible.value = true
-  })
-})
+    visible.value = true;
+  });
+});
 onUpdated(async () => {
-  await nextTick()
+  await nextTick();
   createIcons({
     icons,
-    nameAttr: 'icon',
+    nameAttr: "icon",
     attrs: {
-      width: '1.1em',
-      height: '1.1em',
+      width: "1.1em",
+      height: "1.1em",
     },
-  })
-})
+  });
+});
 </script>
 
 <template>
   <main :style="{ display: visible ? 'inherit' : 'none' }">
-    <!-- TODO: 1. rename app -->
     <h1>
-      <i icon="package"></i>
-      Vue-Boilerplate
+      <span v-show="fetching || loading"><i icon="cog"></i></span>
+      {{ domain }}
+      <span v-show="!loading"
+        >({{
+          domainAvailable === null
+            ? "?"
+            : domainAvailable
+              ? "available"
+              : "unavailable"
+        }})</span
+      >
     </h1>
-    <br />
-    <p>
-      Fill this page with <i>whatever</i> you're going to develop.
-      <br />
-      <b>Then enjoy!</b>
-    </p>
-    <div class="button green-400">
-      <i icon="square-arrow-right"></i> This is a sample button yay
-    </div>
-    <br />
-    <hr />
-    <small class="footer">
-      <i icon="at-sign"></i>&nbsp;
-      <a href="https://git.klemek.fr/klemek" target="_blank">Kleπek</a>&nbsp; |&nbsp;
-      <!-- TODO: 1. rename app -->
-      <i icon="git-branch"></i>&nbsp;
-      <a href="https://git.klemek.fr/klemek/template" target="_blank">Repository</a>&nbsp; |&nbsp;
-      <i icon="copyright"></i>&nbsp;2026
-    </small>
+    <button v-show="!loading && !fetching" @click="newDomain">
+      New domain
+    </button>
+    <span v-if="error">Error: {{ error }}</span>
   </main>
 </template>