Convert login form to use element plus

app.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+toggleDark(true)
+</script>
+
+<template>
+	<div>
+		<NuxtLayout>
+			<NuxtPage />
+		</NuxtLayout>
+	</div>
+</template>

pages/login/index.vue

@@ -1,44 +1,57 @@
 <template>
-    <App>
+	<App>
-        <Header />
+		<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">
+		<el-card>
-            <div class="flex w-full flex-col gap-2">
+			<div
-                <label class="w-full text-[#b3b3b3]"> Email </label>
+				class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
-                <input type="text"
+				<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]"> Email </label>
-                    v-model="credential.email" placeholder="username" />
+					<el-input
-            </div>
+						v-model="credential.email"
-            <div class="flex w-full flex-col gap-2">
+						placeholder="Username"
-                <label class="w-full text-[#b3b3b3]"> Password </label>
+						clearable
-                <input type="password"
+						class="h-12" />
-                    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.password" placeholder="password" />
+				<div class="flex w-full flex-col gap-2">
-            </div>
+					<label class="w-full text-[#b3b3b3]"> Password </label>
-            <p class="cursor-pointer text-blue-500 underline" @click="toggleSignup()">
+					<el-input
-                {{
+						v-model="credential.password"
-                    isSignup
+						type="password"
-                    ? 'Already have an account? Login'
+						placeholder="Password"
-                    : "Don't have an account? Sign up"
+						show-password
-                }}
+						class="h-12" />
-            </p>
+				</div>
-            <button class="w-fit rounded-lg bg-blue-500 py-4 px-8" v-on="isSignup
+				<p
-                        ? { click: () => signUp() }
+					class="cursor-pointer text-blue-500 underline"
-                        : { click: () => signIn() }
+					@click="toggleSignup()">
-                    ">
+					{{
-                {{ isSignup ? 'Sign Up' : 'Login' }}
+						isSignup
-            </button>
+							? 'Already have an account? Login'
-        </div>
+							: "Don't have an account? Sign up"
-    </App>
+					}}
+				</p>
+				<button
+					class="w-fit rounded-lg bg-blue-500 px-8 py-4"
+					v-on="
+						isSignup
+							? { click: () => signUp() }
+							: { click: () => signIn() }
+					">
+					{{ isSignup ? 'Sign Up' : 'Login' }}
+				</button>
+			</div>
+		</el-card>
+	</App>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
-    middleware: ['auth'],
+	middleware: ['auth'],
 })
 
 const credential = reactive({
-    email: '',
+	email: '',
-    password: '',
+	password: '',
 })
 
 const router = useRouter()
@@ -46,27 +59,27 @@ const user = useSupabaseUser()
 const isSignup = ref<Boolean>(false)
 
 const toggleSignup = () => {
-    isSignup.value = !isSignup.value
+	isSignup.value = !isSignup.value
 }
 
 const signUp = async () => {
-    const error = userSignUp(credential.email, credential.password)
+	const error = userSignUp(credential.email, credential.password)
 
-    console.log('error', error)
+	console.log('error', error)
 }
 
 const signIn = async () => {
-    const error = userSignIn(credential.email, credential.password)
+	const error = userSignIn(credential.email, credential.password)
 
-    console.log('error', error)
+	console.log('error', error)
 }
 
 watch(
-    () => user.value,
+	() => user.value,
-    () => {
+	() => {
-        if (user.value) {
+		if (user.value) {
-            router.push('/notes')
+			router.push('/notes')
-        }
+		}
-    }
+	}
 )
 </script>