feat: complete pocketbase store some more
Refactor some CSS Get App title from environment
This commit is contained in:
parent
bfbfd75fd3
commit
d73da8c1bd
@ -62,3 +62,8 @@
|
||||
.gen-margin(@n, (@i + 1));
|
||||
}
|
||||
.gen-margin(10);
|
||||
|
||||
.buttons {
|
||||
.flex-row;
|
||||
justify-content: end;
|
||||
}
|
||||
|
@ -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),
|
||||
});
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
|
@ -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,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
@ -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);
|
||||
},
|
||||
});
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user