Yusron alamsyah
85 lines
3.0 KiB
Vue
85 lines
3.0 KiB
Vue
<template>
|
|
<v-container fluid class="pa-0 fill-height login-page">
|
|
<v-row no-gutters class="fill-height w-100">
|
|
<v-col cols="12" md="6" class="d-flex align-center justify-center login-form-panel">
|
|
<div class="w-100 login-form-wrap">
|
|
<div class="d-flex align-center mb-10">
|
|
<img :src="Logoimg" alt="home" width="200" />
|
|
</div>
|
|
|
|
<h1 class="text-h3 font-weight-bold text-grey-darken-4 mb-2">Selamat Datang</h1>
|
|
<p class="text-body-1 text-grey mb-7">
|
|
Silakan masuk dengan akun yang telah terdaftar
|
|
</p>
|
|
|
|
<v-btn block color="primary" size="large" rounded="pill" class="text-none mb-7 btn-login"
|
|
@click="loginWithKeycloak">
|
|
<v-icon size="16" class="mr-2">mdi-key-variant</v-icon>
|
|
Masuk dengan Keycloak
|
|
</v-btn>
|
|
|
|
<div class="d-flex align-center mb-7">
|
|
<v-divider />
|
|
<div class="mx-3 text-caption text-medium-emphasis width-100">Atau</div>
|
|
<v-divider />
|
|
</div>
|
|
|
|
<v-form>
|
|
<label class="text-subtitle-2 text-grey-darken-1 mb-2 d-inline-block">Email </label>
|
|
<v-text-field v-model="email" placeholder="Masukkan email" density="comfortable" variant="outlined"
|
|
rounded="pill" hide-details class="mb-5" />
|
|
|
|
<div class="d-flex align-center justify-space-between mb-2">
|
|
<label class="text-subtitle-2 text-grey-darken-1">Password</label>
|
|
</div>
|
|
<v-text-field v-model="password" type="password" placeholder="Masukkan password" density="comfortable"
|
|
variant="outlined" rounded="pill" hide-details class="mb-6" />
|
|
<v-btn block color="primary" size="large" rounded="pill" variant="tonal" class="text-none mb-8 btn-login"
|
|
@click="loginWithKeycloak">
|
|
Masuk
|
|
</v-btn>
|
|
</v-form>
|
|
|
|
<p class="text-center text-body-2 text-medium-emphasis mb-0">
|
|
© 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur.
|
|
</p>
|
|
</div>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6" class="d-flex align-center justify-center px-8 px-md-12 right-panel bg-primary">
|
|
<div class="right-panel-content">
|
|
<!-- Background Image -->
|
|
<auth-login-image class="hero-image" />
|
|
|
|
<div class="feature-grid mb-6">
|
|
<div class="feature-pill">
|
|
<v-icon color="white" size="18" class="mr-2">mdi-login</v-icon>
|
|
Integrated with keycloak
|
|
</div>
|
|
<div class="feature-pill">
|
|
<v-icon color="white" size="18" class="mr-2">mdi-lock</v-icon>
|
|
Secure Authentication
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import Logoimg from "/images/logos/logo-farmasi.svg";
|
|
|
|
definePageMeta({
|
|
layout: "blank"
|
|
});
|
|
|
|
const email = ref("");
|
|
const password = ref("");
|
|
|
|
const loginWithKeycloak = () => {
|
|
window.location.href = "/";
|
|
};
|
|
</script>
|