feat: input page (wip)

2026-06-16 18:38:09 +02:00
parent 98f937e9de
commit 0e4cc45439
5 changed files with 304 additions and 172 deletions
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, onBeforeMount, watch } from "vue";
+import { isDomainAvailable } from "@/lib/whois";
+import type { DomainFactory } from "@/lib/factory";
+import CoolDomain from "./CoolDomain.vue";
+
+enum State {
+  Loading,
+  Ready,
+  Generating,
+  Fetching,
+  Error,
+}
+
+const props = defineProps<{ lang: string; factory: DomainFactory }>();
+
+const domain = ref<string | null>(null);
+const domainAvailable = ref<boolean>(false);
+const state = ref<State>(State.Loading);
+
+function newDomain() {
+  if (!props.factory.error) {
+    state.value = State.Generating;
+    props.factory
+      .next(props.lang)
+      .then((value: string) => {
+        domain.value = value;
+        checkAvailability();
+      })
+      .catch((err: unknown) => {
+        state.value = State.Error;
+        throw err;
+      });
+  }
+}
+
+function checkAvailability() {
+  if (domain.value) {
+    const promiseDomain = domain.value;
+    state.value = State.Fetching;
+    isDomainAvailable(promiseDomain)
+      .then((available: boolean) => {
+        if (domain.value !== promiseDomain) {
+          return; // domain changed
+        }
+        domainAvailable.value = available;
+        if (!available) {
+          newDomain();
+        } else {
+          state.value = State.Ready;
+        }
+      })
+      .catch((err: unknown) => {
+        state.value = State.Error;
+        throw err;
+      });
+  }
+}
+
+function getTextClass() {
+  if (!domain.value || domain.value.length < 15) {
+    return "text-5xl";
+  }
+  if (domain.value.length < 20) {
+    return "text-4xl";
+  }
+  if (domain.value.length < 25) {
+    return "text-3xl";
+  }
+  if (domain.value.length < 30) {
+    return "text-2xl";
+  }
+  return "text-xl";
+}
+
+onBeforeMount(() => {
+  newDomain();
+});
+watch(() => props.lang, newDomain);
+</script>
+
+<template>
+  <div>
+    <h1 class="font-bold" :class="getTextClass()">
+      <span v-if="!domain" class="loading loading-spinner loading-xl"></span>
+      <span v-else
+        ><CoolDomain
+          :domain="domain"
+          :available="domainAvailable"
+          :searching="state === State.Fetching"
+          size="xl"
+      /></span>
+    </h1>
+    <p v-if="state === State.Loading" class="py-6">
+      <span v-if="lang === 'french'"
+        >Chargement de la Cool Domain Factory™</span
+      >
+      <span v-else>Loading the Cool Domain Factory™</span>
+      <span class="loading loading-dots loading-xs"></span>
+    </p>
+    <p v-else-if="state === State.Generating" class="py-6">
+      <span v-if="lang === 'french'">Création d'un domaine cool</span>
+      <span v-else>Generating a new cool domain</span>
+      <span class="loading loading-dots loading-xs"></span>
+    </p>
+    <p v-else-if="state === State.Fetching" class="py-6">
+      <span v-if="lang === 'french'">Vérification de la disponibilité</span>
+      <span v-else>Checking domain availability</span>
+      <span class="loading loading-dots loading-xs"></span>
+    </p>
+    <div v-else-if="state === State.Ready && domainAvailable" class="py-6">
+      <span v-if="lang === 'french'"
+        >Ce domaine semble
+        <a
+          :href="`https://tld-list.com/fr/tld/${domain?.split('.')[1]}`"
+          target="_blank"
+          class="underline"
+          >disponible</a
+        >
+        !</span
+      >
+      <span v-else
+        >This domain seems
+        <a
+          :href="`https://tld-list.com/tld/${domain?.split('.')[1]}`"
+          target="_blank"
+          class="underline"
+          >available</a
+        >!</span
+      >
+    </div>
+    <div v-else-if="state === State.Ready && !domainAvailable" class="py-6">
+      <span v-if="lang === 'french'">Ce domaine n'est pas disponible.</span>
+      <span v-else>This domain is not available.</span>
+    </div>
+    <div v-else-if="state === State.Error" class="py-6">
+      <span v-if="lang === 'french'"
+        >Une erreur est survenue, merci de recharger la page.</span
+      >
+      <span v-else>An error has occured, please reload the page.</span>
+    </div>
+    <button
+      :disabled="
+        state === State.Loading ||
+        state === State.Generating ||
+        state === State.Error
+      "
+      class="btn btn-primary"
+      @click="newDomain"
+    >
+      <span v-if="lang === 'french'">Nouveau domaine</span>
+      <span v-else>New domain</span>
+    </button>
+  </div>
+</template>