zbytest003-2025-02-20 13:18:06

src/router/index.js

@@ -11,6 +11,11 @@ const routes = [
     path: '/user-story-generator',
     name: 'UserStoryGenerator',
     component: () => import('../views/UserStoryGeneratorView.vue')
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('../views/LoginView.vue')
   }
 ]
 

src/views/LoginView.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="bg-gray-200 p-8 rounded-lg shadow-md w-96">
+      <h2 class="text-2xl font-bold mb-6 text-center">Welcome</h2>
+      <form @submit.prevent="handleLogin">
+        <div class="mb-4">
+          <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
+          <input
+            type="text"
+            id="username"
+            v-model="username"
+            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            required
+          />
+        </div>
+        <div class="mb-4">
+          <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
+          <input
+            :type="showPassword ? 'text' : 'password'"
+            id="password"
+            v-model="password"
+            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            required
+          />
+          <button
+            type="button"
+            @click="toggleShowPassword"
+            class="text-sm text-gray-500 hover:text-gray-700 focus:outline-none"
+          >
+            {{ showPassword ? 'Hide Password' : 'Show Password' }}
+          </button>
+        </div>
+        <div class="mb-4">
+          <label class="inline-flex items-center">
+            <input
+              type="checkbox"
+              v-model="rememberMe"
+              class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
+            />
+            <span class="ml-2 text-sm text-gray-700">Remember me</span>
+          </label>
+        </div>
+        <div>
+          <button
+            type="submit"
+            class="w-full bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline hover:bg-blue-500"
+          >
+            Login
+          </button>
+        </div>
+        <div v-if="error" class="mt-4 text-red-500 text-sm">
+          {{ error }}
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      rememberMe: false,
+      showPassword: false,
+      error: ''
+    };
+  },
+  methods: {
+    toggleShowPassword() {
+      this.showPassword = !this.showPassword;
+    },
+    handleLogin() {
+      // Dummy validation for demonstration purposes
+      if (this.username === 'admin' && this.password === 'password') {
+        this.$router.push({ name: 'Home' });
+      } else {
+        this.error = 'Invalid username or password';
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Additional styles can be added here if needed */
+</style>