UI reset password
This commit is contained in:
setthawutttty
parent
2e8750a3f8
commit
8d2244d93a
3 changed files with 296 additions and 4 deletions
|
|
@ -2,7 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import HomeView from '@/views/HomeView.vue'
|
import HomeView from '@/views/HomeView.vue'
|
||||||
import MapView from '@/views/MapView.vue'
|
import MapView from '@/views/MapView.vue'
|
||||||
import MainView from '@/views/MainView.vue'
|
import MainView from '@/views/MainView.vue'
|
||||||
|
|
||||||
const loginView = () => import('@/views/login.vue')
|
const loginView = () => import('@/views/login.vue')
|
||||||
|
const resetPasswordView = () => import('@/views/ResetPassword.vue')
|
||||||
|
|
||||||
import { authenticated, logout } from '@/plugins/auth'
|
import { authenticated, logout } from '@/plugins/auth'
|
||||||
|
|
||||||
|
|
@ -77,6 +79,14 @@ const router = createRouter({
|
||||||
name: 'auth',
|
name: 'auth',
|
||||||
component: () => import('@/views/auth.vue'),
|
component: () => import('@/views/auth.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/reset-password',
|
||||||
|
name: 'reset-password',
|
||||||
|
component: resetPasswordView,
|
||||||
|
meta: {
|
||||||
|
Auth: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
282
src/views/ResetPassword.vue
Normal file
282
src/views/ResetPassword.vue
Normal file
|
|
@ -0,0 +1,282 @@
|
||||||
|
<!-- authen with keycloak client -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { useCounterMixin } from '@/stores/mixin'
|
||||||
|
import { setAuthen, authenticated, setAuthenCheckin } from '@/plugins/auth'
|
||||||
|
import CustomComponent from '@/components/CustomDialog.vue'
|
||||||
|
import env from '@/api/index'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const $q = useQuasar() //ใช้ noti quasar
|
||||||
|
|
||||||
|
const { showLoader, hideLoader } = mixin
|
||||||
|
|
||||||
|
const username = ref<string>('')
|
||||||
|
const password = ref<string>('')
|
||||||
|
async function onSubmit() {
|
||||||
|
showLoader()
|
||||||
|
const formdata = new URLSearchParams()
|
||||||
|
formdata.append('username', username.value)
|
||||||
|
formdata.append('password', password.value)
|
||||||
|
|
||||||
|
await axios
|
||||||
|
.post(`${env.API_URI}/org/login/checkin`, formdata, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(async (res) => {
|
||||||
|
setAuthenCheckin(res.data.result)
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
$q.dialog({
|
||||||
|
component: CustomComponent,
|
||||||
|
componentProps: {
|
||||||
|
title: `ข้อความแจ้งเตือน`,
|
||||||
|
message: `${err.response.data.message}`,
|
||||||
|
icon: 'warning',
|
||||||
|
color: 'red',
|
||||||
|
onlycancel: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {})
|
||||||
|
</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 q-mb-sm text-left">
|
||||||
|
<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 q-mb-sm">
|
||||||
|
<q-btn
|
||||||
|
style="font-size: 16px; border-radius: 5px"
|
||||||
|
color="primary"
|
||||||
|
class="full-width"
|
||||||
|
label="ส่ง"
|
||||||
|
type="submit"
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 q-mb-xs">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
outline
|
||||||
|
color="teal-5"
|
||||||
|
class="full-width"
|
||||||
|
style="font-size: 16px; border-radius: 8px"
|
||||||
|
@click="router.push(`/login`)"
|
||||||
|
><q-icon left name="mdi-chevron-left" />
|
||||||
|
<div class="text-center">กลับไปที่การเข้าสู่ระบบ</div>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="text-left text-weight-medium">
|
||||||
|
ระบุชื่อผู้ใช้งานหรือที่อยู่อีเมลของคุณ
|
||||||
|
เราจะส่งคำแนะนำในการสร้างรหัสผ่านใหม่ให้คุณ
|
||||||
|
</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>
|
||||||
|
|
@ -113,7 +113,7 @@ onMounted(async () => {
|
||||||
<div class="col-12 form-group">
|
<div class="col-12 form-group">
|
||||||
<div class="row justify-between">
|
<div class="row justify-between">
|
||||||
<div id="kc-form-options">
|
<div id="kc-form-options">
|
||||||
<div class="row items-center">
|
<!-- <div class="row items-center">
|
||||||
<input
|
<input
|
||||||
tabindex="3"
|
tabindex="3"
|
||||||
id="rememberMe"
|
id="rememberMe"
|
||||||
|
|
@ -121,13 +121,13 @@ onMounted(async () => {
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
/>
|
/>
|
||||||
<label class=""> ล็อคอินค้างไว้ </label>
|
<label class=""> ล็อคอินค้างไว้ </label>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span class="cursor-pointer"
|
||||||
><a
|
><a
|
||||||
tabindex="5"
|
tabindex="5"
|
||||||
href="/realms/bma-ehr/login-actions/reset-credentials?client_id=bma-ehr-vue3&tab_id=gg77yQ7AeAI"
|
@click="router.push(`/reset-password`)"
|
||||||
class="link"
|
class="link"
|
||||||
>ลืมรหัสผ่าน</a
|
>ลืมรหัสผ่าน</a
|
||||||
></span
|
></span
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue