Styling/error pages

app/controllers/errors_controller.rb

@@ -0,0 +1,13 @@
+class ErrorsController < ApplicationController
+  def not_found; end
+
+  def internal_server_error; end
+
+  def unprocessable_entity; end
+
+  def unauthorized; end
+
+  def forbidden; end
+
+  def service_unavailable; end
+end

app/views/courses/add_lecturers.html.erb

@@ -9,7 +9,8 @@
 
 <main
   class="
-    bg-gray-50 w-full pt-4 pb-10 px-4 sm:px-6 md:px-8 transition-all duration-300
+    flex-grow bg-gray-50 w-full pt-4 pb-10 px-4 sm:px-6 md:px-8 transition-all
+    duration-300
   "
 >
 

app/views/errors/forbidden.html.erb

@@ -0,0 +1,37 @@
+<% content_for :hide_breadcrumbs, true %>
+<% content_for :hide_toggler, true %>
+
+<main
+  class="
+    flex-grow flex items-center justify-center bg-gray-50 px-6 py-10 sm:py-20
+    lg:px-8 transition-all duration-300 w-full
+  "
+>
+  <div class="text-center">
+
+    <p
+      class="
+        text-8xl sm:text-9xl font-extrabold text-gray-200 tracking-widest mb-2 sm:mb-4
+      "
+    >
+      403
+    </p>
+
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+      Forbidden
+    </h1>
+
+    <p class="mt-6 text-base leading-7 text-gray-500 max-w-md mx-auto">
+      Sorry, you are not authorized to view this page.
+    </p>
+
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+
+      <%= link_to "Return to Dashboard",
+      root_path,
+      class:
+        "cursor-pointer bg-slate-600 hover:bg-slate-700 text-white font-bold py-3.5 px-8 rounded-xl shadow-lg shadow-slate-500/20 hover:shadow-slate-500/30 transition-all transform active:scale-95 text-sm sm:text-base inline-flex justify-center items-center" %>
+
+    </div>
+  </div>
+</main>

app/views/errors/internal_server_error.html.erb

@@ -0,0 +1,37 @@
+<% content_for :hide_breadcrumbs, true %>
+<% content_for :hide_toggler, true %>
+
+<main
+  class="
+    flex-grow flex items-center justify-center bg-gray-50 px-6 py-10 sm:py-20
+    lg:px-8 transition-all duration-300 w-full
+  "
+>
+  <div class="text-center">
+
+    <p
+      class="
+        text-8xl sm:text-9xl font-extrabold text-gray-200 tracking-widest mb-2 sm:mb-4
+      "
+    >
+      500
+    </p>
+
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+      Internal Server Error
+    </h1>
+
+    <p class="mt-6 text-base leading-7 text-gray-500 max-w-md mx-auto">
+      Sorry, an unexpected error occurred. Please try again later.
+    </p>
+
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+
+      <%= link_to "Return to Dashboard",
+      root_path,
+      class:
+        "cursor-pointer bg-slate-600 hover:bg-slate-700 text-white font-bold py-3.5 px-8 rounded-xl shadow-lg shadow-slate-500/20 hover:shadow-slate-500/30 transition-all transform active:scale-95 text-sm sm:text-base inline-flex justify-center items-center" %>
+
+    </div>
+  </div>
+</main>

app/views/errors/not_found.html.erb

@@ -0,0 +1,38 @@
+<% content_for :hide_breadcrumbs, true %>
+<% content_for :hide_toggler, true %>
+
+<main
+  class="
+    flex-grow flex items-center justify-center bg-gray-50 px-6 py-10 sm:py-20
+    lg:px-8 transition-all duration-300 w-full
+  "
+>
+  <div class="text-center">
+
+    <p
+      class="
+        text-8xl sm:text-9xl font-extrabold text-gray-200 tracking-widest mb-2 sm:mb-4
+      "
+    >
+      404
+    </p>
+
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+      Page not found
+    </h1>
+
+    <p class="mt-6 text-base leading-7 text-gray-500 max-w-md mx-auto">
+      Sorry, we couldn't find the page you're looking for. It probably doesn't
+      exist, or might have been moved or deleted.
+    </p>
+
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+
+      <%= link_to "Return to Dashboard",
+      root_path,
+      class:
+        "cursor-pointer bg-slate-600 hover:bg-slate-700 text-white font-bold py-3.5 px-8 rounded-xl shadow-lg shadow-slate-500/20 hover:shadow-slate-500/30 transition-all transform active:scale-95 text-sm sm:text-base inline-flex justify-center items-center" %>
+
+    </div>
+  </div>
+</main>

app/views/errors/service_unavailable.html.erb

@@ -0,0 +1,37 @@
+<% content_for :hide_breadcrumbs, true %>
+<% content_for :hide_toggler, true %>
+
+<main
+  class="
+    flex-grow flex items-center justify-center bg-gray-50 px-6 py-10 sm:py-20
+    lg:px-8 transition-all duration-300 w-full
+  "
+>
+  <div class="text-center">
+
+    <p
+      class="
+        text-8xl sm:text-9xl font-extrabold text-gray-200 tracking-widest mb-2 sm:mb-4
+      "
+    >
+      503
+    </p>
+
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+      Service Unavailable
+    </h1>
+
+    <p class="mt-6 text-base leading-7 text-gray-500 max-w-md mx-auto">
+      Sorry, this page is undergoing maintenance. Please try again later.
+    </p>
+
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+
+      <%= link_to "Return to Dashboard",
+      root_path,
+      class:
+        "cursor-pointer bg-slate-600 hover:bg-slate-700 text-white font-bold py-3.5 px-8 rounded-xl shadow-lg shadow-slate-500/20 hover:shadow-slate-500/30 transition-all transform active:scale-95 text-sm sm:text-base inline-flex justify-center items-center" %>
+
+    </div>
+  </div>
+</main>

app/views/errors/unauthorized.html.erb

@@ -0,0 +1,38 @@
+<% content_for :hide_breadcrumbs, true %>
+<% content_for :hide_toggler, true %>
+
+<main
+  class="
+    flex-grow flex items-center justify-center bg-gray-50 px-6 py-10 sm:py-20
+    lg:px-8 transition-all duration-300 w-full
+  "
+>
+  <div class="text-center">
+
+    <p
+      class="
+        text-8xl sm:text-9xl font-extrabold text-gray-200 tracking-widest mb-2 sm:mb-4
+      "
+    >
+      401
+    </p>
+
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+      Unauthorized
+    </h1>
+
+    <p class="mt-6 text-base leading-7 text-gray-500 max-w-md mx-auto">
+      Sorry, you must be authenticated to view this page. Please login to
+      continue.
+    </p>
+
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+
+      <%= link_to "Go to Login",
+      login_path,
+      class:
+        "cursor-pointer bg-slate-600 hover:bg-slate-700 text-white font-bold py-3.5 px-8 rounded-xl shadow-lg shadow-slate-500/20 hover:shadow-slate-500/30 transition-all transform active:scale-95 text-sm sm:text-base inline-flex justify-center items-center" %>
+
+    </div>
+  </div>
+</main>

app/views/errors/unprocessable_entity.html.erb

@@ -0,0 +1,38 @@
+<% content_for :hide_breadcrumbs, true %>
+<% content_for :hide_toggler, true %>
+
+<main
+  class="
+    flex-grow flex items-center justify-center bg-gray-50 px-6 py-10 sm:py-20
+    lg:px-8 transition-all duration-300 w-full
+  "
+>
+  <div class="text-center">
+
+    <p
+      class="
+        text-8xl sm:text-9xl font-extrabold text-gray-200 tracking-widest mb-2 sm:mb-4
+      "
+    >
+      422
+    </p>
+
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+      Unprocessable Entity
+    </h1>
+
+    <p class="mt-6 text-base leading-7 text-gray-500 max-w-md mx-auto">
+      Sorry, an error occurred. If you had just submitted a form before this
+      error occurred. please try resubmitting again.
+    </p>
+
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+
+      <%= link_to "Return to Dashboard",
+      root_path,
+      class:
+        "cursor-pointer bg-slate-600 hover:bg-slate-700 text-white font-bold py-3.5 px-8 rounded-xl shadow-lg shadow-slate-500/20 hover:shadow-slate-500/30 transition-all transform active:scale-95 text-sm sm:text-base inline-flex justify-center items-center" %>
+
+    </div>
+  </div>
+</main>

config/application.rb

@@ -28,6 +28,10 @@ class Application < Rails::Application
     # view constants thresholds
     config.participants_threshold = 500
     config.supervisors_threshold = 100
+
     config.participants_pagination_threshold = 25
+
+    # redirect error routes to use custom design
+    config.exceptions_app = routes
   end
 end

config/routes.rb

@@ -84,6 +84,12 @@
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get 'up' => 'rails/health#show', as: :rails_health_check
+  match '/404', to: 'errors#not_found', via: :all
+  match '/500', to: 'errors#internal_server_error', via: :all
+  match '/401', to: 'errors#unauthorized', via: :all
+  match '/403', to: 'errors#forbidden', via: :all
+  match '/503', to: 'errors#service_unavailable', via: :all
+  match '/422', to: 'errors#unprocessable_entity', via: :all
 
   # Render dynamic PWA files from app/views/pwa/* (remember to link manifest in application.html.erb)
   # get "manifest" => "rails/pwa#manifest", as: :pwa_manifest