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

etwas responsible gemacht, posten und commentieren geht profile machen

Browse Source
This commit is contained in:
danielvici123
2025-03-26 22:43:39 +01:00
parent 5a5cf84197
commit 9a8237de42
11 changed files with 281 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Home.vue
View File

@@ -8,14 +8,14 @@ import Trending from "./home_components/trending.vue";
<template>
<div id="main" class="flex md:flex-col">
<div id="left" class="w-72 min-w-72 md:full">
<div id="main" class="sm:flex overflow-y-auto h-screen scrollbar">
<div id="left" class="sm:w-72 min-w-72">
<navigationbar></navigationbar>
</div>
<div class="w-100p sm:w-screen">
<div class="sm:w-100p w-screen">
<feed></feed>
</div>
<div class="w-1/4 sm:w-screen">
<div class="sm:w-1/4 w-screen">
<contacts></contacts>
<legal></legal>
</div>

6
src/components/Login.vue
View File

@@ -11,12 +11,12 @@ function route_home() {
</script>
<template>
<div id="main" class="bg-hintergrund-farbe flex p-2 justify-between">
<div class="pt-5 ">
<div id="main" class="bg-hintergrund-farbe sm:flex sm:p-2 sm:justify-between ">
<div class="pt-5 pl-2">
<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 max-w-36">
<div class="md:inset-y-0 sm:right-0 sm:max-w-36 text-center">
<legal></legal>
</div>
</div>

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

@@ -3,14 +3,14 @@ import {onMounted, ref} from "vue";
import router from "../../router";
// PLACEHOLDER
const upc = ref([]); // user post computed
let post_nr = "";
let current_user = "";
let pust_create_text = "";
let post_create_text = "";
let self_id ;
/*
onMounted(async () => {
self_id = localStorage.getItem("self_id");
await createFeed();
});
*/
async function createFeed() {
try {
// posts und user holen und schauen ob sie richtig sidn
@@ -37,7 +37,7 @@ async function createFeed() {
//upc.value = combinedPosts;
upc.value = combinedPosts.sort(() => Math.random() - 0.5);
upc.value = combinedPosts.sort((a, b) => b.post_id - a.post_id);;
} catch (e) {
console.error("An error has occurred. Please try again later.");
@@ -46,78 +46,82 @@ async function createFeed() {
console.log(upc.value);
}
async function addLike(post_id: string | number, user_id: number, index: number) {
try {
console.log("UPC: ", upc.value);
console.log("post_id: ", post_id);
upc.value[index].likes++;
const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${user_id}}`,
});
onMounted(async () => {
await createFeed();
self_id = localStorage.getItem("self_id");
console.log("ICH: "+self_id);
});
console.log('Antwort-Status:', response.status);
async function addLike(post_id: string | number, user_id: number, index: number) {
try {
upc.value[index].likes++;
const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${user_id}}`,
});
console.log('Antwort-Status:', response.status);
if (!response.ok) {
const errorText = await response.text(); // Versuche, den Fehlertext vom Server zu bekommen
console.error('Server-Fehlertext:', errorText);
upc.value[index].likes--;
throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
}
const data = await response.json();
console.log('Antwort vom Server:', data);
return data;
} catch (error) {
console.error('Fehler beim Liken des Posts:', error);
throw error;
if (!response.ok) {
const errorText = await response.text();
console.error('Server-Fehlertext:', errorText);
//upc.value[index].likes--;
throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
}
}
function gotoPost(post_id: string | number) {
localStorage.setItem("viewedpost", post_id.toString());
router.push(`/post/${post_id}`);
}
const data = await response.json();
function copyLink(post_id: string | number) {
const tocopy = `http://localhost:5173/post/${post_id}`;
navigator.clipboard.writeText(tocopy);
alert("Copied to clipboard");
return data;
} catch (error) {
console.error('Fehler beim Liken des Posts:', error);
throw error;
}
}
function post_create(post_text: string, user_id: number) {
console.log(post_text);
function gotoPost(post_id: string | number) {
localStorage.setItem("viewedpost", post_id.toString());
router.push(`/post/${post_id}`);
}
function copyLink(post_id: string | number) {
const tocopy = `http://localhost:5173/post/${post_id}`;
navigator.clipboard.writeText(tocopy);
alert("Copied to clipboard");
}
async function post_create(post_text: string) {
console.log(self_id);
console.log(post_text);
const response = await fetch(`http://localhost:8000/api/post/create`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${self_id},"postText":"${post_create_text}","postType":"text"}`});
const data = await response.json();
if (response.ok) {
console.log(response.text);
await createFeed();
}
console.log(data);
console.log(post_text);
}
</script>
<template>
<div class="border-x border-x-grau2"> <!-- MAIN -->
<div class="sm:border-x sm:border-x-grau2"> <!-- MAIN -->
<div> <!-- FEED HEADER -->
<h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Feed</h2>
<h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b-2 ">Feed</h2>
<!-- POSTING-->
<div class="flex border-2 border-b-grau2">
<img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
<form class="w-full pr-5">
<!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
<textarea v-model="pust_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
<textarea v-model="post_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
<div class="">
<input class="text-weiss" type="file" accept=".png, .jpg, .jpeg">
<button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_create(pust_create_text, )" type="button">Post</button>
<button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_create(post_create_text)" type="button">Post</button>
</div>
</form>
</div>
</div>
<div class="overflow-y-auto h-screen scrollbar"> <!-- CONTENT -->
<div class="sm:overflow-y-auto sm:h-screen sm:scrollbar"> <!-- CONTENT -->
<ul>
<li v-for="(postitem, indexus) in upc" :key="upc" class="border-2 border-b-grau2 p-3 flex">
<!-- POST -->

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

@@ -12,25 +12,39 @@ const show = ref(false);
const getShowMobileElements = () => {
const value = localStorage.getItem("mobile");
console.log("localStorage mobile:", value); // Debugging-Ausgabe
return value === 'true';
};
const setShowMobileElements = (value) => {
console.log("localStorage set mobile:", value.toString()); // Debugging-Ausgabe
localStorage.setItem("mobile", value.toString());
};
const toggleElements = () => {
show.value = !show.value;
setShowMobileElements(show.value); // Zustand im localStorage speichern
if (isMobile.value){
show.value = !show.value;
setShowMobileElements(show.value);
}
};
const checkScreenWidth = () => {
isMobile.value = window.innerWidth < 640;
if(isMobile.value === false){
show.value = true;
} else {
show.value = false;
}
};
onMounted(() => {
checkScreenWidth();
window.addEventListener('resize', checkScreenWidth);
const show = ref(getShowMobileElements());
if(localStorage.getItem("mobile") === null){
show.value = false;
}
});
onUnmounted(() => {

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

@@ -47,22 +47,21 @@ async function login(event: Event) {
</script>
<template>
<div class="px-20 border-x border-x-grau2 pb-32">
<div class="px-20 sm:border-x sm: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 to continue</p>
</div>
<div class="px-20 pt-7"><!-- FORM --->
<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">Login</button>
<p class="text-weiss"><input type="checkbox" v-model="rememberMe"> Remeber me</p>
<input class="m-4 md:w-full md: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 md:w-full md: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 md:max-w-xs p-4 text-schwarz rounded-lg">Login</button>
</form>
</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>
<p class="text-weiss text-center pb-2 ">No Account? <router-link to="/register" class="text-button-farbe">Register here</router-link></p>
<p class="text-weiss text-center pt-2"> <router-link to="/wip" class="text-button-farbe">Forgot password?</router-link> </p>
</div>
</div>

113
src/components/posts.vue
View File

@@ -39,7 +39,10 @@ const router = useRouter();
const post = ref<Post | null>(null);
const user = ref<User | null>(null);
const comments = ref<Comment[] | null>(null);
let post_id = ref();
let comment_text = ref();
let self_id;
let post_uuid = ref();
onMounted(async () => {
console.log("PARAMS: "+ route.path);
@@ -47,22 +50,21 @@ onMounted(async () => {
console.log(pathArray);
if (pathArray.length > 2) {
post_id.value = pathArray[2];
post_uuid.value = pathArray[2];
console.log("post_id 0: ", post_uuid.value);
}
if (!post_id) {
if (!post_uuid) {
alert('No post selected. Redirecting to feed.');
await router.push('/');
return;
}
getPost(parseInt(post_id.value));
getComment(parseInt(post_id.value));
self_id = localStorage.getItem('self_id');
getPost(parseInt(post_uuid.value));
getComment(parseInt(post_uuid.value));
});
async function getPost(post_id: any) {
try {
const post_response = await fetch(`http://localhost:8000/api/post/${post_id}`, { method: 'GET' });
@@ -125,27 +127,25 @@ function copyLink(post_id: string | number) {
alert("Copied to clipboard");
}
async function addLike(post_id: string | number, user_id: number) {
async function addLike() { // Post liken
try {
post.value.likes++;
const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
const response_like = await fetch(`http://localhost:8000/api/post/${post_uuid.value}/like`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${user_id}}`,
body: `{"userId":${self_id}}`,
});
console.log('Antwort-Status:', response.status);
if (!response.ok) {
const errorText = await response.text(); // Versuche, den Fehlertext vom Server zu bekommen
if (!response_like.ok) {
const errorText = await response_like.text();
console.error('Server-Fehlertext:', errorText);
post.value.likes--;
throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
//post.value.likes--;
throw new Error(`HTTP error! status: ${response_like.status}, text: ${errorText}`);
}
const data = await response.json();
console.log('Antwort vom Server:', data);
const data = await response_like.json();
console.log("post_id 2: ", post_uuid);
return data;
} catch (error) {
console.error('Fehler beim Liken des Posts:', error);
@@ -153,6 +153,54 @@ async function addLike(post_id: string | number, user_id: number) {
}
}
async function comment_create_text(comment_text: string) {
try {
const response = await fetch(`http://localhost:8000/api/post/${post_uuid.value}/comment`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${self_id},"text":"${comment_text}"}`,});
const data = await response.json();
if(response.ok) {
await getComment(parseInt(post_uuid.value));
} else {
alert("Error while posting comment.");
}
return data;
} catch (error) {
console.error(error);
}
console.log(comment_text);
}
async function addLike_comment(comment_id: number | string) {
try {
post.value.likes++;
const response_like = await fetch(`http://localhost:8000/api/comment/${comment_id}/like`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${self_id}}`,
});
if (!response_like.ok) {
const errorText = await response_like.text();
console.error('Server-Fehlertext:', errorText);
post.value.likes--;
throw new Error(`HTTP error! status: ${response_like.status}, text: ${errorText}`);
}
const data = await response_like.json();
console.log("post_id: ", comment_id);
console.log(data);
getComment(parseInt(post_uuid.value));
return data;
} catch (error) {
console.error('Fehler beim Liken des Posts:', error);
throw error;
}
}
</script>
<template>
@@ -183,11 +231,11 @@ async function addLike(post_id: string | number, user_id: number) {
<label class="text-sm m-1 text-weiss" v-if="post.comments != undefined">{{ post.comments }}</label>
<label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
</div>
<div class="flex items-center" @click="addLike(post.post_uuid, post.user_id)"> <!-- Likes -->
<div class="flex items-center" @click="addLike()"> <!-- Likes -->
<img alt="" src="../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1 text-weiss">{{ post.likes }}</label>
</div>
<button @click="copyLink(post_id)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
<button @click="copyLink(post_uuid)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
</div>
</div>
</div>
@@ -199,13 +247,22 @@ async function addLike(post_id: string | number, user_id: number) {
</div>
<div> <!-- WRITE COMMENTS -->
<div class="flex border-b-2 border-b-grau2">
<img src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
<form class="w-full pr-5">
<!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
<textarea v-model="comment_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
<div class="">
<button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="comment_create_text(comment_text)" type="button">Post</button>
</div>
</form>
</div>
</div>
<div> <!-- VIEW COMMENTS -->
<div> <!-- VIEW COMMENTS -->
<div v-if="comments && comments.length > 0" class="overflow-y-auto h-screen scrollbar" >
<div v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
<div class="sm:overflow-y-scroll h-[450px]"> <!-- VIEW COMMENTS -->
<ul v-if="comments && comments.length > 0">
<li v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
<div class="flex">
<img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
@@ -218,15 +275,15 @@ async function addLike(post_id: string | number, user_id: number) {
</div>
<div class="flex"> <!-- POST FOOTER -->
<div class="flex items-center" @click="addLike(post.post_uuid)"> <!-- Likes -->
<div class="flex items-center" @click="addLike_comment(c.comment_id)"> <!-- Likes -->
<img alt="" src="../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1 text-weiss">{{ c.likes }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div v-else class="p-4 text-gray-400">No comments yet.</div>
</div>
</div>

8
src/components/profile.vue
View File

@@ -7,14 +7,14 @@ import Profile_main from "./profile_components/profile_main.vue";
</script>
<template>
<div id="main" class="bg-hintergrund-farbe flex">
<div id="left" class="w-72">
<div id="main" class="bg-hintergrund-farbe sm:flex overflow-y-auto h-screen scrollbar">
<div id="left" class="sm:w-72 min-w-72">
<navigationbar></navigationbar>
</div>
<div class="w-100p border-x border-x-grau2">
<div class="sm:w-100p w-screen sm:border-x sm:border-x-grau2">
<profile_main></profile_main>
</div>
<div id="right" class="w-1/4">
<div id="right" class="sm:w-1/4 w-screen">
<contacts></contacts>
<legal></legal>
</div>

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

@@ -4,73 +4,102 @@ import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const profile = ref(null);
const post = ref([
{id: 541242,
profile_picture: "../../assets/danielvici_pp.png",
author_display_name: "danielvici123", author_username: "danielvici",
content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
comments_count: undefined, likes: 532844},
{id: 145,
profile_picture: "../../assets/danielvici_pp.png",
author_display_name: "danielvici123", author_username: "danielvici",
content: "I like Animes. I use Anilist to track them.",
comments_count: undefined, likes: 5325466844},
{id: 246,
profile_picture: "../../assets/danielvici_pp.png",
author_display_name: "danielvici123", author_username: "danielvici",
content: "sfsafhffgf",
comments_count: undefined, likes: 5},
])
const upc = ref([]);
let self_id ;
let profile_id = ref();
onMounted(async () => {
const countPosts = post.value.length;
console.log("PARAMS: "+ route.path);
const pathArray = route.path.split('/');
console.log(pathArray);
if (pathArray.length > 2) {
profile_id.value = pathArray[2];
console.log("profile_id 0: ", profile_id.value);
}
if (!profile_id) {
alert('No profile selected. Redirecting to feed.');
await router.push('/');
return;
}
await create_own_posts();
});
//Wird bearbeitet wenn API dazu da ist.
/*
function fetchProfile(userId) {
return fetch(`/api/profile/${userId}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
});
async function create_own_posts() {
try {
// posts und user holen und schauen ob sie richtig sidn
const post_response = await fetch('http://localhost:8000/api/posts', { method: 'GET' });
if (!post_response.ok) {
throw new Error(`HTTP error! status: ${post_response.status}`);
}
const postsDATA = await post_response.json();
const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
if (!user_response.ok) {
throw new Error(`HTTP error! status: ${user_response.status}`);
}
const usersDATA = await user_response.json();
// posts und user kombinieren
const combinedPosts = postsDATA.filter(post => post.user_id === profile_id).map(post => {
const user = usersDATA.find(user => user.user_id === post.user_id);
return {
post_id: post.posts_uuid,
post_text: post.post_text,
likes: post.likes,
comments: post.comments,
displayname: user ? user.displayname : 'Unknown',
username: user ? user.username : 'unknown_user',
user_id: post.user_id,
};
});
console.log("upc: " + upc.value);
console.log("combinedPosts: " + combinedPosts);
//upc.value = combinedPosts;
upc.value = combinedPosts.sort((a, b) => b.post_id - a.post_id);;
console.log("upc 2: " + upc.value);
console.log("combinedPosts 2: " + combinedPosts);
} catch (e) {
console.error("An error has occurred. Please try again later.");
console.error(e);
}
console.log(upc.value);
}
onMounted(async () => {
const userId = route.params.id;
async function addLike(post_id: string | number, user_id: number, index: number) {
try {
const data = await fetchProfile(userId);
profile.value = data;
} catch (error) {
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'
fetchProfile('danielvici123')
.then(data => {
profile.value = data;
next();
})
.catch(error => {
console.error('Error fetching profile:', error);
next();
});
} else {
next();
}
});
*/
console.log("UPC: ", upc.value);
console.log("post_id: ", post_id);
upc.value[index].likes++;
const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${user_id}}`,
});
function addLike(index: number) {
post.value[index].likes += 1;
console.log("New Like Amount: ", post.value[index].likes);
console.log('Antwort-Status:', response.status);
if (!response.ok) {
const errorText = await response.text();
console.error('Server-Fehlertext:', errorText);
//upc.value[index].likes--;
throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fehler beim Liken des Posts:', error);
throw error;
}
}
</script>
@@ -101,7 +130,7 @@ function addLike(index: number) {
<h2 class="align-middle mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts (x)</h2>
</div>
<ul>
<li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
<li v-for="(postitem, indexus) in upc" :key="postitem.user_id" class="border-2 border-b-grau2 p-3 flex">
<!-- POST -->
<img src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
@@ -119,7 +148,7 @@ function addLike(index: number) {
<label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
</div>
<div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
<div class="flex items-center" @click="addLike(postitem.post_id, postitem.user_id, indexus)"> <!-- Likes -->
<img alt="" src="../../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
</div>

6
src/components/register.vue
View File

@@ -9,12 +9,12 @@ function route_home() {
</script>
<template>
<div id="main" class="bg-hintergrund-farbe flex p-2 justify-between">
<div id="main" class="bg-hintergrund-farbe sm:flex p-2 sm:justify-between overflow-auto h-screen scrollbar">
<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>
<register_main class="inset-0"></register_main>
<div class="inset-y-0 right-0 max-w-36">
<register_main class="sm:inset-0"></register_main>
<div class="sm:inset-y-0 sm:right-0 sw:max-w-36 text-center">
<legal></legal>
</div>
</div>

19
src/components/register_components/register_main.vue
View File

@@ -8,9 +8,8 @@ let register_input_displayname = ref("");
let register_input_password = ref("");
let register_input_email = ref("");
async function register() {
const username = register_input_username;
const displayname = register_input_displayname;
const email = register_input_email;
@@ -51,20 +50,20 @@ async function register() {
</script>
<template>
<div id="main" class="bg-hintergrund-farbe p-2 border-x border-x-grau2 px-20">
<div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT-->
<div id="main" class="bg-hintergrund-farbe p-2 sm:border-x sm:border-x-grau2 sm:px-20">
<div class="text-3xl pt-20px sm: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 pt-2">Join today!</p>
</div>
<div class="px-20 pt-7"> <!-- FORM --->
<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">Create Account</button>
<input class="m-4 sm: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 sm: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 sm: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 sm: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 sm: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="/login" class="text-button-farbe">Login</router-link></p>
<p class="text-weiss w-100p text-center">Already have an account? <router-link to="/login" class="text-button-farbe">Login</router-link></p>
</div>
</div>
</template>

4
src/components/search.vue
View File

@@ -9,10 +9,10 @@ import Contacts from "./home_components/contacts.vue";
<template>
<div class="text-weiss flex">
<div id="left" class="border-1 border-b-grau w-72">
<div id="left" class="sm:w-72 min-w-72 border-1 border-b-grau">
<navigationbar></navigationbar>
</div>
<div class="w-100p border-x-2 border-x-grau2">
<div class="sm:w-100p w-screen border-x-2 border-x-grau2">
<div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Search</h1>
</div>