Create Vue 3 Login Using Element Plus UI

<template>
    <div class="custom-container">
        <div>
            <h1>Sign In</h1>
            <el-form>
                <el-form-item label="Username">
                    <el-input v-model="username" placeholder="Enter your username"></el-input>
                </el-form-item>
                <el-form-item label="Password">
                    <el-input v-model="password" placeholder="Enter your password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">Login</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            loginError: false,
        };
    },
    methods: {
        login() {
            if (this.username === '' || this.password === '') {
                this.loginError = true;
            } else {
                // Perform login logic here
            }
        },
    },
};

</script>
  
<style scoped>
.custom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
</style>

<template>
    <div class="custom-container">
        <div>
            <h1 class="text-center">Sign In</h1>
            <el-form ref="loginForm" :model="loginData" :rules="loginRules">
                <el-form-item label="Username" prop="username">
                    <el-input v-model="loginData.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Password" prop="password">
                    <el-input v-model="loginData.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">Login</el-button>
                </el-form-item>
            </el-form>
            <el-alert v-if="loginError" title="Invalid login" type="error"
                description="Please check your credentials and try again." />
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue';

interface LoginData {
    username: string;
    password: string;
}

const loginData = ref<LoginData>({
    username: '',
    password: '',
});

const loginRules = {
    username: [{ required: true, message: 'Please enter your username', trigger: 'blur' }],
    password: [{ required: true, message: 'Please enter your password', trigger: 'blur' }],
};

const loginError = ref(false);

const login = () => {
    loginError.value = false;
    (loginForm.value as any).validate((valid: boolean) => {
        if (valid) {
            // Perform login logic here
        } else {
            loginError.value = true;
        }
    });
};
</script>
  
<style scoped>
.custom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
</style>