Merge pull request #49 from TelosLabs/17-authentication-views

Authentication Views
TelosLabs · Jul 22, 2024 · 0cb9ea9 · 0cb9ea9
2 parents 07b5875 + d2f34f1
commit 0cb9ea9
Show file tree

Hide file tree

Showing 22 changed files with 278 additions and 105 deletions.
diff --git a/Gemfile b/Gemfile
@@ -29,6 +29,7 @@ gem "bcrypt", "~> 3.1.20"
 
 # Other
 gem "bootsnap", require: false
+gem "inline_svg"
 gem "puma", ">= 5.0"
 gem "tzinfo-data", platforms: %i[windows jruby]
 gem "validates_timeliness", "~> 7.0.0.beta1"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -223,6 +223,9 @@ GEM
       actionpack (>= 6.0.0)
       activesupport (>= 6.0.0)
       railties (>= 6.0.0)
+    inline_svg (1.9.0)
+      activesupport (>= 3.0)
+      nokogiri (>= 1.6)
     io-console (0.7.2)
     irb (1.13.2)
       rdoc (>= 4.0.0)
@@ -347,7 +350,7 @@ GEM
     regexp_parser (2.9.2)
     reline (0.5.9)
       io-console (~> 0.5)
-    rexml (3.3.1)
+    rexml (3.3.2)
       strscan
     rouge (4.3.0)
     rspec (3.13.0)
@@ -514,6 +517,7 @@ DEPENDENCIES
   faker
   fuubar
   importmap-rails
+  inline_svg
   letter_opener (~> 1.10)
   mission_control-jobs
   propshaft

diff --git a/app/assets/images/main-logo-with-date.svg b/app/assets/images/main-logo-with-date.svg
diff --git a/app/assets/images/main-logo.svg b/app/assets/images/main-logo.svg
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+div.field_with_errors > label {
+  @apply mb-2 italic font-bold text-red;
+}
+
+div.field_with_errors > input {
+  @apply w-full bg-transparent border-2 border-red
+  rounded-md text-white placeholder:text-white/50
+  focus:bg-white focus:text-black focus:placeholder-gray
+  focus:border-white focus:ring-white mb-2
+}
diff --git a/app/controllers/concerns/authentication.rb b/app/controllers/concerns/authentication.rb
@@ -27,7 +27,7 @@ def authenticate_user!
     authenticate_user
 
     if !user_signed_in?
-      redirect_to new_session_path, alert: t("controllers.concerns.authentication.unauthorized")
+      redirect_to new_session_path
     end
   end
 

diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb
@@ -1,6 +1,4 @@
 class MainController < ApplicationController
-  allow_unauthenticated_access
-
   def index
   end
 end
diff --git a/app/controllers/password_resets_controller.rb b/app/controllers/password_resets_controller.rb
@@ -19,7 +19,7 @@ def create
       ).password_reset.deliver_later
     end
 
-    redirect_to new_session_path, notice: t("controllers.password_resets.create.notice")
+    redirect_to post_submit_password_reset_path
   end
 
   def update

diff --git a/app/helpers/navigation_helper.rb b/app/helpers/navigation_helper.rb
@@ -0,0 +1,6 @@
+module NavigationHelper
+  # Todo: A better approach would be to support authenticated root and unauthenticated root in routes.rb
+  def homepage_link
+    user_signed_in? ? root_path : new_session_path
+  end
+end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,28 +1,37 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <title>RailsWorld</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-  <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+<html class="h-full">
+  <head>
+    <title>RailsWorld</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
 
-  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-  <%= javascript_importmap_tags %>
-</head>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+  </head>
 
-<body>
-<main class="container mx-auto mt-28 px-5 flex">
-  <div><%= notice %></div>
-  <div><%= alert %></div>
-  <% if user_signed_in? %>
-    <%= link_to "Edit Password", edit_password_path %>
-    <%= button_to "Log out", session_path, method: :delete %>
-  <% else %>
-    <%= link_to "Sign Up", new_registration_path %>
-    <%= link_to "Log in", new_session_path %>
-  <% end %>
-  <%= yield %>
-</main>
-</body>
+  <body class="h-full">
+    <main class="relative flex flex-col w-full h-full mx-auto">
+      <% if !current_page?(new_session_path) %>
+        <div class="flex justify-center w-full py-6 mx-auto border-b border-b-white bg-purple-dark">
+          <div class="flex max-w-screen-sm px-5">
+            <%= link_to homepage_link do %>
+              <%= inline_svg_tag("main-logo.svg", class: "w-full") %>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+      <% flash.each do |type, message| %>
+        <% if message.present? && message.is_a?(String) %>
+          <div><%= notice %></div>
+          <div><%= alert %></div>
+        <% end %>
+      <% end %>
+      <%= yield %>
+      <% if user_signed_in? %>
+        <%= button_to "Log out", session_path, method: :delete %>
+      <% end %>
+    </main>
+  </body>
 </html>
diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb
@@ -1,23 +1,30 @@
-<h1>Reset Your Password</h1>
+<div class="flex flex-col items-center flex-1 h-screen px-5 py-10 bg-purple-dark">
+  <%= form_with model: @user, url: password_reset_path(token: params[:token]), class: "flex flex-col h-full justify-between w-full max-w-screen-sm" do |form| %>
+    <div class="flex flex-col">
+      <div class="flex flex-col w-full mb-6">
+        <h1 class="mb-4 text-4xl italic font-black text-white">Reset your password</h1>
+      </div>
 
-<%= form_with model: @user, url: password_reset_path(token: params[:token]) do |form| %>
-  <% if form.object.errors.any? %>
-    <% form.object.errors.full_messages.each do |message| %>
-      <div> <%= message %></div>
-    <% end %>
-  <% end %>
+      <div class="w-full">
+        <%= render partial: "shared/form_errors", locals: { errors: form.object.errors.full_messages } %>
 
-  <div>
-    <%= form.label :password %>
-    <%= form.password_field :password %>
-  </div>
+        <div class="mb-10">
+          <div class="flex flex-col w-full mb-6">
+            <%= form.label :password, class: "text-white italic font-bold mb-2" %>
+            <%= form.password_field :password, required: true, placeholder: "You know how a strong password goes, right?", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %>
+          </div>
 
-  <div>
-    <%= form.label :password_confirmation %>
-    <%= form.password_field :password_confirmation %>
-  </div>
+          <div class="flex flex-col w-full mb-6">
+            <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %>
+            <%= form.password_field :password_confirmation, required: true, placeholder: "Confirm strong password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %>
+          </div>
+        </div>
 
-  <div>
-    <%= form.submit "Reset Your Password" %>
-  </div>
-<% end %>
+        <div class="flex flex-col items-center mb-10">
+          <span class="text-white">Just remembered your password? <%= link_to "Log in instead", new_session_path, class: "font-black italic underline text-white" %></span>
+        </div>
+      </div>
+    </div>
+    <%= form.button "Reset Your Password", type: "submit", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %>
+  <% end %>
+</div>
diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb
@@ -1,12 +1,23 @@
-<h1>Reset Your Password</h1>
+<div class="flex flex-col items-center flex-1 h-screen px-5 py-10 bg-purple-dark">
+  <%= form_with model: @user, url: password_reset_path, class: "flex flex-col h-full w-full max-w-screen-sm justify-between" do |form| %>
+    <div class="flex flex-col">
+      <div class="flex flex-col w-full mb-6">
+        <h1 class="mb-4 text-4xl italic font-black text-white">Forgot Password</h1>
+        <p class="font-bold text-white">We'll send you a link to create a new password to the email address of your choice</p>
+      </div>
 
-<%= form_with model: @user, url: password_reset_path do |form| %>
-  <div>
-    <%= form.label :email %>
-    <%= form.email_field :email %>
-  </div>
+      <div class="w-full">
+        <div class="flex flex-col w-full mb-10">
+          <%= form.label :email, class: "text-white italic font-bold mb-2" %>
+          <%= form.email_field :email, required: true, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %>
+        </div>
 
-  <div>
-    <%= form.submit "Reset password" %>
-  </div>
-<% end %>
+        <div class="flex flex-col items-center mb-10">
+          <span class="text-white">Just remembered your password? <%= link_to "Log in instead", new_session_path, class: "font-black italic underline text-white" %></span>
+        </div>
+      </div>
+    </div>
+
+    <%= form.button "Send recovery email", type: "submit", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %>
+  <% end %>
+</div>
diff --git a/app/views/password_resets/post_submit.html.erb b/app/views/password_resets/post_submit.html.erb
@@ -0,0 +1,10 @@
+<div class="flex flex-col items-center flex-1 h-screen px-5 py-10 bg-purple-dark">
+  <div class="flex flex-col justify-between h-full max-w-screen-sm">
+    <div class="flex flex-col w-full mb-6">
+      <h1 class="mb-4 text-4xl italic font-black text-white">Check your inbox</h1>
+      <p class="font-bold text-white">We've sent you a link to recover your password to the email you provided.</p>
+    </div>
+
+    <%= link_to "Return to login", new_session_path, class: "w-full bg-red py-4 text-white text-center font-black italic rounded-[10px] uppercase" %>
+  </div>
+</div>