Formulare optimiert, Admin Panel angefangen

package.json

@@ -12,14 +12,18 @@
     "tauribuild": "tauri build"
   },
   "dependencies": {
+    "@formkit/themes": "^1.7.2",
+    "@formkit/vue": "^1.7.2",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "bcryptjs": "^3.0.3",
     "crypto-js": "^4.2.0",
     "embla-carousel-vue": "^8.6.0",
     "jarallax": "^2.2.1",
     "jquery": "^3.7.1",
     "katex": "^0.16.27",
     "moment": "^2.30.1",
+    "process": "^0.11.10",
     "sloc": "^0.3.2",
     "striptags": "^3.2.0",
     "vscode-langservers-extracted": "^4.10.0",

src/components/FormResults.vue

@@ -90,4 +90,7 @@ function prettyResult(result: any) {
 
 <style scoped>
 @import "../assets/css/bulitipp2.css";
+td {
+		min-width: 150px;
+}
 </style>

src/components/startseite/Forms.vue

@@ -35,6 +35,7 @@ function openModal(form: Formular){
 	modalOpened.value=true;
 }
 
+const values=ref({});
 </script>
 <template>
 		<Modal v-show="modalOpened" @closemodal="modalOpened=false">
@@ -53,7 +54,7 @@ function openModal(form: Formular){
 							</h3>
 							<br />
 							<h5 style="text-align: center">
-								<b @click="openModal(form)">{{ form.minitext }}
+								<b @click="openModal(form)" class="fakelink">{{ form.minitext }}
 </b> <br />
 															</h5>
 							<br />
@@ -80,8 +81,11 @@ function openModal(form: Formular){
 									{{
 										field.displayvalue ?? field.displayname ?? field.name
 									}}:
+								<span v-if="field.type == 'range'"
+									><br />{{ values[field.name] }}</span
+								>
 								</label>
-								<input
+								<FormKit
 									v-if="field.type != 'textarea'"
 									:id="'field-' + field.id"
 									:type="field.type"
@@ -94,6 +98,8 @@ function openModal(form: Formular){
 									:checked="field.checked"
 									:title="field.title"
 									:value="field.value"
+									v-model="values[field.name]"
+
 								/>
 								<textarea
 									v-else
@@ -105,9 +111,7 @@ function openModal(form: Formular){
 									:title="field.title"
 									:value="field.value"
 								></textarea>
-								<span v-if="field.type == 'range'"
+								
-									><br />{{ field.value }}</span
-								>
 							</div>
 
 							<div
@@ -132,4 +136,9 @@ function openModal(form: Formular){
 label {
 	margin-right: 10px;
 }
+.fakelink{
+		color: blue;
+		text-decoration: underline;
+		cursor: pointer;
+}
 </style>

src/main.ts

@@ -2,8 +2,11 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import AsyncComputed from "vue-async-computed";
+import '@formkit/themes/genesis'
+import { plugin, defaultConfig } from '@formkit/vue'
 
 createApp(App)
 .use(router)
 .use(AsyncComputed)
+.use(plugin,defaultConfig())
 .mount("#app");

src/router/index.ts

@@ -14,6 +14,10 @@ const routes = [
   { path: '/anmeldeformular', component: () => import("../views/Main.vue")},
   { path: "/bulitipp", component: () => import("../views/Bulitipp.vue") },
   { path: "/bulitipp/tippen", component: () => import("../views/Bulitipp.vue") },
+  { path: "/adminpanel/login", component: () => import("../views/adminpanel/AdminPanelLogin.vue") },
+  { path: "/adminpanel/:token", component: () => import("../views/adminpanel/Main.vue"), name: "adminpanel-main" },
+  { path: "/adminpanel", component: () => import("../views/adminpanel/Main.vue") },
+
 ]
 
 export default createRouter({

src/views/adminpanel/AdminPanelLogin.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+		import Navbar from "../../components/Navbar.vue";
+		import { ref } from "vue";
+		import bcrypt from "bcryptjs";
+		import { useRouter } from 'vue-router'
+
+		const router = useRouter()
+		const saltRounds = 12;
+
+		async function login(){
+				const username2=username.value;
+				const password2=await bcrypt.hash(password.value,saltRounds);
+				
+				router.push({ name: "adminpanel-main", params: { token: password2 } })
+		}
+
+		const username=ref("");
+		const password=ref("");
+
+</script>
+<template>
+		<br>
+		<br>
+		<br>
+		<br>
+		<br>
+		<h1>Test</h1>
+		<Navbar/>
+		<form @submit.prevent="login()">
+				<input type="text" placeholder="Benutzername" v-model="username"/>
+				<input type="password" placeholder="Passwort" v-model="password"/>
+				<input type="submit" value="Login"/>
+		</form>
+
+</template>
+<style scoped></style>

src/views/adminpanel/Main.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+		import { useRoute } from 'vue-router'
+		import { ref } from "vue";
+
+		const route = useRoute();
+
+		const token=ref(route.params.token);
+</script>
+<template>
+	<h1>Admin Panel</h1>
+	<p>Token: {{ token }}</p>
+</template>