ui login
This commit is contained in:
STW_TTTY\stwtt
parent
dedc986975
commit
6ba3ad6584
4 changed files with 274 additions and 0 deletions
|
|
@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
|
|||
const MainLayout = () => import("@/views/MainLayout.vue");
|
||||
const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue");
|
||||
const TestPage = () => import("@/modules/01_dashboard/views/test.vue");
|
||||
const loginMain = () => import("@/views/login.vue");
|
||||
|
||||
import ModuleTransfer from "@/modules/02_transfer/router";
|
||||
import ModuleRetire from "@/modules/03_retire/router";
|
||||
|
|
@ -46,6 +47,7 @@ const router = createRouter({
|
|||
Key: [7],
|
||||
},
|
||||
},
|
||||
|
||||
...ModuleTransfer,
|
||||
...ModuleRetire,
|
||||
...ModuleCheckin,
|
||||
|
|
@ -61,6 +63,15 @@ const router = createRouter({
|
|||
...ModulePortfolio,
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "loginMain",
|
||||
component: loginMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
|
|
|||
BIN
src/style/keycloak-bg.png
Normal file
BIN
src/style/keycloak-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/style/keycloak-logo-poc.png
Normal file
BIN
src/style/keycloak-logo-poc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
263
src/views/login.vue
Normal file
263
src/views/login.vue
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const username = ref<string>("");
|
||||
const password = ref<string>("");
|
||||
const holdLogin = ref<boolean>(false);
|
||||
function onSubmit() {}
|
||||
</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 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;
|
||||
}
|
||||
#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(/src/style/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(/src/style/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