Login für Tippen.vue hinzugefügt

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-opener": "^2",
+        "crypto-js": "^4.2.0",
         "embla-carousel-vue": "^8.6.0",
         "jarallax": "^2.2.1",
         "jquery": "^3.7.1",
@@ -1260,9 +1261,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1312,6 +1313,12 @@
         "node": ">=16"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1413,9 +1420,9 @@
       "license": "MIT"
     },
     "node_modules/fdir": {
-      "version": "6.4.3",
+      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -2126,13 +2133,13 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.12",
+      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2"
       },
       "engines": {
@@ -2177,18 +2184,18 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "6.3.0",
+      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-9aC0n4pr6hIbvi1YOpFjwQ+QOTGssvbJKoeYkuHHGWwlXfdxQlI8L2qNMo9awEEcCPSiS+5mJZk5jH1PAqoDeQ==",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
         "rollup": "^4.34.9",
-        "tinyglobby": "^0.2.12"
+        "tinyglobby": "^0.2.13"
       },
       "bin": {
         "vite": "bin/vite.js"

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "crypto-js": "^4.2.0",
     "embla-carousel-vue": "^8.6.0",
     "jarallax": "^2.2.1",
     "jquery": "^3.7.1",

src/components/bulitipp/Tippen.vue

@@ -0,0 +1,77 @@
+<script lang="ts">
+import ritzenbergenlib from "../../ritzenbergenlib";
+
+export default {
+  props: ["token"],
+  data() {
+    return {
+      spieltag: "",
+      vmodelspieltag: "",
+    };
+  },
+  asyncComputed: {
+    userinfo: {
+      get() {
+        if (this.token == null) return null;
+        return fetch(
+          ritzenbergenlib.RitzenbergenLib.api(
+            "/bulitipp/userinfo.php?token=" + this.token
+          )
+        )
+          .then((response) => response.json())
+          .catch((error) => {
+            console.error("Error fetching user info:", error);
+            return null;
+          });
+      },
+      default: null,
+    },
+  },
+  emits: ["logout"]
+};
+</script>
+<template>
+    <div>
+        
+  <div v-if="(spieltag == '' || spieltag == null) && userinfo != null">
+    <h1>Moin {{ userinfo.username }}!</h1>
+    <br /><br />
+    <form @submit.prevent="spieltag = parseInt(vmodelspieltag)">
+      <input
+        type="text"
+        v-model="vmodelspieltag"
+        placeholder="Spieltag"
+        required
+      />
+      <input type="submit" value="Tippen" />
+      <br><br>
+      <input type="button" value="Ausloggen" @click="$emit('logout')" />
+    </form>
+  </div>
+  <div class="tippenEintragen" v-else>
+    <form @submit.prevent="" id="mainform">
+      <span class="paarung">
+        <img src="./get-buli-image.php?team=Bremen" alt="" />
+        <span class="team-name">Heim</span>
+
+        <input type="number" min="0" class="score" required />
+        <span class="vs"></span>
+        <input type="number" min="0" class="score" required />
+        <span class="team-name">Gast</span
+        ><img src="./get-buli-image.php?team=Bremen" alt="" /><br />
+      </span>
+      <!--<h1>Deadline überschritten!</h1>
+    <h1>
+        BuLi-Tipp ist noch nicht für diesen Spieltag vorbereitet worden...
+        Versuch es wannanders nochmal!
+      </h1>-->
+      
+      <input type="submit" value="Tippen" />
+      <br><br>
+      <input type="button" value="Abbrechen" @click="spieltag=''" />
+    
+    </form>
+  </div>
+
+    </div>
+</template>

src/components/bulitipp/TippenEinloggen.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+import CryptoJS from 'crypto-js';
+
+    export default {
+        data() {
+            return {
+                kuerzel: "",
+                password: ""
+            }
+            
+        },
+        methods: {
+            login(){
+                this.$emit("login", this.kuerzel, CryptoJS.SHA256(this.password).toString(CryptoJS.enc.Hex));
+                this.kuerzel="";
+                this.password="";
+            }
+        },
+        props: {
+            wrongpassword: {
+                type: Boolean,
+                default: false
+            }
+        },
+        emits: ["login"]
+    }
+</script>
+<template>
+    <div>
+<h1>Einloggen</h1>
+    <form @submit.prevent="login">
+        <input type="text" placeholder="Kürzel" v-model="kuerzel" required />
+        <input type="password" placeholder="Passwort" v-model="password" required />
+        <input type="submit" value="Einloggen">
+        <div v-if="wrongpassword">
+            Falsches Passwort oder Kürzel! Bitte versuche es erneut.
+        </div>
+    </form>
+    </div>
+</template>

src/crypto-js.d.ts

@@ -0,0 +1 @@
+declare module 'crypto-js';

src/views/Bulitipp.vue

@@ -10,6 +10,8 @@ import RitzenbergenLib from "../ritzenbergenlib.ts";
 import SpieltagSumme from "../ritzenbergenlib.ts";
 import Loading from "../components/bulitipp/Loading.vue";
 import $ from "jquery";
+import Tippen from "../components/bulitipp/Tippen.vue";
+import TippenEinloggen from "../components/bulitipp/TippenEinloggen.vue";
 
 export default {
   components: {
@@ -20,7 +22,9 @@ export default {
     Rangliste,
     Paarungsergebnisse,
     Tabelle,
-    Loading
+    Loading,
+    Tippen,
+    TippenEinloggen
   },
   asyncComputed: {
     users: {
@@ -134,6 +138,25 @@ export default {
       },
       watch: ["maxspieltag"],
       default: []
+    },
+    token: {
+      get(){
+        return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/login.php?kuerzel="+this.kuerzel+"&password="+this.password))
+        .then((response)=>response.text())
+        .then((response)=>response=="Benutzer nicht gefunden"?null:response)
+        .then((response)=>{
+          if(response == "Falsches Passwort") {
+            this.wrongpassword = true;
+            return null;
+          } else {
+            this.wrongpassword = false;
+            return response;
+          }
+        });
+      },
+      default: null,
+      watch: ["kuerzel", "password"],
+      
     }
   },
   computed: {
@@ -157,12 +180,26 @@ export default {
     update(){
       location.reload();
     },
-    
+    login(kuerzel, password){
+      console.log("Login");
+      this.kuerzel = kuerzel;
+      this.password = password;
+    },
+    logout(){
+      this.token=null;
+      this.kuerzel = "";
+      this.password = "";
+      this.wrongpassword = false;
+    }
   },
   data(){
     return {
       tippenoffen: false,
-      debug: false
+      debug: false,
+      amtippen: false,
+      kuerzel: "",
+      password: "",
+      wrongpassword: false
     }
   }
 };
@@ -196,10 +233,12 @@ export default {
   </section>
 
   <Modal v-show="tippenoffen" @closemodal="tippenoffen = false">
-    <h1>Test</h1>
+    <Tippen v-show="token!=null" :token="token" @logout="logout"/>
+ 
+    <TippenEinloggen v-show="token==null" @login="login" :wrongpassword="wrongpassword" />
   </Modal>
 
-
+  
   <Uebersicht :users="users" />
 
   <!-- Rangliste -->