The UI and backend of API keys is done!

src/static/app/src/components/settingsComponent/accountSettingsInputPassword.vue

@@ -71,7 +71,7 @@ export default {
 </script>
 
 <template>
-	<div>
+	<div class="d-flex flex-column">
 		<div class="row">
 			<div class="col-sm">
 				<div class="form-group mb-2">
@@ -109,8 +109,8 @@ export default {
 				</div>
 			</div>
 		</div>
-		<button class="btn btn-success btn-sm fw-bold rounded-3" @click="this.useValidation()">
-			<i class="bi bi-key-fill me-2"></i>Update Password
+		<button class="ms-auto btn bg-success-subtle text-success-emphasis border-1 border-success-subtle rounded-3 shadow-sm" @click="this.useValidation()">
+			<i class="bi bi-save2-fill me-2"></i>Update Password
 		</button>
 	</div>
 </template>

src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue

@@ -0,0 +1,129 @@
+<script>
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import {v4} from "uuid";
+import {fetchGet, fetchPost} from "@/utilities/fetch.js";
+import NewDashboardAPIKey from "@/components/settingsComponent/dashboardAPIKeysComponents/newDashboardAPIKey.vue";
+import DashboardAPIKey from "@/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue";
+
+export default {
+	name: "dashboardAPIKeys",
+	components: {DashboardAPIKey, NewDashboardAPIKey},
+	setup(){
+		const store = DashboardConfigurationStore();
+		return {store};
+	},
+	data(){
+		return {
+			value: this.store.Configuration.Server.dashboard_api_key,
+			apiKeys: [],
+			newDashboardAPIKey: false
+		}
+	},
+	methods: {
+		async toggleDashboardAPIKeys(){
+			await fetchPost("/api/updateDashboardConfigurationItem", {
+				section: "Server",
+				key: "dashboard_api_key",
+				value: this.value
+			}, (res) => {
+				if (res.status){
+					this.store.Configuration.Peers[this.targetData] = this.value;
+					this.store.newMessage("Server", 
+						`API Keys function is successfully ${this.value ? 'enabled':'disabled'}`, "success")
+				}else{
+					this.value = this.store.Configuration.Peers[this.targetData];
+					this.store.newMessage("Server",
+						`API Keys function is failed ${this.value ? 'enabled':'disabled'}`, "danger")
+				}
+			})
+		},
+	},
+	watch: {
+		value:{
+			immediate: true,
+			handler(newValue){
+				if (newValue){
+					fetchGet("/api/getDashboardAPIKeys", {}, (res) => {
+						console.log(res)
+						if(res.status){
+							this.apiKeys = res.data
+						}else{
+							this.apiKeys = []
+							this.store.newMessage("Server", res.message, "danger")
+						}
+					})
+				}else{
+					this.apiKeys = []
+				}
+			}
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="card mb-4 shadow rounded-3">
+		<div class="card-header d-flex">
+			API Keys
+			<div class="form-check form-switch ms-auto">
+				<input class="form-check-input" type="checkbox"
+				       v-model="this.value"
+				       @change="this.toggleDashboardAPIKeys()"
+				       role="switch" id="allowAPIKeysSwitch">
+				<label class="form-check-label" for="allowAPIKeysSwitch">
+					{{this.value ? 'Enabled':'Disabled'}}
+				</label>
+			</div>
+		</div>
+		<div class="card-body position-relative d-flex flex-column gap-2" v-if="this.value">
+			<button class="ms-auto btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm"
+			        @click="this.newDashboardAPIKey = true"
+			>
+				<i class="bi bi-key me-2"></i> Create
+			</button>
+			<div class="card" style="height: 300px" v-if="this.apiKeys.length === 0">
+				<div class="card-body d-flex text-muted">
+						<span class="m-auto">
+							No Dashboard API Key
+						</span>
+				</div>
+			</div>
+			<div class="d-flex flex-column gap-2 position-relative" v-else style="min-height: 300px">
+				<TransitionGroup name="apiKey">
+					<DashboardAPIKey v-for="key in this.apiKeys" :apiKey="key"
+					                 :key="key.Key"
+					                 @deleted="(nkeys) => this.apiKeys = nkeys"></DashboardAPIKey>
+				</TransitionGroup>
+			</div>
+			<Transition name="zoomReversed">
+				<NewDashboardAPIKey v-if="this.newDashboardAPIKey"
+				                    @created="(data) => this.apiKeys = data"
+				 @close="this.newDashboardAPIKey = false"
+				></NewDashboardAPIKey>
+			</Transition>
+			
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.apiKey-move, /* apply transition to moving elements */
+.apiKey-enter-active,
+.apiKey-leave-active {
+	transition: all 0.5s ease;
+}
+
+.apiKey-enter-from,
+.apiKey-leave-to {
+	opacity: 0;
+	
+	transform: translateY(30px) scale(0.9);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.apiKey-leave-active {
+	position: absolute;
+	width: 100%;
+}
+</style>

src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue

@@ -0,0 +1,66 @@
+<script>
+import {fetchPost} from "@/utilities/fetch.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+
+export default {
+	name: "dashboardAPIKey",
+	props: {
+		apiKey: Object
+	},
+	setup(){
+		const store = DashboardConfigurationStore();
+		return {store};
+	},
+	data(){
+		return {
+			confirmDelete: false
+		}
+	},
+	methods: {
+		deleteAPIKey(){
+			fetchPost("/api/deleteDashboardAPIKey", {
+				Key: this.apiKey.Key
+			}, (res) => {
+				if (res.status){
+					this.$emit('deleted', res.data);
+					this.store.newMessage("Server", "API Key deleted", "success");
+				}else{
+					this.store.newMessage("Server", res.message, "danger")
+				}
+			})
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="card rounded-3 shadow-sm">
+		<div class="card-body d-flex gap-3 align-items-center" v-if="!this.confirmDelete">
+			<div class="d-flex align-items-center gap-2">
+				<small class="text-muted">Key</small>{{this.apiKey.Key}}
+			</div>
+			<div class="d-flex align-items-center gap-2 ms-auto">
+				<small class="text-muted">Expire At</small>
+				{{this.apiKey.ExpiredAt ? this.apiKey.ExpiredAt : 'Never'}}
+			</div>
+			<a role="button" class="btn btn-sm bg-danger-subtle text-danger-emphasis rounded-3" @click="this.confirmDelete = true">
+				<i class="bi bi-trash-fill"></i>
+			</a>
+		</div>
+		<div v-else class="card-body d-flex gap-3 align-items-center justify-content-end">
+			Are you sure to delete this API key?
+			<a role="button" class="btn btn-sm bg-success-subtle text-success-emphasis rounded-3"
+				@click="this.deleteAPIKey()"
+			>
+				<i class="bi bi-check-lg"></i>
+			</a>
+			<a role="button" class="btn btn-sm bg-secondary-subtle text-secondary-emphasis rounded-3" @click="this.confirmDelete = false">
+				<i class="bi bi-x-lg"></i>
+			</a>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/newDashboardAPIKey.vue

@@ -0,0 +1,84 @@
+<script>
+import dayjs from "dayjs";
+import {fetchPost} from "@/utilities/fetch.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+
+export default {
+	name: "newDashboardAPIKey",
+	data(){
+		return{
+			newKeyData:{
+				ExpiredAt: dayjs().add(1, 'd').format("YYYY-MM-DDTHH:mm:ss"),
+				neverExpire: false
+			},
+			submitting: false
+		}
+	},
+	setup(){
+		const store = DashboardConfigurationStore();
+		return {store};
+	},
+	mounted() {
+		console.log(this.newKeyData.ExpiredAt)
+	},
+	
+	methods: {
+		submitNewAPIKey(){
+			this.submitting = true;
+			fetchPost('/api/newDashboardAPIKey', this.newKeyData, (res) => {
+				if (res.status){
+					this.$emit('created', res.data);
+					this.store.newMessage("Server", "New API Key created", "success");
+					this.$emit('close')
+				}else{
+					this.store.newMessage("Server", res.message, "danger")
+				}
+				this.submitting = false;
+			})
+		},
+		fixDate(date){
+			console.log(dayjs(date).format("YYYY-MM-DDTHH:mm:ss"))
+			return dayjs(date).format("YYYY-MM-DDTHH:mm:ss")
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="position-absolute w-100 h-100 top-0 start-0 rounded-bottom-3 p-3 d-flex"
+	     style="background-color: #00000060; backdrop-filter: blur(3px)">
+		<div class="card m-auto rounded-3 mt-5">
+			<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
+				Create API Key
+				<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
+			</div>
+			<div class="card-body d-flex gap-2 p-4 flex-column">
+				<small class="text-muted">When should this API Key expire?</small>
+				<div class="d-flex align-items-center gap-2">
+					<input class="form-control" type="datetime-local"
+					       @change="this.newKeyData.ExpiredAt = this.fixDate(this.newKeyData.ExpiredAt)"
+					       :disabled="this.newKeyData.neverExpire || this.submitting"
+					       v-model="this.newKeyData.ExpiredAt">
+				</div>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox"
+					       v-model="this.newKeyData.neverExpire" id="neverExpire" :disabled="this.submitting">
+					<label class="form-check-label" for="neverExpire">
+						Never Expire (<i class="bi bi-emoji-grimace-fill"></i> Don't think that's a good idea)
+					</label>
+				</div>
+				<button class="ms-auto btn bg-success-subtle text-success-emphasis border-1 border-success-subtle rounded-3 shadow-sm"
+					:class="{disabled: this.submitting}"
+				        @click="this.submitNewAPIKey()"
+				>
+					<i class="bi bi-check-lg me-2" v-if="!this.submitting"></i>
+					{{this.submitting ? 'Creating...':'Done'}}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

src/static/app/src/components/settingsComponent/dashboardTheme.vue

@@ -28,13 +28,13 @@ export default {
 	<div class="card mb-4 shadow rounded-3">
 		<p class="card-header">Dashboard Theme</p>
 		<div class="card-body d-flex gap-2">
-			<button class="btn btn-outline-primary flex-grow-1"
+			<button class="btn bg-primary-subtle text-primary-emphasis flex-grow-1"
 			        @click="this.switchTheme('light')"
 			        :class="{active: this.dashboardConfigurationStore.Configuration.Server.dashboard_theme === 'light'}">
 				<i class="bi bi-sun-fill"></i>
 				Light
 			</button>
-			<button class="btn btn-outline-primary flex-grow-1"
+			<button class="btn bg-primary-subtle text-primary-emphasis flex-grow-1"
 			        @click="this.switchTheme('dark')"
 			        :class="{active: this.dashboardConfigurationStore.Configuration.Server.dashboard_theme === 'dark'}">
 				<i class="bi bi-moon-fill"></i>

src/static/app/src/components/settingsComponent/peersDefaultSettingsInput.vue

@@ -9,7 +9,6 @@ export default {
 		title: String,
 		warning: false,
 		warningText: "",
-		
 	},
 	setup(){
 		const store = DashboardConfigurationStore();

src/static/app/src/views/settings.vue

@@ -10,11 +10,13 @@ import DashboardSettingsInputWireguardConfigurationPath
 import DashboardTheme from "@/components/settingsComponent/dashboardTheme.vue";
 import DashboardSettingsInputIPAddressAndPort
 	from "@/components/settingsComponent/dashboardSettingsInputIPAddressAndPort.vue";
+import DashboardAPIKeys from "@/components/settingsComponent/dashboardAPIKeys.vue";
 
 export default {
 	name: "settings",
 	methods: {ipV46RegexCheck},
 	components: {
+		DashboardAPIKeys,
 		DashboardSettingsInputIPAddressAndPort,
 		DashboardTheme,
 		DashboardSettingsInputWireguardConfigurationPath,
@@ -60,7 +62,6 @@ export default {
 						:warning="true"
 						warning-text="Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code>"
 					>
-
 					</DashboardSettingsInputWireguardConfigurationPath>
 				</div>
 			</div>
@@ -76,6 +77,7 @@ export default {
 					</AccountSettingsInputPassword>
 				</div>
 			</div>
+			<DashboardAPIKeys></DashboardAPIKeys>
 		</div>
 	</div>
 </template>

src/static/css/dashboard.css

@@ -1132,7 +1132,8 @@ pre.index-alert {
 }
 
 .zoom-enter-active,
-.zoom-leave-active {
+.zoom-leave-active, .zoomReversed-enter-active,
+.zoomReversed-leave-active {
     transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 0.9);
     /*position: absolute;*/
     /*padding-top: 50px*/
@@ -1144,3 +1145,12 @@ pre.index-alert {
     filter: blur(3px);
     opacity: 0;
 }
+
+.zoomReversed-enter-from,
+.zoomReversed-leave-to {
+    transform: scale(0.9);
+    filter: blur(3px);
+    opacity: 0;
+}
+
+