integrate login page wih api and keycloak
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,230 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
|
||||
import UiTableCard from '@/components/shared/UiTableCard.vue';
|
||||
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
|
||||
|
||||
const tableHeaders = [
|
||||
{ title: 'Nama', key: 'name' },
|
||||
{ title: 'Email', key: 'email' },
|
||||
{ title: 'Status', key: 'status' },
|
||||
];
|
||||
const tableItems = [
|
||||
{ name: 'Budi Santoso', email: 'budi@email.com', status: 'Aktif' },
|
||||
{ name: 'Siti Rahayu', email: 'siti@email.com', status: 'Nonaktif' },
|
||||
{ name: 'Ahmad Fauzi', email: 'ahmad@email.com', status: 'Aktif' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- CardHeaderFooter -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="CardHeaderFooter — Card dengan Header dan Footer">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>CardHeaderFooter</strong> adalah card outlined yang menyediakan area
|
||||
<em>header</em> (judul), <em>konten</em> (slot default), dan <em>footer</em> (slot footer)
|
||||
yang dipisahkan oleh garis pembatas.
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul card di bagian header</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>default</code></td><td>Konten utama antara header dan footer</td></tr>
|
||||
<tr><td><code>footer</code></td><td>Konten footer (tombol aksi, info, dsb.)</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ cardHeaderFooterCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo" class="mb-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<CardHeaderFooter title="Form Pendaftaran">
|
||||
<v-text-field label="Nama Lengkap" variant="outlined" density="compact" class="mb-3" />
|
||||
<v-text-field label="Email" variant="outlined" density="compact" />
|
||||
<template #footer>
|
||||
<v-btn color="primary">Simpan</v-btn>
|
||||
<v-btn variant="text" class="ml-2">Batal</v-btn>
|
||||
</template>
|
||||
</CardHeaderFooter>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<CardHeaderFooter title="Konfirmasi Hapus">
|
||||
<v-alert type="warning" variant="tonal" class="mb-0">
|
||||
Apakah Anda yakin ingin menghapus data ini?
|
||||
</v-alert>
|
||||
<template #footer>
|
||||
<v-spacer />
|
||||
<v-btn color="error" class="mr-2">Hapus</v-btn>
|
||||
<v-btn variant="outlined">Batal</v-btn>
|
||||
</template>
|
||||
</CardHeaderFooter>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- UiTableCard -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="UiTableCard — Card Wrapper untuk Tabel">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>UiTableCard</strong> adalah card khusus sebagai wrapper tabel data. Slot
|
||||
<code>default</code> ditempatkan langsung setelah divider (tanpa padding ekstra)
|
||||
agar tabel bisa full-width sesuai card.
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul di atas tabel</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiTableCardCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo" class="mb-6">
|
||||
<UiTableCard title="Daftar Pengguna">
|
||||
<v-data-table
|
||||
:headers="tableHeaders"
|
||||
:items="tableItems"
|
||||
hide-default-footer
|
||||
density="compact"
|
||||
/>
|
||||
</UiTableCard>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- UiParentCardLogo -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="UiParentCardLogo — Card dengan Logo Aplikasi">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>UiParentCardLogo</strong> sama seperti UiParentCard tetapi menampilkan
|
||||
<em>Logo aplikasi</em> (komponen <code>Logo.vue</code>) di header alih-alih teks judul.
|
||||
Cocok digunakan pada halaman auth (login, register, dsb.).
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>default</code></td><td>Konten utama di bawah logo</td></tr>
|
||||
<tr><td><code>action</code></td><td>Aksi di sebelah kanan logo</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiParentCardLogoCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="5">
|
||||
<UiParentCardLogo>
|
||||
<template #action>
|
||||
<v-chip color="primary" size="small">v1.0</v-chip>
|
||||
</template>
|
||||
<p class="text-body-2 text-center mt-2">
|
||||
Silakan masuk untuk melanjutkan. Slot <code>default</code> berisi
|
||||
form login atau konten lainnya.
|
||||
</p>
|
||||
</UiParentCardLogo>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cardHeaderFooterCode: `<template>
|
||||
<CardHeaderFooter title="Form Pendaftaran">
|
||||
<!-- Slot default: konten di antara header & footer -->
|
||||
<v-text-field label="Nama Lengkap" variant="outlined" />
|
||||
<v-text-field label="Email" variant="outlined" />
|
||||
|
||||
<!-- Slot footer: tombol aksi -->
|
||||
<template #footer>
|
||||
<v-btn color="primary">Simpan</v-btn>
|
||||
<v-btn variant="text">Batal</v-btn>
|
||||
</template>
|
||||
</CardHeaderFooter>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
|
||||
<\/script>`,
|
||||
|
||||
uiTableCardCode: `<template>
|
||||
<UiTableCard title="Daftar Pengguna">
|
||||
<!-- Letakkan v-data-table atau v-table langsung sebagai slot default -->
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-default-footer
|
||||
/>
|
||||
</UiTableCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiTableCard from '@/components/shared/UiTableCard.vue';
|
||||
|
||||
const headers = [
|
||||
{ title: 'Nama', key: 'name' },
|
||||
{ title: 'Email', key: 'email' },
|
||||
];
|
||||
const items = [
|
||||
{ name: 'Budi', email: 'budi@email.com' },
|
||||
];
|
||||
<\/script>`,
|
||||
|
||||
uiParentCardLogoCode: `<template>
|
||||
<!-- Cocok untuk halaman auth / landing -->
|
||||
<UiParentCardLogo>
|
||||
<template #action>
|
||||
<v-chip color="primary" size="small">v1.0</v-chip>
|
||||
</template>
|
||||
|
||||
<!-- Konten form login/register di sini -->
|
||||
<LoginForm />
|
||||
</UiParentCardLogo>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user