Login für Tippen.vue hinzugefügt

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 -->