mirror of
https://github.com/ArthurDanjou/arthome.git
synced 2026-01-28 02:10:27 +01:00
Add auth
This commit is contained in:
@@ -2,8 +2,5 @@ export default defineAppConfig({
|
||||
ui: {
|
||||
gray: 'neutral',
|
||||
primary: 'gray',
|
||||
icons: {
|
||||
dynamic: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
75
app/app.vue
75
app/app.vue
@@ -1,38 +1,54 @@
|
||||
<script lang="ts" setup>
|
||||
useHead({
|
||||
link: [{ rel: 'icon', type: 'image/png', href: '/favicon.ico' }],
|
||||
title: 'Home by Arthur Danjou',
|
||||
})
|
||||
|
||||
const date = ref<Date>(new Date())
|
||||
onMounted(() => {
|
||||
setInterval(() => date.value = new Date(), 1000)
|
||||
const { loggedIn, clear, user } = useUserSession()
|
||||
const colorMode = useColorMode()
|
||||
const authorized = await isAuthorized()
|
||||
|
||||
onMounted(async () => {
|
||||
if (!authorized) {
|
||||
navigateTo('/')
|
||||
}
|
||||
})
|
||||
|
||||
const apps = await queryContent('/').find()
|
||||
const nuxt = apps.filter(app => app._dir === 'nuxt')
|
||||
const perso = apps.filter(app => app._dir === 'perso')
|
||||
const maths = apps.filter(app => app._dir === 'maths')
|
||||
const social = apps.filter(app => app._dir === 'social')
|
||||
watch(loggedIn, async () => {
|
||||
if (!loggedIn.value) {
|
||||
navigateTo('/')
|
||||
}
|
||||
})
|
||||
|
||||
function toggleColorMode() {
|
||||
colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLoadingIndicator color="#808080" />
|
||||
<UContainer class="my-8">
|
||||
<div v-if="date" class="flex flex-col items-center">
|
||||
<h1 class="text-6xl font-bold">
|
||||
{{ useDateFormat(date, 'HH:mm') }}
|
||||
</h1>
|
||||
<h1 class="text-2xl">
|
||||
{{ useDateFormat(date, 'dddd D MMMM YYYY', { locales: () => 'fr-FR' }) }}
|
||||
</h1>
|
||||
</div>
|
||||
<div v-if="apps" class="space-y-12">
|
||||
<Application title="Personal" :apps="perso" />
|
||||
<Application title="Social" :apps="social" />
|
||||
<Application title="Nuxt" :apps="nuxt" />
|
||||
<Application title="Mathematics" :apps="maths" />
|
||||
<UContainer>
|
||||
<div class="absolute top-2 right-2 flex gap-2">
|
||||
<UTooltip v-if="loggedIn" text="Click to logout">
|
||||
<UButton
|
||||
:label="`Hello ${user.name}`"
|
||||
color="gray"
|
||||
square
|
||||
trailing-icon="i-ph:person-arms-spread-duotone"
|
||||
variant="ghost"
|
||||
@click="clear"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UButton
|
||||
:icon="$colorMode.preference === 'dark' ? 'i-ph:moon-duotone' : 'i-ph:sun-duotone'"
|
||||
color="gray"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="toggleColorMode"
|
||||
/>
|
||||
</div>
|
||||
<NuxtPage />
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -42,19 +58,4 @@ body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
@apply h-full w-full text-neutral-700 dark:text-neutral-300;
|
||||
}
|
||||
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.page-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
</style>
|
||||
|
||||
10
app/composables/authorization.ts
Normal file
10
app/composables/authorization.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export async function isAuthorized() {
|
||||
const { user } = useUserSession()
|
||||
const { data: authorized } = await useFetch('/api/authorized', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
email: user.value?.email ?? 'test@nuxt.com',
|
||||
},
|
||||
})
|
||||
return authorized.value
|
||||
}
|
||||
8
app/middleware/auth.ts
Normal file
8
app/middleware/auth.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export default defineNuxtRouteMiddleware(async () => {
|
||||
const { loggedIn } = useUserSession()
|
||||
const authorized = await isAuthorized()
|
||||
|
||||
if (!loggedIn.value || !authorized) {
|
||||
return navigateTo('/')
|
||||
}
|
||||
})
|
||||
35
app/pages/home.vue
Normal file
35
app/pages/home.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script lang="ts" setup>
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
const date = ref<Date>(new Date())
|
||||
onMounted(() => {
|
||||
setInterval(() => date.value = new Date(), 1000)
|
||||
})
|
||||
|
||||
const apps = await queryContent('/').find()
|
||||
const nuxt = apps.filter(app => app._dir === 'nuxt')
|
||||
const perso = apps.filter(app => app._dir === 'perso')
|
||||
const maths = apps.filter(app => app._dir === 'maths')
|
||||
const social = apps.filter(app => app._dir === 'social')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="my-8">
|
||||
<div v-if="date" class="flex flex-col items-center">
|
||||
<h1 class="text-6xl font-bold">
|
||||
{{ useDateFormat(date, 'HH:mm') }}
|
||||
</h1>
|
||||
<h1 class="text-2xl">
|
||||
{{ useDateFormat(date, 'dddd D MMMM YYYY', { locales: () => 'fr-FR' }) }}
|
||||
</h1>
|
||||
</div>
|
||||
<div v-if="apps" class="space-y-12">
|
||||
<Application :apps="perso" title="Personal" />
|
||||
<Application :apps="social" title="Social" />
|
||||
<Application :apps="nuxt" title="Nuxt" />
|
||||
<Application :apps="maths" title="Mathematics" />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
59
app/pages/index.vue
Normal file
59
app/pages/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<script lang="ts" setup>
|
||||
const { loggedIn } = useUserSession()
|
||||
const authorized = await isAuthorized()
|
||||
|
||||
onMounted(() => {
|
||||
if (authorized) {
|
||||
navigateTo('/home')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center">
|
||||
<UCard class="w-full md:w-1/2">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<h3>Home by Arthur Danjou</h3>
|
||||
<UButton
|
||||
v-if="!loggedIn"
|
||||
:external="true"
|
||||
color="black"
|
||||
icon="i-ph:github-logo-duotone"
|
||||
label="Login with GitHub"
|
||||
to="/auth/github"
|
||||
/>
|
||||
<UButton
|
||||
v-if="authorized"
|
||||
color="black"
|
||||
icon="i-ph:house-duotone"
|
||||
label="Go Home"
|
||||
to="/home"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<h1 class="font-bold text-black dark:text-white text-lg">
|
||||
Welcome to ArtHome
|
||||
</h1>
|
||||
<p v-if="!authorized && loggedIn">
|
||||
You're not authorized to access
|
||||
</p>
|
||||
<p>
|
||||
ArtHome is a private platform. You need to request access to be able to use it by asking to
|
||||
<a
|
||||
class="duration-300 underline-offset-2 text-md text-black dark:text-white underline decoration-gray-300 dark:decoration-neutral-700 hover:decoration-black dark:hover:decoration-white"
|
||||
href="mailto:arthurdanjou@outlook.fr"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>Arthur Danjou</a>
|
||||
</p>
|
||||
</template>
|
||||
<template #footer>
|
||||
<p class="italic text-sm">
|
||||
No personal informations regarding your GitHub account are stored in database.
|
||||
</p>
|
||||
</template>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user