use a custom 404 page

to customize the 404 page you can copy the handlebar template `src/static/templates/404.hbs` to the TEMPLATES_FOLDER (defaults to `data/templates/`)
dani-garcia · Dec 3, 2022 · bca6e85 · bca6e85
1 parent 8feed29
commit bca6e85
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 5 deletions.
diff --git a/resources/404.svg b/resources/404.svg
diff --git a/src/api/web.rs b/src/api/web.rs
@@ -1,11 +1,10 @@
 use std::path::{Path, PathBuf};
 
-use rocket::serde::json::Json;
-use rocket::{fs::NamedFile, http::ContentType, Catcher, Route};
+use rocket::{fs::NamedFile, http::ContentType, response::content::RawHtml as Html, serde::json::Json, Catcher, Route};
 use serde_json::Value;
 
 use crate::{
-    api::core::now,
+    api::{core::now, ApiResult},
     error::Error,
     util::{Cached, SafeString},
     CONFIG,
@@ -30,8 +29,13 @@ pub fn catchers() -> Vec<Catcher> {
 }
 
 #[catch(404)]
-async fn not_found() -> Cached<Option<NamedFile>> {
-    Cached::short(NamedFile::open(Path::new(&CONFIG.web_vault_folder()).join("404.html")).await.ok(), false)
+fn not_found() -> ApiResult<Html<String>> {
+    // Return the page
+    let json = json!({
+        "urlpath": CONFIG.domain_path()
+    });
+    let text = CONFIG.render_template("404", &json)?;
+    Ok(Html(text))
 }
 
 #[get("/")]
@@ -91,6 +95,7 @@ fn alive(_conn: DbConn) -> Json<String> {
 #[get("/vw_static/<filename>")]
 pub fn static_files(filename: String) -> Result<(ContentType, &'static [u8]), Error> {
     match filename.as_ref() {
+        "404.png" => Ok((ContentType::PNG, include_bytes!("../static/images/404.png"))),
         "mail-github.png" => Ok((ContentType::PNG, include_bytes!("../static/images/mail-github.png"))),
         "logo-gray.png" => Ok((ContentType::PNG, include_bytes!("../static/images/logo-gray.png"))),
         "error-x.svg" => Ok((ContentType::SVG, include_bytes!("../static/images/error-x.svg"))),

diff --git a/src/config.rs b/src/config.rs
@@ -1123,6 +1123,8 @@ where
     reg!("admin/organizations");
     reg!("admin/diagnostics");
 
+    reg!("404");
+
     // And then load user templates to overwrite the defaults
     // Use .hbs extension for the files
     // Templates get registered with their relative name

diff --git a/src/static/images/404.png b/src/static/images/404.png
diff --git a/src/static/templates/404.hbs b/src/static/templates/404.hbs
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="robots" content="noindex,nofollow" />
+    <link rel="icon" type="image/png" href="{{urlpath}}/vw_static/vaultwarden-icon.png">
+    <title>Page not found!</title>
+    <link rel="stylesheet" href="{{urlpath}}/vw_static/bootstrap.css" />
+    <style>
+        body {
+            padding-top: 75px;
+        }
+        .vaultwarden-icon {
+            width: 48px;
+            height: 48px;
+            height: 32px;
+            width: auto;
+            margin: -5px 0 0 0;
+        }
+        .footer {
+            padding: 40px 0 40px 0;
+            border-top: 1px solid #dee2e6;
+        }
+        .container {
+            max-width: 980px;
+        }
+        .content {
+            padding-top: 20px;
+            padding-bottom: 20px;
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+    </style>
+</head>
+
+<body class="bg-light">
+
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 shadow fixed-top">
+        <div class="container">
+            <a class="navbar-brand" href="{{urlpath}}/"><img class="vaultwarden-icon" src="{{urlpath}}/vw_static/vaultwarden-icon.png" alt="V">aultwarden</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
+                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarCollapse">
+                <ul class="navbar-nav me-auto">
+            </div>
+        </div>
+    </nav>
+
+    <main class="container inner content text-center">
+        <h2>Page not found!</h2>
+        <p class="lead">Sorry, but the page you were looking for could not be found.</p>
+        <p class="display-6">
+            <a href="{{urlpath}}/"><img style="max-width: 500px; width: 100%;" src="{{urlpath}}/vw_static/404.png" alt="Return to the web vault?"></a></p>
+        <p>You can <a href="{{urlpath}}/">return to the web-vault</a>, or <a href="https://github.com/dani-garcia/vaultwarden">contact us</a>.</p>
+    </main>
+
+    <div class="container footer text-muted content">Vaultwarden (unofficial Bitwarden&reg; server)</div>
+</body>
+</html>