Skip to content

dtd / civitas.ui

Go to a project
Commit 191af21b by Nabiilah Putri Safa
Options

add login-v6

1 parent 35b12bcc
Inline Side-by-side
Showing with 185 additions and 324 deletions
pages/login-v6.vue 0 → 100644
<script setup lang="ts">
import { VForm } from 'vuetify/components/VForm'
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
import authV2MaskLight from '@images/pages/mask-v2-light.png'
import { useKeycloakStore } from "@/@core/stores/keycloakStore"
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
import authLoginLogo from "/assets/images/naput/illust-login.png"
import authLoginBg from "/assets/images/naput/rektorat-bg.png"
const authThemeImg = authLoginLogo;
const authThemeBg = authLoginBg;
const keycloakStore = useKeycloakStore();
const data = ref<Record<string, any> | null>(null);
const error = ref<Record<string, any> | null>(null);
const { signIn, data: sessionData } = useAuth()
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
definePageMeta({
layout: 'blank',
unauthenticatedOnly: true,
})
const isPasswordVisible = ref(false)
const route = useRoute()
const ability = useAbility()
const errors = ref<Record<string, string | undefined>>({
email: undefined,
password: undefined,
})
const refVForm = ref<VForm>()
const credentials = ref({
email: 'admin@demo.com',
password: 'admin',
})
const rememberMe = ref(false)
</script>
<template>
<div class="container">
<div class="left"></div>
<div class="right">
<img src="/assets/images/naput/logo-ui-hitam.png" alt="Logo UI" class="logo" />
<VCol
cols="5"
class="text-center"
>
<AuthProvider/>
</VCol>
</div>
</div>
</template>
<style scoped>
.login-button {
margin-top: 20px;
background-color: #FFD700;
padding: 12px 24px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
color: white;
}
.container {
display: flex;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Left Side */
.left {
flex: 1;
background: url(/assets/images/naput/rbg.png) no-repeat center center;
background-size: cover;
}
/* Right Side */
.right {
flex: 1;
background-color: #FDF8E7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 240px;
gap: 20px; /* Menambah jarak antar elemen */
}
/* Logo */
.logo {
width: 120px;
margin-bottom: 20px;
}
/* Title */
h1 {
font-size: 24px;
color: #000;
text-align: center;
}
.login-button:hover {
background-color: #E6C200;
}
@media (max-width: 768px) {
.container {
justify-content: center;
align-items: center;
background: url(/assets/images/naput/rektorat-ipad-bg.png) no-repeat center center;
background-size: cover;
}
.left {
display: none;
}
.right {
background-color: rgba(253, 248, 231, 0.9);
padding: 40px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 350px;
width: 90%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
}
@media (max-width: 480px) {
.container {
background: url(/assets/images/naput/rektorat-iphone-bg.png) no-repeat center center;
background-size: cover;
}
.right {
padding: 30px;
max-width: 320px;
width: 90%;
}
.logo {
width: 90px;
}
}
</style>
pages/login.vue
......@@ -3,7 +3,6 @@ import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import authLoginBg from '/assets/images/naput/bg-blue-yellow.png'
import authLoginLogo from '/assets/images/naput/illust-login.png'
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
const authThemeImg = authLoginLogo
......@@ -20,16 +19,6 @@ definePageMeta({
})
watchEffect(async () => {
if (!keycloakStore.accessToken)
return// Hindari fetch jika token masih kosong
console.log('Fetching data dengan token baru...')
const { data: newData, error: newError } = await useAuthFetch('https://api.ui.ac.id/my/ac/st')
data.value = newData.value || null
error.value = newError.value || null
})
</script>
<template>
......@@ -55,9 +44,6 @@ watchEffect(async () => {
height="auto"
class="mb-0"
>
<h4 class="text-h4 mb-1">
Welcome 👋🏻 {{ keycloakStore.name }}
</h4>
</VCol>
<VCol cols="12">
......@@ -80,298 +66,11 @@ watchEffect(async () => {
text-align: center;
}
.layout-blank {
.auth-wrapper {
min-block-size: 100dvh;
}
.auth-card,
.auth-card-v2,
.auth-illustration {
z-index: 1 !important;
}
}
@media (min-width: 960px) {
.skin--bordered {
.auth-card-v2 {
border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
}
}
.ubah-pass {
color: #403dff;
margin-block-start: 5px;
}
.bantuan {
color: #00830d;
margin-block-start: 5px;
}
.bantuan:hover {
color: #7fa200;
}
.ubah-pass:hover {
color: #3d84ff;
}
.auth-logo {
position: absolute;
z-index: 2;
inset-block-start: 2rem;
inset-inline-start: 2.3rem;
}
.auth-title {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.273px;
line-height: normal;
text-transform: capitalize;
}
.div-block-2,
.body-4 {
display: flex;
align-items: center;
justify-content: center;
/* Ensures it spans the full width */
background-position: center;
/* Centers the image */
background-repeat: repeat;
background-size: cover;
/* Ensures the element covers the full viewport height */
inline-size: 100%;
min-block-size: 100vh;
/* Prevents tiling */
padding-block-start: 10px;
// margin: 5% 5%;
}
.main-component-margin {
padding: 100px;
margin-block: 0%;
margin-inline: 10%;
}
body {
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
min-block-size: 100%;
}
.main-component-login {
display: grid;
overflow: visible;
flex-flow: row;
align-items: center;
justify-content: center;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-block: 5%;
margin-inline: 34% 20%;
padding-block-end: 0;
padding-inline: 10% 5%;
@media (min-width: 768px) {
margin-inline: 58% 15%;
}
}
.form-component-login {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
// outline: 0.5px solid #747474;
flex-flow: row;
align-items: center;
justify-content: center;
border-radius: 1.7rem;
background-color: rgb(var(--v-theme-surface));
box-shadow: 0 12px 16px #0003;
grid-auto-columns: 1fr;
grid-gap: 16px 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-inline: 20% 0%;
min-inline-size: 345px;
outline-offset: 0;
padding-block: 5%;
padding-inline: 0%;
transform: translate(0);
@media (min-width: 768px) {
margin-inline: -10% 8%;
}
}
.logo-component-login {
position: static;
display: none;
align-items: center;
// outline: 0.5px solid #747474;
// flex-flow: row;
// grid-template-rows: auto;
// grid-template-columns: 1fr 1fr;
// grid-auto-columns: 1fr;
justify-content: center;
border-radius: 1.7rem;
// grid-column-gap: 0px;
// grid-row-gap: 16px;
// outline-offset: 0px;
// color: #fefce8;
background-color: #3d3d3d;
box-shadow: 0 12px 16px #0003;
margin-inline: -99px 94px;
min-inline-size: 350px;
padding-block: 10%;
// overflow: hidden;
transform: translate(0);
@media (min-width: 768px) {
display: block;
}
}
.combine-contact4_content {
position: static;
display: flex;
box-sizing: border-box;
flex-flow: column;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-size: 14px;
grid-gap: 0.7rem;
margin-block: 1%;
margin-inline: 20px;
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
}
.heading-8 {
display: flex;
align-items: flex-start;
justify-content: center;
color: #ffdc01;
font-family: "Open Sans", sans-serif;
font-size: 200%;
font-weight: 700;
margin-block-end: 0;
}
.heading-7 {
font-family: "Open Sans", sans-serif;
font-size: 80%;
font-weight: 700;
line-height: 100%;
margin-block: -5px 10px;
}
//img kiri
.image-10 {
margin-block: 150px;
margin-inline: 0;
// height: 500px;
max-inline-size: 100px;
padding-block: 100px;
padding-inline: 30px;
}
.logo-image-component-login {
position: static;
display: flex;
display: block;
overflow: hidden;
flex-flow: row;
align-items: center;
// color: #fefce8;
// background-color: #3d3d3d;
justify-content: center;
grid-gap: 0;
padding-block: 0%;
padding-inline: 0;
}
// login page 3
.heading-8 {
display: flex;
align-items: flex-start;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-size: 200%;
font-weight: 700;
margin-block-end: 0;
}
.body-2 {
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f1f1;
/* Ensures it spans the full width */
background-position: center;
/* Centers the image */
background-repeat: repeat;
background-size: cover;
/* Ensures the element covers the full viewport height */
inline-size: 100%;
min-block-size: 100vh;
/* Prevents tiling */
padding-block-start: 10px;
}
.global-main-login-component {
display: block;
overflow: visible;
flex-flow: column;
align-items: center;
justify-content: center;
inline-size: 100%;
max-inline-size: 350px;
min-inline-size: 300px;
padding-block-end: 0;
@media (min-width: 768px) {
max-inline-size: 700px;
min-inline-size: 500px;
}
}
// kanan putih
.card-main-login-component {
position: static;
display: grid;
overflow: hidden;
// outline: .5px solid #747474;
// outline: .5px solid #747474;
flex-flow: row;
align-items: center;
justify-content: center;
......@@ -407,27 +106,4 @@ body {
display: flex;
}
}
.form-login-component {
position: static;
display: flex;
box-sizing: border-box;
flex-flow: column;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-size: 14px;
grid-gap: 0.7rem;
margin-block: 1%;
margin-inline: 20px;
max-inline-size: 350px;
min-inline-size: 300px;
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
@media (min-width: 768px) {
inline-size: 80%;
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!