From 68de07645ab2a719d5daf13979573c3c11c9c564 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Gremaud?= <loic.gremaud@arcanite.ch>
Date: Tue, 15 Sep 2026 23:59:46 +0200
Subject: [PATCH] feat: add custom 404/500 error pages

---
 polylan_submitter/src/ErrorPage.vue  | 36 ++++++++++++++++++++++++++++
 polylan_submitter/src/error.ts       |  8 +++++++
 polylan_submitter/templates/404.html | 13 ++++++++++
 polylan_submitter/templates/500.html | 13 ++++++++++
 4 files changed, 70 insertions(+)
 create mode 100644 polylan_submitter/src/ErrorPage.vue
 create mode 100644 polylan_submitter/src/error.ts
 create mode 100644 polylan_submitter/templates/404.html
 create mode 100644 polylan_submitter/templates/500.html

diff --git a/polylan_submitter/src/ErrorPage.vue b/polylan_submitter/src/ErrorPage.vue
new file mode 100644
index 0000000..c3c4930
--- /dev/null
+++ b/polylan_submitter/src/ErrorPage.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  code?: string;
+  title?: string;
+  message?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  code: "500",
+  title: "Something went wrong",
+  message: "An unexpected error occurred.",
+});
+
+const goBack = () => window.history.back();
+</script>
+
+<template>
+  <div class="min-h-screen bg-base-300 flex items-center justify-center px-4">
+    <div class="w-full max-w-xl text-center">
+      <i class="mdi mdi-alert-circle-outline text-7xl text-primary"></i>
+      <h1 class="text-7xl font-bold mt-4">{{ code }}</h1>
+      <h2 class="text-2xl font-semibold mt-2">{{ title }}</h2>
+      <p class="text-base-content/70 mt-4">{{ message }}</p>
+      <div class="mt-8 flex items-center justify-center gap-4">
+        <a href="/" class="btn btn-primary">
+          <i class="mdi mdi-home mr-2"></i>
+          Go home
+        </a>
+        <button @click="goBack" class="btn btn-ghost">
+          <i class="mdi mdi-arrow-left mr-2"></i>
+          Go back
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/polylan_submitter/src/error.ts b/polylan_submitter/src/error.ts
new file mode 100644
index 0000000..711fd32
--- /dev/null
+++ b/polylan_submitter/src/error.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import ErrorPage from '@/ErrorPage.vue'
+import '@/style.css'
+
+const selector = "#app"
+const mountData = document.querySelector<HTMLElement>(selector)
+const app = createApp(ErrorPage, { ...mountData?.dataset })
+app.mount(selector)
diff --git a/polylan_submitter/templates/404.html b/polylan_submitter/templates/404.html
new file mode 100644
index 0000000..0b436de
--- /dev/null
+++ b/polylan_submitter/templates/404.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% load django_vite %}
+
+{% block title %}Page Not Found{% endblock %}
+
+{% block head %}
+    {% vite_asset 'src/error.ts' %}
+{% endblock %}
+
+{% block content %}
+    <div id="app" data-code="404" data-title="Page not found" data-message="The page you're looking for doesn't exist or has been moved."></div>
+{% endblock %}
diff --git a/polylan_submitter/templates/500.html b/polylan_submitter/templates/500.html
new file mode 100644
index 0000000..3d8069d
--- /dev/null
+++ b/polylan_submitter/templates/500.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% load django_vite %}
+
+{% block title %}Server Error{% endblock %}
+
+{% block head %}
+    {% vite_asset 'src/error.ts' %}
+{% endblock %}
+
+{% block content %}
+    <div id="app" data-code="500" data-title="Server error" data-message="Something went wrong on our end. Please try again later."></div>
+{% endblock %}