zbytest003-2025-02-17 08:25:57

src/router/index.js

@@ -1,6 +1,6 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
-import LoginView from '../views/LoginView.vue';
+import Login from '../views/Login.vue';
 
 const routes = [
   {
@@ -10,14 +10,14 @@ const routes = [
   },
   {
     path: '/login',
-    name: 'login',
-    component: LoginView
+    name: 'Login',
+    component: Login
   }
-]
+];
 
 const router = createRouter({
   history: createWebHashHistory(location.pathname),
   routes
-})
+});
 
-export default router
+export default router;

src/views/Login.vue

@@ -1,87 +1,92 @@
 <template>
   <div class="login-container">
     <h2>Login</h2>
-    <form @submit.prevent="handleSubmit">
-      <div>
-        <label for="account">Account:</label>
-        <input id="account" v-model="account" type="text" placeholder="Enter admin" required>
-      </div>
-      <div>
-        <label for="password">Password:</label>
-        <input id="password" v-model="password" type="password" placeholder="Enter admin" required>
-      </div>
-      <div>
-        <label for="rememberMe">Remember Me:</label>
-        <input id="rememberMe" v-model="rememberMe" type="checkbox">
-      </div>
+    <form @submit.prevent="handleLogin">
+      <label for="username">Username:</label>
+      <input id="username" v-model.trim="username" type="text" placeholder="Enter username" :class="{ 'has-error': errors.username }">
+      <small v-if="errors.username">{{ errors.username }}</small>
+
+      <label for="password">Password:</label>
+      <input id="password" v-model.trim="password" type="password" placeholder="Enter password" :class="{ 'has-error': errors.password }">
+      <small v-if="errors.password">{{ errors.password }}</small>
+
+      <label><input type="checkbox" v-model="rememberMe"> Remember me</label>
+
       <button type="submit">Login</button>
     </form>
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      account: 'admin',
-      password: 'admin',
-      rememberMe: false,
-    };
-  },
-  methods: {
-    handleSubmit() {
-      if (this.account !== 'admin') {
-        alert('Invalid account');
-        return;
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const router = useRouter();
+
+const username = ref('admin');
+const password = ref('admin');
+const rememberMe = ref(false);
+const errors = ref({});
+
+onMounted(() => {
+  if (localStorage.getItem('rememberMe')) {
+    username.value = localStorage.getItem('username');
+    rememberMe.value = true;
+  }
+});
+
+const handleLogin = () => {
+  errors.value = {};
+
+  if (username.value.length < 4 || username.value.length > 16 || /[^\w\s]/.test(username.value)) {
+    errors.value.username = 'Username must be 4-16 characters and no special characters.';
+  }
+
+  if (password.value.length < 6 || password.value.length > 20) {
+    errors.value.password = 'Password must be 6-20 characters.';
+  }
+
+  if (!errors.value.username && !errors.value.password) {
+    if (username.value === 'admin' && password.value === 'admin') {
+      if (rememberMe.value) {
+        localStorage.setItem('username', username.value);
+        localStorage.setItem('rememberMe', true);
       }
-      // Handle login logic here
-      console.log('Login attempted with account:', this.account);
-    },
-  },
+      router.push('/home');
+    } else {
+      errors.value.general = 'Username or password is incorrect.';
+    }
+  }
 };
 </script>
 
 <style scoped>
 .login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  max-width: 400px;
-  margin: 0 auto;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-.login-container h2 {
-  margin-bottom: 20px;
+  height: 100vh;
 }
 
 .login-container label {
-  display: block;
-  margin-top: 10px;
+  margin-bottom: 0.5rem;
 }
 
-.login-container input[type="text"],
-.login-container input[type="password"] {
+.login-container input {
+  padding: 0.5rem;
+  margin-bottom: 1rem;
   width: 100%;
-  padding: 8px;
-  margin-top: 5px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
 }
 
-.login-container button {
-  width: 100%;
-  padding: 10px;
-  margin-top: 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
+.has-error {
+  border-color: red;
 }
 
-.login-container button:hover {
-  background-color: #0056b3;
+.login-container button {
+  padding: 0.5rem 1rem;
 }
 </style>