mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ✨ Add multi-account support, more options for posts, UI improvements
This commit is contained in:
Jesse Wierzbinski
parent
48954baf06
commit
ef9a6f1da4
36 changed files with 649 additions and 344 deletions
|
|
@ -15,7 +15,7 @@ definePageMeta({
|
|||
});
|
||||
|
||||
const route = useRoute();
|
||||
const client = useClient(undefined, true);
|
||||
const client = useClient();
|
||||
const username = (route.params.username as string).replace("@", "");
|
||||
|
||||
const accounts = useAccountSearch(client, username);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<div class="mx-auto max-w-2xl w-full">
|
||||
<div class="shrink-0 p-10 h-dvh" v-if="!tokenData">
|
||||
<div class="shrink-0 p-10 h-dvh" v-if="!identity">
|
||||
<button type="button"
|
||||
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
|
||||
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
|
||||
|
|
@ -26,5 +26,5 @@
|
|||
definePageMeta({
|
||||
layout: "app",
|
||||
});
|
||||
const tokenData = useTokenData();
|
||||
const identity = useCurrentIdentity();
|
||||
</script>
|
||||
|
|
@ -67,8 +67,8 @@ import { toTypedSchema } from "@vee-validate/zod";
|
|||
import { z } from "zod";
|
||||
import LoginInput from "../../components/LoginInput.vue";
|
||||
|
||||
const tokenData = useTokenData();
|
||||
tokenData.value = null;
|
||||
const identity = useCurrentIdentity();
|
||||
identity.value = null;
|
||||
|
||||
const schema = toTypedSchema(
|
||||
z
|
||||
|
|
|
|||
|
|
@ -1,86 +1,89 @@
|
|||
<template>
|
||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
|
||||
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
|
||||
class="mx-auto h-24 hidden md:block" />
|
||||
<div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md">
|
||||
<div v-if="Object.keys(errors).length > 0"
|
||||
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
||||
<h2 class="font-bold text-lg">Error</h2>
|
||||
<span class="text-sm">{{ errors.error }}</span>
|
||||
<ClientOnly>
|
||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
|
||||
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
|
||||
class="mx-auto h-24 hidden md:block" />
|
||||
<div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md">
|
||||
<div v-if="Object.keys(errors).length > 0"
|
||||
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
||||
<h2 class="font-bold text-lg">Error</h2>
|
||||
<span class="text-sm">{{ errors.error }}</span>
|
||||
</div>
|
||||
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
|
||||
|
||||
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
|
||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username"
|
||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }} (must only contain lowercase letters, numbers and underscores)
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Password" placeholder="hunter2" type="password"
|
||||
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
|
||||
:disabled="isLoading" />
|
||||
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
|
||||
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
|
||||
:disabled="isLoading" />
|
||||
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="reason" as="div" v-slot="{ errors }" validate-on-change>
|
||||
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
|
||||
join?</label>
|
||||
<div class="mt-2">
|
||||
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason"
|
||||
:disabled="isLoading" placeholder="Brief text (optional)"
|
||||
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
|
||||
</div>
|
||||
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<input type="checkbox" :disabled="isLoading" name="tos"
|
||||
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
|
||||
required />
|
||||
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
|
||||
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
|
||||
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
|
||||
"Register" }}</ButtonsPrimary>
|
||||
</VeeForm>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
|
||||
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>
|
||||
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
|
||||
|
||||
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
|
||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username" required
|
||||
:is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }} (must only contain lowercase letters, numbers and underscores)
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Password" placeholder="hunter2" type="password" autocomplete="current-password"
|
||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
|
||||
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
|
||||
:disabled="isLoading" />
|
||||
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="reason" as="div" v-slot="{ errors }" validate-on-change>
|
||||
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
|
||||
join?</label>
|
||||
<div class="mt-2">
|
||||
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason" :disabled="isLoading"
|
||||
placeholder="Brief text (optional)"
|
||||
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
|
||||
</div>
|
||||
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<input type="checkbox" :disabled="isLoading" name="tos"
|
||||
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
|
||||
required />
|
||||
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
|
||||
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
|
||||
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
|
||||
"Register" }}</ButtonsPrimary>
|
||||
</VeeForm>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
|
||||
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>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue