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