142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onBeforeMount, watch, defineAsyncComponent } from "vue";
|
|
import { isDomainAvailable } from "@/lib/whois";
|
|
import type { DomainFactory } from "@/lib/factory";
|
|
const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
|
|
import type { Domain } from "@/types";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
enum State {
|
|
Loading,
|
|
Ready,
|
|
Generating,
|
|
Fetching,
|
|
Error,
|
|
}
|
|
|
|
const props = defineProps<{ factory: DomainFactory }>();
|
|
|
|
const domain = ref<Domain | null>(null);
|
|
const state = ref<State>(State.Loading);
|
|
|
|
const i18n = useI18n();
|
|
|
|
function newDomain() {
|
|
if (!props.factory.error) {
|
|
state.value = State.Generating;
|
|
props.factory
|
|
.next(i18n.locale.value)
|
|
.then((newDomain: Domain) => {
|
|
domain.value = newDomain;
|
|
checkAvailability();
|
|
})
|
|
.catch((err: unknown) => {
|
|
state.value = State.Error;
|
|
throw err;
|
|
});
|
|
}
|
|
}
|
|
|
|
function checkAvailability() {
|
|
if (domain.value) {
|
|
const promiseDomain = domain.value;
|
|
domain.value.searching = true;
|
|
state.value = State.Fetching;
|
|
isDomainAvailable(domain.value)
|
|
.then((available: boolean) => {
|
|
if (domain.value?.name !== promiseDomain.name) {
|
|
return; // domain changed
|
|
}
|
|
if (!available) {
|
|
newDomain();
|
|
} else {
|
|
state.value = State.Ready;
|
|
}
|
|
})
|
|
.catch((err: unknown) => {
|
|
state.value = State.Error;
|
|
throw err;
|
|
});
|
|
}
|
|
}
|
|
|
|
function removeExt() {
|
|
if (domain.value) {
|
|
props.factory.removeExtensions(domain.value.extension);
|
|
newDomain();
|
|
}
|
|
}
|
|
|
|
function getTextClass() {
|
|
if (!domain.value || domain.value.name.length < 15) {
|
|
return "text-5xl";
|
|
}
|
|
if (domain.value.name.length < 20) {
|
|
return "text-4xl";
|
|
}
|
|
if (domain.value.name.length < 25) {
|
|
return "text-3xl";
|
|
}
|
|
if (domain.value.name.length < 30) {
|
|
return "text-2xl";
|
|
}
|
|
return "text-xl";
|
|
}
|
|
|
|
onBeforeMount(newDomain);
|
|
watch(i18n.locale, 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" xl /></span>
|
|
</h1>
|
|
<p v-if="state === State.Loading" class="py-6">
|
|
{{ $t("page_random.state.loading") }}
|
|
<span class="loading loading-dots loading-xs"></span>
|
|
</p>
|
|
<p v-else-if="state === State.Generating" class="py-6">
|
|
{{ $t("page_random.state.generating") }}
|
|
<span class="loading loading-dots loading-xs"></span>
|
|
</p>
|
|
<p v-else-if="state === State.Fetching" class="py-6">
|
|
{{ $t("page_random.state.fetching") }}
|
|
<span class="loading loading-dots loading-xs"></span>
|
|
</p>
|
|
<div v-else-if="state === State.Ready && domain?.available" class="py-6">
|
|
{{ $t("this_domain") }} {{ $t("seems") }}
|
|
<a
|
|
:href="`https://tld-list.com/${$i18n.locale}/tld/${domain.extension}`"
|
|
target="_blank"
|
|
class="underline"
|
|
>{{ $t("available") }}</a
|
|
>
|
|
!
|
|
</div>
|
|
<div v-else-if="state === State.Ready && !domain?.available" class="py-6">
|
|
{{ $t("this_domain") }} {{ $t("is_unavailable") }}
|
|
</div>
|
|
<div v-else-if="state === State.Error" class="py-6">
|
|
{{ $t("error") }}
|
|
</div>
|
|
<button
|
|
:disabled="state === State.Loading || state === State.Generating || state === State.Error"
|
|
class="btn btn-primary"
|
|
@click="newDomain"
|
|
>
|
|
{{ $t("button.new_domain") }}
|
|
</button>
|
|
<br />
|
|
<p v-if="domain">
|
|
<small
|
|
><a class="underline" href="#" @click.prevent="removeExt">{{
|
|
$t("page_random.dont_suggest", { ext: `.${domain.extension}` })
|
|
}}</a></small
|
|
>
|
|
</p>
|
|
<p v-else> </p>
|
|
</div>
|
|
</template>
|