438 lines
11 KiB
Vue
438 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { t, translate } from '@/i18n'
|
|
|
|
import { computed, nextTick, onMounted, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useLocalizedToast } from '@/i18n/presentation'
|
|
import AuthShell from '@/components/AuthShell.vue'
|
|
import PasswordStrengthHint from '@/components/PasswordStrengthHint.vue'
|
|
import ResultPanel from '@/components/ResultPanel.vue'
|
|
import { ApiError, useApi } from '@/composables/useApi'
|
|
import { VERIFIED_REDIRECT_DELAY_MS, wait } from '@/lib/verifiedRedirect'
|
|
import { useSessionStore } from '@/stores/session'
|
|
|
|
type InviteState = 'checking' | 'form' | 'invalid' | 'expired' | 'failed' | 'success'
|
|
|
|
const EMAIL_HAS_ACCOUNT_MESSAGE = 'This address already has an account.'
|
|
const USERNAME_TAKEN_MESSAGE = 'That username is taken. Try another.'
|
|
const USERNAME_RULE_MESSAGE = 'Use 3 to 20 characters.'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const api = useApi()
|
|
const session = useSessionStore()
|
|
const toast = useLocalizedToast()
|
|
|
|
const code = typeof route.query.c === 'string' ? route.query.c : ''
|
|
|
|
const state = ref<InviteState>(code ? 'checking' : 'invalid')
|
|
const inviteEmail = ref('')
|
|
const username = ref('')
|
|
const password = ref('')
|
|
|
|
const usernameTouched = ref(false)
|
|
const passwordTouched = ref(false)
|
|
const usernameTaken = ref(false)
|
|
const submitting = ref(false)
|
|
const passwordShown = ref(false)
|
|
const serverErrorAlert = ref(false)
|
|
|
|
const usernameValid = computed(() => username.value.length >= 3 && username.value.length <= 20)
|
|
const passwordValid = computed(() => password.value.length >= 8)
|
|
|
|
const usernameError = computed(() => {
|
|
if (usernameTaken.value) {
|
|
return t(USERNAME_TAKEN_MESSAGE)
|
|
}
|
|
return usernameTouched.value && !usernameValid.value ? t(USERNAME_RULE_MESSAGE) : ''
|
|
})
|
|
|
|
const passwordRules = computed(() => [
|
|
{
|
|
get label() {
|
|
return t('At least 8 characters')
|
|
},
|
|
met: passwordValid.value,
|
|
},
|
|
])
|
|
|
|
const formValid = computed(() => usernameValid.value && passwordValid.value)
|
|
|
|
const showForm = computed(() => state.value === 'form')
|
|
|
|
const pageTitle = computed(() => (showForm.value ? t('Accept your invite') : ''))
|
|
|
|
const pageDescription = computed(() =>
|
|
showForm.value
|
|
? t('Choose a username and password to finish setting up your account.')
|
|
: undefined,
|
|
)
|
|
|
|
function goToLogin() {
|
|
router.push('/login')
|
|
}
|
|
|
|
const invalidActions = [
|
|
{
|
|
get label() {
|
|
return t('Go to log in')
|
|
},
|
|
onClick: goToLogin,
|
|
},
|
|
]
|
|
|
|
const expiredActions = [
|
|
{
|
|
get label() {
|
|
return t('Go to log in')
|
|
},
|
|
color: 'neutral' as const,
|
|
variant: 'outline' as const,
|
|
onClick: goToLogin,
|
|
},
|
|
]
|
|
|
|
function onUsernameInput() {
|
|
usernameTaken.value = false
|
|
}
|
|
|
|
async function focusUsername() {
|
|
await nextTick()
|
|
await nextTick()
|
|
document.querySelector<HTMLInputElement>('input[autocomplete="username"]')?.focus()
|
|
}
|
|
|
|
function applyDeadLinkStatus(error: unknown): boolean {
|
|
if (!(error instanceof ApiError)) {
|
|
return false
|
|
}
|
|
if (error.status === 404) {
|
|
state.value = 'invalid'
|
|
return true
|
|
}
|
|
if (error.status === 410) {
|
|
state.value = 'expired'
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
async function loadInvite() {
|
|
state.value = 'checking'
|
|
try {
|
|
const invite = await api.request<{ email: string }>(
|
|
`/v1/auth/invite?c=${encodeURIComponent(code)}`,
|
|
{ onUnauthorized: 'passthrough', onForbidden: 'passthrough' },
|
|
)
|
|
inviteEmail.value = invite.email
|
|
state.value = 'form'
|
|
} catch (error) {
|
|
if (!applyDeadLinkStatus(error)) {
|
|
state.value = 'failed'
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleSuccess() {
|
|
state.value = 'success'
|
|
toast.add(() => ({
|
|
color: 'success',
|
|
icon: 'i-lucide-circle-check',
|
|
get title() {
|
|
return t('Welcome to RenewCMS')
|
|
},
|
|
get description() {
|
|
return t("You're logged in as {0}.", [username.value])
|
|
},
|
|
}))
|
|
await Promise.all([session.retry(), wait(VERIFIED_REDIRECT_DELAY_MS)])
|
|
await router.push('/home')
|
|
}
|
|
|
|
function handleFailure(error: unknown) {
|
|
if (applyDeadLinkStatus(error)) {
|
|
return
|
|
}
|
|
if (error instanceof ApiError && error.status === 409) {
|
|
if (error.body === EMAIL_HAS_ACCOUNT_MESSAGE) {
|
|
state.value = 'invalid'
|
|
return
|
|
}
|
|
usernameTaken.value = true
|
|
focusUsername()
|
|
return
|
|
}
|
|
serverErrorAlert.value = true
|
|
}
|
|
|
|
async function onSubmit() {
|
|
usernameTouched.value = true
|
|
passwordTouched.value = true
|
|
|
|
if (!formValid.value) {
|
|
return
|
|
}
|
|
|
|
serverErrorAlert.value = false
|
|
submitting.value = true
|
|
try {
|
|
await api.request('/v1/auth/invite/accept', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
code,
|
|
username: username.value,
|
|
password: password.value,
|
|
}),
|
|
onUnauthorized: 'passthrough',
|
|
onForbidden: 'passthrough',
|
|
})
|
|
} catch (error) {
|
|
handleFailure(error)
|
|
submitting.value = false
|
|
return
|
|
}
|
|
submitting.value = false
|
|
await handleSuccess()
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (code) {
|
|
loadInvite()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AuthShell :title="pageTitle" :description="pageDescription">
|
|
<template v-if="serverErrorAlert && showForm" #notice>
|
|
<UAlert
|
|
color="error"
|
|
icon="i-lucide-circle-x"
|
|
:title="t('Couldn\'t create the account')"
|
|
:description="t('Something went wrong on the server. Try again in a moment.')"
|
|
variant="soft"
|
|
:close="false"
|
|
role="alert"
|
|
/>
|
|
</template>
|
|
|
|
<template #default="{ controlSize, controlClass, inputClass }">
|
|
<div
|
|
v-if="state === 'checking'"
|
|
role="status"
|
|
class="flex flex-col items-center gap-4 py-10 text-center"
|
|
>
|
|
<UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-highlighted" />
|
|
<p class="text-xl/7 font-semibold text-highlighted">
|
|
{{ t('Checking your invite…') }}
|
|
</p>
|
|
<p class="text-base text-muted">
|
|
{{ t('This only takes a moment.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else-if="state === 'failed'" class="flex flex-col gap-4.5">
|
|
<UAlert
|
|
color="error"
|
|
icon="i-lucide-circle-x"
|
|
:title="t('Couldn\'t check your invite')"
|
|
:description="t('Something went wrong on the server. Try again in a moment.')"
|
|
variant="soft"
|
|
:close="false"
|
|
role="alert"
|
|
/>
|
|
<UButton
|
|
block
|
|
color="neutral"
|
|
variant="outline"
|
|
:size="controlSize"
|
|
:ui="{ base: controlClass }"
|
|
@click="loadInvite"
|
|
>
|
|
{{ t('Try again') }}
|
|
</UButton>
|
|
</div>
|
|
|
|
<ResultPanel
|
|
v-else-if="state === 'invalid'"
|
|
tone="error"
|
|
icon="i-lucide-link-2-off"
|
|
:title="t('This invite link doesn\'t work')"
|
|
:description="
|
|
t(
|
|
'It may be incomplete, or it may already have been used. If you already set up your account, log in instead.',
|
|
)
|
|
"
|
|
:actions="invalidActions"
|
|
>
|
|
<p class="text-sm text-pretty text-muted">
|
|
{{
|
|
t(
|
|
'Open the link from your email again, or copy the full address into your browser.',
|
|
)
|
|
}}
|
|
</p>
|
|
</ResultPanel>
|
|
|
|
<ResultPanel
|
|
v-else-if="state === 'expired'"
|
|
tone="error"
|
|
icon="i-lucide-clock"
|
|
:title="t('This invite has expired')"
|
|
:description="
|
|
t(
|
|
'Invites work once, for 3 days. Ask the person who invited you to send a new one.',
|
|
)
|
|
"
|
|
:actions="expiredActions"
|
|
/>
|
|
|
|
<ResultPanel
|
|
v-else-if="state === 'success'"
|
|
tone="success"
|
|
icon="i-lucide-circle-check"
|
|
:title="t('Your account is ready')"
|
|
:description="t('Taking you to your dashboard…')"
|
|
:actions="[]"
|
|
/>
|
|
|
|
<UForm
|
|
v-else
|
|
:state="{ email: inviteEmail, username, password }"
|
|
class="flex flex-col gap-4.5"
|
|
@submit="onSubmit"
|
|
>
|
|
<UFormField
|
|
:label="t('Email')"
|
|
name="email"
|
|
help="From your invitation."
|
|
:size="controlSize"
|
|
>
|
|
<UInput
|
|
:model-value="inviteEmail"
|
|
placeholder="you@example.com"
|
|
autocomplete="email"
|
|
readonly
|
|
:disabled="submitting"
|
|
variant="outline"
|
|
color="primary"
|
|
:size="controlSize"
|
|
:ui="{
|
|
base: `${inputClass} bg-elevated text-dimmed ring-(--ui-border)`,
|
|
}"
|
|
class="w-full"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
:label="t('Username')"
|
|
name="username"
|
|
:error="translate(usernameError) || undefined"
|
|
:size="controlSize"
|
|
>
|
|
<template v-if="usernameError" #error="{ error }">
|
|
<span class="flex items-center gap-1.5">
|
|
<UIcon
|
|
name="i-lucide-circle-alert"
|
|
class="size-3.5 shrink-0 text-error"
|
|
/>
|
|
{{ t(error) }}
|
|
</span>
|
|
</template>
|
|
<template v-else #help>
|
|
{{ t("Letters and numbers, 3 to 20 characters. You'll use it to log in.") }}
|
|
</template>
|
|
<template #hint>
|
|
<span
|
|
:class="[
|
|
'font-mono text-xs',
|
|
usernameError ? 'text-error' : 'text-muted',
|
|
]"
|
|
>
|
|
{{ username.length }} / 20
|
|
</span>
|
|
</template>
|
|
<UInput
|
|
v-model="username"
|
|
:placeholder="t('e.g. lea')"
|
|
autocomplete="username"
|
|
:disabled="submitting"
|
|
variant="outline"
|
|
color="primary"
|
|
:highlight="!!usernameError"
|
|
:size="controlSize"
|
|
:ui="{ base: inputClass, trailing: 'pe-1' }"
|
|
class="w-full"
|
|
@update:model-value="onUsernameInput"
|
|
@blur="usernameTouched = true"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField :label="t('Password')" name="password" :size="controlSize">
|
|
<template #help>
|
|
<PasswordStrengthHint
|
|
:rules="passwordRules"
|
|
:show-errors="passwordTouched"
|
|
/>
|
|
</template>
|
|
<UInput
|
|
v-model="password"
|
|
:type="passwordShown ? 'text' : 'password'"
|
|
autocomplete="new-password"
|
|
:disabled="submitting"
|
|
variant="outline"
|
|
color="primary"
|
|
:size="controlSize"
|
|
:ui="{
|
|
base: `${inputClass} ${passwordShown ? '' : 'tracking-[2px]'}`,
|
|
trailing: 'pe-1',
|
|
}"
|
|
class="w-full"
|
|
@blur="passwordTouched = true"
|
|
>
|
|
<template #trailing>
|
|
<UButton
|
|
:icon="passwordShown ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
|
variant="ghost"
|
|
color="neutral"
|
|
size="sm"
|
|
square
|
|
class="size-8 justify-center text-toned"
|
|
:aria-label="
|
|
passwordShown ? t('Hide password') : t('Show password')
|
|
"
|
|
:aria-pressed="passwordShown"
|
|
@click="passwordShown = !passwordShown"
|
|
/>
|
|
</template>
|
|
</UInput>
|
|
</UFormField>
|
|
|
|
<UButton
|
|
type="submit"
|
|
block
|
|
:size="controlSize"
|
|
:ui="{ base: controlClass }"
|
|
:loading="submitting"
|
|
:disabled="submitting"
|
|
>
|
|
{{ submitting ? t('Creating account…') : t('Accept invite') }}
|
|
</UButton>
|
|
</UForm>
|
|
</template>
|
|
|
|
<template v-if="showForm" #footer>
|
|
<span class="flex flex-wrap items-center gap-1.5">
|
|
{{ t('Already have an account?') }}
|
|
<RouterLink
|
|
to="/login"
|
|
class="font-medium text-highlighted underline underline-offset-3"
|
|
>
|
|
{{ t('Log in') }}
|
|
</RouterLink>
|
|
</span>
|
|
</template>
|
|
</AuthShell>
|
|
</template>
|