Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-16 01:31:19 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: oidc

Browse Source
This commit is contained in:
DecDuck
2025-05-07 22:14:04 +10:00
parent e8633ceca2
commit 19ff73cc30
16 changed files with 533 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pages/auth/register.vue
View File

@ -56,7 +56,7 @@
type="email"
autocomplete="email"
required
:disabled="!!invitation.data.value?.email"
:disabled="!!invitation?.email"
placeholder="me@example.com"
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/>
@ -87,7 +87,7 @@
type="text"
autocomplete="username"
required
:disabled="!!invitation.data.value?.username"
:disabled="!!invitation?.username"
placeholder="myUsername"
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/>
@ -199,13 +199,13 @@ if (!invitationId)
statusMessage: "Invitation required to sign up.",
});
const invitation = await useFetch(
const invitation = await $dropFetch(
`/api/v1/auth/signup/simple?id=${encodeURIComponent(invitationId)}`,
);
const email = ref(invitation.data.value?.email);
const email = ref(invitation?.email);
const displayName = ref("");
const username = ref(invitation.data.value?.username);
const username = ref(invitation?.username);
const password = ref("");
const confirmPassword = ref(undefined);

133
pages/auth/signin.vue
View File

@ -18,92 +18,13 @@
<div class="mt-10">
<div>
<form class="space-y-6" @submit.prevent="signin_wrapper">
<div>
<label
for="username"
class="block text-sm font-medium leading-6 text-zinc-300"
>Username</label
>
<div class="mt-2">
<input
id="username"
v-model="username"
name="username"
type="username"
autocomplete="username"
required
class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<label
for="password"
class="block text-sm font-medium leading-6 text-zinc-300"
>Password</label
>
<div class="mt-2">
<input
id="password"
v-model="password"
name="password"
type="password"
autocomplete="current-password"
required
class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
id="remember-me"
v-model="rememberMe"
name="remember-me"
type="checkbox"
class="h-4 w-4 rounded bg-zinc-800 border-zinc-700 text-blue-600 focus:ring-blue-600"
/>
<label
for="remember-me"
class="ml-3 block text-sm leading-6 text-zinc-400"
>Remember me</label
>
</div>
<div class="text-sm leading-6">
<NuxtLink
to="#"
class="font-semibold text-blue-600 hover:text-blue-500"
>Forgot password?</NuxtLink
>
</div>
</div>
<div>
<LoadingButton class="w-full" :loading="loading">
Sign in</LoadingButton
>
</div>
<div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
<div class="flex">
<div class="flex-shrink-0">
<XCircleIcon
class="h-5 w-5 text-red-600"
aria-hidden="true"
/>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-600">
{{ error }}
</h3>
</div>
</div>
</div>
</form>
<AuthSimple v-if="enabledAuths.includes('simple')" />
<div v-if="enabledAuths.length > 1" class="py-4 flex flex-row items-center justify-center gap-x-4 font-bold text-sm text-zinc-600">
<span class="h-[1px] grow bg-zinc-600" />
OR
<span class="h-[1px] grow bg-zinc-600" />
</div>
<AuthOpenID v-if="enabledAuths.includes('oidc')" />
</div>
</div>
</div>
@ -119,47 +40,9 @@
</template>
<script setup lang="ts">
import { XCircleIcon } from "@heroicons/vue/20/solid";
import type { User } from "@prisma/client";
import DropLogo from "~/components/DropLogo.vue";
const username = ref("");
const password = ref("");
const rememberMe = ref(false);
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const error = ref<string | undefined>();
function signin_wrapper() {
loading.value = true;
signin()
.then(() => {
router.push(route.query.redirect?.toString() ?? "/");
})
.catch((response) => {
const message = response.statusMessage || "An unknown error occurred";
error.value = message;
})
.finally(() => {
loading.value = false;
});
}
async function signin() {
await $dropFetch("/api/v1/auth/signin/simple", {
method: "POST",
body: {
username: username.value,
password: password.value,
rememberMe: rememberMe.value,
},
});
const user = useUser();
user.value = await $dropFetch<User | null>("/api/v1/user");
}
const enabledAuths = await $dropFetch("/api/v1/auth");
definePageMeta({
layout: false,