Format nuxt.config.ts

nuxt.config.ts

@@ -57,4 +57,5 @@ export default defineNuxtConfig({
         key: process.env.SUPABASE_KEY,
         serviceKey: process.env.SUPABASE_SERVICE_KEY,
     },
+    ssr: false,
 })

pages/login/index.vue

@@ -1,43 +1,31 @@
 <template>
     <App>
         <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">
                 <label class="w-full text-[#b3b3b3]"> Email </label>
-				<input
+                <input type="text"
-					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"
+                    v-model="credential.email" placeholder="username" />
-					placeholder="username" />
             </div>
             <div class="flex w-full flex-col gap-2">
                 <label class="w-full text-[#b3b3b3]"> Password </label>
-				<input
+                <input type="password"
-					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"
+                    v-model="credential.password" placeholder="password" />
-					placeholder="password" />
             </div>
-			<p
+            <p class="cursor-pointer text-blue-500 underline" @click="toggleSignup()">
-				class="cursor-pointer text-blue-500 underline"
-				@click="
-					mode === 'login' ? (mode = 'signup') : (mode = 'login')
-				">
                 {{
-					mode === 'login'
+                    isSignup
-						? "Don't have an account? Sign up"
+                    ? 'Already have an account? Login'
-						: 'Already have an account? Login'
+                    : "Don't have an account? Sign up"
                 }}
             </p>
-			<button
+            <button class="w-fit rounded-lg bg-blue-500 py-4 px-8" v-on="isSignup
-				class="w-fit rounded-lg bg-blue-500 py-4 px-8"
+                        ? { click: () => signUp() }
-				v-on="
+                        : { click: () => signIn() }
-					mode === 'login'
-						? { click: () => signIn($event) }
-						: { click: () => signUp($event) }
                     ">
-				{{ mode === 'login' ? 'Login' : 'Sign Up' }}
+                {{ isSignup ? 'Sign Up' : 'Login' }}
             </button>
         </div>
     </App>
@@ -48,41 +36,37 @@
     middleware: ['auth'],
 })
 
-	interface Credential {
+const credential = reactive({
-		email: string
-		password: string
-	}
-
-	type Mode = 'login' | 'signup'
-
-	const credential: Credential = reactive({
     email: '',
     password: '',
 })
 
 const router = useRouter()
-	const supabase = useSupabaseAuthClient()
 const user = useSupabaseUser()
-	const mode = ref<Mode>('login')
+const isSignup = ref<Boolean>(false)
 
-	watch(
+const toggleSignup = () => {
-		() => user.value,
+    isSignup.value = !isSignup.value
-		() => {
-			if (user.value) {
-				router.push('/notes')
-			}
 }
-	)
 
-	const signUp = async (event: Event) => {
+const signUp = async () => {
     const error = userSignUp(credential.email, credential.password)
 
     console.log('error', error)
 }
 
-	const signIn = async (event: Event) => {
+const signIn = async () => {
     const error = userSignIn(credential.email, credential.password)
 
     console.log('error', error)
 }
+
+watch(
+    () => user.value,
+    () => {
+        if (user.value) {
+            router.push('/notes')
+        }
+    }
+)
 </script>