From 8181b5db6638e6fb4000fa64c373f5afa8779a39 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 7 May 2024 22:10:17 -1000
Subject: [PATCH] feat: :sparkles: Allow login with either username or email

---
 pages/oauth/authorize.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index d2470e3..f0f3c2f 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8">
-        <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-long-dark.webp" alt="Lysand logo"
+            class="mx-auto h-24 hidden md:block" />
         <div v-if="validUrlParameters"
-            class="mt-10 sm:mx-auto w-full sm:max-w-md md:bg-dark-900 px-10 py-10 rounded md:ring-1 md:ring-white/10">
+            class="mt-10 sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
             <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
                 <h2 class="font-bold text-lg">An error occured</h2>
                 <span class="text-sm">{{ error_description }}</span>
@@ -13,10 +13,10 @@
 
                 <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</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" />
-                    <VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
+                <VeeField name="identifier" as="div" v-slot="{ errors, field }" validate-on-change>
+                    <LoginInput label="Username or Email" placeholder="joemama" autocomplete="email" required
+                        :is-invalid="errors.length > 0" v-bind="field" />
+                    <VeeErrorMessage name="identifier" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
                         {{ message }}
                     </VeeErrorMessage>
                 </VeeField>
@@ -35,7 +35,8 @@
                         <a v-for="provider of oauthProviders" :key="provider.id"
                             :href="`/oauth/authorize-external?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&clientId=${client_id}&scope=${scope}`">
                             <ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
-                                <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`" class="w-6 h-6" />
+                                <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
+                                    class="w-6 h-6" />
                                 <div class="flex flex-col gap-0 justify-center">
                                     <h3 class="font-bold">{{ provider.name }}</h3>
                                 </div>
@@ -60,7 +61,8 @@
                 <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
                     <a :href="client.link" target="_blank"
                         class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                        <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`" class="h-10 w-10" />
+                        <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
+                            class="h-10 w-10" />
                         <div class="flex flex-col justify-between items-start">
                             <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
                             <span class="underline text-pink-700">{{ client.link }}</span>
@@ -88,7 +90,7 @@ import LoginInput from "../../components/LoginInput.vue";
 
 const schema = toTypedSchema(
     z.object({
-        email: z.string().email(),
+        identifier: z.string().email().or(z.string().min(3)),
         password: z.string().min(3),
     }),
 );