feat: Implement proper login and logout using UI

This commit is contained in:
Jesse Wierzbinski 2024-04-26 18:50:30 -10:00
parent e0c41bb9b5
commit 3c8093a3d2
No known key found for this signature in database
23 changed files with 273 additions and 193 deletions

View file

@ -1,6 +1,9 @@
<template>
<button v-bind="$props" type="button"
class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm">
<button v-bind="$props" type="button" :disabled="loading"
:class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']">
<div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible">
<Icon name="tabler:loader-2" class="animate-spin w-5 h-5" />
</div>
<slot />
</button>
</template>
@ -10,7 +13,11 @@ import type { ButtonHTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
defineProps<Props>();
defineProps<
Props & {
loading?: boolean;
}
>();
</script>
<style></style>

View file

@ -1,5 +1,5 @@
<template>
<ButtonsBase class="bg-white/10 hover:bg-white/20">
<ButtonsBase class="bg-white/10 hover:bg-white/20" :loading="loading">
<slot />
</ButtonsBase>
</template>
@ -9,7 +9,11 @@ import type { ButtonHTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
defineProps<Props>();
defineProps<
Props & {
loading?: boolean;
}
>();
</script>
<style></style>