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(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
.gen-margin(10);
|
.gen-margin(10);
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
.flex-row;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="flex-row-center flex-spread">
|
<header class="flex-row-center flex-spread">
|
||||||
<RouterLink class="title h4" :to="{ name: 'home' }">GéDR</RouterLink>
|
<RouterLink class="title h4" :to="{ name: 'home' }">{{ appTitle }}</RouterLink>
|
||||||
<div class="buttons flex-row gap-1rem">
|
<div class="buttons gap-1rem">
|
||||||
<button @click="toggleDark()" class="secondary">{{ isDark ? 'Dark' : 'Light' }}</button>
|
<button @click="toggleDark()" class="secondary">{{ isDark ? 'Dark' : 'Light' }}</button>
|
||||||
<button v-if="!loggedIn" @click="login()" class="secondary">Login</button>
|
<button v-if="!loggedIn" @click="login()" class="secondary">Login</button>
|
||||||
<RouterLink v-else :to="{ name: 'account' }" class="button secondary">Account</RouterLink>
|
<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 { ref } from 'vue';
|
||||||
import router from '@/router';
|
import router from '@/router';
|
||||||
|
|
||||||
|
const appTitle = import.meta.env.VITE_NAME;
|
||||||
|
|
||||||
const isDark = useDark();
|
const isDark = useDark();
|
||||||
const toggleDark = useToggle(isDark);
|
const toggleDark = useToggle(isDark);
|
||||||
|
|
||||||
const pbStore = usePocketbaseStore();
|
const pbStore = usePocketbaseStore();
|
||||||
const loggedIn = ref(pbStore.loggedIn);
|
const loggedIn = ref(pbStore.auth.loggedIn);
|
||||||
|
|
||||||
const login = () => {
|
const login = () => {
|
||||||
pbStore.login().subscribe({
|
pbStore.auth.login().subscribe({
|
||||||
next: () => router.go(0),
|
next: () => router.go(0),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<button v-if="props.type === 'info'" class="accent" type="button" @click="close">
|
<button v-if="props.type === 'info'" class="accent" type="button" @click="close">
|
||||||
Fermer
|
Fermer
|
||||||
</button>
|
</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 class="faded" type="button" @click="close">Annuler</button>
|
||||||
<button type="button" @click="agree">OK</button>
|
<button type="button" @click="agree">OK</button>
|
||||||
</div>
|
</div>
|
||||||
@ -96,8 +96,4 @@ const agree = () => {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
.themed(color, @light-background, @dark-text);
|
.themed(color, @light-background, @dark-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -12,7 +12,7 @@ const app = createApp(App);
|
|||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
const pbStore = usePocketbaseStore();
|
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' });
|
next({ name: 'home' });
|
||||||
} else {
|
} else {
|
||||||
next();
|
next();
|
||||||
|
@ -3,12 +3,24 @@ import { defineStore } from 'pinia';
|
|||||||
import { from, map, Observable, tap } from 'rxjs';
|
import { from, map, Observable, tap } from 'rxjs';
|
||||||
import { computed, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
|
export interface NewCampaign {
|
||||||
|
name: string | null;
|
||||||
|
game_master: string | null;
|
||||||
|
players: string[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
export const usePocketbaseStore = defineStore('pocketbase', () => {
|
export const usePocketbaseStore = defineStore('pocketbase', () => {
|
||||||
const pb = new PocketBase(import.meta.env.VITE_PB_URL);
|
const pb = new PocketBase(import.meta.env.VITE_PB_URL);
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////
|
||||||
|
// Authentication //
|
||||||
|
/////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
const authData = ref<RecordAuthResponse<RecordModel> | null>(null);
|
const authData = ref<RecordAuthResponse<RecordModel> | null>(null);
|
||||||
const authStore = computed<BaseAuthStore>(() => pb.authStore);
|
const authStore = computed<BaseAuthStore>(() => pb.authStore);
|
||||||
const loggedIn = computed<boolean>(() => pb.authStore.isValid);
|
const loggedIn = computed<boolean>(() => pb.authStore.isValid);
|
||||||
const username = computed<string | null>(() => authStore.value.model?.username);
|
const username = computed<string | null>(() => authStore.value.model?.username);
|
||||||
|
const userId = computed<string | null>(() => authStore.value.model?.id);
|
||||||
|
|
||||||
function login(): Observable<RecordAuthResponse<RecordModel>> {
|
function login(): Observable<RecordAuthResponse<RecordModel>> {
|
||||||
return from(pb.collection('users').authWithOAuth2({ provider: 'discord' })).pipe(
|
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 {
|
return {
|
||||||
|
auth: {
|
||||||
authData,
|
authData,
|
||||||
authStore,
|
authStore,
|
||||||
loggedIn,
|
loggedIn,
|
||||||
username,
|
username,
|
||||||
|
userId,
|
||||||
login,
|
login,
|
||||||
refresh,
|
refresh,
|
||||||
logout,
|
logout,
|
||||||
deleteAccount,
|
deleteAccount,
|
||||||
|
},
|
||||||
|
campaign: {
|
||||||
|
listCampaigns,
|
||||||
|
createCampaign,
|
||||||
|
},
|
||||||
|
users: {
|
||||||
|
simpleUserList,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -37,11 +37,11 @@ import AppModal from '@/components/AppModal.vue';
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const pbStore = usePocketbaseStore();
|
const pbStore = usePocketbaseStore();
|
||||||
const username = pbStore.username;
|
const username = pbStore.auth.username;
|
||||||
const showModal = ref<boolean>(false);
|
const showModal = ref<boolean>(false);
|
||||||
|
|
||||||
const logout = () => {
|
const logout = () => {
|
||||||
pbStore.logout();
|
pbStore.auth.logout();
|
||||||
router.go(0);
|
router.go(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -54,10 +54,10 @@ const closeModal = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const deleteAccount = () => {
|
const deleteAccount = () => {
|
||||||
pbStore.deleteAccount().subscribe({
|
pbStore.auth.deleteAccount().subscribe({
|
||||||
next: () => {
|
next: () => {
|
||||||
closeModal();
|
closeModal();
|
||||||
pbStore.logout();
|
pbStore.auth.logout();
|
||||||
router.go(0);
|
router.go(0);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<LoggedInHome v-if="pbStore.loggedIn" />
|
<LoggedInHome v-if="pbStore.auth.loggedIn" />
|
||||||
<LoggedOutHome v-else />
|
<LoggedOutHome v-else />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -10,7 +10,7 @@ import LoggedOutHome from '@/components/LoggedOutHome.vue';
|
|||||||
import LoggedInHome from '@/components/LoggedInHome.vue';
|
import LoggedInHome from '@/components/LoggedInHome.vue';
|
||||||
|
|
||||||
const pbStore = usePocketbaseStore();
|
const pbStore = usePocketbaseStore();
|
||||||
pbStore.refresh().subscribe({
|
pbStore.auth.refresh().subscribe({
|
||||||
error: (err) => console.log('Could not refresh account data:', err),
|
error: (err) => console.log('Could not refresh account data:', err),
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user