more auth

.vitepress/config.js

@@ -63,7 +63,7 @@ export default withPwa(defineConfig({
   cleanUrls: true,
   outDir: 'dist',
   themeConfig: {
-    logo: "logo.svg",
+    logo: "/logo.svg",
     lastUpdated: true,
     socialLinks: [
       { icon: "github", link: "https://github.com/chromatone/web-synths" },

.vitepress/theme/MyLayout.vue

@@ -1,6 +1,4 @@
 <script setup>
-import AuthUser from '../../components/AuthUser.vue'
-
 import DefaultTheme from 'vitepress/theme'
 const { Layout } = DefaultTheme
 </script>

auth/login.md

@@ -1,6 +1,6 @@
 ---
 title: Login
-desctiption: Login to the site
+desctiption: Get in touch with community through contributions
 ---
 
-LOGIN PAGE
+<auth-login />

components/Auth/AuthLogin.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useUser } from '../../composables/useUser.js';
+
+const { userRead, user, userDB, email, password, authData, access_token, submitLogin, refreshToken, logoutUser } = useUser()
+
+</script>
+
+<template lang='pug'>
+form.flex.flex-col.gap-4(@submit.prevent="submitLogin" v-if="!access_token")
+  .text-4xl Login to your account
+  label.text-xl(for="email") E-mail*:
+  input.text-lg.rounded-lg.p-4.border-2.border-solid.dark-border-light-300.border-dark-800.shadow-inner.dark-bg-dark-200(id="email" type="text" v-model="email")
+  label.text-xl(for="email") Password:
+  input.rounded-lg.p-4.border-2.border-solid.dark-border-light-300.border-dark-800.shadow-inner.dark-bg-dark-200(type="password" v-model="password")
+  button.text-xl.font-bold.rounded-lg.p-4.border-2.border-solid.dark-border-light-300.border-dark-800.shadow-lg.dark-bg-dark-200(type="submit" @click="submitLogin") Sign In
+
+.flex.flex-col.gap-2(v-else)
+  p.font-mono.text-xs .{{ access_token.split('.')[2] }}
+  pre.text-sm {{ authData }}
+  .flex 
+    button.text-xl.font-bold.rounded-lg.p-4.border-2.border-solid.dark-border-light-300.border-dark-800.shadow-lg.dark-bg-dark-200(type="submit" @click="refreshToken()") Refresh
+    button.text-xl.font-bold.rounded-lg.p-4.border-2.border-solid.dark-border-light-300.border-dark-800.shadow-lg.dark-bg-dark-200(type="submit" @click="logoutUser()") Log out
+  button.text-xl.font-bold.rounded-lg.p-4.border-2.border-solid.dark-border-light-300.border-dark-800.shadow-lg.dark-bg-dark-200(type="submit" @click="userRead()") Read user
+  AuthProfile 
+</template>

components/Auth/AuthProfile.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { useUser } from '../../composables/useUser.js';
+
+const { user } = useUser()
+</script>
+
+<template lang='pug'>
+.flex.flex-col.gap-4.p-4
+  .text-xl Profile
+  pre.text-sm {{ user }}
+</template>

components/AuthUser.vue → components/Auth/AuthUser.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useForm } from '../composables/useForm.js';
-import { useUser } from '../composables/useUser.js';
+import { useForm } from '../../composables/useForm.js';
+import { useUser } from '../../composables/useUser.js';
 
 const { isFormOpen } = useForm()
 
@@ -12,7 +12,6 @@ const { user } = useUser()
 button.p-4.z-2000(@click="isFormOpen=!isFormOpen")
   .i-la-user.p-4
 teleport(to="body")
-  p {{ user }}
   TheForm.fixed.bottom-0 We are building a community of web-based musicians. Type in your e-mail to instantly get full access to the collection and occasionally receive community updates.
 
     template(#button) JOIN THE COMMUNITY

components/SynthCard.vue

@@ -49,9 +49,9 @@ function click() {
 button.w-full.flex.flex-wrap.items-stretch.text-left.relative.bg-light-300.shadow-lg.dark-bg-dark-300.-hover-translate-y-2px.transition.hover-shadow-xl.rounded-xl.overflow-hidden.relative(
   :data-umami-event="title"
   @click="click")
-  .cover.bg-cover.min-h-50.bg-center.filter.transition(
+  .cover.min-h-50.bg-cover.bg-center.filter.transition(
     :style="{backgroundImage: `url(/cover/${slug}.webp)`}"
-    style="flex: 1 1 120px"
+    style="flex: 1 1 280px"
     )
     //- DragHandle.scale-80.opacity-40.cursor-grab.absolute.top-2.left-2
     //-   svg(xmlns="http://www.w3.org/2000/svg", width="32", height="32", viewBox="0 0 32 32")
@@ -60,10 +60,10 @@ button.w-full.flex.flex-wrap.items-stretch.text-left.relative.bg-light-300.shado
     //-   :src="`/cover/${slug}.webp`" 
     //-   :alt="`${title} illustration`")
   .p-4.flex.flex-col.items-start.justify-between.gap-2(
-    style="flex: 1 0 200px"
+    style="flex: 10 0 200px"
     )
     .font-bold.flex.items-center.gap-2.flex-0.w-full
-      span.opacity-40.hover-opacity-80.transition.text-2xl.select-none.absolute.bottom-4.right-5.text-center {{ pos+1 }}
+      span.transition.text-2xl.select-none.absolute.top-4.left-5.mix-blend-difference.text-center {{ pos+1 }}
       .flex-1 
         span.text-xl {{ title }} 
         span.font-normal(title="Archived locally by us" v-if="archive") (A)

composables/useUser.js

@@ -1,50 +1,96 @@
 
-import { createDirectus, rest, readMe, authentication, readItems, inviteUser } from '@directus/sdk'
+import { createDirectus, rest, readMe, authentication, readItems, realtime } from '@directus/sdk'
 import { onMounted, ref } from 'vue'
 
+class LocalStorage {
+  get() {
+    return JSON.parse(localStorage.getItem("directus-data"));
+  }
+  set(data) {
+    localStorage.setItem("directus-data", JSON.stringify(data));
+  }
+}
+
 export const userDB = createDirectus(
   'https://db.chromatone.center/'
 ).with(
   rest({ credentials: 'include' })
 ).with(
-  authentication('cookie', { credentials: 'include' })
-) // .with(realtime({ credentials: 'include' }))
+  authentication('json', { credentials: 'include', storage: new LocalStorage() })
+).with(realtime({ credentials: 'include' }))
 
 const user = ref()
-const auth = ref()
+
+const email = ref('')
+const password = ref('')
+const authData = ref({})
+const access_token = ref('')
+
+let init = false
 
 export function useUser() {
+  if (!init) {
+    onMounted(async () => {
+      await refreshToken()
+      await userRead()
+    })
+    init = true
+  }
 
-  onMounted(async () => {
-    // await userDB.refresh()
-    // await userRead()
-  })
 
   return {
-    auth,
+    access_token,
+    email,
+    password,
+    authData,
     user,
     userDB,
     userCreate,
-    userRead
+    userRead,
+    refreshToken,
+    submitLogin,
+    logoutUser
   }
 }
 
-async function userRead() {
-  user.value = await userDB.request(readMe())
-  return user.value
+
+
+async function refreshToken() {
+  try {
+    let data = await userDB.refresh()
+    access_token.value = data.access_token
+    delete data.access_token
+    authData.value = data
+  } catch (e) {
+    console.log(e.errors[0])
+  }
+}
+
+async function submitLogin() {
+  try {
+    let data = await userDB.login(email.value, password.value)
+    access_token.value = data.access_token
+    delete data.access_token
+    authData.value = { ...data }
+  } catch (e) {
+    console.log(e.errors[0])
+  }
 }
 
-async function userCreate({ email }) {
-  await userDB.request(inviteUser(email, '8c5fd718-323c-4616-ae90-dd28c522cdbd'))
 
-  // await userDB.request(createUser({
-  //   email,
-  //   password,
-  //   first_name: name,
-  //   role: '8c5fd718-323c-4616-ae90-dd28c522cdbd'
-  // }))
+async function userRead() {
+  try {
+    user.value = await userDB.request(readMe())
+    user.value.players = await userDB.request(readItems('players', {
+      fields: ['*', { synths: ['*', { synths_id: ['*'] }] }]
+    }))
+    return user.value
+  } catch (e) {
+    console.log(e)
+  }
+}
 
-  // auth.value = await userDB.login(email, password)
+async function userCreate({ email }) {
 
   // user.value = await userDB.request(readMe())
   // return user.value
@@ -57,4 +103,11 @@ export async function useUserItems(collection, query) {
   } catch (e) {
     console.log(e)
   }
+}
+
+
+async function logoutUser() {
+  await userDB.logout()
+  access_token.value = ''
+  authData.value = ''
 }

package.json

@@ -20,7 +20,7 @@
 	"dependencies": {
 		"@unocss/reset": "0.56.5",
 		"@vueuse/core": "10.5.0",
-		"vue": "3.3.4",
+		"vue": "3.3.5",
 		"webmidi": "3.1.6"
 	},
 	"devDependencies": {