feat: Add profile page server load function and Svelte component

backend/server/demo/settings.py

@@ -209,6 +209,5 @@ CORS_ORIGIN_ALLOW_ALL = True
 
 from os import getenv
 
-CSRF_TRUSTED_ORIGINS = getenv('CSRF_TRUSTED_ORIGINS', 'localhost').split(',')
-
+CSRF_TRUSTED_ORIGINS = [origin.strip() for origin in getenv('CSRF_TRUSTED_ORIGINS', 'http://localhost').split(',') if origin.strip()]
 DEFAULT_AUTO_FIELD = 'django.db.models.AutoField'

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

@@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad, RequestEvent } from '../$types';
+
+export const load: PageServerLoad = async (event: RequestEvent) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	}
+	return {
+		user: event.locals.user
+	};
+};

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let data;
+</script>
+
+<!--
+  // v0 by Vercel.
+  // https://v0.dev/t/EtPnDdQYcbn
+  -->
+
+<!--
+  // v0 by Vercel.
+  // https://v0.dev/t/DYwTru570WN
+  -->
+
+{#if data.user.profile_pic}
+	<div class="avatar flex items-center justify-center">
+		<div class="w-24 rounded">
+			<!-- svelte-ignore a11y-missing-attribute -->
+			<img src={data.user.profile_pic} class="w-24 rounded-full" />
+		</div>
+	</div>
+{/if}
+
+{#if data.user && data.user.first_name && data.user.last_name}
+	<h1 class="text-center text-4xl font-bold">
+		{data.user.first_name}, {data.user.last_name}
+	</h1>
+{/if}
+<p class="text-center text-lg mt-2">{data.user.username}</p>
+
+{#if data.user && data.user.date_joined}
+	<p class="ml-1 text-lg text-center mt-4">Member Since</p>
+	<div class="flex items-center justify-center text-center">
+		<iconify-icon icon="mdi:calendar" class="text-2xl"></iconify-icon>
+		<p class="ml-1 text-xl">{new Date(data.user.date_joined).toLocaleDateString()}</p>
+	</div>
+{/if}