Added 404 page

xianyuntang · Sep 8, 2024 · 4e7dee8 · 4e7dee8
1 parent e070dbc
commit 4e7dee8
Show file tree

Hide file tree

Showing 6 changed files with 267 additions and 5 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/api/Cargo.toml b/api/Cargo.toml
@@ -27,3 +27,5 @@ tower-http = { version = "0.5.2", features = ["normalize-path"] }
 tower-layer = "0.3.3"
 random_word = { version = "0.4.3", features = ["en"] }
 regex = "1.10.6"
+askama = "0.12.1"
+askama_axum = "0.4.0"
diff --git a/api/src/domain/proxies/mod.rs b/api/src/domain/proxies/mod.rs
@@ -1,5 +1,7 @@
 use crate::domain::auth::jwt_validator::verify;
 use crate::infrastructure::server::AppState;
+use crate::infrastructure::templates::HtmlTemplate;
+use askama::Template;
 use axum::body::Bytes;
 use axum::extract::ws::WebSocketUpgrade;
 use axum::extract::{Json, OriginalUri, Path, State};
@@ -85,6 +87,10 @@ async fn ws_handler(
     ws.on_upgrade(move |socket| handlers::socket::handler(db, socket, proxy_id))
 }
 
+#[derive(Template)]
+#[template(path = "404.html")]
+pub struct NotfoundTemplate {}
+
 async fn proxy(
     State(state): State<AppState>,
     Path(ProxyParams { proxy_id }): Path<ProxyParams>,
@@ -103,9 +109,8 @@ async fn proxy(
         .unwrap_or_else(|| "/")
         .to_string();
 
-    let response = handlers::proxy::handler(state.db, proxy_id, path, method, headers, body)
-        .await?
-        .into_response();
-
-    Ok(response)
+    match handlers::proxy::handler(state.db, proxy_id, path, method, headers, body).await {
+        Ok(response) => Ok(response.into_response()),
+        Err(_) => Ok(HtmlTemplate(NotfoundTemplate {}).into_response()),
+    }
 }
diff --git a/api/src/infrastructure/mod.rs b/api/src/infrastructure/mod.rs
@@ -1 +1,2 @@
 pub mod server;
+pub mod templates;
diff --git a/api/src/infrastructure/templates.rs b/api/src/infrastructure/templates.rs
@@ -0,0 +1,21 @@
+use askama::Template;
+use axum::http::StatusCode;
+use axum::response::{Html, IntoResponse, Response};
+
+pub struct HtmlTemplate<T>(pub T);
+
+impl<T> IntoResponse for HtmlTemplate<T>
+where
+    T: Template,
+{
+    fn into_response(self) -> Response {
+        match self.0.render() {
+            Ok(html) => Html(html).into_response(),
+            Err(err) => (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                format!("Failed to render template. Error: {err}"),
+            )
+                .into_response(),
+        }
+    }
+}
diff --git a/api/templates/404.html b/api/templates/404.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 - Page Not Found</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background: linear-gradient(135deg, #f39c12, #8e44ad);
+            font-family: 'Arial', sans-serif;
+            overflow: hidden;
+            color: white;
+        }
+
+        .container {
+            text-align: center;
+        }
+
+        h1 {
+            font-size: 10em;
+            margin: 0;
+            animation: glow 1.5s ease-in-out infinite alternate;
+        }
+
+        h2 {
+            font-size: 2em;
+            margin-top: 20px;
+            animation: fadeIn 2s ease-in-out infinite alternate;
+        }
+
+        a {
+            display: inline-block;
+            margin-top: 30px;
+            padding: 15px 30px;
+            font-size: 1.2em;
+            color: white;
+            text-decoration: none;
+            border: 2px solid white;
+            border-radius: 50px;
+            transition: background 0.3s ease, transform 0.3s ease;
+        }
+
+        a:hover {
+            background: white;
+            color: #8e44ad;
+            transform: scale(1.1);
+        }
+
+        @keyframes glow {
+            0% {
+                text-shadow: 0 0 20px #f39c12, 0 0 30px #f39c12, 0 0 40px #f39c12, 0 0 50px #f39c12, 0 0 60px #f39c12;
+            }
+            100% {
+                text-shadow: 0 0 20px #8e44ad, 0 0 30px #8e44ad, 0 0 40px #8e44ad, 0 0 50px #8e44ad, 0 0 60px #8e44ad;
+            }
+        }
+
+        @keyframes fadeIn {
+            0% {
+                opacity: 0.6;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+
+        .background-arrows {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .arrow {
+            position: absolute;
+            font-size: 5em;
+            color: rgba(255, 255, 255, 0.2);
+            animation: move 20s infinite ease-in-out;
+        }
+
+        /* 隨機分佈箭頭 */
+        .arrow:nth-child(1) {
+            top: 10%;
+            left: 20%;
+        }
+
+        .arrow:nth-child(2) {
+            top: 50%;
+            left: 70%;
+        }
+
+        .arrow:nth-child(3) {
+            top: 80%;
+            left: 30%;
+        }
+
+        .arrow:nth-child(4) {
+            top: 30%;
+            left: 80%;
+        }
+
+        .arrow:nth-child(5) {
+            top: 15%;
+            left: 50%;
+        }
+
+        .arrow:nth-child(6) {
+            top: 70%;
+            left: 40%;
+        }
+
+        @keyframes move {
+            0% {
+                transform: translateY(0) translateX(0);
+            }
+            50% {
+                transform: translateY(-50px) translateX(-50px);
+            }
+            100% {
+                transform: translateY(0) translateX(0);
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="background-arrows">
+    <div class="arrow">→</div>
+    <div class="arrow">←</div>
+    <div class="arrow">→</div>
+    <div class="arrow">←</div>
+    <div class="arrow">→</div>
+    <div class="arrow">←</div>
+</div>
+
+<div class="container">
+    <h1>404</h1>
+    <h2>It looks like you're lost.</h2>
+</div>
+</body>
+</html>