Progress on auth handling
This commit is contained in:
parent
3b23d4dab4
commit
3c2548cd90
17
app.vue
17
app.vue
|
|
@ -30,27 +30,28 @@ onMounted(() => {
|
|||
<line x1="4" y1="18" x2="20" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="gap-3 flex align-stretch">
|
||||
<div class="gapx-3 flex align-stretch">
|
||||
<NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'">
|
||||
<ThemeIcon icon="logo" :width=40 :height=40 />
|
||||
</NuxtLink>
|
||||
<NuxtLink class="site-nav-bar-text" aria-label="Systeme" :href="'/explorer'"
|
||||
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" :href="'/explorer'"
|
||||
:class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
|
||||
<NuxtLink class="site-nav-bar-text" aria-label="Outils" :href="'/tools'"
|
||||
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Outils" :href="'/tools'"
|
||||
:class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mobile-bigger">
|
||||
<SearchView />
|
||||
</div>
|
||||
<div class="ps-1 gap-1 flex align-center">
|
||||
<ThemeSwitch />
|
||||
<div class="site-login">
|
||||
<div class="ps-1 gapx-1 flex align-center">
|
||||
<ThemeSwitch class="mobile-hidden" />
|
||||
<NuxtLink class="site-login" href="/user/profile">
|
||||
<ThemeIcon icon="user" :width=32 :height=32 />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-body">
|
||||
<LeftComponent />
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,29 +49,78 @@
|
|||
padding-bottom: 3em;
|
||||
}
|
||||
|
||||
.gap-1 > *
|
||||
.flex
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
.block
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.inline
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
.hidden
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.row
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.column
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.gapx-1 > *
|
||||
{
|
||||
margin-left: .4em;
|
||||
margin-right: .4em;
|
||||
}
|
||||
.gap-1 > *:first-child, .gap-2 > *:first-child, .gap-3 > *:first-child
|
||||
.gapx-1 > *:first-child, .gapx-2 > *:first-child, .gapx-3 > *:first-child
|
||||
{
|
||||
margin-left: 0;
|
||||
}
|
||||
.gap-1 > *:last-child, .gap-2 > *:last-child, .gap-3 > *:last-child
|
||||
.gapx-1 > *:last-child, .gapx-2 > *:last-child, .gapx-3 > *:last-child
|
||||
{
|
||||
margin-right: 0;
|
||||
}
|
||||
.gap-2 > *
|
||||
.gapx-2 > *
|
||||
{
|
||||
margin-left: .8em;
|
||||
margin-right: .8em;
|
||||
}
|
||||
.gap-3 > *
|
||||
.gapx-3 > *
|
||||
{
|
||||
margin-left: 1.2em;
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
.gapy-1 > *
|
||||
{
|
||||
margin-top: .4em;
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
.gapy-1 > *:first-child, .gapy-2 > *:first-child, .gapy-3 > *:first-child
|
||||
{
|
||||
margin-top: 0;
|
||||
}
|
||||
.gapy-1 > *:last-child, .gapy-2 > *:last-child, .gapy-3 > *:last-child
|
||||
{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.gapy-2 > *
|
||||
{
|
||||
margin-top: .8em;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
.gapy-3 > *
|
||||
{
|
||||
margin-top: 1.2em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
html.dark-mode .dark-hidden {
|
||||
display: none;
|
||||
|
|
@ -101,3 +150,23 @@ html.light-mode .light-block {
|
|||
.align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.mobile-bigger {
|
||||
flex: 3 1 0 !important;
|
||||
}
|
||||
.mobile-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-block {
|
||||
display: inherit !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 750px) {
|
||||
.desktop-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.desktop-block {
|
||||
display: inherit !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -4277,20 +4277,35 @@ body {
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
.site-nav-bar-text {
|
||||
color: var(--site-name-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--site-name-size);
|
||||
font-weight: var(--site-name-weight);
|
||||
flex: 1 0 0;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (min-width: 750px)
|
||||
{
|
||||
.site-nav-bar-text {
|
||||
color: var(--site-name-color);
|
||||
cursor: pointer;
|
||||
font-size: var(--site-name-size);
|
||||
font-weight: var(--site-name-weight);
|
||||
flex: 1 0 0;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-nav-bar-text:hover {
|
||||
color: var(--site-name-color-hover);
|
||||
.site-nav-bar-text:hover {
|
||||
color: var(--site-name-color-hover);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 750px)
|
||||
{
|
||||
.site-body-left-column-inner .site-nav-bar-text {
|
||||
color: var(--site-name-color);
|
||||
padding: .5em 0;
|
||||
font-size: var(--site-name-size);
|
||||
font-weight: var(--nav-parent-item-weight);
|
||||
line-height: var(--line-height-normal);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-title {
|
||||
|
|
@ -4978,14 +4993,16 @@ body {
|
|||
justify-content: end;
|
||||
}
|
||||
|
||||
.site-nav-bar-text.mod-active:after {
|
||||
content: "";
|
||||
background-color: var(--nav-item-border-color-active);
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(-0.5em + 2px);
|
||||
@media screen and (min-width: 750px) {
|
||||
.site-nav-bar-text.mod-active:after {
|
||||
content: "";
|
||||
background-color: var(--nav-item-border-color-active);
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(-0.5em + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
.site-login {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<div class="site-body-left-column">
|
||||
<div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" class="site-body-left-column">
|
||||
<div class="site-body-left-column-inner">
|
||||
<div class="nav-view-outer">
|
||||
<div class="nav-view">
|
||||
<div class="tree-item">
|
||||
<div class="tree-item-children">
|
||||
<ContentNavigation v-slot="{ navigation }">
|
||||
<NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Systeme" :href="'/explorer'"
|
||||
:class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
|
||||
<ContentNavigation v-if="$route.path.startsWith('/explorer')" v-slot="{ navigation }" queryContent="/">
|
||||
<NavigationLink v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
|
||||
</ContentNavigation>
|
||||
<NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Outils" :href="'/tools'"
|
||||
:class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@ defineProps<Prop>();
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtImg :src="`icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
|
||||
<NuxtImg :src="`icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
|
||||
</template>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import CanvasModule from './transformer/canvas/module'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image"],
|
||||
modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode", '@sidebase/nuxt-auth'],
|
||||
|
||||
components: [
|
||||
{
|
||||
|
|
@ -17,6 +17,28 @@ export default defineNuxtConfig({
|
|||
}
|
||||
},
|
||||
|
||||
auth: {
|
||||
baseURL: '/api/auth',
|
||||
provider: {
|
||||
type: 'local',
|
||||
//type: 'refresh',
|
||||
endpoints: {
|
||||
signIn: { path: '/login', method: 'post' },
|
||||
signOut: { path: '/logout', method: 'post' },
|
||||
signUp: { path: '/register', method: 'post' },
|
||||
getSession: { path: '/session', method: 'get' },
|
||||
//refresh: { path: '/refresh', method: 'post' }
|
||||
},
|
||||
session: {
|
||||
dataType: {
|
||||
id: 'string',
|
||||
username: 'string',
|
||||
email: 'string',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
css: ['~/assets/common.css', '~/assets/global.css'],
|
||||
|
||||
content: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
{
|
||||
"devDependencies": { "@nuxt/content": "^2.13.2", "@nuxt/image": "^1.7.0", "@nuxtjs/color-mode": "^3.4.2", "nuxt": "^3.12.4", "vue": "^3.4.34", "vue-router": "^4.4.0" },
|
||||
"devDependencies": {
|
||||
"@nuxt/content": "^2.13.2",
|
||||
"@nuxtjs/color-mode": "^3.4.2",
|
||||
"@sidebase/nuxt-auth": "^0.8.1",
|
||||
"nuxt": "^3.12.4",
|
||||
"vue": "^3.4.34",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
"patchedDependencies": {
|
||||
"unstorage@1.10.2": "patches/unstorage@1.10.2.patch",
|
||||
"@nuxt/content@2.13.2": "patches/@nuxt%2Fcontent@2.13.2.patch"
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<LeftComponent />
|
||||
<div class="site-body-center-column">
|
||||
<div class="render-container">
|
||||
<template v-if="!!page && page._type == 'markdown' && page.body.children.length > 0">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
title: 'Accueil',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="site-body-center-column">
|
||||
<div class="render-container">
|
||||
|
|
|
|||
|
|
@ -1 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
title: 'Se connecter',
|
||||
auth: {
|
||||
unauthenticatedOnly: true,
|
||||
navigateAuthenticatedTo: '/user/profile'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template></template>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<template></template>
|
||||
|
|
@ -1 +1,23 @@
|
|||
<template></template>
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
title: 'Votre profil',
|
||||
auth: {
|
||||
unauthenticatedOnly: false,
|
||||
navigateAuthenticatedTo: '/user/login'
|
||||
}
|
||||
});
|
||||
|
||||
const { data } = useAuth();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="site-body-center-column">
|
||||
<div class="render-container">
|
||||
<div class="not-found-container">
|
||||
<ThemeIcon icon="logo" :width=128 :height=128 />
|
||||
<div class="not-found-title">Coucou {{ data?.username }} :) :) :) :)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<template></template>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
title: 'S\'inscrire',
|
||||
auth: {
|
||||
unauthenticatedOnly: true,
|
||||
navigateAuthenticatedTo: '/user/profile'
|
||||
}
|
||||
});
|
||||
|
||||
const username = ref<string>(), email = ref<string>(), password = ref<string>();
|
||||
|
||||
const { status, signUp } = useAuth();
|
||||
|
||||
function connect() {
|
||||
signUp({ username, password, email }, { redirect: true, callbackUrl: '/' });
|
||||
|
||||
console.log(status.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!--<div class="site-body-center-column">
|
||||
<div class="render-container">
|
||||
<div v-if="status === 'unauthenticated'" class="not-found-container">
|
||||
<form @submit.prevent="connect" class="column gapy-1">
|
||||
<input type="text" :value="username" placeholder="Entrez un nom d'utiliateur">
|
||||
<input type="text" :value="email" placeholder="Entrez une addresse mail">
|
||||
<input type="password" :value="password" placeholder="Entrez un mot de passe">
|
||||
<button>Valider</button>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else-if="status === 'loading'"></div>
|
||||
<div v-else class="not-found-container">
|
||||
<div class="not-found-title">👀 Vous n'avez rien à faire ici. 👀</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</template>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default defineEventHandler(() => 'Hello World!');
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default defineEventHandler(() => 'Hello World!');
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default defineEventHandler((...args) => console.log(...args));
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default defineEventHandler(() => 'Hello World!');
|
||||
Loading…
Reference in New Issue