From d456c72bc4ca75caa746e2a6d101112854aa5648 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 15 Jun 2024 20:35:20 -1000
Subject: [PATCH] fix: :bug: Replace old registration page

---
 pages/register/index.vue  | 184 +++++++++++++++++++++-------------
 pages/register/index2.vue | 205 --------------------------------------
 2 files changed, 116 insertions(+), 273 deletions(-)
 delete mode 100644 pages/register/index2.vue

diff --git a/pages/register/index.vue b/pages/register/index.vue
index adf4aec..2834af2 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -1,72 +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" />
+        <img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo"
+            class="mx-auto hidden md:inline-block h-20" />
         <div v-if="true" 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>
+            <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">Account details</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 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="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 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" 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 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" :show-strength="true"
+                            autocomplete="new-password" />
+                    </InputsField>
                 </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 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" autocomplete="new-password" />
+                    </InputsField>
                 </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-primary-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 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>
 
-                <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-primary-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>
+                <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
+                    cannot see your password.
+                </p>
 
                 <ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
             "Register" }}</ButtonsPrimary>
@@ -84,28 +101,30 @@
 </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";
-import LoginInput from "../../components/LoginInput.vue";
-// TODO: Add instance TOS link
 
 const schema = toTypedSchema(
     z
         .object({
             email: z.string().email(),
-            password: z.string().min(3),
-            password2: z.string().min(3),
+            password: z.string().min(3).max(255),
+            "password-confirm": z.string().min(3).max(255),
             username: z
                 .string()
                 .min(3)
-                .regex(/^[a-z0-9_]+$/),
+                .regex(
+                    /^[a-z0-9_]+$/,
+                    "Must be lowercase letters, numbers, or underscores",
+                ),
             reason: z.string().optional(),
-            tos: z.string(),
         })
         .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",
                 });
@@ -115,13 +134,10 @@ const schema = toTypedSchema(
 );
 
 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);
@@ -142,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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/pages/register/index2.vue b/pages/register/index2.vue
deleted file mode 100644
index 2834af2..0000000
--- a/pages/register/index2.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<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.webp" alt="Lysand logo"
-            class="mx-auto hidden md:inline-block h-20" />
-        <div v-if="true" 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="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">Account details</h1>
-
-                <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" :show-strength="true"
-                            autocomplete="new-password" />
-                    </InputsField>
-                </VeeField>
-
-                <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" 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
-                    cannot see your password.
-                </p>
-
-                <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>
-</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";
-
-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["password-confirm"]) {
-                ctx.addIssue({
-                    path: [...ctx.path, "password-confirm"],
-                    code: "custom",
-                    message: "Passwords do not match",
-                });
-            }
-            return {};
-        }),
-);
-
-const client = useClient();
-const tos = useTos(client);
-
-const errors = ref<{
-    error?: string;
-}>({});
-
-const isLoading = ref(false);
-
-const register = (result: {
-    username: string;
-    email: string;
-    password: string;
-    reason: string;
-}) => {
-    isLoading.value = true;
-    ref(client)
-        .value?.registerAccount(
-            result.username,
-            result.email,
-            result.password,
-            true,
-            "en",
-            result.reason || "Empty reason",
-        )
-        .then(async () => {
-            navigateTo("/register/success");
-        })
-        .catch(async (e) => {
-            const error = e as ResponseError<{
-                error: string;
-            }>;
-            // @ts-ignore
-            errors.value = error.response.data || {};
-        })
-        .finally(() => {
-            isLoading.value = false;
-        });
-};
-</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>
\ No newline at end of file