From fef4fa1e300480017cb48973e494520e467a252a Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 15 Jun 2024 20:34:35 -1000
Subject: [PATCH] feat: :recycle: Rewrite registration UI

---
 bun.lockb                      | Bin 674044 -> 674044 bytes
 components/inputs/checkbox.vue |  12 ++++
 components/inputs/password.vue |  43 ++++++++++-
 composables/Instance.ts        |  37 ++++++++++
 package.json                   |   2 +-
 pages/oauth/authorize.vue      |   4 +-
 pages/register/index2.vue      | 126 +++++++++++++++++++++++++++------
 utils/passwords.ts             |  22 ++++++
 8 files changed, 221 insertions(+), 25 deletions(-)
 create mode 100644 components/inputs/checkbox.vue
 create mode 100644 utils/passwords.ts

diff --git a/bun.lockb b/bun.lockb
index 76ed7618b29705124f4214620f0f68d90b2ff0d6..aadea3905e07d3a096593a25a9b13698bee919d0 100755
GIT binary patch
delta 174
zcmew}QS;A4%?Wx654SfK=gI0%Hj$MmH%<C>)#t^xv%8<Zs$odE>-99IWkI9gRzJpD
zJ<~IK7!BGZdKrP3X?sL3^WOxAhsPa`C$eaB@Z6H{W!(89cZzp(;=>uogyuYCaLqJK
zXjW0He|q&dbNRCA4?NyYYf;(yR(p5W)2tMet5Ve)#FUHLr@mtbVwUYw-?4UWWwdBl
aSi%Ox>_E)1U114ltTLm;_PXPob&UWZX-``K

delta 173
zcmV;e08;<_ktzI<DUdE8ulQkqdb3?mdM`}zq!66ft~<GfU9T%FKN*MyK<l#tfljqf
z0osg{sBtidSd9UPSd9X=Sd9byU_i<4V16XpD=1q8vVqug8(7<>=ohwKK{dOSsLm5S
ztAVoDuFNeZetT2!QJw*KIZUe8y}X0JlI0<M3GA}bTmXla?gNLF?gY1$?gfgq0XK&r
bqy~o|qz8u}qzJblqzPRk0XMgP#|eIclUq+)

diff --git a/components/inputs/checkbox.vue b/components/inputs/checkbox.vue
new file mode 100644
index 0000000..97a8240
--- /dev/null
+++ b/components/inputs/checkbox.vue
@@ -0,0 +1,12 @@
+<template>
+    <InputsText type="checkbox" v-bind="$attrs, $props"
+        class="rounded disabled:hover:cursor-wait text-primary-700 !size-5" />
+</template>
+
+<script lang="ts" setup>
+import type { InputHTMLAttributes } from "vue";
+
+interface Props extends /* @vue-ignore */ InputHTMLAttributes {}
+
+defineProps<Props>();
+</script>
\ No newline at end of file
diff --git a/components/inputs/password.vue b/components/inputs/password.vue
index 1b16377..678b818 100644
--- a/components/inputs/password.vue
+++ b/components/inputs/password.vue
@@ -1,6 +1,16 @@
 <template>
-    <InputsText v-bind="$attrs, $props" :type="showPassword ? 'text' : 'password'" :spellcheck="false"
-        autocomplete="new-password" />
+    <InputsText @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
+        :type="showPassword ? 'text' : 'password'" :spellcheck="false" />
+    <Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
+        <Progress.Label class="text-xs text-gray-300 font-semibold w-12">
+            {{ text }}
+        </Progress.Label>
+        <Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
+        backgroundColor: color,
+    }">
+            <Progress.Range />
+        </Progress.Track>
+    </Progress.Root>
     <Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
         <button type="button" @click="showPassword = !showPassword"
             class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
@@ -11,12 +21,16 @@
 </template>
 
 <script lang="ts" setup>
+import { Progress } from "@ark-ui/vue";
+import { passwordStrength } from "~/utils/passwords";
 const showPassword = ref(false);
+const content = ref("");
 
 import type { InputHTMLAttributes } from "vue";
 
 interface Props extends /* @vue-ignore */ InputHTMLAttributes {
     isInvalid?: boolean;
+    showStrength?: boolean;
 }
 
 defineOptions({
@@ -25,6 +39,31 @@ defineOptions({
 defineProps<Props>();
 
 const teleport = ref(false);
+const strength = computed(() => passwordStrength(content.value ?? ""));
+const text = computed(() => {
+    if (strength.value < 6) {
+        return "Weak";
+    }
+    if (strength.value < 7) {
+        return "Fair";
+    }
+    if (strength.value < 11) {
+        return "Good";
+    }
+    return "Strong";
+});
+const color = computed(() => {
+    if (strength.value < 6) {
+        return "red";
+    }
+    if (strength.value < 7) {
+        return "pink";
+    }
+    if (strength.value < 11) {
+        return "yellow";
+    }
+    return "green";
+});
 
 onMounted(() => {
     teleport.value = true;
diff --git a/composables/Instance.ts b/composables/Instance.ts
index 9098954..3260dd1 100644
--- a/composables/Instance.ts
+++ b/composables/Instance.ts
@@ -2,9 +2,46 @@ import type { LysandClient } from "@lysand-org/client";
 
 // Return type of LysandClient.getInstance
 export type Instance = Awaited<ReturnType<LysandClient["getInstance"]>>["data"];
+export type ExtendedDescription = Awaited<
+    ReturnType<LysandClient["getInstanceExtendedDescription"]>
+>["data"];
 
 export const useInstance = () => {
     const identity = useCurrentIdentity();
 
     return computed(() => identity.value?.instance);
 };
+
+export const useInstanceFromClient = (client: MaybeRef<LysandClient>) => {
+    if (!client) {
+        return ref(null as Instance | null);
+    }
+
+    const output = ref(null as Instance | null);
+
+    watchEffect(() => {
+        toValue(client)
+            ?.getInstance()
+            .then((res) => {
+                output.value = res.data;
+            });
+    });
+};
+
+export const useTos = (client: MaybeRef<LysandClient>) => {
+    if (!client) {
+        return ref(null as ExtendedDescription | null);
+    }
+
+    const output = ref(null as ExtendedDescription | null);
+
+    watchEffect(() => {
+        toValue(client)
+            ?.getInstanceTermsOfService()
+            .then((res) => {
+                output.value = res.data;
+            });
+    });
+
+    return output;
+};
diff --git a/package.json b/package.json
index 5179852..fb081ac 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@ark-ui/vue": "^3.3.1",
-        "@lysand-org/client": "^0.1.7",
+        "@lysand-org/client": "^0.1.8",
         "@nuxt/fonts": "^0.7.0",
         "@tailwindcss/typography": "^0.5.13",
         "@vee-validate/nuxt": "^4.13.1",
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index f8fe62d..27cce42 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -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>
 
diff --git a/pages/register/index2.vue b/pages/register/index2.vue
index 10203df..2834af2 100644
--- a/pages/register/index2.vue
+++ b/pages/register/index2.vue
@@ -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>
\ 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/utils/passwords.ts b/utils/passwords.ts
new file mode 100644
index 0000000..8b86380
--- /dev/null
+++ b/utils/passwords.ts
@@ -0,0 +1,22 @@
+/**
+ * Get the strength of a password
+ * @param password The password to check
+ * @returns Number from 0 to Infinity representing the strength of the password
+ */
+export const passwordStrength = (password: string): number => {
+    const length = password.length;
+    const specialChars = password.match(/[^A-Za-z0-9]/g)?.length || 0;
+    const numbers = password.match(/[0-9]/g)?.length || 0;
+    const upperCase = password.match(/[A-Z]/g)?.length || 0;
+    const lowerCase = password.match(/[a-z]/g)?.length || 0;
+
+    // Calculate the strength of the password
+    return (
+        (length * 4 +
+            specialChars * 6 +
+            numbers * 4 +
+            upperCase * 2 +
+            lowerCase * 2) /
+        16
+    );
+};