Add client settings

src/static/app/src/components/clientComponents/clientSettingComponents/oidcSettings.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import LocaleText from "@/components/text/localeText.vue";
+const props = defineProps(['mode'])
+import { fetchGet } from "@/utilities/fetch.js"
+await fetchGet("/api/oidc/status", {
+	mode: "Client"
+}, (res) => {
+	console.log(res)
+})
+
+</script>
+
+<template>
+<div class="d-flex flex-column gap-2">
+	<div class="d-flex align-items-center">
+		<h6 class="mb-0">
+			<LocaleText t="OpenID Connect (OIDC)"></LocaleText>
+		</h6>
+		<div class="form-check form-switch ms-auto">
+			<label class="form-check-label" for="oidc_switch">
+				<LocaleText t="Enable"></LocaleText>
+			</label>
+			<input class="form-check-input" type="checkbox" role="switch" id="oidc_switch">
+		</div>
+	</div>
+	<div>
+		<div class="alert alert-dark rounded-3 mb-0">
+			<LocaleText t="Due to security reason, in order to edit OIDC configuration, you will need to edit "></LocaleText>
+			<code>wg-dashboard-oidc-providers.json</code> directly. If you updated the file, click the update button below to reload the configuration.
+		</div>
+	</div>
+	<button class="rounded-3 btn bg-success-subtle text-success-emphasis border-success-subtle">
+		<i class="bi bi-arrow-clockwise me-2"></i><LocaleText t="Refresh"></LocaleText>
+	</button>
+</div>
+</template>
+
+<style scoped>
+
+</style>

src/static/app/src/components/clientComponents/clientSettings.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import LocaleText from "@/components/text/localeText.vue";
+import OidcSettings from "@/components/clientComponents/clientSettingComponents/oidcSettings.vue";
 const emits = defineEmits(['close'])
 
 </script>
@@ -15,16 +16,8 @@ const emits = defineEmits(['close'])
 		</div>
 		<div class="card-body px-4">
 			<div class="py-2">
-				<h6>
-					<LocaleText t="OpenID Connect (OIDC)"></LocaleText>
-				</h6>
+				<OidcSettings mode="Client"></OidcSettings>
 				<hr>
-				<div class="form-check form-switch">
-					<label class="form-check-label" for="oidc_switch">
-						<LocaleText t="Enable"></LocaleText>
-					</label>
-					<input class="form-check-input" type="checkbox" role="switch" id="oidc_switch">
-				</div>
 			</div>
 		</div>
 	</div>

src/static/app/src/views/clients.vue

@@ -29,7 +29,7 @@ const oidc = computed(() => {
 
 		<div class="w-100 h-100 card rounded-3">
 			<Transition name="zoom">
-				<ClientSettings v-if="settings"></ClientSettings>
+				<ClientSettings v-if="settings" @close="settings = false"></ClientSettings>
 			</Transition>
 			<div class="border-bottom z-0">
 				<div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;">