mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
fix: 🚑 Fix errors when logging in with incorrect credentials
This commit is contained in:
Jesse Wierzbinski
parent
a2a2149776
commit
63cbe6bb82
18
app.vue
18
app.vue
|
|
@ -42,15 +42,19 @@ if (code) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(tokenData, async () => {
|
watch(
|
||||||
if (tokenData.value && !me.value) {
|
tokenData,
|
||||||
const response = await client.value?.verifyAccountCredentials()
|
async () => {
|
||||||
|
if (tokenData.value && !me.value) {
|
||||||
|
const response = await client.value?.verifyAccountCredentials();
|
||||||
|
|
||||||
if (response?.data) {
|
if (response?.data) {
|
||||||
me.value = response.data;
|
me.value = response.data;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}, { immediate: true })
|
{ immediate: true },
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -125,7 +125,7 @@ const signOut = async () => {
|
||||||
tokenData.value.access_token,
|
tokenData.value.access_token,
|
||||||
tokenData.value.access_token,
|
tokenData.value.access_token,
|
||||||
)
|
)
|
||||||
.catch(() => { });
|
.catch(() => {});
|
||||||
|
|
||||||
tokenData.value = null;
|
tokenData.value = null;
|
||||||
me.value = null;
|
me.value = null;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
export const useOAuthProviders = async () => {
|
export const useOAuthProviders = async () => {
|
||||||
|
if (process.server) return ref([]);
|
||||||
const providers = await fetch(
|
const providers = await fetch(
|
||||||
new URL("/oauth/providers", useBaseUrl().value),
|
new URL("/oauth/providers", useBaseUrl().value),
|
||||||
).then((d) => d.json());
|
).then((d) => d.json());
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: "app",
|
layout: "app",
|
||||||
})
|
});
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const client = useMegalodon();
|
const client = useMegalodon();
|
||||||
|
|
|
||||||
|
|
@ -1,87 +1,88 @@
|
||||||
<template>
|
<template>
|
||||||
<ClientOnly>
|
<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 src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
|
||||||
<img src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
|
alt="Lysand logo" class="mx-auto h-24 hidden md:block" />
|
||||||
alt="Lysand logo" 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 md:bg-dark-900 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">
|
||||||
<VeeForm class="space-y-6" method="POST" :validation-schema="schema"
|
<h2 class="font-bold text-lg">An error occured</h2>
|
||||||
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
|
<span class="text-sm">{{ error_description }}</span>
|
||||||
|
|
||||||
<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 }">
|
|
||||||
{{ message }}
|
|
||||||
</VeeErrorMessage>
|
|
||||||
</VeeField>
|
|
||||||
|
|
||||||
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
|
||||||
<LoginInput label="Password" placeholder="Password here" type="password"
|
|
||||||
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
|
|
||||||
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
|
||||||
{{ message }}
|
|
||||||
</VeeErrorMessage>
|
|
||||||
</VeeField>
|
|
||||||
|
|
||||||
<div v-if="oauthProviders && oauthProviders.length > 0" class="w-full flex flex-col gap-3">
|
|
||||||
<h2 class="text-sm text-gray-200">Or sign in with</h2>
|
|
||||||
<div class="grid grid-cols-1 gap-4 w-full">
|
|
||||||
<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 :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>
|
|
||||||
</ButtonsSecondary>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
|
|
||||||
</VeeForm>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="mx-auto max-w-md mt-10">
|
<VeeForm class="space-y-6" method="POST" :validation-schema="schema"
|
||||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
|
||||||
parameters
|
|
||||||
</h1>
|
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
|
||||||
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
|
||||||
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
|
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||||
API</strong> client to access this page.
|
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
|
||||||
</p>
|
required :is-invalid="errors.length > 0" v-bind="field" />
|
||||||
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
|
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||||
<ul class="w-full flex flex-col gap-3 mt-4">
|
{{ message }}
|
||||||
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
|
</VeeErrorMessage>
|
||||||
<a :href="client.link" target="_blank"
|
</VeeField>
|
||||||
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
|
|
||||||
<img :src="client.icon" :alt="`${client.name}'s logo'`" class="h-10 w-10" />
|
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||||
<div class="flex flex-col justify-between items-start">
|
<LoginInput label="Password" placeholder="Password here" type="password"
|
||||||
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
|
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
|
||||||
<span class="underline text-pink-700">{{ client.link }}</span>
|
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||||
</div>
|
{{ message }}
|
||||||
|
</VeeErrorMessage>
|
||||||
|
</VeeField>
|
||||||
|
|
||||||
|
<div v-if="oauthProviders && oauthProviders.length > 0" class="w-full flex flex-col gap-3">
|
||||||
|
<h2 class="text-sm text-gray-200">Or sign in with</h2>
|
||||||
|
<div class="grid grid-cols-1 gap-4 w-full">
|
||||||
|
<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 :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>
|
||||||
|
</ButtonsSecondary>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
|
||||||
Many other clients exist, but <strong class="font-bold">they have not been tested for
|
|
||||||
compatibility</strong>. Bug reports are nevertheless welcome.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
|
||||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
</VeeForm>
|
||||||
target="_blank" class="underline text-pink-700">the issue tracker</a>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</ClientOnly>
|
<div v-else class="mx-auto max-w-md mt-10">
|
||||||
|
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
||||||
|
parameters
|
||||||
|
</h1>
|
||||||
|
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
||||||
|
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
|
||||||
|
API</strong> client to access this page.
|
||||||
|
</p>
|
||||||
|
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
|
||||||
|
<ul class="w-full flex flex-col gap-3 mt-4">
|
||||||
|
<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 :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>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||||
|
Many other clients exist, but <strong class="font-bold">they have not been tested for
|
||||||
|
compatibility</strong>. Bug reports are nevertheless welcome.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||||
|
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||||
|
target="_blank" class="underline text-pink-700">the issue tracker</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { toTypedSchema } from "@vee-validate/zod";
|
import { toTypedSchema } from "@vee-validate/zod";
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import LoginInput from "../../components/LoginInput.vue";
|
import LoginInput from "../../components/LoginInput.vue";
|
||||||
|
|
||||||
|
|
@ -92,14 +93,15 @@ const schema = toTypedSchema(
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
const query = useRoute().query;
|
const query = new URLSearchParams(
|
||||||
|
window?.location.search ?? useRequestURL().search,
|
||||||
const redirect_uri = query.redirect_uri;
|
);
|
||||||
const response_type = query.response_type;
|
const redirect_uri = query.get("redirect_uri");
|
||||||
const client_id = query.client_id;
|
const response_type = query.get("response_type");
|
||||||
const scope = query.scope;
|
const client_id = query.get("client_id");
|
||||||
const error = decodeURIComponent(query.error as string);
|
const scope = query.get("scope");
|
||||||
const error_description = decodeURIComponent(query.error_description as string);
|
const error = query.get("error");
|
||||||
|
const error_description = query.get("error_description");
|
||||||
|
|
||||||
const validUrlParameters = redirect_uri && response_type && client_id && scope;
|
const validUrlParameters = redirect_uri && response_type && client_id && scope;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue