Compare commits
2 Commits
e3bfbec53d
...
43a5704043
| Author | SHA1 | Date |
|---|---|---|
 TZGyn
|
43a5704043
|
2 years ago |
|
TZGyn
|
d558cb7e99
|
2 years ago |
@ -1,78 +0,0 @@
|
||||
<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>
|
||||
@ -1,31 +0,0 @@
|
||||
<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>
|
||||
@ -1,110 +1,103 @@
|
||||
<template>
|
||||
<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"
|
||||
:class="{ 'bg-secondary': comp === 'text' }">
|
||||
Text
|
||||
</div>
|
||||
<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'"
|
||||
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">
|
||||
<NuxtLayout name="edit">
|
||||
<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"
|
||||
:class="{ 'bg-secondary': comp === 'text' }">
|
||||
Text
|
||||
</div>
|
||||
<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'"
|
||||
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()">
|
||||
</textarea>
|
||||
<CardMarkdownRenderer
|
||||
v-show="comp === 'md'"
|
||||
:content="note.description"
|
||||
:state="'description'" />
|
||||
</div>
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
<CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
|
||||
</div>
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: ['auth'],
|
||||
})
|
||||
definePageMeta({
|
||||
middleware: ['auth'],
|
||||
})
|
||||
|
||||
type Comp = 'text' | 'md'
|
||||
type Mode = 'text' | 'md'
|
||||
|
||||
const note = useNote()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const isLoading = ref<Boolean>(false)
|
||||
const isSubmitting = ref<Boolean>(false)
|
||||
const isDeleting = ref<Boolean>(false)
|
||||
const comp = ref<Comp>('text')
|
||||
const description = useDescription()
|
||||
const { textarea: noteTextArea, input } = useTextareaAutosize()
|
||||
const note = useNote()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const isLoading = ref<Boolean>(false)
|
||||
const isSubmitting = ref<Boolean>(false)
|
||||
const isDeleting = ref<Boolean>(false)
|
||||
const comp = ref<Mode>('text')
|
||||
const { textarea: noteTextArea, input } = useTextareaAutosize()
|
||||
|
||||
const toggleComp = (name: Comp) => {
|
||||
comp.value = name
|
||||
}
|
||||
const toggleComp = (name: Mode) => {
|
||||
comp.value = name
|
||||
}
|
||||
|
||||
const { refresh } = await useFetch('/api/note', {
|
||||
method: 'GET',
|
||||
query: {
|
||||
id: route.params.id,
|
||||
},
|
||||
onResponse({ response }) {
|
||||
console.log('Response: ', response)
|
||||
if (response.status === 500) {
|
||||
console.log(`Error: ${response._data.message}`)
|
||||
router.push('/notes')
|
||||
return
|
||||
}
|
||||
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 { refresh } = await useFetch('/api/note', {
|
||||
method: 'GET',
|
||||
query: {
|
||||
id: route.params.id,
|
||||
},
|
||||
onResponse({ response }) {
|
||||
console.log('Response: ', response)
|
||||
if (response.status === 500) {
|
||||
console.log(`Error: ${response._data.message}`)
|
||||
router.push('/notes')
|
||||
return
|
||||
}
|
||||
note.value.title = response._data.note.title
|
||||
note.value.description = response._data.note.description
|
||||
input.value = note.value.description
|
||||
},
|
||||
})
|
||||
|
||||
const submit = async (note: Note) => {
|
||||
isSubmitting.value = true
|
||||
await submitNote(note, { id: route.params.id })
|
||||
isSubmitting.value = false
|
||||
}
|
||||
const submitTimeout = ref()
|
||||
|
||||
const deleteNote = async () => {
|
||||
isDeleting.value = true
|
||||
await useFetch('/api/note', {
|
||||
method: 'DELETE',
|
||||
query: {
|
||||
id: route.params.id,
|
||||
},
|
||||
onResponse({ response }) {
|
||||
isDeleting.value = false
|
||||
console.log('DELETE:', response._data.message)
|
||||
router.push('/notes')
|
||||
},
|
||||
})
|
||||
}
|
||||
const submit = async () => {
|
||||
isSubmitting.value = true
|
||||
|
||||
onMounted(() => {
|
||||
isLoading.value = true
|
||||
refresh()
|
||||
isLoading.value = false
|
||||
})
|
||||
if (submitTimeout.value) clearTimeout(submitTimeout.value)
|
||||
|
||||
watch(
|
||||
() => note.value.description,
|
||||
() => {
|
||||
description.value = note.value.description
|
||||
input.value = note.value.description
|
||||
}
|
||||
)
|
||||
submitTimeout.value = setTimeout(async () => {
|
||||
await submitNote(note.value, { id: route.params.id })
|
||||
isSubmitting.value = false
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const deleteNote = async () => {
|
||||
isDeleting.value = true
|
||||
await useFetch('/api/note', {
|
||||
method: 'DELETE',
|
||||
query: {
|
||||
id: route.params.id,
|
||||
},
|
||||
onResponse({ response }) {
|
||||
isDeleting.value = false
|
||||
console.log('DELETE:', response._data.message)
|
||||
router.push('/notes')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
isLoading.value = true
|
||||
refresh()
|
||||
isLoading.value = false
|
||||
})
|
||||
|
||||
watch(
|
||||
() => input.value,
|
||||
() => {
|
||||
note.value.description = input.value
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue