diff --git a/@core/scss/template/pages/page-auth.scss b/@core/scss/template/pages/page-auth.scss
index 3bd700f..7476b81 100644
--- a/@core/scss/template/pages/page-auth.scss
+++ b/@core/scss/template/pages/page-auth.scss
@@ -75,7 +75,7 @@
min-block-size: 100vh; /* Ensures the element covers the full viewport height */
padding-block-start: 10px;
- // margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
+ // margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
}
.main-component-margin {
@@ -206,12 +206,11 @@ body {
.logo-image-component-login {
position: static;
display: flex;
- display: block;
overflow: hidden;
flex-flow: row;
align-items: center;
justify-content: center;
- grid-gap: 0;
+ gap: 0;
padding-block: 0%;
padding-inline: 0;
}
@@ -385,6 +384,7 @@ body {
position: static;
display: flex;
box-sizing: border-box;
+ flex-direction: column;
flex-flow: column;
align-items: center;
justify-content: center;
@@ -398,6 +398,7 @@ body {
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
+ text-align: center;
@media (min-width: 768px) {
inline-size: 80%;
@@ -443,9 +444,9 @@ body {
.image-10-3 {
margin-block: 80px;
margin-inline: 0;
- max-inline-size: 50px;
+ max-inline-size: 80px;
padding-block: 80px;
- padding-inline: 30px;
+ padding-inline: 100px;
}
.logo-login-component-3 {
@@ -482,3 +483,44 @@ body {
inline-size: 100%;
}
}
+
+// login main
+.card-main-login-component4 {
+ position: static;
+ display: grid;
+ overflow: hidden;
+ flex-flow: row;
+ align-items: center;
+ justify-content: center;
+ border-radius: 1.7rem;
+ backdrop-filter: blur(5px);
+ background-color: #fff0;
+ background-color: white;
+ box-shadow: 0 12px 16px #0003;
+ color: #fefce8;
+ grid-auto-columns: 1fr;
+ grid-gap: 16px 0;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto;
+ margin-inline: 0%;
+ outline-offset: 0;
+ padding-block: 0;
+ padding-inline: 0%;
+ transform: translate(0);
+}
+
+.logo-login-component4 {
+ position: static;
+ display: none;
+ overflow: hidden;
+ align-items: center;
+ justify-content: center;
+ background-color: #ffdc01;
+ block-size: 100%;
+ color: #fefce8;
+ inline-size: 100%;
+
+ @media (min-width: 768px) {
+ display: flex;
+ }
+}
diff --git a/pages/login-v1.vue b/pages/login-v1.vue
index e0a88d9..62f3436 100644
--- a/pages/login-v1.vue
+++ b/pages/login-v1.vue
@@ -117,7 +117,6 @@ const onSubmit = () => {
<div class="logo-login-component-3">
<VImg
:src="authThemeImg"
- max-height="100"
class="image-10-3 lazyload"
/>
</div>
diff --git a/pages/login.vue b/pages/login.vue
index 9e18b50..472fbbf 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -20,16 +20,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>
@@ -38,8 +28,8 @@ watchEffect(async () => {
class="body-2"
>
<section class="global-main-login-component">
- <div class="card-main-login-component">
- <div class="logo-login-component">
+ <div class="card-main-login-component4">
+ <div class="logo-login-component4">
<VImg
:src="authThemeImg"
max-width="650"
@@ -73,361 +63,4 @@ watchEffect(async () => {
<style lang="scss">
@use "@core/scss/template/pages/page-auth";
-.form-login-component {
- display: flex;
- flex-direction: column;
- align-items: center;
- 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;
- border-radius: 1.7rem;
- backdrop-filter: blur(5px);
- background-color: #fff0;
- background-color: white;
- box-shadow: 0 12px 16px #0003;
- color: #fefce8;
- grid-auto-columns: 1fr;
- grid-gap: 16px 0;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: auto;
- margin-inline: 0%;
- outline-offset: 0;
- padding-block: 0;
- padding-inline: 0%;
- transform: translate(0);
-}
-
-.logo-login-component {
- position: static;
- display: none;
- overflow: hidden;
- align-items: center;
- justify-content: center;
- background-color: #ffdc01;
- block-size: 100%;
- color: #fefce8;
- inline-size: 100%;
-
- @media (min-width: 768px) {
- 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>