change landing
This commit is contained in:
parent
ca3c00b6a1
commit
50eecafad2
7 changed files with 30 additions and 227 deletions
|
|
@ -9,7 +9,13 @@ do
|
|||
echo "Processing $file ...";
|
||||
|
||||
sed -i 's|VITE_API_URI_CONFIG|'${VITE_API_URI_CONFIG}'|g' $file
|
||||
sed -i 's|VITE_URL_SSO|'${VITE_URL_SSO}'|g' $file
|
||||
sed -i 's|KC_URL|'${KC_URL}'|g' $file
|
||||
sed -i 's|KC_REALMS|'${KC_REALMS}'|g' $file
|
||||
sed -i 's|KC_CLIENT_ID|'${KC_CLIENT_ID}'|g' $file
|
||||
sed -i 's|KC_CLIENT_SECRET|'${KC_CLIENT_SECRET}'|g' $file
|
||||
sed -i 's|VITE_CLIENTID_KEYCLOAK|'${VITE_CLIENTID_KEYCLOAK}'|g' $file
|
||||
sed -i 's|SSO_COOKIE_NAME|'${SSO_COOKIE_NAME}'|g' $file
|
||||
sed -i 's|SSO_URL|'${SSO_URL}'|g' $file
|
||||
|
||||
done
|
||||
|
||||
|
|
|
|||
13
index.html
13
index.html
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HRMS SSO</title>
|
||||
<title>HRMS - Landing Page</title>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
|
|
@ -19,16 +19,5 @@
|
|||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"pinia": "^2.1.4",
|
||||
"quasar": "^2.17.5",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"sass": "^1.83.0",
|
||||
"simple-vue-camera": "^1.1.3",
|
||||
"vite-plugin-pwa": "^0.16.7",
|
||||
"vue": "^3.4.15",
|
||||
|
|
@ -43,7 +44,6 @@
|
|||
"jsdom": "^20.0.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.7.1",
|
||||
"sass": "^1.32.12",
|
||||
"start-server-and-test": "^1.15.2",
|
||||
"typescript": "~4.7.4",
|
||||
"vite": "^4.0.0",
|
||||
|
|
|
|||
2
src/assets/key/data.ts
Normal file
2
src/assets/key/data.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export const keyHrms =
|
||||
"-----BEGIN RSA PRIVATE KEY----- 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 -----END RSA PRIVATE KEY-----";
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
const loginView = () => import("@/views/login.vue");
|
||||
const homeView = () => import("@/views/home.vue");
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "loginMain",
|
||||
component: loginView,
|
||||
name: "home-page",
|
||||
component: homeView,
|
||||
children: [
|
||||
/**
|
||||
* 404 Not Found
|
||||
|
|
|
|||
16
src/views/home.vue
Normal file
16
src/views/home.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
|
||||
onMounted(async () => {
|
||||
// const checkAuthen = await authenticated();
|
||||
// if (checkAuthen) {
|
||||
// router.push("/");
|
||||
// }
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Lanading page</h1>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,210 +0,0 @@
|
|||
<!-- 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue