happyDomain/happyDomain
happyDomain/happyDomain
1
0
Fork 0
Code Issues 1 Pull Requests 10 Releases Activity

ui: Add onboarding page

Browse Source
This commit is contained in:
nemunaire 2023-01-09 11:39:20 +01:00
parent 4883eef981
commit 2a8ceeafd6
9 changed files with 143 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
ui/src/lib/components/Onboarding.svelte Normal file
View File

@ -0,0 +1,94 @@
<script lang="ts">
import { goto } from '$app/navigation';
import {
Badge,
Button,
Card,
CardBody,
CardGroup,
Col,
Container,
Icon,
Row,
Spinner,
} from 'sveltestrap';
import Logo from '$lib/components/Logo.svelte';
import ProviderList from '$lib/components/providers/List.svelte';
import ProviderSelector from '$lib/components/providers/Selector.svelte';
import { providers, refreshProviders } from '$lib/stores/providers';
import { t } from '$lib/translations';
if (!$providers) refreshProviders();
</script>
<Container class="pt-3 pb-4">
<h1 class="text-center mb-4">
{$t('common.welcome.start')}<Logo height="40" />{$t('common.welcome.end')}
</h1>
<CardGroup class="my-4">
<Card>
<CardBody>
<h3 class="text-secondary text-center mt-1 mb-4">
{$t('onboarding.no-sale.title')}
</h3>
<p class="text-justify text-indent mt-4 mb-3">
{@html $t('onboarding.no-sale.description', {"happyDomain": `happy<span class="fw-bold">Domain</span>`})}
</p>
<p class="text-justify text-indent mt-3 mb-4">
{$t('onboarding.no-sale.buy-advice')}
</p>
</CardBody>
</Card>
<Card>
<CardBody>
<h3 class="text-primary text-center mt-1 mb-4">
{$t('onboarding.own')}
</h3>
<p class="text-justify text-indent my-4">
{@html $t('onboarding.use', {
"happyDomain": `happy<span class="fw-bold">Domain</span>`,
"first-step": $providers && $providers.length ? $t('onboarding.choose-configured', {"action": `<a href="/providers/new">${$t('onboarding.add-one')}</a>`}) : $t('onboarding.suggest-provider')
})}
</p>
{#if $providers && $providers.length}
<ProviderList
items={$providers}
noLabel
style="max-height: 20rem; overflow-y: auto"
on:click={(event) => goto(`/providers/${event.detail._id}/domains`)}
on:new-provider={() => goto(`/providers/new`)}
/>
{:else}
<div style="max-height: 14rem; overflow-y: auto;">
<ProviderSelector
on:provider-selected={(event) => goto(`/providers/new/${event.detail.ptype}`)}
/>
</div>
{/if}
</CardBody>
</Card>
</CardGroup>
<Card id="aa-hosting" class="my-3">
<CardBody>
<span class="text-secondary fw-bold">{$t('onboarding.questions.hosting.q')}</span><br>
<div class="mx-3">
{$t('onboarding.questions.hosting.a')}
</div>
</CardBody>
</Card>
<Card id="sec-hosting" class="my-3">
<CardBody>
<span class="text-secondary fw-bold">
{@html $t('onboarding.questions.secondary.q', {"happyDomain": `happy<span class="fw-bold">Domain</span>`})}
</span>
<br>
<div class="mx-3">
{$t('onboarding.questions.secondary.a')}
</div>
</CardBody>
</Card>
</Container>

4
ui/src/lib/components/providers/List.svelte
View File

@ -17,7 +17,7 @@
import HListGroup from '$lib/components/ListGroup.svelte';
import type { Provider } from '$lib/model/provider';
import { domains } from '$lib/stores/domains';
import { providers, providersSpecs, refreshProviders } from '$lib/stores/providers';
import { providers, providersSpecs, refreshProviders, refreshProvidersSpecs } from '$lib/stores/providers';
import { t } from '$lib/translations';
const dispatch = createEventDispatcher();
@ -28,6 +28,8 @@
export let selectedProvider: Provider|null = null;
export let items: Array<any>;
if (!$providersSpecs) refreshProvidersSpecs();
let domain_in_providers: Record<string, number> = {};
$: {
if ($domains && $providers) {

6
ui/src/lib/locales/en.json
View File

@ -184,12 +184,12 @@
},
"onboarding": {
"add-one": "add a new one",
"choose-configured": "choose between already configured providers or {{0}}:",
"choose-configured": "choose between already configured providers or {{action}}:",
"suggest-provider": "choose your provider:",
"use": "Use {{happyDomain}} as a remplacement interface to your usual domain name provider. It'll still rely on your provider's infrastructure, you'll just take benefit from our simple interface. As a first step, {{first-step}}",
"no-sale": {
"title": "I don't own any domain",
"description": "{{0}} does not sell domain yet. To start using our interface, you need to buy a domain from one of our supported provider",
"description": "{{happyDomain}} does not sell domain yet. To start using our interface, you need to buy a domain from one of our supported provider",
"buy-advice": "We'll provide some guidance in a near future on how to easily buy a domain name. So stay tune and get in touch with us if you'll help us to build a comprehensive guide."
},
"own": "I already own a domain",
@ -199,7 +199,7 @@
"a": "We'll provide such feature in a near future, as it's on our manifest. We choose to focus first on spreading the word that domain names are accessibles to everyone through this sweet interface, before targeting privacy, censorship, …"
},
"secondary": {
"q": "I've my own infrastructure, can I use {{0}} as secondary authoritative server?",
"q": "I've my own infrastructure, can I use {{happyDomain}} as secondary authoritative server?",
"a": "We'll provide such feature in a near future, as soon as our name server infrastructure is on."
}
}

8
ui/src/lib/locales/fr.json
View File

@ -186,22 +186,22 @@
},
"onboarding": {
"add-one": "ajouter un domaine",
"choose-configured": "choisir entre les fournisseurs déjà configurés ou {{0}} :",
"choose-configured": "choisir entre les fournisseurs déjà configurés ou {{action}} :",
"suggest-source": "choisir votre fournisseur",
"use": "Utilisez {{happyDomain}} comme interface de remplacement de votre fournisseur de noms de domaine habituel. Il continuera à s'appuyer sur l'infrastructure de votre fournisseur, vous n'aurez qu'à profiter de notre interface simple. Dans un premier temps, {{first-step}}",
"no-sale": {
"title": "Je ne possède aucun domaine",
"description": "{{0}} ne fournit pas encore de domaine. Pour commencer à utiliser notre interface, vous devez vous procurer un domaine auprès de l'un des fournisseurs répertoriés",
"description": "{{happyDomain}} ne fournit pas encore de domaine. Pour commencer à utiliser notre interface, vous devez vous procurer un domaine auprès de l'un des fournisseurs répertoriés",
"buy-advice": "Nous vous donnerons prochainement des conseils sur la manière de se procurer facilement un nom de domaine. Restez donc à l'écoute et contactez-nous si vous souhaitez nous aider à élaborer un guide complet."
},
"own": "Je dispose déjà d'un domaine",
"questions": {
"hosting": {
"q": "Je ne veux plus dépendre de mon fournisseur d'hébergement de nom de domaine. Puis-je héberger mon nom de domaine sur votre infrastructure",
"a": "Nous fournirons cette information dans un avenir proche, car elle figure sur notre manifeste. Nous avons choisi de faire passer le message que les noms de domaine sont accessibles à tous grâce à cette interface conviviale, avant de nous attaquer à la protection de la vie privée, à la censure, ..."
"a": "Nous fournirons cette information dans un avenir proche, car elle figure sur notre manifeste. Nous avons choisi de faire passer le message que les noms de domaine sont accessibles à tous grâce à cette interface conviviale, avant de nous attaquer à la protection de la vie privée, à la censure, ..."
},
"secondary": {
"q": "J'ai ma propre infrastructure, puis-je utiliser {{0}} comme serveur secondaire faisant autorité ?",
"q": "J'ai ma propre infrastructure, puis-je utiliser {{happyDomain}} comme serveur secondaire faisant autorité ?",
"a": "Nous proposerons cette fonctionnalité dans un proche avenir, dès que notre infrastructure de serveurs de noms sera en service."
}
}

8
ui/src/routes/+page.svelte
View File

@ -1,5 +1,11 @@
<script>
import Home from '$lib/components/Home.svelte';
import Onboarding from '$lib/components/Onboarding.svelte';
import { domains } from '$lib/stores/domains';
</script>
<Home />
{#if !$domains || $domains.length}
<Home />
{:else}
<Onboarding />
{/if}

3
ui/src/routes/+page.ts
View File

@ -2,6 +2,7 @@ import { redirect } from '@sveltejs/kit';
import type { Load } from '@sveltejs/kit';
import { get_store_value } from 'svelte/internal';
import { refreshDomains } from '$lib/stores/domains';
import { userSession } from '$lib/stores/usersession';
import { config as tsConfig, locale } from '$lib/translations';
@ -14,5 +15,7 @@ export const load: Load = async({ parent }) => {
throw redirect(302, '/' + initLocale);
}
await refreshDomains();
return {};
}

9
ui/src/routes/domains/[dn]/[[historyid]]/+layout.svelte
View File

@ -199,8 +199,13 @@
deleteInProgress = true;
APIDeleteDomain($domains_idx[selectedDomain].id).then(
() => {
deleteInProgress = false;
goto('/domains');
refreshDomains().then(() => {
deleteInProgress = false;
goto('/domains');
}, (err: any) => {
deleteInProgress = false;
goto('/domains');
});
},
(err: any) => {
deleteInProgress = false;

8
ui/src/routes/providers/[prvid]/domains/+page.svelte Normal file
View File

@ -0,0 +1,8 @@
<script lang="ts">
import Home from '$lib/components/Home.svelte';
import type { Provider } from '$lib/model/provider';
export let data: {provider: Provider};
</script>
<Home filteredProvider={data.provider} />

14
ui/src/routes/providers/[prvid]/domains/+page.ts Normal file
View File

@ -0,0 +1,14 @@
import { redirect, type Load } from '@sveltejs/kit';
import { getProvider } from '$lib/api/provider';
export const load: Load = async({ params }) => {
if (params.prvid == undefined) {
throw redirect(302, '/providers/');
}
return {
provider: await getProvider(params.prvid),
provider_id: params.prvid,
}
}