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 @@
min-block-size: 100vh; /* Ensures the element covers the full viewport height */
padding-block-start: 10px;
// margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
// margin: 5% 5%;marginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmarginmargin
}
.main-component-margin {
......@@ -115,9 +115,9 @@ body {
.form-component-login {
position: relative;
z-index: 1;
display: block;
display: flex; /* changed from block to flex */
overflow: hidden;
flex-flow: row;
flex-direction: column; /* or row depending on layout */
align-items: center;
justify-content: center;
border-radius: 1.7rem;
......@@ -128,6 +128,7 @@ body {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-inline: 20% 0%;
min-block-size: 300px;
min-inline-size: 345px;
outline: 0.5px solid #747474;
outline-offset: 0;
......@@ -169,11 +170,13 @@ body {
font-family: "Open Sans", sans-serif;
font-size: 14px;
grid-gap: 0.7rem;
inline-size: 100%;
margin-block: 1%;
margin-inline: 20px;
object-fit: fill;
padding-block: 10%;
padding-inline: 5%;
padding-inline: 35px;
}
.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">
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 authLoginLogo from '/assets/images/naput/illust-login.png'
import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.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'
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({
layout: 'blank',
......@@ -19,40 +35,63 @@ definePageMeta({
</script>
<template>
<body
:style="{ backgroundImage: `url(${authThemeBg})` }"
class="body-2"
<VRow
no-gutters
class="auth-wrapper d-flex align-center"
>
<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>
<body
:style="{ backgroundImage: `url(${authThemeBg})` }"
class="body-4"
>
<div class="main-component-margin">
<section class="main-component-login">
<div
:style="{
backgroundImage: `linear-gradient(rgba(${authThemeColorRGB}, 0.5), rgba(${authThemeColorRGB}, 0.5)), url(${authThemeBgElement})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundBlendMode: 'normal, normal',
width: '100%',
opacity: 1,
}"
class="form-component-login"
>
<div class="combine-contact4_content">
<h2 class="heading-8">
SSO
</h2>
<h2 class="text-h5 heading-7">
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>
</section>
</body>
<!-- </VRow> -->
</body>
</VRow>
</template>
<style lang="scss">
@use "@core/scss/template/pages/page-auth";
</style>
\ No newline at end of file
</style>
views/pages/authentication/AuthProvider.vue
......@@ -26,23 +26,59 @@ onMounted(() => {
<template>
<VBtn
class="font-weight-bold"
color="#FFDC01"
class="sso-btn font-weight-medium"
color="#3d3d3d"
block
type="submit"
rounded="xl"
@click="login"
>
Login SSO
Sign in SSO
</VBtn>
<VBtn
class="font-weight-bold"
color="#FFDC01"
class="google-btn font-weight-medium"
color="#3d3d3d"
block
type="submit"
style="margin-block-start: 10px;"
rounded="xl"
variant="outlined"
style="margin-block-start: 5px;"
@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>
</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!