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>