login page

src/apuntes/LoginView.vue

@@ -0,0 +1,32 @@
+<template>
+    <h1 class="text-3xl font-bold underline">
+      Login Page Gooooo
+    </h1>
+    <router-link to="/about">Go to About</router-link>
+  </template>
+
+<script setup>
+import { useCounterStore } from '@/stores/counter'
+import { computed, ref } from 'vue'
+
+// access the `store` variable anywhere in the component ✨
+const storeCounter = useCounterStore()
+
+let count = ref(0)
+
+console.log(storeCounter.count) // 0
+
+storeCounter.increment()
+console.log(storeCounter.count) // 1
+
+count = computed(() => storeCounter.doubleCount)
+console.log(count.value) // 2
+console.log(storeCounter.count) // 1
+
+storeCounter.changeCount(19)
+console.log(storeCounter.count) // 10
+
+storeCounter.count = computed(() => storeCounter.doubleCount)
+console.log(storeCounter.count) // 20 */
+
+</script>

src/views/LoginView.vue

@@ -1,9 +1,41 @@
-<template>
+<!-- <template>
     <h1 class="text-3xl font-bold underline">
       Login Page Gooooo
     </h1>
     <router-link to="/about">Go to About</router-link>
-  </template>
+  </template> -->
+  <template>
+    <!--  https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
+  <div class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950">
+	<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md">
+		<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">Welcome Back!</h1>
+		<form action="#">
+			<div class="mb-4">
+				<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
+				<input type="email" id="email" class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="your@email.com" required>
+			</div>
+			<div class="mb-4">
+				<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
+				<input type="password" id="password" class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter your password" required>
+				<a href="#"
+					class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Forgot
+					Password?</a>
+			</div>
+			<div class="flex items-center justify-between mb-4">
+				<div class="flex items-center">
+					<input type="checkbox" id="remember" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:outline-none" checked>
+					<label for="remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
+				</div>
+				<a href="#"
+					class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Create
+					Account</a>
+			</div>
+			<button onclick="alert('hello')" type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
+		</form>
+	</div>
+</div>
+</template>
+
 
 <script setup>
 import { useCounterStore } from '@/stores/counter'