danielvici123/esp-projekt
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kleine änderung/anpassungen, login zwang, messages hinzugefügt,

Browse Source
This commit is contained in:
danielvici123
2025-03-22 12:51:56 +01:00
parent 7331b1b9b0
commit 932edc5a2b
25 changed files with 938 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/icons/logout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 B

3
src/components/Home.vue
View File

@@ -8,10 +8,9 @@ import Trending from "./home_components/trending.vue";
<template>
<div id="main" class="bg-hintergrund-farbe flex">
<div id="main" class="flex">
<div id="left" class="border border-b-grau w-72">
<navigationbar></navigationbar>
<trending></trending>
</div>
<div class="w-100p">
<feed></feed>

6
src/components/Login.vue
View File

@@ -12,11 +12,11 @@ function route_home() {
<template>
<div id="main" class="bg-hintergrund-farbe flex p-2 justify-between">
<div class="pt-5">
<img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home">
<div class="pt-5 ">
<img src="../assets/esp-logo_no_text.png" alt="" class=" rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home">
</div>
<login_comp class="inset-0"></login_comp>
<div class="inset-y-0 right-0 ">
<div class="inset-y-0 right-0 max-w-36">
<legal></legal>
</div>
</div>

1
src/components/home_components/contacts.vue
View File

@@ -6,6 +6,7 @@ const contacts = [
{ display_name: "Linux Enjoyer", username: "lunix" },
{ display_name: "XBOX", username: "xbox" },
{ display_name: "JETBrains", username: "jetbrains" },
{ display_name: "klopupser13", username: "theopampa",}
];
const selectedContact = ref(null);

22
src/components/home_components/feed.vue
View File

@@ -2,24 +2,22 @@
import {onMounted, ref} from "vue";
import router from "../../router";
// import {valueOf} from "tailwindcss";
function checkLoginStatus() {
/* PRÜFEN OB USER EINGELOGGT IST
#########################################
* function checkLoginStatus() {
const isLoggedIn = localStorage.getItem('isLoggedIn');
if (isLoggedIn === 'true') {
console.log("User is logged in");
// Perform actions for logged-in users
console.log("User is logged in");
} else {
console.log("User is not logged in");
// Redirect to login page or show a message
// router.push('/login');
console.log("User is not logged in");
router.push('/login');
}
}
}
// Call this function on component mount or when needed
onMounted(() => {
onMounted(() => {
checkLoginStatus();
});
});
* */
// PLACEHOLDER
const post = ref([
{id: 1,

4
src/components/home_components/navigationbar.vue
View File

@@ -10,7 +10,7 @@ let self = ref("danielvici123");
</script>
<template>
<div class="pt-4 border-b-2 border-b-grau2 border-r-1 border-r-grau2">
<div class="pt-4 border-b-2 border-b-grau2">
<div class="items-center flex justify-center"><!-- BILD-->
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto hover:shadow-2xl hover:shadow-grau-dunkel" @click="router.push('/')">
</div>
@@ -18,7 +18,7 @@ let self = ref("danielvici123");
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/')"><img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/home.png" alt=""> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/search')"> <img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/lupe.png" alt="">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot rounded-lg" @click="router.push('/notifications')"> <img class="mr-2 p-1 bg-logo-farbe-rot rounded-lg" src="../../assets/icons/glocke.png" alt="">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot rounded-lg" @click="router.push('/wip')"> <img class="mr-2 p-1 bg-logo-farbe-rot rounded-lg" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot rounded-lg" @click="router.push('/messages')"> <img class="mr-2 p-1 bg-logo-farbe-rot rounded-lg" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push(`/profile/${self}`)"> <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/user.png" alt="">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push('/settings')"> <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
</div>

50
src/components/home_components/popup_chat.vue
View File

@@ -1,16 +1,19 @@
<script setup lang="ts">
import {defineProps, defineEmits, onMounted, watch, ref} from 'vue';
import { nextTick } 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 }
{ display_name: "Linux Enjoyer", username: "lunix", message: "Moin", msg_id: 1, chat_id: 16423 },
{ display_name: "XBOX",username: "xbox", message: "Hey, was geht?", msg_id: 2, chat_id: 29874 },
{ display_name: "danielvici223", username: "danielvici123", message: "Alles gut, und bei dir?", msg_id: 3, chat_id: 29874 },
{ display_name: "JETBrains",username: "jetbrains", message: "Hat jemand Erfahrung mit IntelliJ?", msg_id: 4, chat_id: 41235 },
{ display_name: "danielvici223",username: "danielvici123", message: "Ja, was brauchst du?", msg_id: 5, chat_id: 41235 },
{ display_name: "JETBrains",username: "jetbrains", message: "Wie kann ich Plugins effizient verwalten?", msg_id: 6, chat_id: 41235 },
{ display_name: "klopupser13", username: "theopampa", message: "ja ok können wir machen", msg_id: 7, chat_id: 41245 },
{ display_name: "danielvici223",username: "danielvici123", message: "willst du fornite", msg_id: 7, chat_id: 41245 },
];
let geladeneNachrichten = ref([]);
@@ -28,18 +31,35 @@ function closeChat() {
function openCHAT() {
geladeneNachrichten.value = [];
console.log("Chat geöffnet");
current_contact = props.contact;
// conact ist null dann abruch
if(!props.contact) return;
// contact ist der aktuelle kontakt
current_contact = props.contact ? { ...props.contact } : null;
console.log(current_contact);
nachrichten.forEach((nachricht) => {
if (nachricht.username == current_contact.username) {
/*nachrichten.forEach((nachricht) => {
if ((nachricht.username == current_contact.username || nachricht.username == self) && nachricht.chat_id == current_contact.chat_id) {
geladeneNachrichten.value.push(nachricht);
}
});
*/
geladeneNachrichten.value = nachrichten.filter((nachricht) => {
console.log(`Nachricht von ${nachricht.username} mit Chat-ID ${nachricht.chat_id}`);
return (
(nachricht.username === current_contact.username || nachricht.username === self) &&
nachricht.chat_id == current_contact.chat_id
);
});
console.log("Nach dem Filtern:", geladeneNachrichten.value);
console.log(geladeneNachrichten);
}
function sendMessage(){
function sendMessage(event){
event.preventDefault();
// API nachricht senden
console.log("Nachricht gesendet")
@@ -47,10 +67,14 @@ function sendMessage(){
onMounted(() => {
openCHAT();
console.log("Current Contact:", current_contact);
});
watch(() => props.contact, () => {
openCHAT();
console.log("Current Contact:", current_contact);
});
</script>
@@ -61,13 +85,13 @@ watch(() => props.contact, () => {
<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"><img src="../../assets/icons/x-klein.png" alt=""></button>
<button @click="closeChat"><img src="../../assets/icons/x-klein.png" alt=""></button>
</div>
<div class="mt-2">
<ul class="space-y-2">
<li v-for="(msg) in geladeneNachrichten" :key="msg.msg_id">
<li v-for="(msg) in geladeneNachrichten" :key="msg.msg_id || msg.id">
<div class="space-x-2">
<a class="font-bold">{{contact.display_name}}</a>
<a class="font-bold">{{ msg.display_name }}</a>
</div>
<div>
<p>{{ msg.message }}</p>

8
src/components/login_components/login_comp.vue
View File

@@ -33,7 +33,7 @@ async function login(event: Event) {
if (rememberMe.value) {
localStorage.setItem('username', username.value);
}
localStorage.setItem('isLoggedIn', 'true'); // Set the login flag
localStorage.setItem('isLoggedIn', 'true');
alert("You will be now redirected");
router.push('/');
} else {
@@ -47,10 +47,10 @@ async function login(event: Event) {
</script>
<template>
<div class="px-20 border-x border-x-grau2 pb-35p">
<div class="px-20 border-x border-x-grau2 pb-32">
<div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT-->
<p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p>
<p class="text-weiss text-center">Login or create a new Account to continue</p>
<p class="text-weiss text-center">Login to continue</p>
</div>
<div class="px-20 pt-7"><!-- FORM --->
<form class="flex flex-col items-center" @submit.prevent="login">
@@ -62,8 +62,10 @@ async function login(event: Event) {
</div>
<div>
<p class="text-weiss text-center">No Account? <router-link to="/register" class="text-button-farbe">Register here</router-link></p>
<p class="text-weiss text-center"> <router-link to="/wip" class="text-button-farbe">Forgot password?</router-link> </p>
</div>
</div>
</template>
<style scoped>

27
src/components/messages.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup>
import Contacts from "./home_components/contacts.vue";
import Feed from "./home_components/feed.vue";
import Legal from "./home_components/legal.vue";
import Navigationbar from "./home_components/navigationbar.vue";
import Msg_main from "./messages_components/msg_main.vue";
</script>
<template>
<div id="main" class=" flex">
<div id="left" class="w-72">
<navigationbar></navigationbar>
</div>
<div class="w-100p">
<msg_main></msg_main>
</div>
<div class="w-1/4">
<contacts></contacts>
<legal></legal>
</div>
</div>
</template>
<style scoped>
</style>

60
src/components/messages_components/msg_main.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup lang="ts">
import {ref} from "vue";
import Popup_chat from "../home_components/popup_chat.vue";
const nachrichten = ref([
{id: 1,
profile_picture: "../../assets/default_pp.png", display_name: "Linux Enjoyer",username: "lunix",
content:"Moin!",
type:"message",date: new Date(2024,11,13).toDateString() },
{id: 2,
profile_picture: "../../assets/default_pp.png",
display_name: "XBOX",username: "xbox",
content: "Hey, was geht?",
type:"message",date: new Date(2024,9,13).toDateString()},
{id: 4,// Sollte im feed sein
profile_picture: "../../assets/default_pp.png",
display_name: "klopupser13", username: "theopampa",
content: "ja ok können wir machen",
type:"following",date: new Date(2025,1,15).toDateString()}
]);
const selectedContact = ref(null);
const showChatPopup = ref(false);
function openChat(contact) {
selectedContact.value = contact;
showChatPopup.value = true;
}
</script>
<template>
<div class="border-x-grau2 border-x-2">
<div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Messages</h1>
</div>
<div>
<ul>
<li v-for="nachricht in nachrichten" :key="nachricht.id" class="border-b-grau2 border-b-2" @click="openChat(nachricht)">
<div class="flex p-4">
<img src="../../assets/default_pp.png" alt="user profile picture" class="rounded-full w-16 h-16">
<div>
<div class="flex">
<label class="text-lg font-bold m-1 text-weiss">{{nachricht.display_name}}</label>
<label class="text-lg m-1 text-grau2">@{{nachricht.username}}</label>
<label class="m-2 text-grau2">{{nachricht.date}}</label>
</div>
<a class="ml-1 text-weiss">{{nachricht.content}}</a>
</div>
</div>
</li>
</ul>
</div>
<popup_chat v-if="showChatPopup" :contact="selectedContact" @close="showChatPopup = false" />
</div>
</template>
<style scoped>
</style>

3
src/components/notifications.vue
View File

@@ -12,9 +12,6 @@ import Contacts from "./home_components/contacts.vue";
<navigationbar></navigationbar>
</div>
<div class="w-100p border-x-2 border-x-grau2">
<div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Notifications</h1>
</div>
<notifi_comp></notifi_comp>
</div>
<div class="w-1/4">

41
src/components/notifications_components/notif_sidebar.vue
View File

@@ -1,41 +0,0 @@
<!---WIRD NICHT MEHR BENTUTZ ABER VIELLEICHT SPÄTER IRGENDWAN WICHTIG -->
<script setup lang="ts">
import { ref } from 'vue';
import router from "../../router";
const componentsStatus = ref({});
const selected_destination = ref('');
const props = defineProps({
selectedNotification: String
});
const selectedNotification = ref('');
function handleUpdateNotification(setting: string) {
selectedNotification.value = setting;
}
function fun_route(destination: string) {
selected_destination.value = destination;
if (componentsStatus.value[destination] === 'wip') {
router.push("wip");
} else {
}
}
</script>
<template>
<div class="flex flex-col align-middle space-y-5 pt-3 pl-3 pb-4 pr-2 font-bold text-xl text-grau2">
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1 " @click="fun_route('all')" :class="{'text-weiss': selected_destination === 'all' || selected_destination === ''}">All</p>
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('following')" :class="{'text-weiss': selected_destination === 'following'}">You Following</p>
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('messages')" :class="{'text-weiss': selected_destination === 'messages'}">Messages</p>
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('other')" :class="{'text-weiss': selected_destination === 'other'}">Other</p>
</div>
</template>
<style scoped>
</style>

4
src/components/notifications_components/notifi_main.vue
View File

@@ -79,7 +79,11 @@ function go_filter(){
<template>
<div>
<div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Notifications</h1>
</div>
<div class="text-grau2 p-5 border-b-2 "><!-- FILTER -->
<!-- Wenn das Form submited wurde wird die Seite nicht-->
<!-- neugeladen und die Funktion -->
<form @submit.prevent="go_filter">

14
src/components/profile_components/profile_main.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {countPosts} from "../../../database/utils";
const route = useRoute();
const router = useRouter();
@@ -26,10 +27,12 @@ const post = ref([
])
onMounted(async () => {
const countPosts = post.value.length;
});
//Wird bearbeitet wenn API dazu da ist.
/*
function fetchProfile(userId) {
// Replace with your actual API call
return fetch(`/api/profile/${userId}`)
.then(response => {
if (!response.ok) {
@@ -48,7 +51,6 @@ onMounted(async () => {
console.error('Error fetching profile:', error);
}
});
router.beforeEach((to, from, next) => {
if ((from.name === 'Feed' || from.name === 'Settings') && to.name === 'Profile') {
// Set profile to 'danielvici123'
@@ -65,7 +67,7 @@ router.beforeEach((to, from, next) => {
next();
}
});
*/
function addLike(index: number) {
post.value[index].likes += 1;
@@ -97,7 +99,7 @@ function addLike(index: number) {
<div> <!-- POSTS -->
<div>
<h2 class="align-middle mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts</h2>
<h2 class="align-middle mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts ({{countPosts()}})</h2>
</div>
<ul>
<li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">

1
src/components/settings.vue
View File

@@ -2,7 +2,6 @@
import { ref } from 'vue';
import Legal from "./home_components/legal.vue";
import Settings_sidebar from "./settings_components/settings_sidebar.vue";
import Settings_navbar from "./settings_components/settings_navbar.vue";
import Settings_main from "./settings_components/settings_main.vue";
import Navigationbar from "./home_components/navigationbar.vue";
import Contacts from "./home_components/contacts.vue";

10
src/components/settings_components/settings_main.vue
View File

@@ -3,6 +3,7 @@ import { ref } from 'vue';
import Settings_account from "./settings_account.vue";
import Settings_account_main from "./settings_account_main.vue";
import Sps_main from "./sps_main.vue";
import So_main from "./so_main.vue";
const props = defineProps({
selectedSetting: String
@@ -21,7 +22,7 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
<div class="text-weiss">
<div v-if="props.selectedSetting === 'setting_account'"> <!-- ACCOUNT SETTINGS-->
<div class="border-r-grau2 border-r-1 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
<h1 class="text-weiss text-3xl p-4">Account Settings</h1>
<h1 class="text-weiss text-3xl p-4">Account</h1>
</div>
<div class="flex flex-row content-center justify-center autofill:"> <!-- BODY - ACCOUNT SETTINGS-->
<settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>
@@ -49,7 +50,10 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
</div>
<div v-else-if="props.selectedSetting === 'setting_other'"> <!-- OTHER -->
<label>MOIN4</label>
<div class="border-r-grau2 border-r-1 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
<h1 class="text-weiss text-3xl p-4">Other</h1>
</div>
<so_main></so_main>
</div>
@@ -59,7 +63,7 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
<div v-else-if="props.selectedSetting === ''"> <!-- IF NOTHING SELECTED-->
<div class="border-r-grau2 border-r-1 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
<h1 class="text-weiss text-3xl p-4">Account Settings</h1>
<h1 class="text-weiss text-3xl p-4">Account</h1>
</div>
<div class="flex flex-row content-center justify-center"> <!-- BODY - ACCOUNT SETTINGS-->
<settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>

69
src/components/settings_components/settings_navbar.vue
View File

@@ -1,69 +0,0 @@
<script setup lang="ts">
// Funktionen um die Seiten zu öffnen
// home -> app.vue
import router from "../../router";
import { ref, onMounted } from 'vue';
const componentsStatus = ref({});
async function loadComponentsStatus() {
const response = await fetch('src/components/status.json');
componentsStatus.value = await response.json();
}
onMounted(() => {
loadComponentsStatus();
});
function fun_route(destination: string) {
if (componentsStatus.value[destination] === 'wip') {
router.push("wip");
} else {
switch (destination) {
case "home":
router.push("/");
break;
case "search":
router.push("search");
break;
case "notifications_components":
router.push("notifications_components");
break;
case "messages":
router.push("messages");
break;
case "accounts":
router.push("accounts");
break;
case "settings":
router.push("settings");
break;
default:
router.push("/");
break;
}
}
}
</script>
<template>
<div class="pt-4 border-b-2 border-b-grau2">
<div class="items-center flex justify-center">
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="fun_route('home')">
</div>
<div class="align-middle space-y-5 pt-3 pl-3 pb-4 font-bold text-xl">
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('home')"><img class="pr-2" src="../../assets/icons/home.png" alt=""> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('search')"><img class="pr-2" src="../../assets/icons/lupe.png" alt="">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="fun_route('notifications_components')"><img class="pr-2" src="../../assets/icons/glocke.png" alt="">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="fun_route('messages')"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="fun_route('accounts')"><img class="pr-2" src="../../assets/icons/user.png" alt="">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="fun_route('settings')"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
</div>
</div>
</template>
<style scoped>
</style>

1
src/components/settings_components/settings_sidebar.vue
View File

@@ -2,6 +2,7 @@
import { defineEmits } from 'vue';
import { ref } from 'vue';
const emit = defineEmits(['updateSetting']);
const selectedSetting = ref('');

23
src/components/settings_components/so_main.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import router from "../../router";
function logout() {
console.log("Logout");
localStorage.setItem('isLoggedIn', 'false');
router.push("/login");
}
</script>
<template>
<div class="text-grau2 font-bold space-y-4 pl-2 pt-5">
<label class="flex text-center shadow-2xl rounded-lg active:text-weiss" @click="logout"><img class="pr-2" src="../../assets/icons/logout.png" alt="">Logout</label>
</div>
</template>
<style scoped>
</style>

4
src/main.ts
View File

@@ -1,5 +1,5 @@
import './assets/main.css';
import { createApp } from 'vue';
import {createApp, onMounted} from 'vue';
// @ts-ignore:
import App from '../src/App.vue';
// @ts-ignore:
@@ -7,4 +7,4 @@ import router from "./router/index.ts";
const app = createApp(App);
app.use(router);
app.mount('#app');
app.mount('#app');

52
src/router/index.ts
View File

@@ -1,8 +1,5 @@
// File: `src/router/index.ts`
import { createRouter, createWebHistory } from "vue-router";
// Vue components imported here.
// the vue components are the Pages that will be rendered
// at these URL's.
import Home from "../components/Home.vue";
import Login from "../components/Login.vue";
import wip from "../components/wip.vue";
@@ -10,63 +7,86 @@ import settings from "../components/settings.vue";
import notifications from "../components/notifications.vue";
import register from "../components/register.vue";
import search from "../components/search.vue";
import post from '../components/posts.vue';
import post from "../components/posts.vue";
import profile from "../components/profile.vue";
// The routing does not happen automatically
// Each route has to be defined here, or it won't work.
import messages from "../components/messages.vue";
const routes = [
{
path: "/",
name: "home",
component: Home,
meta: { requiresAuth: true }
},
{
path: "/login",
name: "login",
component: Login,
component: Login
},
{
path: "/wip",
name: "Work in Progress",
component: wip,
meta: { requiresAuth: true }
},
{
path: "/settings",
name: "Settings",
component: settings,
meta: { requiresAuth: true }
},
{
path: "/notifications",
name: "Notifications",
component: notifications,
meta: { requiresAuth: true }
},
{
path: "/register",
name: "Register",
component: register,
component: register
},
{
path: "/search",
name: "Search",
component: search,
meta: { requiresAuth: true }
},
{
path: '/post/:id',
name: 'PostDetail',
path: "/post/:id",
name: "PostDetail",
component: post,
props: true
props: true,
meta: { requiresAuth: true }
},
{
path: '/profile/:username',
name: 'Profile ',
path: "/profile/:username",
name: "Profile",
component: profile,
props: true
props: true,
meta: { requiresAuth: true }
},
{
path: "/messages",
name: "Messages",
component: messages,
meta: { requiresAuth: true }
}
]
];
const router = createRouter({
history: createWebHistory("/"),
routes,
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && localStorage.getItem("isLoggedIn") !== "true") {
console.log("User not logged in: redirecting to login.");
next({ name: "login" });
} else {
console.log("User logged in or no auth required.");
next();
}
});
export default router;