forked from mirrors/homebox
feat: user profiles (#32)
* add user profiles and theme selectors * lowercase buttons by default * basic layout * (wip) init token APIs * refactor server to support variable options * fix types * api refactor / registration tests * implement UI for url and join * remove console.logs * rename repository factory * fix upload size
This commit is contained in:
Hayden
GitHub
parent
1ca430af21
commit
79f7ad40cb
76 changed files with 5154 additions and 388 deletions
293
frontend/pages/profile.vue
Normal file
293
frontend/pages/profile.vue
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
<script setup lang="ts">
|
||||
import { Detail } from "~~/components/global/DetailsSection/types";
|
||||
import { DaisyTheme } from "~~/composables/use-preferences";
|
||||
import { useAuthStore } from "~~/stores/auth";
|
||||
|
||||
definePageMeta({
|
||||
layout: "home",
|
||||
});
|
||||
useHead({
|
||||
title: "Homebox | Profile",
|
||||
});
|
||||
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
type ThemeOption = {
|
||||
label: string;
|
||||
value: DaisyTheme;
|
||||
};
|
||||
|
||||
const themes: ThemeOption[] = [
|
||||
{
|
||||
label: "Garden",
|
||||
value: "garden",
|
||||
},
|
||||
{
|
||||
label: "Light",
|
||||
value: "light",
|
||||
},
|
||||
{
|
||||
label: "Cupcake",
|
||||
value: "cupcake",
|
||||
},
|
||||
{
|
||||
label: "Bumblebee",
|
||||
value: "bumblebee",
|
||||
},
|
||||
{
|
||||
label: "Emerald",
|
||||
value: "emerald",
|
||||
},
|
||||
{
|
||||
label: "Corporate",
|
||||
value: "corporate",
|
||||
},
|
||||
{
|
||||
label: "Synthwave",
|
||||
value: "synthwave",
|
||||
},
|
||||
{
|
||||
label: "Retro",
|
||||
value: "retro",
|
||||
},
|
||||
{
|
||||
label: "Cyberpunk",
|
||||
value: "cyberpunk",
|
||||
},
|
||||
{
|
||||
label: "Valentine",
|
||||
value: "valentine",
|
||||
},
|
||||
{
|
||||
label: "Halloween",
|
||||
value: "halloween",
|
||||
},
|
||||
{
|
||||
label: "Forest",
|
||||
value: "forest",
|
||||
},
|
||||
{
|
||||
label: "Aqua",
|
||||
value: "aqua",
|
||||
},
|
||||
{
|
||||
label: "Lofi",
|
||||
value: "lofi",
|
||||
},
|
||||
{
|
||||
label: "Pastel",
|
||||
value: "pastel",
|
||||
},
|
||||
{
|
||||
label: "Fantasy",
|
||||
value: "fantasy",
|
||||
},
|
||||
{
|
||||
label: "Wireframe",
|
||||
value: "wireframe",
|
||||
},
|
||||
{
|
||||
label: "Black",
|
||||
value: "black",
|
||||
},
|
||||
{
|
||||
label: "Luxury",
|
||||
value: "luxury",
|
||||
},
|
||||
{
|
||||
label: "Dracula",
|
||||
value: "dracula",
|
||||
},
|
||||
{
|
||||
label: "Cmyk",
|
||||
value: "cmyk",
|
||||
},
|
||||
{
|
||||
label: "Autumn",
|
||||
value: "autumn",
|
||||
},
|
||||
{
|
||||
label: "Business",
|
||||
value: "business",
|
||||
},
|
||||
{
|
||||
label: "Acid",
|
||||
value: "acid",
|
||||
},
|
||||
{
|
||||
label: "Lemonade",
|
||||
value: "lemonade",
|
||||
},
|
||||
{
|
||||
label: "Night",
|
||||
value: "night",
|
||||
},
|
||||
{
|
||||
label: "Coffee",
|
||||
value: "coffee",
|
||||
},
|
||||
{
|
||||
label: "Winter",
|
||||
value: "winter",
|
||||
},
|
||||
];
|
||||
|
||||
const auth = useAuthStore();
|
||||
|
||||
const details = computed(() => {
|
||||
return [
|
||||
{
|
||||
name: "Name",
|
||||
text: auth.self?.name || "Unknown",
|
||||
},
|
||||
{
|
||||
name: "Email",
|
||||
text: auth.self?.email || "Unknown",
|
||||
},
|
||||
] as Detail[];
|
||||
});
|
||||
|
||||
const api = useUserApi();
|
||||
const confirm = useConfirm();
|
||||
const notify = useNotifier();
|
||||
|
||||
async function deleteProfile() {
|
||||
const result = await confirm.open(
|
||||
"Are you sure you want to delete your account? If you are the last member in your group all your data will be deleted. This action cannot be undone."
|
||||
);
|
||||
|
||||
if (result.isCanceled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { response } = await api.user.delete();
|
||||
|
||||
if (response?.status === 204) {
|
||||
notify.success("Your account has been deleted.");
|
||||
auth.logout(api);
|
||||
navigateTo("/");
|
||||
}
|
||||
|
||||
notify.error("Failed to delete your account.");
|
||||
}
|
||||
|
||||
const token = ref("");
|
||||
const tokenUrl = computed(() => {
|
||||
if (!window) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return `${window.location.origin}?token=${token.value}`;
|
||||
});
|
||||
|
||||
async function generateToken() {
|
||||
const date = new Date();
|
||||
|
||||
const { response, data } = await api.group.createInvitation({
|
||||
expiresAt: new Date(date.setDate(date.getDate() + 7)),
|
||||
uses: 1,
|
||||
});
|
||||
|
||||
if (response?.status === 201) {
|
||||
token.value = data.token;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseContainer class="flex flex-col gap-4 mb-6">
|
||||
<BaseCard>
|
||||
<template #title>
|
||||
<BaseSectionHeader>
|
||||
<Icon name="mdi-account" class="mr-2 -mt-1 text-base-600" />
|
||||
<span class="text-base-600"> User Profile </span>
|
||||
<template #description> Invite users, and manage your account. </template>
|
||||
</BaseSectionHeader>
|
||||
</template>
|
||||
|
||||
<DetailsSection :details="details" />
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex gap-2">
|
||||
<BaseButton size="sm"> Change Password </BaseButton>
|
||||
<BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton>
|
||||
</div>
|
||||
<div v-if="token" class="pt-4 flex items-center pl-1">
|
||||
<CopyText class="mr-2 btn-primary" :text="tokenUrl" />
|
||||
{{ tokenUrl }}
|
||||
</div>
|
||||
<div v-if="token" class="pt-4 flex items-center pl-1">
|
||||
<CopyText class="mr-2 btn-primary" :text="token" />
|
||||
{{ token }}
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<BaseCard>
|
||||
<template #title>
|
||||
<BaseSectionHeader>
|
||||
<Icon name="mdi-fill" class="mr-2 text-base-600" />
|
||||
<span class="text-base-600"> Theme Settings </span>
|
||||
<template #description>
|
||||
Theme settings are stored in your browser's local storage. You can change the theme at any time. If you're
|
||||
having trouble setting your theme try refreshing your browser.
|
||||
</template>
|
||||
</BaseSectionHeader>
|
||||
</template>
|
||||
|
||||
<div class="px-4 pb-4">
|
||||
<div class="rounded-box grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
<div
|
||||
v-for="theme in themes"
|
||||
:key="theme.value"
|
||||
class="border-base-content/20 hover:border-base-content/40 outline-base-content overflow-hidden rounded-lg border outline-2 outline-offset-2"
|
||||
:data-theme="theme.value"
|
||||
:data-set-theme="theme.value"
|
||||
data-act-class="outline"
|
||||
@click="setTheme(theme.value)"
|
||||
>
|
||||
<div :data-theme="theme.value" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
|
||||
<div class="grid grid-cols-5 grid-rows-3">
|
||||
<div class="bg-base-200 col-start-1 row-span-2 row-start-1"></div>
|
||||
<div class="bg-base-300 col-start-1 row-start-3"></div>
|
||||
<div class="bg-base-100 col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 p-2">
|
||||
<div class="font-bold">{{ theme.label }}</div>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<div class="bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
|
||||
<div class="text-primary-content text-sm font-bold">A</div>
|
||||
</div>
|
||||
<div class="bg-secondary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
|
||||
<div class="text-secondary-content text-sm font-bold">A</div>
|
||||
</div>
|
||||
<div class="bg-accent flex aspect-square w-5 items-center justify-center rounded lg:w-6">
|
||||
<div class="text-accent-content text-sm font-bold">A</div>
|
||||
</div>
|
||||
<div class="bg-neutral flex aspect-square w-5 items-center justify-center rounded lg:w-6">
|
||||
<div class="text-neutral-content text-sm font-bold">A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<BaseCard>
|
||||
<template #title>
|
||||
<BaseSectionHeader>
|
||||
<Icon name="mdi-delete" class="mr-2 -mt-1 text-base-600" />
|
||||
<span class="text-base-600"> Delete Account</span>
|
||||
<template #description> Delete your account and all it's associated data </template>
|
||||
</BaseSectionHeader>
|
||||
|
||||
<div class="py-4 border-t-2 border-gray-300">
|
||||
<BaseButton class="btn-error" @click="deleteProfile"> Delete Account </BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
</BaseCard>
|
||||
</BaseContainer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue