components/card/Auth.vue

@@ -0,0 +1,78 @@
+<template>
+	<div
+		class="bg-secondary mx-auto mt-12 flex h-96 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
+		<div class="flex w-full flex-col gap-2">
+			<label> Email </label>
+			<input
+				type="text"
+				v-model="credential.email"
+				placeholder="username" />
+		</div>
+		<div class="flex w-full flex-col gap-2">
+			<label> Password </label>
+			<input
+				type="password"
+				v-model="credential.password"
+				placeholder="password" />
+		</div>
+		<p
+			v-if="mode === 'login'"
+			class="cursor-pointer text-blue-500 underline">
+			Don't have an account? Sign up
+		</p>
+		<p
+			v-if="mode === 'signup'"
+			class="cursor-pointer text-blue-500 underline">
+			Already have an account? Login
+		</p>
+		<button
+			v-on="
+				mode === 'login'
+					? { click: () => signIn($event) }
+					: { click: () => signUp($event) }
+			">
+			{{ mode === 'login' ? 'Login' : 'Sign Up' }}
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	interface Props {
+		mode: 'login' | 'signup'
+	}
+
+	interface Credential {
+		email: string
+		password: string
+		name?: string
+	}
+
+	const credential: Credential = reactive({
+		email: '',
+		password: '',
+	})
+
+	const props = withDefaults(defineProps<Props>(), {
+		mode: 'login',
+	})
+
+	const supabase = useSupabaseAuthClient()
+
+	const signUp = async (event: Event) => {
+		const { data: user, error } = await supabase.auth.signUp({
+			email: credential.email,
+			password: credential.password,
+		})
+		console.log('user', user)
+		console.log('error', error)
+	}
+
+	const signIn = async (event: Event) => {
+		const { data: user, error } = await supabase.auth.signInWithPassword({
+			email: credential.email,
+			password: credential.password,
+		})
+		console.log('user', user)
+		console.log('error', error)
+	}
+</script>

components/element/TextArea.client.vue

@@ -0,0 +1,31 @@
+<template>
+	<textarea
+		class="bg-secondary w-full max-w-2xl resize-none border-none outline-none placeholder:text-zinc-700 focus:outline-none"
+		v-model="data"
+		:rows="props.row"
+		:placeholder="props.placeholder"
+		@input="updateData()">
+	</textarea>
+</template>
+
+<script setup lang="ts">
+	interface Props {
+		modelValue: string
+		placeholder?: string
+		row?: number
+	}
+
+	const props = defineProps<Props>()
+	const emit = defineEmits(['update:modelValue'])
+
+	const data = ref<string>(props.modelValue)
+
+	const updateData = () => {
+		emit('update:modelValue', data.value)
+	}
+
+	watch(
+		() => props.modelValue,
+		() => (data.value = props.modelValue)
+	)
+</script>

pages/notes/[id].vue

@@ -1,22 +1,33 @@
 <template>
-    <NuxtLayout name="edit">
+	<NuxtLayout
+		name="edit"
+		@keydown.ctrl.s.prevent="submit(note)">
 		<template #content>
 			<div class="sticky top-0 flex w-full justify-between">
-                <div @click="toggleComp('text')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
+				<div
+					@click="toggleComp('text')"
+					class="bg-lightgray w-1/2 p-2 text-center text-xl"
 					:class="{ 'bg-secondary': comp === 'text' }">
 					Text
 				</div>
-                <div @click="toggleComp('md')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
+				<div
+					@click="toggleComp('md')"
+					class="bg-lightgray w-1/2 p-2 text-center text-xl"
 					:class="{ 'bg-secondary': comp === 'md' }">
 					Markdown
 				</div>
 			</div>
 			<div class="flex h-full w-full flex-col">
-                <textarea ref="noteTextArea" v-show="comp === 'text'"
+				<textarea
+					ref="noteTextArea"
+					v-show="comp === 'text'"
 					class="bg-secondary min-h-screen w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
-                    v-model="input" @change="submit()">
+					v-model="input">
 				</textarea>
-                <CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
+				<CardMarkdownRenderer
+					v-show="comp === 'md'"
+					:content="note.description"
+					:state="'description'" />
 			</div>
 		</template>
 	</NuxtLayout>
@@ -27,7 +38,7 @@ definePageMeta({
 		middleware: ['auth'],
 	})
 
-type Mode = 'text' | 'md'
+	type Comp = 'text' | 'md'
 
 	const note = useNote()
 	const route = useRoute()
@@ -35,10 +46,11 @@ const router = useRouter()
 	const isLoading = ref<Boolean>(false)
 	const isSubmitting = ref<Boolean>(false)
 	const isDeleting = ref<Boolean>(false)
-const comp = ref<Mode>('text')
+	const comp = ref<Comp>('text')
+	const description = useDescription()
 	const { textarea: noteTextArea, input } = useTextareaAutosize()
 
-const toggleComp = (name: Mode) => {
+	const toggleComp = (name: Comp) => {
 		comp.value = name
 	}
 
@@ -56,21 +68,15 @@ const { refresh } = await useFetch('/api/note', {
 			}
 			note.value.title = response._data.note.title
 			note.value.description = response._data.note.description
+			description.value = note.value.description
 			input.value = note.value.description
 		},
 	})
 
-const submitTimeout = ref()
+	const submit = async (note: Note) => {
-
-const submit = async () => {
 		isSubmitting.value = true
-
+		await submitNote(note, { id: route.params.id })
-    if (submitTimeout.value) clearTimeout(submitTimeout.value)
-
-    submitTimeout.value = setTimeout(async () => {
-        await submitNote(note.value, { id: route.params.id })
 		isSubmitting.value = false
-    }, 1000)
 	}
 
 	const deleteNote = async () => {
@@ -95,9 +101,10 @@ onMounted(() => {
 	})
 
 	watch(
-    () => input.value,
+		() => note.value.description,
 		() => {
-        note.value.description = input.value
+			description.value = note.value.description
+			input.value = note.value.description
 		}
 	)
 </script>

server/api/note.get.ts

@@ -1,12 +1,8 @@
-import {
+import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
-    serverSupabaseUser,
-    serverSupabaseClient,
-    serverSupabaseServiceRole,
-} from '#supabase/server'
 
 export default defineEventHandler(async (event) => {
     const user = await serverSupabaseUser(event)
-    const supabase = serverSupabaseServiceRole(event)
+    const supabase = serverSupabaseClient(event)
     const query = getQuery(event)
 
     if (!user) {

server/api/note.post.ts

@@ -1,8 +1,8 @@
-import { serverSupabaseUser, serverSupabaseServiceRole } from '#supabase/server'
+import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
 
-export default defineEventHandler(async (event) => {
+export default defineEventHandler(async (event): Promise<ApiResponse> => {
     const user = await serverSupabaseUser(event)
-    const supabase = serverSupabaseServiceRole(event)
+    const supabase = serverSupabaseClient(event)
     const query = getQuery(event)
     const body = await readBody(event)
 

server/api/note/new.ts

@@ -1,8 +1,8 @@
-import { serverSupabaseUser, serverSupabaseServiceRole } from '#supabase/server'
+import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
 
 export default defineEventHandler(async (event) => {
     const user = await serverSupabaseUser(event)
-    const supabase = serverSupabaseServiceRole(event)
+    const supabase = serverSupabaseClient(event)
 
     if (!user) {
         throw createError({ statusCode: 401, message: 'Unauthorized' })