feat: complete pocketbase store some more

Refactor some CSS

Get App title from environment
This commit is contained in:
Lucien Cartier-Tilet 2024-02-10 18:20:55 +01:00
parent bfbfd75fd3
commit d73da8c1bd
7 changed files with 73 additions and 24 deletions

View File

@ -62,3 +62,8 @@
.gen-margin(@n, (@i + 1));
}
.gen-margin(10);
.buttons {
.flex-row;
justify-content: end;
}

View File

@ -1,7 +1,7 @@
<template>
<header class="flex-row-center flex-spread">
<RouterLink class="title h4" :to="{ name: 'home' }">GéDR</RouterLink>
<div class="buttons flex-row gap-1rem">
<RouterLink class="title h4" :to="{ name: 'home' }">{{ appTitle }}</RouterLink>
<div class="buttons gap-1rem">
<button @click="toggleDark()" class="secondary">{{ isDark ? 'Dark' : 'Light' }}</button>
<button v-if="!loggedIn" @click="login()" class="secondary">Login</button>
<RouterLink v-else :to="{ name: 'account' }" class="button secondary">Account</RouterLink>
@ -16,14 +16,16 @@ import { usePocketbaseStore } from '@/stores/pocketbase';
import { ref } from 'vue';
import router from '@/router';
const appTitle = import.meta.env.VITE_NAME;
const isDark = useDark();
const toggleDark = useToggle(isDark);
const pbStore = usePocketbaseStore();
const loggedIn = ref(pbStore.loggedIn);
const loggedIn = ref(pbStore.auth.loggedIn);
const login = () => {
pbStore.login().subscribe({
pbStore.auth.login().subscribe({
next: () => router.go(0),
});
};

View File

@ -13,7 +13,7 @@
<button v-if="props.type === 'info'" class="accent" type="button" @click="close">
Fermer
</button>
<div v-else class="flex-row gap-1rem action-buttons">
<div v-else class="gap-1rem buttons">
<button class="faded" type="button" @click="close">Annuler</button>
<button type="button" @click="agree">OK</button>
</div>
@ -96,8 +96,4 @@ const agree = () => {
background: transparent;
.themed(color, @light-background, @dark-text);
}
.action-buttons {
justify-content: flex-end;
}
</style>

View File

@ -12,7 +12,7 @@ const app = createApp(App);
router.beforeEach((to, from, next) => {
const pbStore = usePocketbaseStore();
if (!pbStore.loggedIn && ['home', 'login'].every((path) => path != to.name)) {
if (!pbStore.auth.loggedIn && ['home', 'login'].every((path) => path != to.name)) {
next({ name: 'home' });
} else {
next();

View File

@ -3,12 +3,24 @@ import { defineStore } from 'pinia';
import { from, map, Observable, tap } from 'rxjs';
import { computed, ref } from 'vue';
export interface NewCampaign {
name: string | null;
game_master: string | null;
players: string[] | null;
}
export const usePocketbaseStore = defineStore('pocketbase', () => {
const pb = new PocketBase(import.meta.env.VITE_PB_URL);
/////////////////////////////////////////////////////////////////////////////
// Authentication //
/////////////////////////////////////////////////////////////////////////////
const authData = ref<RecordAuthResponse<RecordModel> | null>(null);
const authStore = computed<BaseAuthStore>(() => pb.authStore);
const loggedIn = computed<boolean>(() => pb.authStore.isValid);
const username = computed<string | null>(() => authStore.value.model?.username);
const userId = computed<string | null>(() => authStore.value.model?.id);
function login(): Observable<RecordAuthResponse<RecordModel>> {
return from(pb.collection('users').authWithOAuth2({ provider: 'discord' })).pipe(
@ -35,14 +47,48 @@ export const usePocketbaseStore = defineStore('pocketbase', () => {
);
}
function simpleUserList(): Observable<RecordModel[]> {
return from(
pb.collection('public_users').getFullList({
sort: 'username',
})
);
}
/////////////////////////////////////////////////////////////////////////////
// Campaigns //
/////////////////////////////////////////////////////////////////////////////
function listCampaigns(): Observable<RecordModel[]> {
return from(
pb.collection('campaign').getFullList({
sort: 'name',
})
);
}
function createCampaign(campaign: NewCampaign): Observable<RecordModel> {
return from(pb.collection('campaign').create(campaign));
}
return {
auth: {
authData,
authStore,
loggedIn,
username,
userId,
login,
refresh,
logout,
deleteAccount,
},
campaign: {
listCampaigns,
createCampaign,
},
users: {
simpleUserList,
},
};
});

View File

@ -37,11 +37,11 @@ import AppModal from '@/components/AppModal.vue';
import { ref } from 'vue';
const pbStore = usePocketbaseStore();
const username = pbStore.username;
const username = pbStore.auth.username;
const showModal = ref<boolean>(false);
const logout = () => {
pbStore.logout();
pbStore.auth.logout();
router.go(0);
};
@ -54,10 +54,10 @@ const closeModal = () => {
};
const deleteAccount = () => {
pbStore.deleteAccount().subscribe({
pbStore.auth.deleteAccount().subscribe({
next: () => {
closeModal();
pbStore.logout();
pbStore.auth.logout();
router.go(0);
},
});

View File

@ -1,5 +1,5 @@
<template>
<LoggedInHome v-if="pbStore.loggedIn" />
<LoggedInHome v-if="pbStore.auth.loggedIn" />
<LoggedOutHome v-else />
</template>
@ -10,7 +10,7 @@ import LoggedOutHome from '@/components/LoggedOutHome.vue';
import LoggedInHome from '@/components/LoggedInHome.vue';
const pbStore = usePocketbaseStore();
pbStore.refresh().subscribe({
pbStore.auth.refresh().subscribe({
error: (err) => console.log('Could not refresh account data:', err),
});
</script>