Compare commits

...

4 Commits

Author SHA1 Message Date
adityaalfarison
d58368389e Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production 2025-09-03 11:49:20 +07:00
adityaalfarison
bdf3a72c15 Login Page, Input password field 2025-09-03 11:49:06 +07:00
adityaalfarison
396baa6444 Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production 2025-09-03 09:59:57 +07:00
adityaalfarison
4755dc66fc Halaman Login 2025-09-03 09:59:31 +07:00
4 changed files with 101 additions and 3 deletions

View File

@ -0,0 +1,46 @@
<template>
<div class="relative mb-8">
<input
:type="showPassword ? 'text' : 'password'"
:value="modelValue"
:placeholder="placeholder"
@input="$emit('update:modelValue', $event.target.value)"
class="mt-1 block w-full rounded-md shadow-sm sm:text-sm
bg-A text-D border-B focus:border-C
focus:ring focus:ring-D focus:ring-opacity-50 p-2 pr-10"
/>
<!-- Tombol show/hide password -->
<button
type="button"
@click="togglePassword"
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700 focus:outline-none"
>
<i v-if="showPassword" class="fas fa-eye"></i>
<i v-else class="fas fa-eye-slash"></i>
</button>
</div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
modelValue: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "Password",
},
});
const emit = defineEmits(["update:modelValue"]);
const showPassword = ref(false);
const togglePassword = () => {
showPassword.value = !showPassword.value;
};
</script>

View File

@ -6,7 +6,6 @@
:product="createdProduct"
@close="closeItemModal"
/>
<div class="p-6">
<p class="font-serif italic text-[25px] text-D">Produk Baru</p>
@ -130,6 +129,7 @@ import mainLayout from "../layouts/mainLayout.vue";
import InputField from "../components/InputField.vue";
import InputSelect from "../components/InputSelect.vue";
import CreateItemModal from "../components/CreateItemModal.vue";
import Struk from "../components/Struk.vue";
const router = useRouter();

View File

@ -0,0 +1,48 @@
<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-34 py-5">
</div>
<!-- Input -->
<div>
<InputField v-model="username" type="text" placeholder="Username"class="mb-4"/>
<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>

View File

@ -8,14 +8,18 @@ import InputProduk from '../pages/InputProduk.vue'
import Kategori from '../pages/Kategori.vue'
import Sales from '../pages/Sales.vue'
import EditProduk from '../pages/EditProduk.vue'
import Login from '../pages/Login.vue'
import Akun from '../pages/Akun.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
name: 'Login',
component: Login
},
{
path: '/produk',