|
|
@@ -0,0 +1,72 @@
|
|
|
+<template>
|
|
|
+ <div class="flex items-center justify-center min-h-screen bg-gray-200">
|
|
|
+ <div class="bg-gray-100 p-8 rounded-lg shadow-md w-96">
|
|
|
+ <h2 class="text-2xl font-bold text-gray-700 mb-6 text-center">User Stories Generator</h2>
|
|
|
+ <form @submit.prevent="login">
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="username" class="block text-gray-700 text-sm font-bold mb-2">用户名</label>
|
|
|
+ <input
|
|
|
+ v-model="username"
|
|
|
+ type="text"
|
|
|
+ id="username"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="password" class="block text-gray-700 text-sm font-bold mb-2">密码</label>
|
|
|
+ <input
|
|
|
+ v-model="password"
|
|
|
+ type="password"
|
|
|
+ id="password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="mb-4">
|
|
|
+ <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">忘记我</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"
|
|
|
+ >
|
|
|
+ 登录
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+const username = ref('')
|
|
|
+const password = ref('')
|
|
|
+const rememberMe = ref(false)
|
|
|
+
|
|
|
+const login = () => {
|
|
|
+ // Simple validation for demonstration purposes
|
|
|
+ if (username.value && password.value) {
|
|
|
+ // Redirect to home page on successful login
|
|
|
+ router.push({ name: 'home' })
|
|
|
+ } else {
|
|
|
+ alert('请输入用户名和密码')
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Additional styles can be added here if needed */
|
|
|
+</style>
|
genlitex