123 lines
3.6 KiB
Plaintext
123 lines
3.6 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
import { actions } from 'astro:actions'
|
|
|
|
import Button from '../../components/Button.astro'
|
|
import Captcha from '../../components/Captcha.astro'
|
|
import InputHoneypotTrap from '../../components/InputHoneypotTrap.astro'
|
|
import MiniLayout from '../../layouts/MiniLayout.astro'
|
|
import { callActionWithObject } from '../../lib/callActionWithUrlParams'
|
|
import { prettifyUserSecretToken } from '../../lib/userSecretToken'
|
|
|
|
const generateResult = Astro.getActionResult(actions.account.generate)
|
|
if (generateResult && !generateResult.error) {
|
|
return Astro.rewrite('/account/welcome')
|
|
}
|
|
|
|
const data = await callActionWithObject(Astro, actions.account.preGenerateToken, undefined, 'form')
|
|
|
|
const preGeneratedToken = data?.token
|
|
const prettyToken = preGeneratedToken ? prettifyUserSecretToken(preGeneratedToken) : undefined
|
|
---
|
|
|
|
{/* eslint-disable astro/jsx-a11y/no-autofocus */}
|
|
|
|
<MiniLayout
|
|
pageTitle="Create Account"
|
|
description="Create a new account"
|
|
ogImage={{
|
|
template: 'generic',
|
|
title: 'Create Account',
|
|
description: 'Zero data, 100% anonymous',
|
|
icon: 'ri:user-add-line',
|
|
}}
|
|
layoutHeader={{
|
|
icon: 'ri:user-add-line',
|
|
title: 'New account',
|
|
subtitle: 'Zero data, 100% anonymous',
|
|
}}
|
|
breadcrumbs={[
|
|
{
|
|
name: 'Accounts',
|
|
url: '/account',
|
|
},
|
|
{
|
|
name: 'Create account',
|
|
},
|
|
]}
|
|
>
|
|
{
|
|
Astro.locals.user && (
|
|
<div class="flex items-center gap-2 rounded-md border border-red-500/30 bg-red-500/10 p-3">
|
|
<Icon name="ri:alert-line" class="size-5 text-red-400" />
|
|
<p class="text-sm text-red-400">You will be logged out of your current account.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<form method="POST" action={`/account/welcome${actions.account.generate}`}>
|
|
{/* Hack to make password managers suggest saving the secret token */}
|
|
<div class="-z-50 m-0 mb-2 grid h-4 grid-cols-2">
|
|
<input
|
|
class="block cursor-default border-none bg-transparent text-transparent outline-hidden"
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
value={prettyToken}
|
|
autocomplete="off"
|
|
tabindex="-1"
|
|
data-override-value-hack
|
|
data-override-value={prettyToken}
|
|
/>
|
|
<input
|
|
class="block cursor-default border-none bg-transparent text-transparent outline-hidden"
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
value={prettyToken}
|
|
autocomplete="off"
|
|
tabindex="-1"
|
|
data-override-value-hack
|
|
data-override-value={prettyToken}
|
|
/>
|
|
</div>
|
|
|
|
<input type="hidden" name="secret-token" value={preGeneratedToken} autocomplete="off" />
|
|
|
|
<Captcha action={actions.account.generate} autofocus />
|
|
|
|
<InputHoneypotTrap name="message" />
|
|
|
|
<Button
|
|
type="submit"
|
|
label="Create account"
|
|
icon="ri:user-add-line"
|
|
class="mt-14 flex w-full"
|
|
color="success"
|
|
shadow
|
|
size="lg"
|
|
/>
|
|
</form>
|
|
</MiniLayout>
|
|
|
|
<script>
|
|
////////////////////////////////////////////////////////////
|
|
// Optional script for password manager integration. //
|
|
// Makes password managers suggest saving the secret //
|
|
// token by using hidden username/password fields. //
|
|
////////////////////////////////////////////////////////////
|
|
|
|
document.addEventListener('astro:page-load', () => {
|
|
const inputs = document.querySelectorAll<HTMLInputElement>('input[data-override-value-hack]')
|
|
inputs.forEach((input) => {
|
|
input.addEventListener('focus', () => {
|
|
input.blur()
|
|
})
|
|
|
|
input.addEventListener('input', () => {
|
|
input.value = input.dataset.overrideValue ?? ''
|
|
})
|
|
})
|
|
})
|
|
</script>
|