mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 11:39:16 +01:00
feat: ♻️ Rewrite registration UI
This commit is contained in:
Jesse Wierzbinski
parent
fc6b44d237
commit
fef4fa1e30
8 changed files with 221 additions and 25 deletions
|
|
@ -54,8 +54,8 @@
|
|||
<InputsLabel for="identifier">Username or Email</InputsLabel>
|
||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||
</InputsLabelAndError>
|
||||
<InputsText id="identifier" placeholder="joemama" autocomplete="email" required v-bind="field"
|
||||
:is-invalid="!!errorMessage" />
|
||||
<InputsText id="identifier" placeholder="joemama" autocomplete="email username" required
|
||||
v-bind="field" :is-invalid="!!errorMessage" />
|
||||
</InputsField>
|
||||
</VeeField>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,30 +9,76 @@
|
|||
<span class="text-sm">{{ errors.error }}</span>
|
||||
</div>
|
||||
<VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema">
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Passwords</h1>
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1>
|
||||
|
||||
<VeeField name="password" as="div" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<InputsField>
|
||||
<InputsLabelAndError>
|
||||
<InputsLabel for="username">Username</InputsLabel>
|
||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||
</InputsLabelAndError>
|
||||
<InputsText id="username" type="text" placeholder="thespeedy" required v-bind="field"
|
||||
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="username"
|
||||
:spellcheck="false" />
|
||||
</InputsField>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="email" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<InputsField>
|
||||
<InputsLabelAndError>
|
||||
<InputsLabel for="email">Email address</InputsLabel>
|
||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||
</InputsLabelAndError>
|
||||
<InputsText id="email" type="email" placeholder="joseph.jones@gmail.com" required v-bind="field"
|
||||
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="email" />
|
||||
</InputsField>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<InputsField>
|
||||
<InputsLabelAndError>
|
||||
<InputsLabel for="password">Password</InputsLabel>
|
||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||
</InputsLabelAndError>
|
||||
<InputsPassword id="password" placeholder="hunter2" required v-bind="field"
|
||||
:disabled="isLoading" :is-invalid="!!errorMessage" />
|
||||
:disabled="isLoading" :is-invalid="!!errorMessage" :show-strength="true"
|
||||
autocomplete="new-password" />
|
||||
</InputsField>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="password-confirm" as="div" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<VeeField name="password-confirm" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<InputsField>
|
||||
<InputsLabelAndError>
|
||||
<InputsLabel for="password-confirm">Confirm password</InputsLabel>
|
||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||
</InputsLabelAndError>
|
||||
<InputsPassword id="password-confirm" placeholder="hunter2" required v-bind="field"
|
||||
:disabled="isLoading" :is-invalid="!!errorMessage" />
|
||||
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="new-password" />
|
||||
</InputsField>
|
||||
</VeeField>
|
||||
|
||||
<VeeField name="tos" v-slot="{ errorMessage, field }" validate-on-change>
|
||||
<InputsField>
|
||||
<div class="flex flex-row gap-x-2 items-center">
|
||||
<InputsCheckbox :checked="true" id="tos" required :disabled="true" v-bind="field" />
|
||||
<InputsLabel for="tos" class="!text-gray-200">
|
||||
I agree to the Terms of Service
|
||||
</InputsLabel>
|
||||
</div>
|
||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||
</InputsField>
|
||||
</VeeField>
|
||||
|
||||
<Collapsible.Root>
|
||||
<Collapsible.Trigger class="w-full">
|
||||
<ButtonsSecondary type="button" class="w-full">View Terms of Service</ButtonsSecondary>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content
|
||||
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
|
||||
<div v-html="tos?.content"></div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
|
||||
<p class="text-xs font-semibold text-gray-300">
|
||||
Passwords are stored securely and hashed. We do not store your password in plain text.
|
||||
Administrators
|
||||
|
|
@ -40,7 +86,7 @@
|
|||
</p>
|
||||
|
||||
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
|
||||
"Register" }}</ButtonsPrimary>
|
||||
"Register" }}</ButtonsPrimary>
|
||||
</VeeForm>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -55,35 +101,43 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Collapsible } from "@ark-ui/vue";
|
||||
import type { ResponseError } from "@lysand-org/client";
|
||||
import { toTypedSchema } from "@vee-validate/zod";
|
||||
import { z } from "zod";
|
||||
// TODO: Add instance TOS link
|
||||
|
||||
const schema = toTypedSchema(
|
||||
z
|
||||
.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(3).max(255),
|
||||
"password-confirm": z.string().min(3).max(255),
|
||||
username: z
|
||||
.string()
|
||||
.min(3)
|
||||
.regex(
|
||||
/^[a-z0-9_]+$/,
|
||||
"Must be lowercase letters, numbers, or underscores",
|
||||
),
|
||||
reason: z.string().optional(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
/* if (data.password !== data.password2) {
|
||||
if (data.password !== data["password-confirm"]) {
|
||||
ctx.addIssue({
|
||||
path: [...ctx.path, "password2"],
|
||||
path: [...ctx.path, "password-confirm"],
|
||||
code: "custom",
|
||||
message: "Passwords do not match",
|
||||
});
|
||||
} */
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
);
|
||||
|
||||
const client = useClient();
|
||||
const instance = useInstance();
|
||||
const tos = useTos(client);
|
||||
|
||||
const errors = ref<{
|
||||
[key: string]: {
|
||||
error: string;
|
||||
description: string;
|
||||
}[];
|
||||
error?: string;
|
||||
}>({});
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
|
@ -104,16 +158,48 @@ const register = (result: {
|
|||
"en",
|
||||
result.reason || "Empty reason",
|
||||
)
|
||||
.then(async (res) => {
|
||||
.then(async () => {
|
||||
navigateTo("/register/success");
|
||||
})
|
||||
.catch(async (err) => {
|
||||
.catch(async (e) => {
|
||||
const error = e as ResponseError<{
|
||||
error: string;
|
||||
}>;
|
||||
// @ts-ignore
|
||||
errors.value = error.response?.data || {};
|
||||
console.error(err);
|
||||
errors.value = error.response.data || {};
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue