feat : slicing login page
This commit is contained in:
Yusron alamsyah
+74
-70
@@ -1,80 +1,84 @@
|
||||
<template>
|
||||
<div class="authentication auth-bg">
|
||||
<v-container class="pa-3 auth-login">
|
||||
<v-row class="h-100vh d-flex justify-center align-center">
|
||||
<v-col cols="12" class="d-flex align-center">
|
||||
<v-card rounded="md" elevation="10" class="mx-auto">
|
||||
<div class="pa-3">
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="border-e px-md-12 px-6 py-md-12 py-6"
|
||||
>
|
||||
<div class="d-flex"><LayoutFullLogo /></div>
|
||||
<h2 class="text-34 my-6">Let's get you signed in two</h2>
|
||||
<AuthBoxedLoginForm />
|
||||
<h6
|
||||
class="text-16 text-medium-emphasis d-flex align-center mt-6"
|
||||
>
|
||||
Don’t have an account yet?
|
||||
<v-btn
|
||||
class="pl-0 text-primary text-16 opacity-1 pl-2"
|
||||
height="auto"
|
||||
to="/auth/register2"
|
||||
variant="plain"
|
||||
>Sign Up Now</v-btn
|
||||
>
|
||||
</h6>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-md-flex d-none">
|
||||
<div
|
||||
class="d-flex flex-column justify-center px-md-12 px-6 h-100 align-center"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src="@/assets/images/backgrounds/login-side.png"
|
||||
alt="matdash-img"
|
||||
width="300"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<v-carousel
|
||||
:continuous="false"
|
||||
:show-arrows="false"
|
||||
cycle
|
||||
height="200"
|
||||
hide-delimiter-background
|
||||
class="text-center mt-4"
|
||||
>
|
||||
<v-carousel-item
|
||||
v-for="item in AuthCuroselData"
|
||||
:key="item.title"
|
||||
>
|
||||
<h3 class="text-h3 mb-4">{{ item.title }}</h3>
|
||||
<p class="textSecondary text-body-1">
|
||||
{{ item.subtitle }}
|
||||
</p>
|
||||
<v-btn color="primary" class="mt-4" flat
|
||||
>Learn More</v-btn
|
||||
>
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<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-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</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 { AuthCuroselData } from "@/_mockApis/components/pages/auth";
|
||||
/*-For Set Blank Layout-*/
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user