prototype_design/src/views/LoginView.vue

<template>
  <div class="login-container">
    <a-form :model="formState" :rules="rules" @submit.prevent="handleLogin">
      <a-form-item prop="username">
        <a-input v-model:value="formState.username" placeholder="Username" />
      </a-form-item>
      <a-form-item prop="password">
        <a-input-password v-model:value="formState.password" placeholder="Password" />
      </a-form-item>
      <a-form-item>
        <a-checkbox v-model:checked="formState.rememberMe">Remember me</a-checkbox>
      </a-form-item>
      <a-button type="primary" html-type="submit" class="login-button">
        Login
      </a-button>
    </a-form>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { notification } from 'ant-design-vue';

export default {
  name: 'LoginView',
  setup() {
    const router = useRouter();
    const formState = reactive({
      username: 'admin',
      password: 'admin123',
      rememberMe: false,
    });

    const rules = {
      username: [
        { required: true, message: 'Please input your username!', trigger: 'blur' },
        { min: 4, max: 16, message: 'Length should be 4-16 characters', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9]+$/, message: 'Special characters are not allowed', trigger: 'blur' },
      ],
      password: [
        { required: true, message: 'Please input your password!', trigger: 'blur' },
        { min: 6, max: 20, message: 'Length should be 6-20 characters', trigger: 'blur' },
      ],
    };

    const handleLogin = () => {
      if (formState.username === 'admin' && formState.password === 'admin123') {
        router.push('/');
        if (formState.rememberMe) {
          localStorage.setItem('rememberMe', true);
        }
      } else {
        notification.error({
          message: 'Error',
          description: 'Username or password is incorrect.',
        });
      }
    };

    return {
      formState,
      rules,
      handleLogin,
    };
  },
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5; /* Added background color */
  padding: 20px; /* Added padding */
}
.login-button {
  margin-top: 24px;
}
.login-form {
  background-color: white; /* Added form background color */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
  padding: 20px; /* Padding inside the form */
}
.login-input {
  margin-bottom: 10px; /* Spacing between inputs */
}
.login-label {
  font-weight: bold; /* Bold labels */
}
.login-error {
  color: red; /* Error messages in red */
  margin-top: 10px; /* Space above error messages */
}

.login-button {
  margin-top: 24px;
}
</style>