Refactor login index.vue

pages/login/index.vue

@@ -1,88 +1,72 @@
 <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>
 
 <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>