|
|
@@ -0,0 +1,59 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen flex items-center justify-center bg-gray-100">
|
|
|
+ <div class="bg-gray-200 p-8 rounded-lg w-full max-w-md shadow-lg">
|
|
|
+ <h2 class="text-2xl font-bold text-gray-700 mb-6 text-center">Login</h2>
|
|
|
+ <form @submit.prevent="handleSubmit">
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="username" class="block text-gray-700 text-sm font-bold mb-2">Username</label>
|
|
|
+ <input v-model="username" id="username" type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter username" autofocus>
|
|
|
+ </div>
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
|
|
|
+ <input v-model="password" id="password" :type="showPassword ? 'text' : 'password'" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter password">
|
|
|
+ <button type="button" @click="toggleShowPassword" class="absolute right-0 top-0 mt-3 mr-3 text-gray-600">
|
|
|
+ {{ showPassword ? 'Hide' : 'Show' }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="mb-6">
|
|
|
+ <label class="inline-flex items-center">
|
|
|
+ <input v-model="rememberMe" type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
|
|
|
+ <span class="ml-2 text-gray-700 text-sm">Remember Me</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <button type="submit" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
|
|
+ Login
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ rememberMe: false,
|
|
|
+ showPassword: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleShowPassword() {
|
|
|
+ this.showPassword = !this.showPassword;
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ // Add login logic here
|
|
|
+ console.log('Username:', this.username);
|
|
|
+ console.log('Password:', this.password);
|
|
|
+ console.log('Remember Me:', this.rememberMe);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add any additional styles here if needed */
|
|
|
+</style>
|
genlitex