Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-10-04 16:26:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

OIDC is ready? I think?

Browse Source
This commit is contained in:
Donald Zou
2025-06-29 16:11:05 +08:00
parent 380b9a73ab
commit a987d91ae1
51 changed files with 353 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/static/client/dist/assets/index-BmGX7v2g.css → src/static/client/dist/assets/index-1THt9Piw.css vendored
View File

File diff suppressed because one or more lines are too long

41
src/static/client/dist/assets/index-DFmEbKGG.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

41
src/static/client/dist/assets/index-VLGPfnEQ.js vendored
View File

File diff suppressed because one or more lines are too long

38
src/static/client/dist/client.html vendored
View File

@@ -4,11 +4,41 @@
<meta charset="UTF-8">
<link rel="icon" href="/static/client/dist/img/Logo-2-128x128.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/static/client/dist/assets/index-VLGPfnEQ.js"></script>
<link rel="stylesheet" crossorigin href="/static/client/dist/assets/index-BmGX7v2g.css">
<title>WGDashboard Client</title>
<style>
*{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#preloader{
width: 100vw; height: 100vh; display: flex
}
#preloader_placeholder{
width: 50px; height: 50px; background-color: #000; margin: auto;
animation: 3s ease-in-out fadeInPreloader infinite;
}
@keyframes fadeInPreloader {
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>
<script type="module" crossorigin src="/static/client/dist/assets/index-DFmEbKGG.js"></script>
<link rel="stylesheet" crossorigin href="/static/client/dist/assets/index-1THt9Piw.css">
</head>
<body>
<div id="app"></div>
<div id="app">
<div id="preloader">
<div id="preloader_placeholder">
<img style="width: 100%" src="/static/client/dist/img/Logo-2-128x128.png" alt="WGDashboard Client" />
</div>
</div>
</div>
</body>
</html>

34
src/static/client/index.html
View File

@@ -5,11 +5,39 @@
<link rel="icon" href="/img/Logo-2-128x128.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WGDashboard Client</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="140556036774-66pjm1qkml0v27ru1utsoeftsv3b4hid.apps.googleusercontent.com">
<style>
*{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#preloader{
width: 100vw; height: 100vh; display: flex
}
#preloader_placeholder{
width: 50px; height: 50px; background-color: #000; margin: auto;
animation: 3s ease-in-out fadeInPreloader infinite;
}
@keyframes fadeInPreloader {
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>
</head>
<body>
<div id="app"></div>
<div id="app">
<div id="preloader">
<div id="preloader_placeholder">
<img style="width: 100%" src="/img/Logo-2-128x128.png" alt="WGDashboard Client" />
</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2
src/static/client/src/assets/main.css
View File

@@ -15,7 +15,7 @@
}
*{
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
@property --brandColor1 {

28
src/static/client/src/components/SignIn/oidc/oidc.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup async>
import {axiosGet} from "@/utilities/request.js";
import {ref} from "vue";
import OidcBtn from "@/components/SignIn/oidc/oidcBtn.vue";
const providerExist = ref(false)
const providers = ref(undefined)
const getProviders = await axiosGet("/api/signin/oidc/providers")
if (getProviders){
providerExist.value = true;
providers.value = getProviders.data
console.log(providers.value)
}
</script>
<template>
<div class="d-flex gap-2" v-if="providers">
<suspense>
<OidcBtn :provider="provider" :name="name" v-for="(provider, name) in providers"></OidcBtn>
</suspense>
</div>
</template>
<style scoped>
</style>

43
src/static/client/src/components/SignIn/oidc/oidcBtn.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup async>
import axios from "axios";
import {ref} from "vue";
const props = defineProps(['provider', 'name'])
const providerAvailable = ref(false)
const providerConfiguration = ref({})
const params = new URLSearchParams({
client_id: props.provider.client_id,
redirect_uri: window.location.protocol + '//' + window.location.host + window.location.pathname,
response_type: 'code',
state: props.name,
scope: 'openid email'
}).toString()
const authUrl = ref(undefined)
try{
const getProviderConfiguration = await axios(`${props.provider.issuer}/.well-known/openid-configuration`)
console.log(getProviderConfiguration)
providerAvailable.value = true
providerConfiguration.value = getProviderConfiguration.data
console.log(providerConfiguration.value)
authUrl.value = new URL(providerConfiguration.value.authorization_endpoint)
authUrl.value.search = params
} catch (error){
console.log("Provider not available", props.provider)
}
</script>
<template>
<a class="btn btn-sm btn-outline-body rounded-3"
v-if="providerAvailable"
:href="authUrl"
style="flex: 1 1 0px;" >
{{ name }}
</a>
</template>
<style scoped>
</style>

24
src/static/client/src/components/SignIn/signInForm.vue
View File

@@ -4,6 +4,7 @@ import {clientStore} from "@/stores/clientStore.js";
import axios from "axios";
import {axiosPost, requestURl} from "@/utilities/request.js";
import {useRoute, useRouter} from "vue-router";
import Oidc from "@/components/SignIn/oidc/oidc.vue";
const loading = ref(false)
const formData = reactive({
Email: "",
@@ -40,15 +41,6 @@ if (route.query.Email){
formData.Email = route.query.Email
}
const params = new URLSearchParams({
client_id: "ijDjDnBCDuA75srtsq7ksxwpZkLjxiRZVdmkWnRC",
redirect_uri: window.location.protocol + '//' + window.location.host + window.location.pathname,
response_type: 'code',
state: 'Authentik',
scope: 'openid email profile'
}).toString()
console.log(params)
</script>
<template>
@@ -57,19 +49,7 @@ console.log(params)
<h1 class="display-4">Welcome back</h1>
<p class="text-muted">Sign in to access your <strong>WGDashboard Client</strong> account</p>
</div>
<div class="d-flex gap-2">
<a class="btn btn-sm btn-outline-body rounded-3"
:href="'http://178.128.231.4:9000/application/o/authorize/?' + params"
style="flex: 1 1 0px;" >
Google
</a>
<button class="btn btn-sm btn-outline-body rounded-3" style="flex: 1 1 0px;">
GitHub
</button>
<button class="btn btn-sm btn-outline-body rounded-3" style="flex: 1 1 0px;">
Facebook
</button>
</div>
<Oidc></Oidc>
<form class="mt-4 d-flex flex-column gap-3" @submit="e => signIn(e)">
<div class="form-floating">
<input type="text"

27
src/static/client/src/main.js
View File

@@ -14,17 +14,32 @@ const params = new URLSearchParams(window.location.search)
const state = params.get('state')
const code = params.get('code')
const initApp = () => {
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount("#app")
}
if (state && code){
axiosPost("/api/signin/oidc/", {
axiosPost("/api/signin/oidc", {
provider: state,
code: code,
redirect_uri: window.location.protocol + '//' + window.location.host + window.location.pathname
}).then(data => {
console.log(data)
window.location.search = ''
initApp()
if (!data.status){
const store = clientStore()
store.newNotification(data.message, 'danger')
}
})
}else{
initApp()
}
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount("#app")

8
src/static/client/src/views/index.vue
View File

@@ -3,21 +3,27 @@ import {computed, onMounted, ref} from "vue";
import {axiosGet} from "@/utilities/request.js";
import {clientStore} from "@/stores/clientStore.js";
import Configuration from "@/components/Configuration/configuration.vue";
import {onBeforeRouteLeave} from "vue-router";
const store = clientStore()
const loading = ref(true)
const configurations = computed(() => {
return store.configurations
});
const refreshInterval = ref(undefined)
onMounted(async () => {
await store.getConfigurations()
loading.value = false;
setInterval(async () => {
refreshInterval.value = setInterval(async () => {
await store.getConfigurations()
}, 5000)
})
onBeforeRouteLeave(() => {
clearInterval(refreshInterval.value)
})
</script>
<template>