From eca851dc08d9993141728b8104227950d51e7d4b Mon Sep 17 00:00:00 2001
From: danielvici123 <danielauto1000@gmail.com>
Date: Tue, 18 Feb 2025 17:48:10 +0100
Subject: [PATCH] =?UTF-8?q?kleine=20ver=C3=A4nderung=20und=20popup=20(bei?=
 =?UTF-8?q?=20kontakte)=20sowie=20testphase=20stay=20logged=20in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home_components/contacts.vue   | 27 +++++--
 src/components/home_components/feed.vue       | 22 +++++-
 src/components/home_components/popup_chat.vue | 75 +++++++++++++++++++
 .../home_components/quick_search.vue          |  3 +-
 .../login_components/login_comp.vue           | 36 +++++----
 .../register_components/register_main.vue     |  6 +-
 src/router/index.ts                           |  1 -
 7 files changed, 140 insertions(+), 30 deletions(-)
 create mode 100644 src/components/home_components/popup_chat.vue

diff --git a/src/components/home_components/contacts.vue b/src/components/home_components/contacts.vue
index 4dd73c9..d5be228 100644
--- a/src/components/home_components/contacts.vue
+++ b/src/components/home_components/contacts.vue
@@ -1,9 +1,20 @@
 <script setup lang="ts">
-const contacts =[
-    {display_name: "Linux Enjoyer", username: "lunix"},
-    {display_name: "XBOX", username: "Xbox"},
-    {display_name: "JETBrains", username: "Jetbrains"},
-]
+import { ref } from 'vue';
+import Popup_chat from "./popup_chat.vue";
+
+const contacts = [
+  { display_name: "Linux Enjoyer", username: "lunix" },
+  { display_name: "XBOX", username: "xbox" },
+  { display_name: "JETBrains", username: "jetbrains" },
+];
+
+const selectedContact = ref(null);
+const showChatPopup = ref(false);
+
+function openChat(contact) {
+  selectedContact.value = contact;
+  showChatPopup.value = true;
+}
 </script>
 
 <template>
@@ -13,19 +24,19 @@ const contacts =[
     </div>
     <div> <!--CONTENT-->
       <ul class="space-y-1">
-        <li v-for="(contact) in contacts" :key="contact" class="flex rounded-lg">
+        <li v-for="(contact) in contacts" :key="contact.username" @click="openChat(contact)" class="flex rounded-lg p-2 cursor-pointer">
           <!--CONTACT-->
           <img src="../../assets/default_pp.png" alt="" class="w-12 h-12 mr-2"> <!--PROFILBILD-->
           <div class="">
-            <label class=" font-bold m-1 text-weiss">{{ contact.display_name }}</label><br> <!-- display name-->
+            <label class="font-bold m-1 text-weiss">{{ contact.display_name }}</label><br> <!-- display name-->
             <p class="text-base m-1 text-grau2 underline-offset-3">@{{ contact.username }}</p> <!-- username-->
           </div>
         </li>
       </ul>
     </div>
+    <popup_chat v-if="showChatPopup" :contact="selectedContact" @close="showChatPopup = false" />
   </div>
 </template>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/components/home_components/feed.vue b/src/components/home_components/feed.vue
index f197bcf..41072be 100644
--- a/src/components/home_components/feed.vue
+++ b/src/components/home_components/feed.vue
@@ -1,7 +1,25 @@
 <script setup lang="ts">
-  import { ref } from "vue";
+import {onMounted, ref} from "vue";
+  import router from "../../router";
   // import {valueOf} from "tailwindcss";
 
+  function checkLoginStatus() {
+    const isLoggedIn = localStorage.getItem('isLoggedIn');
+    if (isLoggedIn === 'true') {
+      console.log("User is logged in");
+      // Perform actions for logged-in users
+    } else {
+      console.log("User is not logged in");
+      // Redirect to login page or show a message
+      // router.push('/login');
+    }
+  }
+
+  // Call this function on component mount or when needed
+  onMounted(() => {
+    checkLoginStatus();
+  });
+
   // PLACEHOLDER
   const post = ref([
     {id: 1,
@@ -60,7 +78,7 @@
 </script>
 
 <template>
-  <div class="border-x-2 border-x-grau2"> <!-- MAIN -->
+  <div class="border-x border-x-grau2"> <!-- MAIN -->
     <div> <!-- FEED HEADER -->
       <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Feed</h2>
       <!-- POSTING-->
diff --git a/src/components/home_components/popup_chat.vue b/src/components/home_components/popup_chat.vue
new file mode 100644
index 0000000..2b9bf3c
--- /dev/null
+++ b/src/components/home_components/popup_chat.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, onMounted, watch } from 'vue';
+
+let current_contact = null;
+let self = "danielvici123";
+
+const nachrichten = [
+  { username: "lunix", message: "Moin", msg_id: 1, chat_id: 16423 },
+  { username: "xbox", message: "Hey, was geht?", msg_id: 2, chat_id: 29874 },
+  { username: "danielvici123", message: "Alles gut, und bei dir?", msg_id: 3, chat_id: 29874 },
+  { username: "jetbrains", message: "Hat jemand Erfahrung mit IntelliJ?", msg_id: 4, chat_id: 41235 },
+  { username: "danielvici123", message: "Ja, was brauchst du?", msg_id: 5, chat_id: 41235 },
+  { username: "jetbrains", message: "Wie kann ich Plugins effizient verwalten?", msg_id: 6, chat_id: 41235 }
+];
+
+let geladeneNachrichten = [];
+const props = defineProps({
+  contact: Object
+});
+
+const emit = defineEmits(['close']);
+
+function closeChat() {
+  emit('close');
+}
+
+function openCHAT() {
+  geladeneNachrichten = [];
+  console.log("Chat geöffnet");
+  current_contact = props.contact;
+  console.log(current_contact);
+
+  nachrichten.forEach((nachricht) => {
+    if (nachricht.username == current_contact.username) {
+      geladeneNachrichten.push(nachricht);
+    }
+  });
+  console.log(geladeneNachrichten);
+}
+
+onMounted(() => {
+  openCHAT();
+});
+
+watch(() => props.contact, () => {
+  openCHAT();
+});
+</script>
+
+<template>
+  <div class="fixed bottom-0 right-0 m-4 p-4 bg-schwarz text-weiss rounded-lg shadow-lg w-80">
+    <div class="flex justify-between items-center bborder-b-2 border-b-grau2">
+      <div class="flex">
+        <h3 class="text-lg font-bold">{{ contact.display_name }}</h3>
+        <a class="px-2">@{{ contact.username }}</a>
+      </div>
+      <button @click="closeChat" class="text-logo-farbe-rot">X</button>
+    </div>
+    <div class="mt-2">
+      <ul class="space-y-2">
+        <li v-for="(msg) in geladeneNachrichten" :key="msg.msg_id">
+          <div class="space-x-2">
+            <a class="font-bold">{{contact.display_name}}</a>
+          </div>
+          <div>
+            <p>{{ msg.message }}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/home_components/quick_search.vue b/src/components/home_components/quick_search.vue
index abfd7f8..867e866 100644
--- a/src/components/home_components/quick_search.vue
+++ b/src/components/home_components/quick_search.vue
@@ -13,4 +13,5 @@
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
+
diff --git a/src/components/login_components/login_comp.vue b/src/components/login_components/login_comp.vue
index a13a698..30af123 100644
--- a/src/components/login_components/login_comp.vue
+++ b/src/components/login_components/login_comp.vue
@@ -1,43 +1,49 @@
 <script setup lang="ts">
 import router from "../../router";
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 let input_username_mail = ref("");
 let input_user_password = ref("");
+let rememberMe = ref(false);
+
+onMounted(() => {
+  if (localStorage.getItem('username')) {
+    input_username_mail.value = localStorage.getItem('username') || "";
+    input_user_password.value = localStorage.getItem('password') || "";
+    rememberMe.value = true;
+  }
+});
 
 async function login(event: Event) {
   event.preventDefault();
 
-
   const username = input_username_mail;
   const password = input_user_password;
 
-  console.log("Username: " + username.value + ", Password: " + password.value);
-
   try {
     const response = await fetch('http://localhost:8000/api/account/login', {
       method: 'POST',
       headers: {
-        'Content-Type': 'login/json',
+        'Content-Type': 'application/json',
       },
-      body: JSON.stringify({username: username.value, password: password.value}),
+      body: JSON.stringify({ username: username.value, password: password.value }),
     });
 
-
-    if (response["status"] == 200) {
-      alert("You will be now redirected")
+    if (response.status === 200) {
+      if (rememberMe.value) {
+        localStorage.setItem('username', username.value);
+      }
+      localStorage.setItem('isLoggedIn', 'true'); // Set the login flag
+      alert("You will be now redirected");
       router.push('/');
     } else {
       alert("Username/E-Mail or Password are wrong");
     }
-
-    const data = await response.json();
-    console.log(response);
   } catch (e) {
     console.log("An error has occurred. Please try again later.");
+    console.log(e)
   }
 }
-
 </script>
 
 <template>
@@ -50,8 +56,8 @@ async function login(event: Event) {
       <form class="flex flex-col items-center" @submit.prevent="login">
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_username_mail" type="text" placeholder="Username or E-Mail"><br>
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_user_password" type="password" placeholder="Password"><br>
-        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg hover:shadow-2xl hover:shadow-grau-dunkel">Login</button>
-        <p class="text-weiss"><input type="checkbox" > Remeber me</p>
+        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Login</button>
+        <p class="text-weiss"><input type="checkbox"> Remeber me</p>
       </form>
     </div>
     <div>
diff --git a/src/components/register_components/register_main.vue b/src/components/register_components/register_main.vue
index e978918..d53aa46 100644
--- a/src/components/register_components/register_main.vue
+++ b/src/components/register_components/register_main.vue
@@ -58,14 +58,14 @@ function handleSubmit(event: Event) {
       <p class="text-weiss text-center pt-2">Join today!</p>
     </div>
     <div class="px-20 pt-7"> <!--  FORM --->
-      <form class="flex flex-col items-center" action="register_main.vue">
+      <form class="flex flex-col items-center" @submit.prevent="register">
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_username" type="text" placeholder="Username" required><br>
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_displayname" type="text" placeholder="Displayname" required><br>
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_email" type="email" placeholder="E-Mail" required><br>
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_password " type="password" placeholder="Password" required><br>
-        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg hover:shadow-2xl hover:shadow-grau-dunkel">Create Account</button>
+        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Create Account</button>
       </form>
-      <p class="text-weiss text-center">Already have an account? <router-link to="/register" class="text-button-farbe">Login</router-link></p>
+      <p class="text-weiss text-center">Already have an account? <router-link to="/login" class="text-button-farbe">Login</router-link></p>
     </div>
   </div>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 4063e21..f93b426 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -48,7 +48,6 @@ const routes = [
         name: "Search",
         component: search,
     }
-
 ]
 
 const router = createRouter({