Skip to content

dtd / civitas.ui

Go to a project
Commit 8b75d2d6 by Samuel Taniel Mulyadi
Options

Login google

1 parent 7accbf0f
Inline Side-by-side
Showing with 183 additions and 48 deletions
@core/scss/template/pages/page-auth.scss
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
min-block-size: 100vh; /* Ensures the element covers the full viewport height */ min-block-size: 100vh; /* Ensures the element covers the full viewport height */
padding-block-start: 10px; padding-block-start: 10px;
// margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin // margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
} }
.main-component-margin { .main-component-margin {
...@@ -115,9 +115,9 @@ body { ...@@ -115,9 +115,9 @@ body {
.form-component-login { .form-component-login {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: block; display: flex; /* changed from block to flex */
overflow: hidden; overflow: hidden;
flex-flow: row; flex-direction: column; /* or row depending on layout */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 1.7rem; border-radius: 1.7rem;
...@@ -128,6 +128,7 @@ body { ...@@ -128,6 +128,7 @@ body {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: auto; grid-template-rows: auto;
margin-inline: 20% 0%; margin-inline: 20% 0%;
min-block-size: 300px;
min-inline-size: 345px; min-inline-size: 345px;
outline: 0.5px solid #747474; outline: 0.5px solid #747474;
outline-offset: 0; outline-offset: 0;
...@@ -169,11 +170,13 @@ body { ...@@ -169,11 +170,13 @@ body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 14px; font-size: 14px;
grid-gap: 0.7rem; grid-gap: 0.7rem;
inline-size: 100%;
margin-block: 1%; margin-block: 1%;
margin-inline: 20px; margin-inline: 20px;
object-fit: fill; object-fit: fill;
padding-block: 10%; padding-block: 10%;
padding-inline: 5%; padding-inline: 5%;
padding-inline: 35px;
} }
.heading-8 { .heading-8 {
......
pages/login-v5.vue 0 → 100644
<script setup lang="ts">
import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
import authLoginBg from '/assets/images/naput/bg-blue-yellow.png'
import authLoginLogo from '/assets/images/naput/illust-login.png'
const authThemeImg = authLoginLogo
const authThemeBg = authLoginBg
const keycloakStore = useKeycloakStore()
definePageMeta({
layout: 'blank',
unauthenticatedOnly: true,
})
</script>
<template>
<body
:style="{ backgroundImage: `url(${authThemeBg})` }"
class="body-2"
>
<section class="global-main-login-component">
<div class="card-main-login-component4">
<div class="logo-login-component4">
<VImg
:src="authThemeImg"
max-width="650"
max-height="300"
class="image-10 lazyload"
/>
</div>
<div class="form-login-component">
<VCol cols="12">
<img
src="/assets/images/naput/logo-ui-hitam.png"
width="100"
height="auto"
class="mb-0"
>
</VCol>
<VCol cols="12">
<AuthProvider />
</VCol>
</div>
</div>
</section>
</body>
<!-- </VRow> -->
</template>
<style lang="scss">
@use "@core/scss/template/pages/page-auth";
</style>
pages/login.vue
<script setup lang="ts"> <script setup lang="ts">
import { useKeycloakStore } from '@/@core/stores/keycloakStore' import ImgDark from '@images/dstipro/auth-bg-dark.png'
import ImgLight from '@images/dstipro/auth-bg-light.png'
import authLoginBg from '/assets/images/naput/bg-blue-yellow.png' import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.png'
import authLoginLogo from '/assets/images/naput/illust-login.png' import authV2LoginBgDark from '@images/naput/header-bg-dark.png'
import authV2LoginBgLight from '@images/naput/header-bg.png'
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue' import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
const authThemeImg = authLoginLogo const authThemeImg = useGenerateImageVariant(
authV2LoginLogoLight,
authV2LoginLogoLight,
)
const authThemeBg = authLoginBg const authThemeColor = useGenerateColorVariant(
'#FFFFFF',
'#303030',
)
const keycloakStore = useKeycloakStore() const authThemeBgElement = useGenerateImageVariant(
ImgLight,
ImgDark,
)
const authThemeBg = useGenerateImageVariant(
authV2LoginBgLight,
authV2LoginBgDark,
)
definePageMeta({ definePageMeta({
layout: 'blank', layout: 'blank',
...@@ -19,40 +35,63 @@ definePageMeta({ ...@@ -19,40 +35,63 @@ definePageMeta({
</script> </script>
<template> <template>
<body <VRow
:style="{ backgroundImage: `url(${authThemeBg})` }" no-gutters
class="body-2" class="auth-wrapper d-flex align-center"
> >
<section class="global-main-login-component"> <body
<div class="card-main-login-component4"> :style="{ backgroundImage: `url(${authThemeBg})` }"
<div class="logo-login-component4"> class="body-4"
<VImg >
:src="authThemeImg" <div class="main-component-margin">
max-width="650" <section class="main-component-login">
max-height="300" <div
class="image-10 lazyload" :style="{
/> backgroundImage: `linear-gradient(rgba(${authThemeColorRGB}, 0.5), rgba(${authThemeColorRGB}, 0.5)), url(${authThemeBgElement})`,
</div> backgroundSize: 'cover',
<div class="form-login-component"> backgroundPosition: 'center',
<VCol cols="12"> backgroundRepeat: 'no-repeat',
<img backgroundBlendMode: 'normal, normal',
src="/assets/images/naput/logo-ui-hitam.png" width: '100%',
width="100" opacity: 1,
height="auto" }"
class="mb-0" class="form-component-login"
> >
</VCol> <div class="combine-contact4_content">
<h2 class="heading-8">
<VCol cols="12"> SSO
<AuthProvider /> </h2>
</VCol> <h2 class="text-h5 heading-7">
</div> Single Sign On
</h2>
<AuthProvider />
</div>
</div>
<div
class="logo-component-login"
:style="{
backgroundImage: `url(${ImgDark})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
width: '100%',
}"
>
<div class="logo-image-component-login">
<VImg
:src="authThemeImg"
max-height="100"
class="image-10 lazyload"
/>
</div>
</div>
</section>
</div> </div>
</section> </body>
</body> </VRow>
<!-- </VRow> -->
</template> </template>
<style lang="scss"> <style lang="scss">
@use "@core/scss/template/pages/page-auth"; @use "@core/scss/template/pages/page-auth";
</style> </style>
\ No newline at end of file
views/pages/authentication/AuthProvider.vue
...@@ -26,23 +26,59 @@ onMounted(() => { ...@@ -26,23 +26,59 @@ onMounted(() => {
<template> <template>
<VBtn <VBtn
class="font-weight-bold" class="sso-btn font-weight-medium"
color="#FFDC01" color="#3d3d3d"
block block
type="submit" type="submit"
rounded="xl"
@click="login" @click="login"
> >
Login SSO Sign in SSO
</VBtn> </VBtn>
<VBtn <VBtn
class="font-weight-bold" class="google-btn font-weight-medium"
color="#FFDC01" color="#3d3d3d"
block block
type="submit" type="submit"
style="margin-block-start: 10px;" rounded="xl"
variant="outlined"
style="margin-block-start: 5px;"
@click="loginGoogle" @click="loginGoogle"
> >
Login Google <template #prepend>
<VImg
src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg"
alt="Google"
max-width="20"
class="mr-2"
/>
</template>
Sign in with Google
</VBtn> </VBtn>
</template> </template>
<style scoped>
/* Use :deep() correctly to apply styles to the Vuetify button */
.v-btn.sso-btn {
background-color: #535666 !important; /* semi-transparent dark */
transition: background-color 0.3s ease, transform 0.2s ease;
}
.v-btn.sso-btn:hover {
background-color: #3d3e50 !important;
transform: translateY(-2px);
}
/* Google button */
.v-btn.google-btn {
border: 2px solid #a3a3a3;
background-color: rgba(255, 255, 255, 80%) !important;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.v-btn.google-btn:hover {
background-color: rgba(61, 61, 61, 100%);
transform: translateY(-2px);
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!