Merge branch 'main' into feed

src/components/Login.svelte

@@ -7,6 +7,7 @@
 	import { createToast } from '$lib/Toasts';
 	import { refreshToken, registerUsername, serverURL, token } from '$lib/Store';
 	import type { Login } from '$lib/types/Login';
+	import type { CustomError } from '$lib/types/CustomError';
 
 	initializeStores();
 	const toastStore = getToastStore();
@@ -25,6 +26,10 @@
 
 	$: allInputFieldsFilled = password.length != 0 && username.length != 0;
 	async function handleSubmit() {
+		let customError: CustomError = {
+			message: '',
+			code: ''
+		};
 		let serverUrl: string = '';
 		serverURL.subscribe((prev_val) => (serverUrl = prev_val));
 		try {
@@ -39,18 +44,20 @@
 				})
 			});
 			statusCode = response.status;
-			if (statusCode == 200) {
+			if (statusCode !== 200) {
+				const body = await response.json();
+				customError = body.error;
+			}
+			if (statusCode !== 200 && statusCode !== 500 && statusCode !== 403) {
+				toastStore.trigger(createToast(customError.message, 'error'));
+			} else if (statusCode == 200) {
 				const requestData: Login = await response.json();
 				token.set(requestData.token);
 				refreshToken.set(requestData.refreshToken);
 				location.reload();
-			} else if (statusCode == 401) {
-				toastStore.trigger(createToast('Incorrect password', 'error'));
 			} else if (statusCode == 403) {
 				registerUsername.set(username);
 				goto('/verify');
-			} else if (statusCode == 404) {
-				toastStore.trigger(createToast('Username not found', 'error'));
 			}
 		} catch (error) {
 			toastStore.trigger(createToast('Internal Server Error! Please try again later!', 'error'));

src/lib/Store.ts

@@ -5,7 +5,7 @@ export const registerUsername = writable('');
 
 //https://server-beta.de/api
 //https://server-alpha.tech/api
-//http://localhost:3000
+//http://localhost:3000/api
 // local network http://192.168.0.126:3000/api
 export const serverURL = writable('https://server-beta.de/api');
 

src/lib/types/CustomError.ts

@@ -0,0 +1,4 @@
+export type CustomError = {
+	message: string;
+	code: string;
+};

src/lib/types/Imprint.ts

@@ -0,0 +1,4 @@
+export type Imprint = {
+	text: string;
+	status: number;
+};

src/routes/imprint/+page.server.ts

@@ -1,19 +1,21 @@
 import { serverURL } from '$lib/Store';
+import type { Imprint } from '$lib/types/Imprint';
 import type { PageServerLoad } from './$types';
 
-type imprint = {
-	text: string;
-};
-
 export const load = (async () => {
+	const imprint: Imprint = {
+		text: '',
+		status: 0
+	};
 	let serverUrl: string = '';
 	serverURL.subscribe((prev_val) => (serverUrl = prev_val));
 	const url: string = serverUrl + '/imprint';
 	const response = await fetch(url);
-	const responseObject: imprint = await response.json();
-	const imprintText: string = responseObject.text;
+	const responseObject = await response.json();
+	imprint.text = responseObject.text;
+	imprint.status = responseObject.status;
 
 	return {
-		text: imprintText
+		imprint: imprint
 	};
 }) satisfies PageServerLoad;

src/routes/imprint/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import { t } from '../../i18n';
+	import type { Imprint } from '$lib/types/Imprint';
 
 	export let data: PageData;
-	const backendimprint: string = data.text!;
+	const backendImprint: Imprint = data.imprint;
 </script>
 
 <main class="flex flex-col justify-center items-center mt-3">
@@ -39,6 +40,10 @@
 	</div>
 	<div class="card bg-red p-2 w-[80vw]">
 		<h1 class="font-bold text-2xl">{$t('imprint.backend.header')}</h1>
-		<p>{backendimprint}</p>
+		{#if backendImprint.status == 200}
+			<p>{backendImprint}</p>
+		{:else}
+			<p>Internal Server Error</p>
+		{/if}
 	</div>
 </main>

src/routes/profile/+page.svelte

@@ -18,13 +18,15 @@
 	import Icon from '@iconify/svelte';
 	import ModalChangePwd from '../../components/modals/ModalChangePwd.svelte';
 	import { t } from '../../i18n';
+	//	import { page } from '$app/stores';
 
 	import { createToast } from '$lib/Toasts';
 
 	let editMode: boolean = false;
 	let nickname: string = '';
 	let userStatus: string = '';
 	let maxPostCounter: number = 0;
+	//	let username: string = '';
 
 	const toastStore = getToastStore();
 
@@ -66,6 +68,7 @@
 	};
 
 	onMount(async () => {
+		//		const url = $page.route;
 		profileData = await getProfileDetails(get(token), 'mabu2807');
 		nickname = profileData.user.nickname;
 		userStatus = profileData.user.status;
@@ -96,7 +99,10 @@
 	}
 	async function loadMorePosts() {
 		postData = await loadPosts(get(token), postData, 'mabu2807');
-		maxPostCounter += postData.pagination.limit;
+		console.log('MaxPostCounter: ' + maxPostCounter);
+		maxPostCounter = Number(maxPostCounter) + Number(postData.pagination.limit);
+		console.log('MaxPostCounter: ' + maxPostCounter);
+		console.log('Postdata: ' + postData.records.length);
 	}
 </script>
 
@@ -173,7 +179,8 @@
 				<PostUserProfil bind:postData={Post} />
 			{/each}
 			{#if maxPostCounter == postData.records.length}
-				<button on:click={loadMorePosts} class="btn variant-filled">{$t('profile.noPosts')}</button>
+				<button on:click={loadMorePosts} class="btn variant-filled">{$t('profile.loadMore')}</button
+				>
 			{/if}
 		{/if}
 	</div>

src/routes/profile/requests.ts

@@ -61,7 +61,7 @@ export async function updateUserDetails(token: string, userStatus: string, nickn
 }
 export async function loadPosts(token: string, postData: UserPostFetchResponse, username: string) {
 	const params = new URLSearchParams({
-		offset: postData.pagination.offset.toString(),
+		offset: postData.records.length.toString(),
 		limit: '10'
 	});
 
@@ -71,10 +71,9 @@ export async function loadPosts(token: string, postData: UserPostFetchResponse,
 		method: 'GET'
 	});
 	const posts: UserPostFetchResponse = await response.json();
-
 	postData.pagination = posts.pagination;
 	postData.records = postData.records.concat(posts.records);
 	posts.statusCode = await response.status;
 
-	return posts;
+	return postData;
 }

src/routes/register/+page.svelte

@@ -8,6 +8,7 @@
 	import { goto } from '$app/navigation';
 	import { registerUsername, serverURL } from '$lib/Store';
 	import { t } from '../../i18n';
+	import type { CustomError } from '$lib/types/CustomError';
 
 	initializeStores();
 	const toastStore = getToastStore();
@@ -128,6 +129,10 @@
 		password === repeatPassword &&
 		username.length != 0;
 	async function handleSubmit() {
+		let customError: CustomError = {
+			message: '',
+			code: ''
+		};
 		serverURL.subscribe((prev_val) => (serverUrl = prev_val));
 
 		const url: string = serverUrl + '/users';
@@ -143,19 +148,18 @@
 				})
 			});
 			statusCode = respone.status;
+			if (statusCode !== 200) {
+				const body = await respone.json();
+				customError = body.error;
+			}
 		} catch (error) {
 			toastStore.trigger(createToast('Internal Server Error! Please try again later!', 'error'));
 		}
-		statusCode == 201;
-		if (statusCode == 201) {
+		if (statusCode !== 201 && statusCode !== 500) {
+			toastStore.trigger(createToast(customError.message, 'error'));
+		} else if (statusCode == 201) {
 			registerUsername.set(username);
 			goto('/verify');
-		} else if (statusCode == 400) {
-			toastStore.trigger(createToast('There was a mistake! Please check your entries', 'error'));
-		} else if (statusCode == 422) {
-			toastStore.trigger(createToast('Email could not be sent', 'error'));
-		} else if (statusCode == 1111) {
-			toastStore.trigger(createToast('User already exist', 'error'));
 		}
 	}
 </script>

src/routes/search/posts/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Toast } from '@skeletonlabs/skeleton';
+	//import { getToastStore } from '@skeletonlabs/skeleton';
+	//import { createToast } from '$lib/Toasts';
+	import { initializeStores } from '@skeletonlabs/skeleton';
+	import Icon from '@iconify/svelte';
+	//import { serverURL } from '$lib/Store';
+	//import type { PostStructure } from '$lib/types/Post';
+
+	initializeStores();
+	//const toastStore = getToastStore();
+
+	//let response: Response;
+	//let hashtagInput: string;
+	//let serverUrl: string;
+	//let statusCode: number = 0;
+	//let posts: Array<PostStructure> = [];
+
+	//async function handleHashtagInput(event: Event) {}
+</script>
+
+<Toast />
+<div class="mt-8 mb-8 w-3/5 min-h-screen mx-auto">
+	<div class="mb-8 flex justify-center items-center gap-4">
+		<a href="/search/users">
+			<Icon class="w-10 h-10" icon="mdi:account-search-outline" style="font-size: 32px" />
+		</a>
+		<a href="/search/posts">
+			<Icon
+				class="w-10 h-10"
+				icon="mdi:text-box-search"
+				style="font-size: 32px; border: 2px solid; border-radius: 5px;"
+			/>
+		</a>
+	</div>
+	<input class="input w-full" type="search" name="hashtag" placeholder="Search a hashtag..." />
+	<div class="mt-4 w-full"></div>
+</div>

src/routes/search/users/+page.svelte

@@ -6,6 +6,7 @@
 	import Icon from '@iconify/svelte';
 	import { serverURL } from '$lib/Store';
 	import type { Profil } from '$lib/types/User';
+	import { Avatar } from '@skeletonlabs/skeleton';
 
 	initializeStores();
 	const toastStore = getToastStore();
@@ -31,7 +32,7 @@
 		usernameInput = (event.target as HTMLInputElement).value;
 		if (usernameInput.length > 0) {
 			serverURL.subscribe((prev_val) => (serverUrl = prev_val));
-			const url: string = serverUrl + '/users?' + usernameInput + '&0&10';
+			const url: string = serverUrl + '/users?username=' + usernameInput + '&offset=0&limit=10';
 			try {
 				response = await fetch(url, {
 					mode: 'cors',
@@ -80,6 +81,18 @@
 
 <Toast />
 <div class="mt-8 mb-8 w-3/5 min-h-screen mx-auto">
+	<div class="mb-8 flex justify-center items-center gap-4">
+		<a href="/search/users">
+			<Icon
+				class="w-10 h-10"
+				icon="mdi:account-search"
+				style="font-size: 32px; border: 2px solid; border-radius: 5px;"
+			/>
+		</a>
+		<a href="/search/posts">
+			<Icon class="w-10 h-10" icon="mdi:text-box-search-outline" style="font-size: 32px" />
+		</a>
+	</div>
 	<input
 		class="input w-full"
 		type="search"
@@ -91,9 +104,15 @@
 		{#each users as user}
 			<div class="flex flex-row items-center justify-between w-full">
 				<div class="flex flex-row items-center">
-					<img class="w-12 h-12 rounded-full" src={user.profilePictureUrl} alt="Avatar" />
+					<Avatar
+						src={user.profilePictureUrl !== '' ? user.profilePictureUrl : '/default-avatar.png'}
+						width="w-12"
+						rounded="rounded-full"
+					/>
 					<div class="ml-4">
-						<a href="/users/{user.username}" class="text-lg font-semibold">{user.nickname}</a>
+						<a href="/profile?username={user.username}" class="text-lg font-semibold"
+							>{user.nickname}</a
+						>
 						<p class="text-gray-500">@{user.username}</p>
 					</div>
 				</div>

src/routes/verify/+page.svelte

@@ -4,6 +4,7 @@
 	import { createToast } from '$lib/Toasts';
 	import { registerUsername, serverURL } from '$lib/Store';
 	import { goto } from '$app/navigation';
+	import type { CustomError } from '$lib/types/CustomError';
 
 	initializeStores();
 	const toastStore = getToastStore();
@@ -19,6 +20,10 @@
 
 	async function handleSubmit() {
 		let serverUrl: string = '';
+		let customError: CustomError = {
+			message: '',
+			code: ''
+		};
 		registerUsername.subscribe((prev_val) => (username = prev_val));
 		serverURL.subscribe((prev_val) => (serverUrl = prev_val));
 		const url = serverUrl + '/users/' + username + '/activate';
@@ -31,13 +36,16 @@
 				})
 			});
 			statusCode = response.status;
+			if (statusCode !== 200) {
+				const body = await response.json();
+				customError = body.error;
+				console.log(customError);
+			}
 		} catch (error) {
 			toastStore.trigger(createToast('Internal Server Error! Please try again later!', 'error'));
 		}
-		if (statusCode == 401) {
-			toastStore.trigger(createToast('The code has expired. We have sent you a new one!', 'error'));
-		} else if (statusCode == 404) {
-			toastStore.trigger(createToast('The code is not correct', 'error'));
+		if (statusCode !== 200 && statusCode !== 500) {
+			toastStore.trigger(createToast(customError.message, 'error'));
 		} else if (statusCode == 200) {
 			goto('/');
 		}