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,33 +1,46 @@
 <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">
+		<el-card>
+			<div
+				class="mx-auto my-4 flex h-80 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" />
+					<el-input
+						v-model="credential.email"
+						placeholder="Username"
+						clearable
+						class="h-12" />
 				</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" />
+					<el-input
+						v-model="credential.password"
+						type="password"
+						placeholder="Password"
+						show-password
+						class="h-12" />
 				</div>
-            <p class="cursor-pointer text-blue-500 underline" @click="toggleSignup()">
+				<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
+				<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>