120 lines
4.0 KiB
Plaintext
120 lines
4.0 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
import { actions } from 'astro:actions'
|
|
|
|
import Button from '../../components/Button.astro'
|
|
import CopyButton from '../../components/CopyButton.astro'
|
|
import { SUPPORT_EMAIL } from '../../constants/project'
|
|
import MiniLayout from '../../layouts/MiniLayout.astro'
|
|
import { prettifyUserSecretToken } from '../../lib/userSecretToken'
|
|
|
|
const result = Astro.getActionResult(actions.account.generate)
|
|
if (result?.error) return Astro.redirect('/account/generate')
|
|
|
|
const prettyToken = result ? prettifyUserSecretToken(result.data.token) : null
|
|
---
|
|
|
|
<MiniLayout
|
|
pageTitle="Welcome"
|
|
description="New account welcome page"
|
|
ogImage={{
|
|
template: 'generic',
|
|
title: 'Welcome',
|
|
description: 'New account welcome page',
|
|
icon: 'ri:key-2-line',
|
|
}}
|
|
layoutHeader={{
|
|
icon: 'ri:key-2-line',
|
|
title: 'Save your Login Key',
|
|
subtitle: 'You need it to login to your account',
|
|
}}
|
|
breadcrumbs={[
|
|
{
|
|
name: 'Accounts',
|
|
url: '/account',
|
|
},
|
|
{
|
|
name: 'Welcome',
|
|
},
|
|
]}
|
|
>
|
|
{
|
|
prettyToken ? (
|
|
<>
|
|
<div class="mb-2 flex items-center gap-3 rounded-md bg-red-900/80 p-2 text-red-200">
|
|
<Icon name="ri:delete-bin-line" class="size-5 flex-shrink-0" />
|
|
<p class="text-sm text-pretty">Won't show again and can't be recovered!</p>
|
|
</div>
|
|
<div class="border-day-800 js:pr-24 bg-night-800 relative rounded-md border p-3 font-mono break-all text-white">
|
|
{prettyToken}
|
|
<div class="absolute inset-y-0 right-2 flex items-center">
|
|
<CopyButton copyText={prettyToken} size="sm" color="success" />
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-day-500 mt-1 text-center text-sm text-balance">
|
|
Save it in a <span class="text-day-200 font-medium">password manager</span>
|
|
or <span class="text-day-200 font-medium">secure location</span>
|
|
</p>
|
|
|
|
<form method="GET" action="/" class="mt-8 space-y-4">
|
|
<div class="flex items-center gap-4">
|
|
<input type="checkbox" id="confirm-saved" required />
|
|
<label for="confirm-saved" class="text-day-400 text-sm text-pretty">
|
|
I saved my Login Key
|
|
</label>
|
|
</div>
|
|
|
|
<Button type="submit" class="w-full" color="gray" label="Continue" />
|
|
</form>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div class="mt-12 flex items-center justify-center gap-3 rounded-md bg-red-900/80 p-3 text-red-200">
|
|
<Icon name="ri:alert-line" class="size-5 flex-shrink-0" />
|
|
<p class="text-sm text-pretty">Your Login Key can't be shown again</p>
|
|
</div>
|
|
|
|
<p class="text-day-300 mt-2 text-center text-sm text-balance">
|
|
If you lost it, contact us at
|
|
<a href={`mailto:${SUPPORT_EMAIL}`} class="text-green-400 hover:underline focus-visible:underline">
|
|
{SUPPORT_EMAIL}
|
|
</a>
|
|
</p>
|
|
</>
|
|
)
|
|
}
|
|
</MiniLayout>
|
|
|
|
<script>
|
|
////////////////////////////////////////////////////////////
|
|
// Optional script for preventing accidental navigation. //
|
|
// Shows a warning if the user tries to leave without //
|
|
// confirming they saved their token. //
|
|
////////////////////////////////////////////////////////////
|
|
|
|
const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
|
|
event.preventDefault()
|
|
// Included for legacy support, e.g. Chrome/Edge < 119
|
|
event.returnValue = true
|
|
}
|
|
window.addEventListener('beforeunload', beforeUnloadHandler)
|
|
|
|
document.addEventListener('astro:after-swap', () => {
|
|
window.removeEventListener('beforeunload', beforeUnloadHandler)
|
|
})
|
|
|
|
document.addEventListener('astro:page-load', () => {
|
|
const confirmSavedInput = document.querySelectorAll<HTMLInputElement>('#confirm-saved')
|
|
confirmSavedInput.forEach((input) => {
|
|
input.addEventListener('input', () => {
|
|
if (input.checked) {
|
|
window.addEventListener('beforeunload', beforeUnloadHandler)
|
|
} else {
|
|
window.removeEventListener('beforeunload', beforeUnloadHandler)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
</script>
|