versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Allow login with either username or email

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-07 22:10:17 -10:00
parent afeba9d4a3
commit 8181b5db66
No known key found for this signature in database
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
pages/oauth/authorize.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8"> <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" <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
alt="Lysand logo" class="mx-auto h-24 hidden md:block" /> class="mx-auto h-24 hidden md:block" />
<div v-if="validUrlParameters" <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"> <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> <h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span> <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> <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> <VeeField name="identifier" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email" <LoginInput label="Username or Email" placeholder="joemama" autocomplete="email" required
required :is-invalid="errors.length > 0" v-bind="field" /> :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }"> <VeeErrorMessage name="identifier" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }} {{ message }}
</VeeErrorMessage> </VeeErrorMessage>
</VeeField> </VeeField>
@ -35,7 +35,8 @@
<a v-for="provider of oauthProviders" :key="provider.id" <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}`"> :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"> <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"> <div class="flex flex-col gap-0 justify-center">
<h3 class="font-bold">{{ provider.name }}</h3> <h3 class="font-bold">{{ provider.name }}</h3>
</div> </div>
@ -60,7 +61,8 @@
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full"> <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank" <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"> 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"> <div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2> <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span> <span class="underline text-pink-700">{{ client.link }}</span>
@ -88,7 +90,7 @@ import LoginInput from "../../components/LoginInput.vue";
const schema = toTypedSchema( const schema = toTypedSchema(
z.object({ z.object({
email: z.string().email(), identifier: z.string().email().or(z.string().min(3)),
password: z.string().min(3), password: z.string().min(3),
}), }),
); );