versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ♻️ Rewrite registration page

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-07 13:36:31 +01:00
parent 3d9d75c45e
commit 1b5e7a6575
No known key found for this signature in database
4 changed files with 213 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
components/ui/checkbox/Checkbox.vue Normal file
View file

@ -0,0 +1,39 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import { Check } from "lucide-vue-next";
import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue";
import {
CheckboxIndicator,
CheckboxRoot,
useForwardPropsEmits,
} from "radix-vue";
import { type HTMLAttributes, computed } from "vue";
const props = defineProps<
CheckboxRootProps & { class?: HTMLAttributes["class"] }
>();
const emits = defineEmits<CheckboxRootEmits>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<CheckboxRoot
v-bind="forwarded"
:class="
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
props.class)"
>
<CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
<slot>
<Check class="h-4 w-4" />
</slot>
</CheckboxIndicator>
</CheckboxRoot>
</template>

1
components/ui/checkbox/index.ts Normal file
View file

@ -0,0 +1 @@
export { default as Checkbox } from "./Checkbox.vue";

302
pages/register/index.vue
View file

@ -1,118 +1,136 @@
<template> <template>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative"> <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
<img crossorigin="anonymous" src="https://cdn.versia.pub/branding/icon.svg" alt="Versia logo" backgroundImage: 'url(/images/banner.webp)'
class="mx-auto hidden md:inline-block h-20" /> }">
<div v-if="true" class="mx-auto w-full max-w-md"> <Card v-if="instance?.registrations.enabled ?? true" class="w-full max-w-md" as="form" @submit="handleSubmit">
<div v-if="Object.keys(errors).length > 0" <CardHeader>
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10"> <Alert v-if="errors.error" variant="destructive" class="mb-4">
<h2 class="font-bold text-lg">Error</h2> <AlertCircle class="size-4" />
<span class="text-sm">{{ errors.error }}</span> <AlertTitle>Error</AlertTitle>
</div> <AlertDescription>
<VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema"> {{ errors.error }}
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1> </AlertDescription>
</Alert>
<VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change> <CardTitle as="h1" class="text-2xl break-words">Create an account</CardTitle>
<Field> </CardHeader>
<LabelAndError> <CardContent v-if="instance && tos" class="grid gap-6">
<Label for="username">Username</Label> <FormField v-slot="{ componentField }" name="username">
<FieldError v-if="errorMessage">{{ errorMessage }}</FieldError> <FormItem>
</LabelAndError> <FormLabel>
<TextInput id="username" type="text" placeholder="thespeedy" required v-bind="field" Username
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="username" </FormLabel>
:spellcheck="false" /> <FormControl>
</Field> <Input placeholder="petergriffin" type="text" auto-capitalize="none"
</VeeField> auto-complete="idenfifier" auto-correct="off" :disabled="isLoading"
v-bind="componentField" />
<VeeField name="email" v-slot="{ errorMessage, field }" validate-on-change> </FormControl>
<Field> <FormMessage />
<LabelAndError> </FormItem>
<Label for="email">Email address</Label> </FormField>
<FieldError v-if="errorMessage">{{ errorMessage }}</FieldError> <FormField v-slot="{ componentField }" name="email">
</LabelAndError> <FormItem>
<TextInput id="email" type="email" placeholder="joseph.jones@gmail.com" required v-bind="field" <FormLabel>
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="email" /> Email address
</Field> </FormLabel>
</VeeField> <FormControl>
<Input placeholder="peter.griffin@fox.com" type="email" auto-capitalize="none"
<VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change> auto-complete="email" auto-correct="off" :disabled="isLoading"
<Field> v-bind="componentField" />
<LabelAndError> </FormControl>
<Label for="password">Password</Label> <FormMessage />
<FieldError v-if="errorMessage">{{ errorMessage }}</FieldError> </FormItem>
</LabelAndError> </FormField>
<PasswordInput id="password" placeholder="hunter2" required v-bind="field" :disabled="isLoading" <FormField v-slot="{ componentField }" name="password">
:is-invalid="!!errorMessage" :show-strength="true" autocomplete="new-password" /> <FormItem>
</Field> <FormLabel>
</VeeField> Password
</FormLabel>
<VeeField name="password-confirm" v-slot="{ errorMessage, field }" validate-on-change> <FormControl>
<Field> <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-complete="password"
<LabelAndError> auto-correct="off" :disabled="isLoading" v-bind="componentField" />
<Label for="password-confirm">Confirm password</Label> </FormControl>
<FieldError v-if="errorMessage">{{ errorMessage }}</FieldError> <FormMessage />
</LabelAndError> </FormItem>
<PasswordInput id="password-confirm" placeholder="hunter2" required v-bind="field" </FormField>
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="new-password" /> <FormField v-slot="{ componentField }" name="password-confirm">
</Field> <FormItem>
</VeeField> <FormLabel>
Confirm password
<VeeField name="tos" v-slot="{ errorMessage, field }" validate-on-change> </FormLabel>
<Field> <FormControl>
<div class="flex flex-row gap-x-2 items-center"> <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-complete="password"
<CheckboxInput :checked="true" id="tos" required :disabled="true" v-bind="field" /> auto-correct="off" :disabled="isLoading" v-bind="componentField" />
<Label for="tos" class="!text-gray-200"> </FormControl>
I agree to the Terms of Service <FormMessage />
</Label> </FormItem>
</FormField>
<FormField v-slot="{ componentField, value, handleChange }" name="tos">
<FormItem class="space-y-0">
<div class="flex flex-row gap-x-2 items-center ">
<FormControl>
<Checkbox v-bind="componentField" :checked="value" @update:checked="handleChange" />
</FormControl>
<FormLabel>
<Dialog>
I agree to the <DialogTrigger :as-child="true"><Button variant="link"
class="px-0 underline">Terms of Service</Button>.</DialogTrigger>
<DialogContent class="!max-h-[90vh] overflow-auto">
<DialogHeader>
<DialogTitle>{{ instance.title }}
</DialogTitle>
</DialogHeader>
<div v-html="tos.content" class="prose prose-sm dark:prose-invert"></div>
</DialogContent>
</Dialog>
</FormLabel>
</div> </div>
<FieldError v-if="errorMessage">{{ errorMessage }}</FieldError> <FormMessage />
</Field> </FormItem>
</VeeField> </FormField>
<div class="flex-col flex gap-y-1 text-sm text-muted-foreground">
<Collapsible.Root> <p>Passwords are never stored in plain text.</p>
<Collapsible.Trigger class="w-full"> </div>
<Button theme="secondary" class="w-full">View Terms of Service</Button> </CardContent>
</Collapsible.Trigger> <CardFooter v-if="instance && tos" class="grid gap-2">
<Collapsible.Content <Button variant="default" type="submit">Register</Button>
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3"> </CardFooter>
<div v-html="tos?.content"></div> <div v-else class="p-4 flex items-center justify-center h-48">
</Collapsible.Content> <Loader class="size-8 animate-spin" />
</Collapsible.Root> </div>
</Card>
<p class="text-xs font-semibold text-gray-300"> <Card v-else class="w-full max-w-md">
Passwords are stored securely and hashed. Passwords are not stored in plain text. <CardHeader>
Administrators <CardTitle>Sorry :c</CardTitle>
cannot see your password. <CardDescription>
</p> Registrations are disabled on this instance.
</CardDescription>
<Button theme="primary" type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? </CardHeader>
"Registering..." : <CardFooter class="grid">
"Register" }}</Button> <Button :as="NuxtLink" href="/" variant="default">
</VeeForm> Back to front page
</div> </Button>
<div v-else> </CardFooter>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are </Card>
disabled
</h1>
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
config!
</p>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Collapsible } from "@ark-ui/vue";
import { toTypedSchema } from "@vee-validate/zod"; import { toTypedSchema } from "@vee-validate/zod";
import type { ResponseError } from "@versia/client"; import { Client, type ResponseError } from "@versia/client";
import { AlertCircle, Check, Loader } from "lucide-vue-next";
import { useForm } from "vee-validate";
import { z } from "zod"; import { z } from "zod";
import CheckboxInput from "~/components/inputs/checkbox-input.vue"; import { Button } from "~/components/ui/button";
import FieldError from "~/components/inputs/field-error.vue"; import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import Field from "~/components/inputs/field.vue"; import { Checkbox } from "~/components/ui/checkbox";
import LabelAndError from "~/components/inputs/label-and-error.vue"; import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog";
import Label from "~/components/inputs/label.vue"; import { FormItem } from "~/components/ui/form";
import PasswordInput from "~/components/inputs/password-input.vue"; import { Input } from "~/components/ui/input";
import TextInput from "~/components/inputs/text-input.vue"; import { NuxtLink } from "#components";
import Button from "~/packages/ui/components/buttons/button.vue";
useHead({
title: "Register",
});
const schema = toTypedSchema( const schema = toTypedSchema(
z z
@ -128,6 +146,9 @@ const schema = toTypedSchema(
"Must be lowercase letters, numbers, or underscores", "Must be lowercase letters, numbers, or underscores",
), ),
reason: z.string().optional(), reason: z.string().optional(),
tos: z.boolean().refine((value) => value, {
message: "You must agree to the Terms of Service",
}),
}) })
.superRefine((data, ctx) => { .superRefine((data, ctx) => {
if (data.password !== data["password-confirm"]) { if (data.password !== data["password-confirm"]) {
@ -141,29 +162,21 @@ const schema = toTypedSchema(
}), }),
); );
const tos = useTos(client); const instance = useInstanceFromClient(new Client(new URL(useBaseUrl().value)));
const form = useForm({
validationSchema: schema,
});
const errors = ref<{ const handleSubmit = form.handleSubmit((values) => {
error?: string;
}>({});
const isLoading = ref(false);
const register = (result: {
username: string;
email: string;
password: string;
reason: string;
}) => {
isLoading.value = true; isLoading.value = true;
ref(client) ref(client)
.value?.registerAccount( .value?.registerAccount(
result.username, values.username,
result.email, values.email,
result.password, values.password,
true, true,
"en", "en",
result.reason || "Empty reason", values.reason || "Empty reason",
) )
.then(() => { .then(() => {
navigateTo("/register/success"); navigateTo("/register/success");
@ -172,41 +185,18 @@ const register = (result: {
const error = e as ResponseError<{ const error = e as ResponseError<{
error: string; error: string;
}>; }>;
// @ts-ignore
errors.value = error.response.data || {}; errors.value = error.response.data || {};
}) })
.finally(() => { .finally(() => {
isLoading.value = false; isLoading.value = false;
}); });
}; });
const tos = useTos(client);
const errors = ref<{
error?: string;
}>({});
const isLoading = ref(false);
</script> </script>
<style>
@keyframes slideDown {
from {
height: 0;
}
to {
height: var(--height);
}
}
@keyframes slideUp {
from {
height: var(--height);
}
to {
height: 0;
}
}
[data-scope='collapsible'][data-part='content'][data-state='open'] {
animation: slideDown 250ms;
}
[data-scope='collapsible'][data-part='content'][data-state='closed'] {
animation: slideUp 200ms;
}
</style>

35
pages/register/success.vue
View file

@ -1,12 +1,29 @@
<template> <template>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative"> <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
<div> backgroundImage: 'url(/images/banner.webp)'
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registration was a }">
success! <Card class="w-full max-w-md">
</h1> <CardHeader>
<p class="mt-6 text-lg leading-8 text-gray-300 text-center"> You can now login to your account in any <CardTitle>Success</CardTitle>
Mastodon <CardDescription>
client </p> You've successfully registered. You can now log in with your new account.
</div> </CardDescription>
</CardHeader>
<CardFooter class="grid">
<Button :as="NuxtLink" href="/" variant="default">
Back to front page
</Button>
</CardFooter>
</Card>
</div> </div>
</template> </template>
<script setup lang="ts">
import { Button } from "~/components/ui/button";
import { Card, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
import { NuxtLink } from "#components";
useHead({
title: "Success!",
});
</script>