Compare commits
2 Commits
43a5704043
...
52760dd2a8
| Author | SHA1 | Date |
|---|---|---|
 TZGyn
|
52760dd2a8
|
2 years ago |
|
TZGyn
|
8879b96c18
|
2 years ago |
@ -1,60 +1,61 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@nuxtjs/supabase',
|
||||
'@nuxtjs/tailwindcss',
|
||||
'nuxt-icon',
|
||||
'@pinia/nuxt',
|
||||
'@vueuse/nuxt',
|
||||
'@nuxt/devtools',
|
||||
],
|
||||
app: {
|
||||
pageTransition: false,
|
||||
layoutTransition: false,
|
||||
},
|
||||
alias: {
|
||||
'@logo': '/assets/logo',
|
||||
'@assets': '/assets',
|
||||
'@stores': '/stores',
|
||||
},
|
||||
tailwindcss: {
|
||||
config: {
|
||||
content: [],
|
||||
important: false,
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0c0c0d',
|
||||
secondary: '#18181b',
|
||||
darkgray: '#121213',
|
||||
lightgray: '#27272a',
|
||||
},
|
||||
},
|
||||
// uncomment when syntax highlight
|
||||
// is enable for markdown (highlight.js)
|
||||
// typography: {
|
||||
// default: {
|
||||
// css: {
|
||||
// 'pre': null,
|
||||
// 'code': null,
|
||||
// 'code::before': null,
|
||||
// 'code::after': null,
|
||||
// 'pre code': null,
|
||||
// 'pre code::before': null,
|
||||
// 'pre code::after': null,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
plugins: [require('@tailwindcss/typography')],
|
||||
},
|
||||
},
|
||||
typescript: {
|
||||
strict: true,
|
||||
},
|
||||
supabase: {
|
||||
url: process.env.SUPABASE_URL,
|
||||
key: process.env.SUPABASE_KEY,
|
||||
serviceKey: process.env.SUPABASE_SERVICE_KEY,
|
||||
},
|
||||
modules: [
|
||||
'@nuxtjs/supabase',
|
||||
'@nuxtjs/tailwindcss',
|
||||
'nuxt-icon',
|
||||
'@pinia/nuxt',
|
||||
'@vueuse/nuxt',
|
||||
'@nuxt/devtools',
|
||||
],
|
||||
app: {
|
||||
pageTransition: false,
|
||||
layoutTransition: false,
|
||||
},
|
||||
alias: {
|
||||
'@logo': '/assets/logo',
|
||||
'@assets': '/assets',
|
||||
'@stores': '/stores',
|
||||
},
|
||||
tailwindcss: {
|
||||
config: {
|
||||
content: [],
|
||||
important: false,
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0c0c0d',
|
||||
secondary: '#18181b',
|
||||
darkgray: '#121213',
|
||||
lightgray: '#27272a',
|
||||
},
|
||||
},
|
||||
// uncomment when syntax highlight
|
||||
// is enable for markdown (highlight.js)
|
||||
// typography: {
|
||||
// default: {
|
||||
// css: {
|
||||
// 'pre': null,
|
||||
// 'code': null,
|
||||
// 'code::before': null,
|
||||
// 'code::after': null,
|
||||
// 'pre code': null,
|
||||
// 'pre code::before': null,
|
||||
// 'pre code::after': null,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
plugins: [require('@tailwindcss/typography')],
|
||||
},
|
||||
},
|
||||
typescript: {
|
||||
strict: true,
|
||||
},
|
||||
supabase: {
|
||||
url: process.env.SUPABASE_URL,
|
||||
key: process.env.SUPABASE_KEY,
|
||||
serviceKey: process.env.SUPABASE_SERVICE_KEY,
|
||||
},
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
@ -1,88 +1,72 @@
|
||||
<template>
|
||||
<App>
|
||||
<Header />
|
||||
<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 class="w-full text-[#b3b3b3]"> Email </label>
|
||||
<input
|
||||
type="text"
|
||||
class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
|
||||
v-model="credential.email"
|
||||
placeholder="username" />
|
||||
</div>
|
||||
<div class="flex w-full flex-col gap-2">
|
||||
<label class="w-full text-[#b3b3b3]"> Password </label>
|
||||
<input
|
||||
type="password"
|
||||
class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
|
||||
v-model="credential.password"
|
||||
placeholder="password" />
|
||||
</div>
|
||||
<p
|
||||
class="cursor-pointer text-blue-500 underline"
|
||||
@click="
|
||||
mode === 'login' ? (mode = 'signup') : (mode = 'login')
|
||||
">
|
||||
{{
|
||||
mode === 'login'
|
||||
? "Don't have an account? Sign up"
|
||||
: 'Already have an account? Login'
|
||||
}}
|
||||
</p>
|
||||
<button
|
||||
class="w-fit rounded-lg bg-blue-500 py-4 px-8"
|
||||
v-on="
|
||||
mode === 'login'
|
||||
? { click: () => signIn($event) }
|
||||
: { click: () => signUp($event) }
|
||||
">
|
||||
{{ mode === 'login' ? 'Login' : 'Sign Up' }}
|
||||
</button>
|
||||
</div>
|
||||
</App>
|
||||
<App>
|
||||
<Header />
|
||||
<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 class="w-full text-[#b3b3b3]"> Email </label>
|
||||
<input type="text"
|
||||
class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
|
||||
v-model="credential.email" placeholder="username" />
|
||||
</div>
|
||||
<div class="flex w-full flex-col gap-2">
|
||||
<label class="w-full text-[#b3b3b3]"> Password </label>
|
||||
<input type="password"
|
||||
class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
|
||||
v-model="credential.password" placeholder="password" />
|
||||
</div>
|
||||
<p class="cursor-pointer text-blue-500 underline" @click="toggleSignup()">
|
||||
{{
|
||||
isSignup
|
||||
? 'Already have an account? Login'
|
||||
: "Don't have an account? Sign up"
|
||||
}}
|
||||
</p>
|
||||
<button class="w-fit rounded-lg bg-blue-500 py-4 px-8" v-on="isSignup
|
||||
? { click: () => signUp() }
|
||||
: { click: () => signIn() }
|
||||
">
|
||||
{{ isSignup ? 'Sign Up' : 'Login' }}
|
||||
</button>
|
||||
</div>
|
||||
</App>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: ['auth'],
|
||||
})
|
||||
definePageMeta({
|
||||
middleware: ['auth'],
|
||||
})
|
||||
|
||||
interface Credential {
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
const credential = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
type Mode = 'login' | 'signup'
|
||||
const router = useRouter()
|
||||
const user = useSupabaseUser()
|
||||
const isSignup = ref<Boolean>(false)
|
||||
|
||||
const credential: Credential = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
})
|
||||
const toggleSignup = () => {
|
||||
isSignup.value = !isSignup.value
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const supabase = useSupabaseAuthClient()
|
||||
const user = useSupabaseUser()
|
||||
const mode = ref<Mode>('login')
|
||||
const signUp = async () => {
|
||||
const error = userSignUp(credential.email, credential.password)
|
||||
|
||||
watch(
|
||||
() => user.value,
|
||||
() => {
|
||||
if (user.value) {
|
||||
router.push('/notes')
|
||||
}
|
||||
}
|
||||
)
|
||||
console.log('error', error)
|
||||
}
|
||||
|
||||
const signUp = async (event: Event) => {
|
||||
const error = userSignUp(credential.email, credential.password)
|
||||
const signIn = async () => {
|
||||
const error = userSignIn(credential.email, credential.password)
|
||||
|
||||
console.log('error', error)
|
||||
}
|
||||
console.log('error', error)
|
||||
}
|
||||
|
||||
const signIn = async (event: Event) => {
|
||||
const error = userSignIn(credential.email, credential.password)
|
||||
|
||||
console.log('error', error)
|
||||
}
|
||||
watch(
|
||||
() => user.value,
|
||||
() => {
|
||||
if (user.value) {
|
||||
router.push('/notes')
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue