Skip to content

Commit

Permalink
chore: Add custom 404 and 50x page #225 (#226)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nwittstruck
nwittstruck authored Mar 21, 2024
1 parent 7218ba3 commit 4940e07
Show file tree
Hide file tree
Showing 11 changed files with 238 additions and 183 deletions.
4 changes: 2 additions & 2 deletions config/config.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ config :qrstorage, QrstorageWeb.Endpoint,
pubsub_server: Qrstorage.PubSub,
render_errors: [
view: QrstorageWeb.ErrorView,
accepts: ~w(html json),
layout: false
accepts: ~w(html),
layout: {QrstorageWeb.LayoutView, :root}
]

# Configures Elixir's Logger
Expand Down
1 change: 1 addition & 0 deletions lib/qrstorage_web/router.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ defmodule QrstorageWeb.Router do
plug :accepts, ["html"]
plug :fetch_session
plug :fetch_flash
plug :put_root_layout, {QrstorageWeb.LayoutView, :root}
plug :protect_from_forgery
plug :put_secure_browser_headers
end
Expand Down
1 change: 1 addition & 0 deletions lib/qrstorage_web/templates/error/400.html.heex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p><%= gettext("Not found") %></p>
3 changes: 3 additions & 0 deletions lib/qrstorage_web/templates/error/404.html.heex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p><%= gettext("Not found") %></p>

<p><%= gettext("QR-Code has been deleted?") %></p>
1 change: 1 addition & 0 deletions lib/qrstorage_web/templates/error/500.html.heex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p><%= gettext("Internal server error") %></p>
149 changes: 15 additions & 134 deletions lib/qrstorage_web/templates/layout/app.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,15 @@
<!DOCTYPE html>
<!--[if lte 8]><html class="pre-ie9" lang="de"><![endif]-->
<!--[if gte IE 9]><!-->
<html lang="de">
<!--<![endif]-->
<head>
<title>QRStorage</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<meta name="description" content="" />

<link rel="manifest" href={Routes.static_path(@conn, "/site.webmanifest")} />
<link rel="mask-icon" href={Routes.static_path(@conn, "/images/safari-pinned-tab.svg")} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />

<%= csrf_meta_tag() %>
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} />
<link rel="apple-touch-icon" href={Routes.static_path(@conn, "/images/apple-touch-icon.png")} />
<link rel="icon" sizes="192x192" href={Routes.static_path(@conn, "/images/favicon-192x192.png")} />
<link rel="icon" sizes="96x96" href={Routes.static_path(@conn, "/images/favicon-96x96.png")} />
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}>
</script>
</head>
<body>
<div class="order-1">
<div class="">
<div class="d-lg-none">
<div id="static-footer" class="footer fixed-bottom bg-gradient bg-gradient-primary">
<div class="row">
<div class="d-flex align-items-center">
<div class="col-1 col-sm-2">
<%= link to: "/", title: "QRStorage" do %>
<img
id="static-footer-logo"
src={Routes.static_path(@conn, "/images/qrstorage_logo.svg")}
class="img-fluid d-block"
width="100%"
alt="QRStorage Logo"
/>
<% end %>
</div>
<div class="col-11 col-sm-10 d-flex justify-content-end">
<a href="https://github.com/kitsteam/qrstorage" class="text-white px-lg-2 p-2 text-decoration-none">
GitHub
</a>
<a href="https://kits.blog/impressum/" class="text-white px-lg-2 p-2 text-decoration-none">
Impressum
</a>
<a href="https://kits.blog/datenschutzerklaerung/" class="text-white p-2 text-decoration-none">
Datenschutz
</a>
</div>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<!-- Left Block -->
<div
id="left-column"
class="order float-start position-fixed vh-100 bg-gradient bg-gradient-primary w-50 d-flex flex-column align-items-center justify-content-between"
>
<div></div>
<div>
<%= link to: "/", title: "QRStorage" do %>
<img
src={Routes.static_path(@conn, "/images/qrstorage_logo.svg")}
class="img-fluid d-block"
alt="QRStorage Logo"
/>
<% end %>
</div>
<div id="footer-links" class="d-flex align-items-center mb-1">
<a href="https://github.com/kitsteam/qrstorage" class="text-white px-lg-2 p-2 text-decoration-none">
GitHub
</a>
<a href="https://kits.blog/impressum/" class="text-white px-lg-2 p-2 text-decoration-none">
Impressum
</a>
<a href="https://kits.blog/datenschutzerklaerung/" class="text-white p-2 text-decoration-none">
Datenschutz
</a>
</div>
</div>
<!-- End Left Block -->
</div>
</div>
<!-- Right Block -->
<div class="w-50 float-end d-flex flex-column align-items-stretch justify-content-between vh-100">
<div class="g-0 d-flex justify-content-end px-3">
<div class="pt-3">
<a href="https://kits.blog/tools/">
<img src={Routes.static_path(@conn, "/images/kits-logo.svg")} class="img-fluid d-block" alt="Kits Logo" />
</a>
</div>
</div>
<div class="row g-0 h-100">
<div id="content" class="container w-90">
<h1 class="fw-bold">
<%= link("QRStorage", to: "/", title: "QRStorage", class: "text-decoration-none") %>
</h1>
<div class="row">
<div class="col-sm-12">
<%= if Phoenix.Flash.get(@flash, :info) do %>
<p class="alert alert-info" role="alert">
<%= Phoenix.Flash.get(@flash, :info) %>
</p>
<% end %>
<%= if Phoenix.Flash.get(@flash, :error) do %>
<p class="alert alert-danger" role="alert">
<%= Phoenix.Flash.get(@flash, :error) %>
</p>
<% end %>
</div>
</div>
<%= @inner_content %>
</div>
</div>
</div>
<!-- End Right Block -->
</div>
<!--[if IE
]><div
class="w-100 text-center bg-dark text-white pt-3 px-4 pb-1 position-fixed"
style="z-index: 1000; bottom: 0"
>
<p onClick="parentNode.remove()">
Please use a modern browser for a better browsing experience. <span class="float-right">X</span>
</p>
</div><!
[endif]-->
</body>
</html>
<div class="row">
<div class="col-sm-12">
<%= if Phoenix.Flash.get(@flash, :info) do %>
<p class="alert alert-info" role="alert">
<%= Phoenix.Flash.get(@flash, :info) %>
</p>
<% end %>
<%= if Phoenix.Flash.get(@flash, :error) do %>
<p class="alert alert-danger" role="alert">
<%= Phoenix.Flash.get(@flash, :error) %>
</p>
<% end %>
</div>
</div>
<%= @inner_content %>
120 changes: 120 additions & 0 deletions lib/qrstorage_web/templates/layout/root.html.heex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<!--[if lte 8]><html class="pre-ie9" lang="de"><![endif]-->
<!--[if gte IE 9]><!-->
<html lang="de">
<!--<![endif]-->
<head>
<title>QRStorage</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<meta name="description" content="" />

<link rel="manifest" href={Routes.static_path(@conn, "/site.webmanifest")} />
<link rel="mask-icon" href={Routes.static_path(@conn, "/images/safari-pinned-tab.svg")} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />

<%= csrf_meta_tag() %>
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} />
<link rel="apple-touch-icon" href={Routes.static_path(@conn, "/images/apple-touch-icon.png")} />
<link rel="icon" sizes="192x192" href={Routes.static_path(@conn, "/images/favicon-192x192.png")} />
<link rel="icon" sizes="96x96" href={Routes.static_path(@conn, "/images/favicon-96x96.png")} />
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}>
</script>
</head>
<body>
<div class="order-1">
<div class="">
<div class="d-lg-none">
<div id="static-footer" class="footer fixed-bottom bg-gradient bg-gradient-primary">
<div class="row">
<div class="d-flex align-items-center">
<div class="col-1 col-sm-2">
<%= link to: "/", title: "QRStorage" do %>
<img
id="static-footer-logo"
src={Routes.static_path(@conn, "/images/qrstorage_logo.svg")}
class="img-fluid d-block"
width="100%"
alt="QRStorage Logo"
/>
<% end %>
</div>
<div class="col-11 col-sm-10 d-flex justify-content-end">
<a href="https://github.com/kitsteam/qrstorage" class="text-white px-lg-2 p-2 text-decoration-none">
GitHub
</a>
<a href="https://kits.blog/impressum/" class="text-white px-lg-2 p-2 text-decoration-none">
Impressum
</a>
<a href="https://kits.blog/datenschutzerklaerung/" class="text-white p-2 text-decoration-none">
Datenschutz
</a>
</div>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<!-- Left Block -->
<div
id="left-column"
class="order float-start position-fixed vh-100 bg-gradient bg-gradient-primary w-50 d-flex flex-column align-items-center justify-content-between"
>
<div></div>
<div>
<%= link to: "/", title: "QRStorage" do %>
<img
src={Routes.static_path(@conn, "/images/qrstorage_logo.svg")}
class="img-fluid d-block"
alt="QRStorage Logo"
/>
<% end %>
</div>
<div id="footer-links" class="d-flex align-items-center mb-1">
<a href="https://github.com/kitsteam/qrstorage" class="text-white px-lg-2 p-2 text-decoration-none">
GitHub
</a>
<a href="https://kits.blog/impressum/" class="text-white px-lg-2 p-2 text-decoration-none">
Impressum
</a>
<a href="https://kits.blog/datenschutzerklaerung/" class="text-white p-2 text-decoration-none">
Datenschutz
</a>
</div>
</div>
<!-- End Left Block -->
</div>
</div>
<!-- Right Block -->
<div class="w-50 float-end d-flex flex-column align-items-stretch justify-content-between vh-100">
<div class="g-0 d-flex justify-content-end px-3">
<div class="pt-3">
<a href="https://kits.blog/tools/">
<img src={Routes.static_path(@conn, "/images/kits-logo.svg")} class="img-fluid d-block" alt="Kits Logo" />
</a>
</div>
</div>
<div class="row g-0 h-100">
<div id="content" class="container w-90">
<h1 class="fw-bold">
<%= link("QRStorage", to: "/", title: "QRStorage", class: "text-decoration-none") %>
</h1>
<%= @inner_content %>
</div>
</div>
</div>
<!-- End Right Block -->
</div>
<!--[if IE
]><div
class="w-100 text-center bg-dark text-white pt-3 px-4 pb-1 position-fixed"
style="z-index: 1000; bottom: 0"
>
<p onClick="parentNode.remove()">
Please use a modern browser for a better browsing experience. <span class="float-right">X</span>
</p>
</div><!
[endif]-->
</body>
</html>
46 changes: 31 additions & 15 deletions priv/gettext/de/LC_MESSAGES/default.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ msgstr ""
"Plural-Forms: nplurals=2; plural=(n != 1);\n"

#: lib/qrstorage_web/templates/qr_code/download.html.heex:59
#: lib/qrstorage_web/templates/qr_code/show.html.heex:65
#: lib/qrstorage_web/templates/qr_code/show.html.heex:60
#, elixir-autogen, elixir-format
msgid "Download"
msgstr ""
Expand All @@ -26,15 +26,14 @@ msgid "Oops, something went wrong! Please check the errors below."
msgstr "Oops, da ist etwas schiefgelaufen. Bitte korrigiere die folgenden Fehler."

#: lib/qrstorage_web/templates/qr_code/form_audio.html.heex:57
#: lib/qrstorage_web/templates/qr_code/form_link.html.heex:45
#: lib/qrstorage_web/templates/qr_code/form_link.html.heex:47
#: lib/qrstorage_web/templates/qr_code/form_recording.html.heex:41
#: lib/qrstorage_web/templates/qr_code/form_text.html.heex:56
#, elixir-autogen, elixir-format
msgid "Save"
msgstr "Erstellen"

#: lib/qrstorage_web/templates/qr_code/show.html.heex:47
#: lib/qrstorage_web/templates/qr_code/show.html.heex:56
#: lib/qrstorage_web/templates/qr_code/show.html.heex:46
#, elixir-autogen, elixir-format
msgid "Deletion Date"
msgstr "Löschdatum"
Expand Down Expand Up @@ -115,7 +114,7 @@ msgstr "Möchtest Du diesen QR-Code wirklich löschen?"
msgid "Do you really want to delete this QR code? This action cannot be undone:"
msgstr "Möchtest Du diesen QR-Code wirklich löschen? Diese Handlung kann nicht rückgängig gemacht werden."

#: lib/qrstorage_web/controllers/qr_code_controller.ex:96
#: lib/qrstorage_web/controllers/qr_code_controller.ex:94
#, elixir-autogen, elixir-format
msgid "Successfully deleted QR code."
msgstr "QR-Code erfolgreich gelöscht."
Expand All @@ -125,11 +124,6 @@ msgstr "QR-Code erfolgreich gelöscht."
msgid "Text"
msgstr "Text"

#: lib/qrstorage_web/views/qr_code_view.ex:47
#, elixir-autogen, elixir-format
msgid "This qr code will be stored indefinitely."
msgstr "Dieser QR-Code wird nicht automatisch gelöscht."

#: lib/qrstorage_web/templates/qr_code/download.html.heex:21
#, elixir-autogen, elixir-format
msgid "Using this admin link you can delete the QR Code later on manually. Save this carefully, it is not possible to retrieve it later:"
Expand Down Expand Up @@ -186,9 +180,9 @@ msgstr "Diese Sprache unterstützt nur eine weibliche Stimme."
msgid "Voice"
msgstr "Männliche statt weiblicher Stimme verwenden"

#: lib/qrstorage/services/tts_service.ex:12
#: lib/qrstorage/services/tts_service.ex:17
#: lib/qrstorage/services/tts_service.ex:33
#: lib/qrstorage/services/tts_service.ex:11
#: lib/qrstorage/services/tts_service.ex:16
#: lib/qrstorage/services/tts_service.ex:32
#, elixir-autogen, elixir-format
msgid "Qr code audio transcription failed."
msgstr "Audio-Transkription ist fehlgeschlagen."
Expand Down Expand Up @@ -239,8 +233,8 @@ msgstr "Fehler beim Upload der Audio-Datei."
msgid "Error while extracting audio file from plug: Invalid content type"
msgstr "Fehler beim Upload der Audio-Datei."

#: lib/qrstorage/services/qr_code_service.ex:110
#: lib/qrstorage/services/qr_code_service.ex:114
#: lib/qrstorage/services/qr_code_service.ex:80
#: lib/qrstorage/services/qr_code_service.ex:84
#, elixir-autogen, elixir-format
msgid "Qr code recording not extracted"
msgstr "Fehler beim Upload der Audio-Datei."
Expand All @@ -254,3 +248,25 @@ msgstr "Aufnahme starten/stoppen"
#, elixir-autogen, elixir-format
msgid "Recording is disabled or not supported."
msgstr "Die Aufnahmefunktion des Browsers ist deaktiviert oder wird nicht unterstützt."

#: lib/qrstorage_web/templates/error/500.html.heex:1
#, elixir-autogen, elixir-format
msgid "Internal server error"
msgstr "Interner Fehler. Bitte versuche es später erneut."

#: lib/qrstorage_web/templates/error/400.html.heex:1
#: lib/qrstorage_web/templates/error/404.html.heex:1
#, elixir-autogen, elixir-format
msgid "Not found"
msgstr "Die Seite konnte nicht gefunden werden."

#: lib/qrstorage_web/templates/error/404.html.heex:3
#, elixir-autogen, elixir-format
msgid "QR-Code has been deleted?"
msgstr "QR-Codes werden nach Inaktivität und Ablauf der ausgewählten Speicherdauer gelöscht."

#: lib/qrstorage/services/qr_code_service.ex:97
#: lib/qrstorage/services/qr_code_service.ex:101
#, elixir-autogen, elixir-format
msgid "Qr code tts not stored"
msgstr ""
Loading

0 comments on commit 4940e07

Please sign in to comment.