updated authen with keycloak client
This commit is contained in:
parent
93cf472aae
commit
9ec6a7696a
8 changed files with 378 additions and 32 deletions
|
|
@ -98,13 +98,14 @@ function onClickLogout() {
|
|||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
// keycloak.logout()
|
||||
// authen with keycloak client
|
||||
await deleteCookie('BMAHRIS_KEYCLOAK_IDENTITY')
|
||||
await deleteCookie('BMAHRIS_KEYCLOAK_REFRESH')
|
||||
window.location.href = 'https://bma-sso.frappet.synology.me'
|
||||
window.location.href = '/login'
|
||||
})
|
||||
}
|
||||
|
||||
function deleteCookie(name) {
|
||||
function deleteCookie(name: string) {
|
||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
|
||||
}
|
||||
|
||||
|
|
|
|||
327
src/views/login.vue
Normal file
327
src/views/login.vue
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
<!-- authen with keycloak client -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { keycloakConfig } from '@/plugins/keycloak'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
const router = useRouter()
|
||||
const mixin = useCounterMixin()
|
||||
const $q = useQuasar() //ใช้ noti quasar
|
||||
|
||||
const { showLoader, hideLoader, messageError } = mixin
|
||||
|
||||
function setCookie(name: string, value: any, days: number) {
|
||||
let expires = ''
|
||||
if (days) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
|
||||
expires = '; expires=' + date.toUTCString()
|
||||
}
|
||||
document.cookie = name + '=' + (value || '') + expires + '; path=/'
|
||||
}
|
||||
|
||||
const username = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
async function onSubmit() {
|
||||
showLoader()
|
||||
const formdata = new URLSearchParams()
|
||||
formdata.append('client_id', keycloakConfig.clientId)
|
||||
formdata.append('client_secret', keycloakConfig.clientSecret)
|
||||
formdata.append('grant_type', 'password')
|
||||
formdata.append(
|
||||
'requested_token_type',
|
||||
'urn:ietf:params:oauth:token-type:refresh_token'
|
||||
)
|
||||
formdata.append('username', username.value)
|
||||
formdata.append('password', password.value)
|
||||
|
||||
await axios
|
||||
.post(
|
||||
`${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/token`,
|
||||
formdata,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(async (res) => {
|
||||
await setCookie('BMAHRIS_KEYCLOAK_IDENTITY', res.data.access_token, 1)
|
||||
await setCookie('BMAHRIS_KEYCLOAK_REFRESH', res.data.refresh_token, 1)
|
||||
window.location.href = '/'
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err, 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
|
||||
// if (response.status !== 200) {
|
||||
// messageError($q, err)
|
||||
// } else {
|
||||
// await setCookie('BMAHRIS_KEYCLOAK_IDENTITY', response.data.access_token, 1)
|
||||
// await setCookie('BMAHRIS_KEYCLOAK_REFRESH', response.data.refresh_token, 1)
|
||||
// router.push('/')
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-image">
|
||||
<div class="login-pf-page">
|
||||
<div id="kc-logo">
|
||||
<div id="myimage"></div>
|
||||
<div class="text-logo">
|
||||
ระบบ<span style="color: #02a998">บริหารทรัพยากรบุคคล</span>
|
||||
</div>
|
||||
<div class="subtext-logo">ของกรุงเทพมหานคร</div>
|
||||
</div>
|
||||
|
||||
<div class="card-pf">
|
||||
<div class="login-pf-header">
|
||||
<h1 id="kc-page-title">เข้าใช้งานระบบ</h1>
|
||||
</div>
|
||||
<q-form
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmit"
|
||||
style="max-width: 100%; min-width: 30%"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-12 form-group">
|
||||
<label
|
||||
for="username"
|
||||
class="pf-c-form__label pf-c-form__label-text"
|
||||
>ชื่อผู้ใช้งาน</label
|
||||
>
|
||||
<q-input
|
||||
v-model="username"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-12 form-group">
|
||||
<label
|
||||
for="username"
|
||||
class="pf-c-form__label pf-c-form__label-text"
|
||||
>รหัสผ่าน</label
|
||||
>
|
||||
<q-input
|
||||
v-model="password"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
type="password"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผ่าน'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-12 form-group">
|
||||
<div class="row justify-between">
|
||||
<div id="kc-form-options">
|
||||
<div class="row items-center">
|
||||
<input
|
||||
tabindex="3"
|
||||
id="rememberMe"
|
||||
name="rememberMe"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label class=""> ล็อคอินค้างไว้ </label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
><a
|
||||
tabindex="5"
|
||||
href="/realms/bma-ehr/login-actions/reset-credentials?client_id=bma-ehr-vue3&tab_id=gg77yQ7AeAI"
|
||||
class="link"
|
||||
>ลืมรหัสผ่าน</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="teal-5"
|
||||
class="full-width"
|
||||
label="เข้าระบบ"
|
||||
style="font-size: 16px; border-radius: 8px"
|
||||
type="submit"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: #cc0004;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: #ff0004;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.checkbox,
|
||||
.radio {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
margin: 1px 3px 0 0;
|
||||
line-height: normal;
|
||||
}
|
||||
.checkbox label,
|
||||
.radio label {
|
||||
min-height: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
#kc-content {
|
||||
width: 100%;
|
||||
}
|
||||
#kc-content-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#kc-form-options .checkbox {
|
||||
margin-top: 0;
|
||||
color: #72767b;
|
||||
}
|
||||
#kc-logo {
|
||||
max-width: 25vw;
|
||||
position: absolute;
|
||||
margin-left: 5%;
|
||||
/* margin-top: 5%; */
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.bg-image {
|
||||
font-family: 'Noto Sans Thai', sans-serif;
|
||||
font-family: 'Noto Sans Thai', sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: url(@/assets/keycloak-bg.png) no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
font-size: 12px;
|
||||
line-height: 1.66666667;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.login-pf-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
#myimage {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
object-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% !important;
|
||||
background: white url(@/assets/keycloak-logo-poc.png) no-repeat center center;
|
||||
margin-bottom: 7%;
|
||||
}
|
||||
.text-logo {
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.subtext-logo {
|
||||
color: white;
|
||||
font-weight: 200;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.card-pf {
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 1px 1px rgba(3, 3, 3, 0.175);
|
||||
padding: 20px;
|
||||
max-width: 400px;
|
||||
min-width: 30%;
|
||||
/* border-top: 4px solid; */
|
||||
position: relative;
|
||||
z-index: 10 !important;
|
||||
border-radius: 10px;
|
||||
/* border-color: var(--pf-global--primary-color--100); */
|
||||
background: #fff;
|
||||
border-top: 2px solid transparent;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-header {
|
||||
margin-bottom: 20px;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-header h1 {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
h1#kc-page-title {
|
||||
margin-top: 10px;
|
||||
font-weight: 800;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-header h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.login-pf-page .login-pf-header h1 {
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#kc-logo {
|
||||
display: none;
|
||||
}
|
||||
.login-pf-page .login-pf-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.login-pf-page .login-pf-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.login-pf-page .login-pf-header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.login-pf-page .card-pf {
|
||||
padding: 20px 40px 30px 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue