Compare commits
4 Commits
982f99ed7b
...
d58368389e
Author | SHA1 | Date | |
---|---|---|---|
|
d58368389e | ||
|
bdf3a72c15 | ||
|
396baa6444 | ||
|
4755dc66fc |
46
resources/js/components/InputPassword.vue
Normal file
46
resources/js/components/InputPassword.vue
Normal 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>
|
@ -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();
|
||||
|
||||
|
48
resources/js/pages/Login.vue
Normal file
48
resources/js/pages/Login.vue
Normal 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>
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user