49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex items-center justify-center min-h-screen bg-[#0c4b66]">
|
|
<div class="bg-white p-8 rounded-2xl shadow-xl w-80 text-center">
|
|
<!-- Logo + Title -->
|
|
<div class="mb-6">
|
|
<img :src="logo" alt="Logo" class="mx-auto w-24">
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div>
|
|
<InputField v-model="username" type="text" placeholder="Username" />
|
|
<PasswordInput v-model="password" placeholder="Password" />
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<button
|
|
@click="handleLogin"
|
|
class="w-full py-2 bg-sky-400 hover:bg-sky-500 rounded font-bold text-gray-800 transition"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import logo from '@/../images/logo.png'
|
|
import InputField from "@/components/InputField.vue";
|
|
const username = ref("");
|
|
const password = ref("");
|
|
import PasswordInput from "@/components/InputPassword.vue";
|
|
// import { ref } from "vue";
|
|
|
|
// const username = ref("");
|
|
// const password = ref("");
|
|
|
|
// const handleLogin = () => {
|
|
// if (!username.value || !password.value) {
|
|
// alert("Harap isi username dan password!");
|
|
// return;
|
|
// }
|
|
// // Contoh: panggil API login
|
|
// console.log("Login dengan:", username.value, password.value);
|
|
// };
|
|
</script>
|