1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-22 06:46:32 +00:00
This commit is contained in:
Hayden 2022-08-30 18:11:36 -08:00
parent 682774c9ce
commit 630fe83de5
5 changed files with 184 additions and 146 deletions
frontend

View file

@ -1,9 +1,10 @@
{ {
"arrowParens": "avoid", "arrowParens": "avoid",
"semi": true, "semi": true,
"tabWidth": 4, "tabWidth": 2,
"useTabs": true, "useTabs": false,
"vueIndentScriptAndStyle": true, "vueIndentScriptAndStyle": true,
"singleQuote": true, "singleQuote": true,
"trailingComma": "es5" "trailingComma": "es5",
"printWidth": 120
} }

View file

@ -15,4 +15,8 @@ export class UserApi extends BaseAPI {
public self() { public self() {
return this.http.get<Result<User>>(UrlBuilder('/users/self')); return this.http.get<Result<User>>(UrlBuilder('/users/self'));
} }
public logout() {
return this.http.post<object, void>(UrlBuilder('/users/logout'), {});
}
} }

View file

@ -54,11 +54,7 @@ export class Requests {
return method === Method.POST || method === Method.PUT; return method === Method.POST || method === Method.PUT;
} }
private async do<T>( private async do<T>(method: Method, url: string, payload: Object = {}): Promise<TResponse<T>> {
method: Method,
url: string,
payload: Object = {}
): Promise<TResponse<T>> {
const args: RequestInit = { const args: RequestInit = {
method, method,
headers: { headers: {
@ -83,7 +79,13 @@ export class Requests {
this.logger(response); this.logger(response);
} }
const data = await response.json(); const data: T = await (async () => {
try {
return await response.json();
} catch (e) {
return {} as T;
}
})();
return { return {
status: response.status, status: response.status,

View file

@ -1,20 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { useUserApi } from '@/composables/use-api'; import { useUserApi } from '@/composables/use-api';
import { useAuthStore } from '@/store/auth';
useHead({ useHead({
title: 'Homebox | Home', title: 'Homebox | Home',
}); });
const links = [
{
name: 'Home',
href: '/home',
},
{
name: 'Logout',
href: '/logout',
last: true,
},
];
const api = useUserApi(); const api = useUserApi();
const user = ref({}); const user = ref({});
@ -26,24 +16,50 @@
user.value = data.item; user.value = data.item;
} }
}); });
const authStore = useAuthStore();
const router = useRouter();
async function logout() {
const { error } = await authStore.logout(api);
if (error) {
console.error(error);
return;
}
router.push('/');
}
const links = [
{
name: 'Home',
href: '/home',
},
{
name: 'Logout',
action: logout,
last: true,
},
];
</script> </script>
<template> <template>
<section class="max-w-7xl mx-auto"> <section class="max-w-7xl mx-auto">
<header class="sm:px-6 py-2 lg:p-14 sm:py-6"> <header class="sm:px-6 py-2 lg:p-14 sm:py-6">
<h2 <h2 class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl">Homebox</h2>
class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl" <div class="ml-1 text-lg text-gray-400 space-x-2">
>
Homebox
</h2>
<div class="ml-1 text-lg text-gray-400 space-x-2 italic">
<template v-for="link in links"> <template v-for="link in links">
<router-link <router-link
class="hover:text-base-content transition-color duration-200" v-if="!link.action"
class="hover:text-base-content transition-color duration-200 italic"
:to="link.href" :to="link.href"
> >
{{ link.name }} {{ link.name }}
</router-link> </router-link>
<button v-else @click="link.action" class="hover:text-base-content transition-color duration-200 italic">
{{ link.name }}
</button>
<span v-if="!link.last"> / </span> <span v-if="!link.last"> / </span>
</template> </template>
</div> </div>

View file

@ -1,3 +1,4 @@
import { UserApi } from '@/api/user';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
export const useAuthStore = defineStore('auth', { export const useAuthStore = defineStore('auth', {
@ -18,4 +19,18 @@ export const useAuthStore = defineStore('auth', {
return state.expires < new Date(); return state.expires < new Date();
}, },
}, },
actions: {
async logout(api: UserApi) {
const result = await api.logout();
if (result.error) {
return result;
}
this.token = '';
this.expires = '';
return result;
},
},
}); });