Add sign up views, password recovery views

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

app/views/password_resets/new.html.erb

@@ -1,12 +1,18 @@
-<h1>Reset Your Password</h1>
-
-<%= form_with model: @user, url: password_reset_path do |form| %>
-  <div>
-    <%= form.label :email %>
-    <%= form.email_field :email %>
+<div class="flex flex-col items-center h-screen px-5 pt-10 bg-purple-dark">
+  <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>
 
-  <div>
-    <%= form.submit "Reset password" %>
+  <div class="w-full">
+    <%= form_with model: @user, url: password_reset_path do |form| %>
+      <div class="mb-10">
+        <div class="flex flex-col w-full mb-6">
+          <%= form.label :email, class: "text-white italic font-bold mb-2" %>
+          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white", data: { test_id: "email_field" } %>
+        </div>
+
+      <%= form.submit "Send recovery email", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %>
+    <% end %>
   </div>
-<% end %>
+</div>

app/views/password_resets/post_submit.html.erb

@@ -0,0 +1,8 @@
+<div class="flex flex-col items-center h-screen px-5 pt-10 bg-purple-dark">
+  <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", data: { test_id: "sign_up_button" } %>
+</div>

app/views/registrations/new.html.erb

@@ -1,28 +1,34 @@
-<h1>Sign Up</h1>
+<div class="flex flex-col items-center h-screen px-5 pt-10 bg-purple-dark">
+  <div class="flex flex-col w-full mb-6">
+    <h1 class="mb-4 text-4xl italic font-black text-white">Sign Up</h1>
+  </div>
 
-<%= form_with model: @user, url: registration_path do |form| %>
-  <% if form.object.errors.any? %>
-    <% form.object.errors.full_messages.each do |message| %>
-      <div><%= message %></div>
-    <% end %>
-  <% end %>
+  <div class="w-full">
+    <%= form_with model: @user, url: registration_path do |form| %>
+      <% if form.object.errors.any? %>
+        <% form.object.errors.full_messages.each do |message| %>
+          <div><%= message %></div>
+        <% end %>
+      <% end %>
 
-  <div>
-    <%= form.label :email %>
-    <%= form.email_field :email, data: { test_id: "email_field" } %>
-  </div>
+      <div class="mb-10">
+        <div class="flex flex-col w-full mb-6">
+          <%= form.label :email, class: "text-white italic font-bold mb-2" %>
+          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white", data: { test_id: "email_field" } %>
+        </div>
 
-  <div>
-    <%= form.label :password %>
-    <%= form.password_field :password, data: { test_id: "password_field" } %>
-  </div>
+        <div class="flex flex-col mb-6">
+          <%= form.label :password, class: "text-white italic font-bold mb-2" %>
+          <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white", data: { test_id: "password_field" } %>
+        </div>
 
-  <div>
-    <%= form.label :password_confirmation %>
-    <%= form.password_field :password_confirmation, data: { test_id: "password_confirmation_field" } %>
-  </div>
+        <div class="flex flex-col">
+          <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %>
+          <%= form.password_field :password_confirmation, placeholder: "You know how a strong password goes, right?", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white", data: { test_id: "password_confirmation_field" } %>
+        </div>
+      </div>
 
-  <div>
-    <%= form.submit "Sign Up", data: { test_id: "sign_up_button" } %>
+      <%= form.submit "Sign Up", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %>
+    <% end %>
   </div>
-<% end %>
+</div>

app/views/sessions/new.html.erb

@@ -10,12 +10,12 @@
       <div class="mb-10">
         <div class="flex flex-col w-full mb-6">
           <%= form.label :email, class: "text-white italic font-bold mb-2" %>
-          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white", data: { test_id: "email_field" } %>
+          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white" %>
         </div>
 
         <div class="flex flex-col">
           <%= form.label :password, class: "text-white italic font-bold mb-2" %>
-          <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white", data: { test_id: "password_field" } %>
+          <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white" %>
         </div>
       </div>
 
@@ -24,7 +24,7 @@
         <%= link_to "Sign up", new_registration_path, class: "font-black italic underline text-white" %>
       </div>
 
-      <%= form.submit "Log in", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_in_button" } %>
+      <%= form.submit "Log in", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %>
     <% end %>
   </div>
 </div>

config/routes.rb

@@ -9,5 +9,7 @@
   resource :registration, only: [:new, :create]
   resource :session, only: [:new, :create, :destroy]
   resource :password, only: [:edit, :update]
-  resource :password_reset, only: [:new, :create, :edit, :update]
+  resource :password_reset, only: [:new, :create, :edit, :update] do
+    get :post_submit
+  end
 end