Vuetify

<template>

    <div>

        <v-img class="mx-auto mt-3" max-width="228"

            src="https://penang.uitm.edu.my/images/korporat/Dokumen/LOGO_SAMBUTAN_JUBLI_PERAK_UiTMCPP_25_TAHUN_-_FOR_LIGHT_BACKGROUND.png">

        </v-img>

        <v-card class="mx-auto pa-12 pb-8" elevation="3" max-width="448" rounded="lg">

            <div class="text-subtitle-1 text-medium-emphasis">Account</div>

            <v-text-field density="compact" placeholder="Email address" prepend-inner-icon="mdi-email-outline"

                variant="outlined" v-model="store.login.email">

            </v-text-field>

            <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">

                Password

                <a class="text-caption text-decoration-none text-blue" href="#" rel="noopener noreferrer" target="_blank"> Forgot password? </a>

            </div>

            <v-text-field :append-inner-icon="store.login.visible ? 'mdi-eye-off' : 'mdi-eye'" :type="store.login.visible ? 'text' : 'password'"

                density="compact" placeholder="Enter your password" prepend-inner-icon="mdi-lock-outline" variant="outlined"

                @click:append-inner="store.login.visible = !store.login.visible" v-model="store.login.password">

            </v-text-field>

            <v-btn block color="green-darken-4" size="large" class="mt-5 mb-3" @click.prevent="store.onLogin()">

                Login

            </v-btn>

            <v-card-text class="text-center">

                <a class="text-blue text-decoration-none" href="#" rel="noopener noreferrer" target="_blank" @click.prevent="store.goSignupPage()">

                    Sign up now <v-icon icon="mdi-chevron-right"></v-icon>

                </a>

            </v-card-text>

        </v-card>

    </div>

</template>

<script setup>

    import { useCounterStore } from "../stores/counter"

    const store = useCounterStore()

</script>

  const login = reactive({

    email: 'mnizam@uitm.edu.my',

    password: '1234',

    visible: false,

  })

const onLogin = () => { alert('onLogin')}

const goSignupPage = () => { alert('goSignupPage')}

return { ...ADD, login, onLogin, goSignupPage }