User profile viewing - need to add more to the details view

backend/server/main/urls.py

@@ -22,8 +22,8 @@ urlpatterns = [
 
     path('auth/change-email/', ChangeEmailView.as_view(), name='change_email'),
     path('auth/is-registration-disabled/', IsRegistrationDisabled.as_view(), name='is_registration_disabled'),
-    path('auth/users', PublicUserListView.as_view(), name='public-user-list'),
-    path('auth/user/<uuid:user_id>', PublicUserDetailView.as_view(), name='public-user-detail'),
+    path('auth/users/', PublicUserListView.as_view(), name='public-user-list'),
+    path('auth/user/<uuid:user_id>/', PublicUserDetailView.as_view(), name='public-user-detail'),
 
     path('csrf/', get_csrf_token, name='get_csrf_token'),
     re_path(r'^$', TemplateView.as_view(

frontend/src/lib/components/UserCard.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { continentCodeToString, getFlag } from '$lib';
+	import type { User } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import Calendar from '~icons/mdi/calendar';
+
+	export let user: User;
+
+	async function nav() {
+		goto(`/user/${user.uuid}`);
+	}
+</script>
+
+<div
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
+>
+	<div class="card-body">
+		<div>
+			{#if user.profile_pic}
+				<div class="avatar">
+					<div class="w-24 rounded-full">
+						<img src={user.profile_pic} alt={user.username} />
+					</div>
+				</div>
+			{/if}
+			<h2 class="card-title overflow-ellipsis">{user.first_name} {user.last_name}</h2>
+		</div>
+		<p class="text-sm text-neutral-content">{user.username}</p>
+		{#if user.is_staff}
+			<div class="badge badge-primary">Admin</div>
+		{/if}
+		<!-- member since -->
+		<div class="flex items-center space-x-2">
+			<Calendar class="w-4 h-4 mr-1" />
+			<p class="text-sm text-neutral-content">
+				{user.date_joined ? 'Joined ' + new Date(user.date_joined).toLocaleDateString() : ''}
+			</p>
+		</div>
+		<div class="card-actions justify-end">
+			<button class="btn btn-primary" on:click={nav}>View</button>
+		</div>
+	</div>
+</div>

frontend/src/routes/user/[uuid]/+page.server.ts

@@ -0,0 +1,29 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.cookies.get('auth')) {
+		return redirect(302, '/login');
+	}
+	const uuid = event.params.uuid;
+	if (!uuid) {
+		return redirect(302, '/users');
+	}
+	let res = await fetch(`${serverEndpoint}/auth/user/${uuid}/`, {
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!res.ok) {
+		return redirect(302, '/users');
+	} else {
+		const data = await res.json();
+		return {
+			props: {
+				user: data
+			}
+		};
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/user/[uuid]/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	const user = data.props.user;
+	console.log(user);
+</script>
+
+<h1>{user.first_name} {user.last_name}</h1>
+<p>{user.username}</p>
+
+<p>{user.is_staff ? 'Admin' : 'User'}</p>

frontend/src/routes/users/+page.server.ts

@@ -0,0 +1,26 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.cookies.get('auth')) {
+		return redirect(302, '/login');
+	}
+
+	const res = await fetch(`${serverEndpoint}/auth/users/`, {
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!res.ok) {
+		return redirect(302, '/login');
+	} else {
+		const data = await res.json();
+		return {
+			props: {
+				users: data
+			}
+		};
+	}
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import UserCard from '$lib/components/UserCard.svelte';
+	import type { User } from '$lib/types';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	let users: User[] = data.props.users;
+	console.log(users);
+</script>
+
+<h1 class="text-center font-bold text-4xl mb-4">AdventureLog Users</h1>
+<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+	{#each users as user (user.uuid)}
+		<UserCard {user} />
+	{/each}
+</div>
+
+{#if users.length === 0}
+	<p class="text-center">No users found.</p>
+{/if}