hrms-bangkok/hrms-landing
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

start project

Browse source
This commit is contained in:
Warunee Tamkoo 2024-12-16 17:12:39 +07:00
commit ca3c00b6a1
42 changed files with 1310 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/views/ErrorNotFoundPage.vue Normal file
View file

@ -0,0 +1,27 @@
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Error404NotFound',
})
</script>
<template>
<div
class="fullscreen bg-secondary text-white text-center q-pa-md flex flex-center"
>
<div>
<div class="text-h1">ไม่พบหน้าที่ต้องการ</div>
<div class="text-h2">(404 Page Not Found)</div>
<q-btn
class="q-mt-xl"
color="white"
text-color="secondary"
unelevated
to="/"
label="กลับไปหน้าหลัก"
no-caps
/>
</div>
</div>
</template>

210
src/views/login.vue Normal file
View file

@ -0,0 +1,210 @@
<!-- authen with keycloak client -->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import axios from "axios";
import { useCounterMixin } from "@/stores/mixin";
import config from "@/app.config";
const mixin = useCounterMixin();
const { showLoader, hideLoader } = mixin;
const msgError = ref<string>("");
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(`${config.API.org}/login`, formdata, {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
})
.then(async (res) => {
// setAuthen(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 () => {
// const checkAuthen = await authenticated();
// if (checkAuthen) {
// router.push("/");
// }
});
</script>
<template>
<section class="vh-100" style="overflow: hidden">
<div class="container-fluid h-custom">
<div class="row d-flex justify-content-center align-items-center h-100">
<!-- 1 sec -->
<div
class="col-md-12 col-lg-6 bg-img d-none d-lg-block position-relative"
>
<img src="@/assets/line.png" class="img_absolute_line" />
<div
class="d-flex flex-column justify-content-center align-items-center vh-100"
>
<div class="text-white position-relative">
<img src="@/assets/sso.png" class="img_absolute" />
<h4>ระบบบริหารจัดการการใช้งาน</h4>
<h4 class="pb-2">ระบบสารสนเทศสนับสนุนการเชื่อมโยง</h4>
<p class="mb-0 txt_detail">Bangkok Metropolitan Administration</p>
<p class="mb-0 txt_detail">Single Sign-On</p>
</div>
</div>
</div>
<!-- 2 sec -->
<div class="col-10 col-md-8 col-lg-5 offset-lg-1">
<form class="bg_md" id="contact-form">
<div class="d_over">
<div class="text-center">
<img src="@/assets/sso.png" />
</div>
<div class="my-3 text-center" style="color: #00aa86">
<h5>ระบบบริหารจัดการการใช้งาน</h5>
<h5 class="pb-1">ระบบสารสนเทศสนับสนุนการเชื่อมโยง</h5>
<p class="mb-0 txt_detail">
Bangkok Metropolitan Administration
</p>
<p class="mb-0 txt_detail">Single Sign-On</p>
</div>
</div>
<div
class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start"
>
<p class="lead fw-normal mb-0 me-3 mb-2">
<strong>เข้าใช้งานระบบ</strong>
</p>
</div>
<div class="row g-4">
<div class="col-md-12 col-lg-9">
<input
type="text"
id="username"
value=""
class="form-control form-control-lg"
placeholder="ชื่อผู้ใช้"
/>
</div>
<div class="col-md-12 col-lg-9">
<input
type="password"
id="password"
value=""
class="form-control form-control-lg"
placeholder="รหัสผ่าน"
/>
</div>
<div class="col-md-12 col-lg-9 d-grid">
<button type="submit" class="btn_custom">เข้าระบบ</button>
<div id="response-message">{{ msgError }}</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</template>
<style lang="scss" scoped>
.img_absolute_line {
position: absolute;
height: auto;
width: 50%;
left: 0;
bottom: 0;
}
.txt_detail {
color: #c0c0c0;
}
.img_absolute {
position: absolute;
top: -170px;
}
.d_over {
display: none;
}
.btn_custom {
background-color: #00aa86;
cursor: pointer;
border: 0;
padding: 8px 0 8px 0;
border-radius: 12px;
color: #fff;
font-size: 18px;
font-weight: 500;
}
.btn_custom:hover {
background-color: #00ca9f;
}
.bg-img {
background: rgb(30, 50, 49);
background: linear-gradient(
0deg,
rgba(30, 50, 49, 1) 0%,
rgba(20, 120, 99, 1) 100%
);
}
body {
font-family: "Noto Sans Thai", sans-serif !important;
}
.h-custom {
height: calc(100% - 73px);
}
@media (max-width: 450px) {
.h-custom {
height: 100%;
}
}
@media (max-width: 991px) {
/* Up to medium screens */
section.vh-100 {
background: rgb(30, 50, 49);
background: linear-gradient(
0deg,
rgba(30, 50, 49, 1) 0%,
rgba(20, 120, 99, 1) 100%
);
}
.bg_md {
background-color: #fff;
padding: 20px;
border-radius: 20px;
}
.d_over {
display: block;
}
.txt_detail {
color: #949494;
font-size: 12px;
}
}
#response-message {
color: red;
text-align: center;
}
</style>