From 942c63378362006c6d1d477c0f6f37eea7678b3a Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Sun, 14 Jul 2024 23:16:41 -0600 Subject: [PATCH 01/11] Log in view WIP --- Gemfile | 1 + Gemfile.lock | 4 ++ app/assets/images/main-logo-with-date.svg | 54 +++++++++++++++++++++++ app/views/layouts/application.html.erb | 43 +++++++++--------- app/views/sessions/new.html.erb | 41 ++++++++++------- config/tailwind.config.js | 11 ++++- 6 files changed, 115 insertions(+), 39 deletions(-) create mode 100644 app/assets/images/main-logo-with-date.svg diff --git a/Gemfile b/Gemfile index c5e2aa88..562da8c5 100644 --- a/Gemfile +++ b/Gemfile @@ -45,6 +45,7 @@ group :development, :test do gem "erb_lint", require: false gem "factory_bot_rails" gem "faker" + gem "inline_svg" gem "letter_opener", "~> 1.10" gem "pry-byebug" gem "rspec-rails" diff --git a/Gemfile.lock b/Gemfile.lock index b845e5a0..a202318e 100644 --- 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) @@ -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 new file mode 100644 index 00000000..2826793c --- /dev/null +++ b/app/assets/images/main-logo-with-date.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 251755fe..57fef2e6 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,28 +1,25 @@ - - RailsWorld - - <%= csrf_meta_tags %> - <%= csp_meta_tag %> - <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> + + RailsWorld + + <%= 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 %> - + <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> + <%= javascript_importmap_tags %> + - -
-
<%= notice %>
-
<%= alert %>
- <% 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 %> -
- + +
+ <% flash.each do |type, message| %> + <% if message.present? && message.is_a?(String) %> +
<%= notice %>
+
<%= alert %>
+ <% end %> + <% end %> + <%= yield %> +
+ diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index 426a07a5..dab37f5b 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -1,19 +1,30 @@ -

Log in

- -<%= form_with model: @user, url: session_path do |form| %> -
- <%= form.label :email %> - <%= form.email_field :email %> +
+ <%= inline_svg_tag("main-logo-with-date.svg", class: "mb-10") %> +
+

Welcome!

+

Please log in to continue

-
- <%= form.label :password %> - <%= form.password_field :password %> -
+
+ <%= form_with model: @user, url: session_path do |form| %> +
+
+ <%= 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" %> +
-
- <%= form.submit "Log in" %> -
-<% end %> +
+ <%= 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" %> +
+
-<%= link_to "Forgot your password?", new_password_reset_path %> +
+ <%= link_to "Forgot password?", new_password_reset_path, class: "font-black italic underline text-white mb-10" %> + <%= link_to "Sign up", new_registration_path, class: "font-black italic underline text-white" %> +
+ + <%= form.submit "Log in", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> + <% end %> +
+
diff --git a/config/tailwind.config.js b/config/tailwind.config.js index 7cba2be2..b9f01d91 100644 --- a/config/tailwind.config.js +++ b/config/tailwind.config.js @@ -10,7 +10,16 @@ module.exports = { theme: { extend: { fontFamily: { - sans: ['Inter var', ...defaultTheme.fontFamily.sans] + sans: ['Roboto', ...defaultTheme.fontFamily.sans] + }, + colors: { + gray: '#C6C6C8', + 'purple-dark': '#432463', + 'purple-light': '#4E2A73', + red: '#CB0C1C', + blue: '#0A4E6B', + 'green-dark': '#62C554', + 'green-light': '#D8F1D4' } } }, From 0068b79999207a6ce270a3ff6d34a7fc9514c192 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Mon, 15 Jul 2024 15:51:20 -0600 Subject: [PATCH 02/11] Add sign up views, password recovery views --- app/controllers/password_resets_controller.rb | 2 +- app/views/password_resets/new.html.erb | 24 +++++---- .../password_resets/post_submit.html.erb | 8 +++ app/views/registrations/new.html.erb | 50 +++++++++++-------- app/views/sessions/new.html.erb | 6 +-- config/routes.rb | 4 +- 6 files changed, 58 insertions(+), 36 deletions(-) create mode 100644 app/views/password_resets/post_submit.html.erb diff --git a/app/controllers/password_resets_controller.rb b/app/controllers/password_resets_controller.rb index 8e4429f4..0aecfa0a 100644 --- 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/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb index ea64ecff..62a2a248 100644 --- a/app/views/password_resets/new.html.erb +++ b/app/views/password_resets/new.html.erb @@ -1,12 +1,18 @@ -

Reset Your Password

- -<%= form_with model: @user, url: password_reset_path do |form| %> -
- <%= form.label :email %> - <%= form.email_field :email %> +
+
+

Forgot Password

+

We'll send you a link to create a new password to the email address of your choice

-
- <%= form.submit "Reset password" %> +
+ <%= form_with model: @user, url: password_reset_path do |form| %> +
+
+ <%= 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" } %> +
+ + <%= 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 %>
-<% end %> +
diff --git a/app/views/password_resets/post_submit.html.erb b/app/views/password_resets/post_submit.html.erb new file mode 100644 index 00000000..a289040b --- /dev/null +++ b/app/views/password_resets/post_submit.html.erb @@ -0,0 +1,8 @@ +
+
+

Check your inbox

+

We've sent you a link to recover your password to the email you provided.

+
+ + <%= 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" } %> +
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb index f1a6c724..e5577755 100644 --- a/app/views/registrations/new.html.erb +++ b/app/views/registrations/new.html.erb @@ -1,28 +1,34 @@ -

Sign Up

+
+
+

Sign Up

+
-<%= form_with model: @user, url: registration_path do |form| %> - <% if form.object.errors.any? %> - <% form.object.errors.full_messages.each do |message| %> -
<%= message %>
- <% end %> - <% end %> +
+ <%= form_with model: @user, url: registration_path do |form| %> + <% if form.object.errors.any? %> + <% form.object.errors.full_messages.each do |message| %> +
<%= message %>
+ <% end %> + <% end %> -
- <%= form.label :email %> - <%= form.email_field :email, data: { test_id: "email_field" } %> -
+
+
+ <%= 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" } %> +
-
- <%= form.label :password %> - <%= form.password_field :password, data: { test_id: "password_field" } %> -
+
+ <%= 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" } %> +
-
- <%= form.label :password_confirmation %> - <%= form.password_field :password_confirmation, data: { test_id: "password_confirmation_field" } %> -
+
+ <%= 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" } %> +
+
-
- <%= 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 %>
-<% end %> +
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index 6c484333..dab37f5b 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -10,12 +10,12 @@
<%= 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" %>
<%= 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" %>
@@ -24,7 +24,7 @@ <%= link_to "Sign up", new_registration_path, class: "font-black italic underline text-white" %>
- <%= 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 %>
diff --git a/config/routes.rb b/config/routes.rb index 96a018c0..972ff602 100644 --- a/config/routes.rb +++ b/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 From 495d3ead9bb8cbf5eb53bf751c640b290ea7c235 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Tue, 16 Jul 2024 14:59:10 -0600 Subject: [PATCH 03/11] Add top bar, input active states --- app/assets/images/main-logo.svg | 16 ++++++++++ app/views/layouts/application.html.erb | 8 +++++ app/views/password_resets/edit.html.erb | 42 ++++++++++++++----------- app/views/password_resets/new.html.erb | 2 +- app/views/registrations/new.html.erb | 4 +-- app/views/sessions/new.html.erb | 4 +-- 6 files changed, 52 insertions(+), 24 deletions(-) create mode 100644 app/assets/images/main-logo.svg diff --git a/app/assets/images/main-logo.svg b/app/assets/images/main-logo.svg new file mode 100644 index 00000000..9fb77767 --- /dev/null +++ b/app/assets/images/main-logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 57fef2e6..b23e8070 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -13,6 +13,11 @@
+ <% if !current_page?(new_session_path) %> +
+ <%= inline_svg_tag("main-logo.svg") %> +
+ <% end %> <% flash.each do |type, message| %> <% if message.present? && message.is_a?(String) %>
<%= notice %>
@@ -20,6 +25,9 @@ <% end %> <% end %> <%= yield %> + <% if user_signed_in? %> + <%= button_to "Log out", session_path, method: :delete %> + <% end %>
diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb index 333edd06..78186281 100644 --- a/app/views/password_resets/edit.html.erb +++ b/app/views/password_resets/edit.html.erb @@ -1,23 +1,27 @@ -

Reset Your Password

- -<%= 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| %> -
<%= message %>
- <% end %> - <% end %> - -
- <%= form.label :password %> - <%= form.password_field :password %> +
+
+

Reset your password

-
- <%= form.label :password_confirmation %> - <%= form.password_field :password_confirmation %> -
+
+ <%= 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| %> +
<%= message %>
+ <% end %> + <% end %> +
+
+ <%= form.label :password, class: "text-white italic font-bold mb-2" %> + <%= form.password_field :password, 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", data: { test_id: "email_field" } %> +
+ +
+ <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %> + <%= form.password_field :password_confirmation, 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", data: { test_id: "email_field" } %> +
-
- <%= form.submit "Reset Your Password" %> + <%= form.submit "Reset Your Password", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %> + <% end %>
-<% end %> +
diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb index 62a2a248..1328ef8f 100644 --- a/app/views/password_resets/new.html.erb +++ b/app/views/password_resets/new.html.erb @@ -9,7 +9,7 @@
<%= 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" } %> + <%= form.email_field :email, 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" } %>
<%= 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" } %> diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb index e5577755..1ca22c16 100644 --- a/app/views/registrations/new.html.erb +++ b/app/views/registrations/new.html.erb @@ -14,12 +14,12 @@
<%= 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" } %> + <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %>
<%= 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" } %> + <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "password_field" } %>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index dab37f5b..d50733c1 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -10,12 +10,12 @@
<%= 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" %> + <%= form.email_field :email, 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" %>
<%= 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" %> + <%= form.password_field :password, placeholder: "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" %>
From 3fc34b5ce0565035ede92fe2ef8ba44d8b2090c4 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Wed, 17 Jul 2024 16:22:00 -0600 Subject: [PATCH 04/11] Fix layout --- app/views/layouts/application.html.erb | 8 +-- app/views/password_resets/edit.html.erb | 47 ++++++++-------- app/views/password_resets/new.html.erb | 25 +++++---- .../password_resets/post_submit.html.erb | 14 +++-- app/views/registrations/new.html.erb | 56 ++++++++++--------- app/views/sessions/new.html.erb | 49 ++++++++-------- 6 files changed, 105 insertions(+), 94 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b23e8070..cdaa3b51 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,5 +1,5 @@ - + RailsWorld @@ -11,10 +11,10 @@ <%= javascript_importmap_tags %> - -
+ +
<% if !current_page?(new_session_path) %> -
+
<%= inline_svg_tag("main-logo.svg") %>
<% end %> diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb index 78186281..61d55fe7 100644 --- a/app/views/password_resets/edit.html.erb +++ b/app/views/password_resets/edit.html.erb @@ -1,27 +1,30 @@ -
-
-

Reset your password

-
+
+ <%= form_with model: @user, url: password_reset_path(token: params[:token]), class: "flex flex-col h-full justify-between" do |form| %> +
+
+

Reset your password

+
-
- <%= 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| %> -
<%= message %>
+
+ <% if form.object.errors.any? %> + <% form.object.errors.full_messages.each do |message| %> +
<%= message %>
+ <% end %> <% end %> - <% end %> -
-
- <%= form.label :password, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password, 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", data: { test_id: "email_field" } %> -
-
- <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password_confirmation, 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", data: { test_id: "email_field" } %> -
+
+
+ <%= form.label :password, class: "text-white italic font-bold mb-2" %> + <%= form.password_field :password, 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", data: { test_id: "email_field" } %> +
- <%= form.submit "Reset Your Password", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %> - <% end %> -
+
+ <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %> + <%= form.password_field :password_confirmation, 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", data: { test_id: "email_field" } %> +
+
+
+
+ <%= form.submit "Reset Your Password", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %> + <% end %>
diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb index 1328ef8f..12651c24 100644 --- a/app/views/password_resets/new.html.erb +++ b/app/views/password_resets/new.html.erb @@ -1,18 +1,19 @@ -
-
-

Forgot Password

-

We'll send you a link to create a new password to the email address of your choice

-
+
+ <%= form_with model: @user, url: password_reset_path, class: "flex flex-col h-full justify-between" do |form| %> +
+
+

Forgot Password

+

We'll send you a link to create a new password to the email address of your choice

+
-
- <%= form_with model: @user, url: password_reset_path do |form| %> -
-
+
+
<%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %>
+
+
- <%= 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 %> -
+ <%= 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 %>
diff --git a/app/views/password_resets/post_submit.html.erb b/app/views/password_resets/post_submit.html.erb index a289040b..cc655411 100644 --- a/app/views/password_resets/post_submit.html.erb +++ b/app/views/password_resets/post_submit.html.erb @@ -1,8 +1,10 @@ -
-
-

Check your inbox

-

We've sent you a link to recover your password to the email you provided.

-
+
+
+
+

Check your inbox

+

We've sent you a link to recover your password to the email you provided.

+
- <%= 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" } %> + <%= 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" } %> +
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb index 1ca22c16..e49ebee3 100644 --- a/app/views/registrations/new.html.erb +++ b/app/views/registrations/new.html.erb @@ -1,34 +1,36 @@ -
-
-

Sign Up

-
+
+ <%= form_with model: @user, url: registration_path, class: "flex flex-col h-full w-full justify-between" do |form| %> +
+
+

Sign Up

+
-
- <%= form_with model: @user, url: registration_path do |form| %> - <% if form.object.errors.any? %> - <% form.object.errors.full_messages.each do |message| %> -
<%= message %>
- <% end %> - <% end %> +
+ <% if form.object.errors.any? %> + <% form.object.errors.full_messages.each do |message| %> +
<%= message %>
+ <% end %> + <% end %> -
-
- <%= 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 placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %> -
+
+
+ <%= 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 placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %> +
-
- <%= 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 placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "password_field" } %> -
+
+ <%= 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 placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "password_field" } %> +
-
- <%= 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" } %> -
+
+ <%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "password_confirmation_field" } %> +
+
+
- <%= 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 %> -
+ <%= 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 %>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index d50733c1..d63af153 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -1,30 +1,33 @@ -
- <%= inline_svg_tag("main-logo-with-date.svg", class: "mb-10") %> -
-

Welcome!

-

Please log in to continue

-
+
+ <%= form_with model: @user, url: session_path, class: "flex flex-col h-full justify-between" do |form| %> +
+ <%= inline_svg_tag("main-logo-with-date.svg", class: "mb-10") %> +
+

Welcome!

+

Please log in to continue

+
-
- <%= form_with model: @user, url: session_path do |form| %> -
-
- <%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %> -
+
+
+
+ <%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white transition-all" %> +
-
- <%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %> +
+ <%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white transition-all" %> +
-
-
- <%= link_to "Forgot password?", new_password_reset_path, class: "font-black italic underline text-white mb-10" %> - <%= link_to "Sign up", new_registration_path, class: "font-black italic underline text-white" %> +
+ <%= link_to "Forgot password?", new_password_reset_path, class: "font-black italic underline text-white mb-10" %> + <%= link_to "Sign up", new_registration_path, class: "font-black italic underline text-white" %> +
- +
+
<%= form.submit "Log in", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> - <% end %> -
+
+ <% end %>
From c4daebcb1b8bdb01060948d3da799570ddd07014 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Wed, 17 Jul 2024 16:29:53 -0600 Subject: [PATCH 05/11] Bump library patch for security reasons --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index a202318e..727505a6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -350,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) From ff057a8e3f2d96c287bd278273f570f0dfcb15af Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Wed, 17 Jul 2024 16:37:47 -0600 Subject: [PATCH 06/11] Fix tests --- app/views/password_resets/new.html.erb | 2 +- app/views/sessions/new.html.erb | 6 +++--- spec/controllers/password_resets_controller_spec.rb | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb index 12651c24..ec9f7b1f 100644 --- a/app/views/password_resets/new.html.erb +++ b/app/views/password_resets/new.html.erb @@ -14,6 +14,6 @@
- <%= 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" } %> + <%= form.submit "Send recovery email", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> <% end %>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index d63af153..bd84c9fc 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -11,12 +11,12 @@
<%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white transition-all" %> + <%= form.email_field :email, placeholder: "email@example.com", data: { test_id: "email_field" }, 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 transition-all" %>
<%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white transition-all" %> + <%= form.password_field :password, placeholder: "Password", data: { test_id: "password_field" }, 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 transition-all" %>
@@ -27,7 +27,7 @@
- <%= form.submit "Log in", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> + <%= form.submit "Log in", data: { test_id: "sign_in_button" }, class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %>
<% end %>
diff --git a/spec/controllers/password_resets_controller_spec.rb b/spec/controllers/password_resets_controller_spec.rb index bd7dfe3a..bf648050 100644 --- a/spec/controllers/password_resets_controller_spec.rb +++ b/spec/controllers/password_resets_controller_spec.rb @@ -25,7 +25,7 @@ expect { post :create, params: params }.to have_enqueued_mail(PasswordMailer, :password_reset) - expect(response).to redirect_to(new_session_path) + expect(response).to redirect_to(post_submit_password_reset_path) end end end From bab084d8441be93a2132a387f61fd8e7ed543ab9 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Wed, 17 Jul 2024 16:40:52 -0600 Subject: [PATCH 07/11] Remove unused test ids --- app/views/password_resets/edit.html.erb | 6 +++--- app/views/password_resets/post_submit.html.erb | 2 +- app/views/registrations/new.html.erb | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb index 61d55fe7..32cf5a81 100644 --- a/app/views/password_resets/edit.html.erb +++ b/app/views/password_resets/edit.html.erb @@ -15,16 +15,16 @@
<%= form.label :password, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password, 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", data: { test_id: "email_field" } %> + <%= form.password_field :password, 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" %>
<%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password_confirmation, 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", data: { test_id: "email_field" } %> + <%= form.password_field :password_confirmation, 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" %>
- <%= form.submit "Reset Your Password", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %> + <%= form.submit "Reset Your Password", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> <% end %>
diff --git a/app/views/password_resets/post_submit.html.erb b/app/views/password_resets/post_submit.html.erb index cc655411..d63d70f6 100644 --- a/app/views/password_resets/post_submit.html.erb +++ b/app/views/password_resets/post_submit.html.erb @@ -5,6 +5,6 @@

We've sent you a link to recover your password to the email you provided.

- <%= 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" } %> + <%= 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" %>
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb index e49ebee3..6e1db224 100644 --- a/app/views/registrations/new.html.erb +++ b/app/views/registrations/new.html.erb @@ -15,22 +15,22 @@
<%= 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 placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %> + <%= form.email_field :email, placeholder: "email@example.com", data: { test_id: "email_field" }, class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %>
<%= 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 placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "password_field" } %> + <%= form.password_field :password, placeholder: "Password", data: { test_id: "password_field" }, class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %>
<%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "password_confirmation_field" } %> + <%= form.password_field :password_confirmation, data: { test_id: "password_confirmation_field" }, 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" %>
- <%= 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" } %> + <%= form.submit "Sign Up", data: { test_id: "sign_up_button" }, class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> <% end %>
From 04d5ba3c3be1b948c531bb0cd19841a99d882ce9 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Fri, 19 Jul 2024 18:34:59 -0600 Subject: [PATCH 08/11] Adress review comments and other fixes --- Gemfile | 2 +- app/assets/images/main-logo.svg | 2 +- .../stylesheets/application.tailwind.css | 13 +++++- app/views/layouts/application.html.erb | 6 ++- app/views/password_resets/edit.html.erb | 14 +++---- app/views/password_resets/new.html.erb | 6 +-- .../password_resets/post_submit.html.erb | 2 +- app/views/registrations/new.html.erb | 41 ++++++++++--------- app/views/sessions/new.html.erb | 14 +++---- app/views/shared/_form_errors.html.erb | 10 +++++ config/tailwind.config.js | 3 ++ 11 files changed, 68 insertions(+), 45 deletions(-) create mode 100644 app/views/shared/_form_errors.html.erb diff --git a/Gemfile b/Gemfile index 562da8c5..0d5e9e97 100644 --- 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" @@ -45,7 +46,6 @@ group :development, :test do gem "erb_lint", require: false gem "factory_bot_rails" gem "faker" - gem "inline_svg" gem "letter_opener", "~> 1.10" gem "pry-byebug" gem "rspec-rails" diff --git a/app/assets/images/main-logo.svg b/app/assets/images/main-logo.svg index 9fb77767..7f7b2d51 100644 --- a/app/assets/images/main-logo.svg +++ b/app/assets/images/main-logo.svg @@ -1,4 +1,4 @@ - + diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index bd6213e1..47e74961 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -1,3 +1,14 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@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 +} \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index cdaa3b51..3662aea6 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -12,10 +12,12 @@ -
+
<% if !current_page?(new_session_path) %>
- <%= inline_svg_tag("main-logo.svg") %> +
+ <%= inline_svg_tag("main-logo.svg", class: "w-full") %> +
<% end %> <% flash.each do |type, message| %> diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb index 32cf5a81..3f53d382 100644 --- a/app/views/password_resets/edit.html.erb +++ b/app/views/password_resets/edit.html.erb @@ -1,30 +1,26 @@
- <%= form_with model: @user, url: password_reset_path(token: params[:token]), class: "flex flex-col h-full justify-between" do |form| %> + <%= 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| %>

Reset your password

- <% if form.object.errors.any? %> - <% form.object.errors.full_messages.each do |message| %> -
<%= message %>
- <% end %> - <% end %> + <%= render partial: "shared/form_errors", locals: { errors: form.object.errors.full_messages } %>
<%= form.label :password, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password, 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" %> + <%= 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" %>
<%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password_confirmation, 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" %> + <%= 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" %>
- <%= form.submit "Reset Your Password", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> + <%= form.button "Reset Your Password", type: "submit", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> <% end %>
diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb index ec9f7b1f..b6760857 100644 --- a/app/views/password_resets/new.html.erb +++ b/app/views/password_resets/new.html.erb @@ -1,5 +1,5 @@
- <%= form_with model: @user, url: password_reset_path, class: "flex flex-col h-full justify-between" do |form| %> + <%= form_with model: @user, url: password_reset_path, class: "flex flex-col h-full w-full max-w-screen-sm justify-between" do |form| %>

Forgot Password

@@ -9,11 +9,11 @@
<%= 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 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %> + <%= 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" } %>
- <%= form.submit "Send recovery email", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> + <%= form.button "Send recovery email", type: "submit", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> <% end %>
diff --git a/app/views/password_resets/post_submit.html.erb b/app/views/password_resets/post_submit.html.erb index d63d70f6..925627aa 100644 --- a/app/views/password_resets/post_submit.html.erb +++ b/app/views/password_resets/post_submit.html.erb @@ -1,5 +1,5 @@
-
+

Check your inbox

We've sent you a link to recover your password to the email you provided.

diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb index 6e1db224..bcab28d5 100644 --- a/app/views/registrations/new.html.erb +++ b/app/views/registrations/new.html.erb @@ -1,36 +1,37 @@
- <%= form_with model: @user, url: registration_path, class: "flex flex-col h-full w-full justify-between" do |form| %> + <%= form_with model: @user, url: registration_path, class: "flex flex-col h-full justify-between w-full max-w-screen-sm" do |form| %>

Sign Up

- <% if form.object.errors.any? %> - <% form.object.errors.full_messages.each do |message| %> -
<%= message %>
- <% end %> - <% end %> + <%= render partial: "shared/form_errors", locals: { errors: form.object.errors.full_messages } %> -
-
- <%= form.label :email, class: "text-white italic font-bold mb-2" %> - <%= form.email_field :email, placeholder: "email@example.com", data: { test_id: "email_field" }, class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %> -
+
+
+ <%= form.label :email, class: "text-white italic font-bold mb-2" %> + <%= form.email_field :email, required: true, placeholder: "email@example.com", data: { test_id: "email_field" }, class: "bg-transparent border border-2 border-white rounded-md text-white placeholder:text-white/50 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %> +
-
- <%= form.label :password, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password, placeholder: "Password", data: { test_id: "password_field" }, class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %> -
+
+ <%= form.label :password, class: "text-white italic font-bold mb-2" %> + <%= form.password_field :password, required: true, data: { test_id: "password_field" }, placeholder: "You know how a strong password goes, right?", class: "bg-transparent border border-2 border-white 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" %> +

Password should contain at least 8 characters

+
-
- <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password_confirmation, data: { test_id: "password_confirmation_field" }, 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" %> -
+
+ <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %> + <%= form.password_field :password_confirmation, required: true, data: { test_id: "password_confirmation_field" }, placeholder: "Confirm strong password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder:text-white/50 focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %>
+
+ +
+ Already have an account? <%= link_to "Log in instead", new_session_path, class: "font-black italic underline text-white" %> +
- <%= form.submit "Sign Up", data: { test_id: "sign_up_button" }, class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> + <%= form.button "Sign Up", type: "submit", data: { test_id: "sign_up_button" }, class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> <% end %>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index bd84c9fc..7c40df9f 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -1,22 +1,22 @@
- <%= form_with model: @user, url: session_path, class: "flex flex-col h-full justify-between" do |form| %> -
- <%= inline_svg_tag("main-logo-with-date.svg", class: "mb-10") %> + <%= form_with model: @user, url: session_path, class: "flex flex-col h-full justify-between w-full max-w-screen-sm" do |form| %> +
+ <%= inline_svg_tag("main-logo-with-date.svg", class: "w-full mb-10") %>

Welcome!

Please log in to continue

-
+
<%= form.label :email, class: "text-white italic font-bold mb-2" %> - <%= form.email_field :email, placeholder: "email@example.com", data: { test_id: "email_field" }, 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 transition-all" %> + <%= form.email_field :email, required: true, placeholder: "email@example.com", data: { test_id: "email_field" }, 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 transition-all" %>
<%= form.label :password, class: "text-white italic font-bold mb-2" %> - <%= form.password_field :password, placeholder: "Password", data: { test_id: "password_field" }, 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 transition-all" %> + <%= form.password_field :password, required: true, placeholder: "Password", data: { test_id: "password_field" }, 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 transition-all" %>
@@ -27,7 +27,7 @@
- <%= form.submit "Log in", data: { test_id: "sign_in_button" }, class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> + <%= form.button "Log in", type: "submit", data: { test_id: "sign_in_button" }, class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %>
<% end %>
diff --git a/app/views/shared/_form_errors.html.erb b/app/views/shared/_form_errors.html.erb new file mode 100644 index 00000000..dd31f64c --- /dev/null +++ b/app/views/shared/_form_errors.html.erb @@ -0,0 +1,10 @@ +<% if local_assigns[:errors].any? %> +
+

The following errors were found:

+
    + <% local_assigns[:errors].each do |message| %> +
  1. <%= message %>
    2. + <% end %> +
+
+<% end %> diff --git a/config/tailwind.config.js b/config/tailwind.config.js index b9f01d91..8f38f935 100644 --- a/config/tailwind.config.js +++ b/config/tailwind.config.js @@ -12,6 +12,9 @@ module.exports = { fontFamily: { sans: ['Roboto', ...defaultTheme.fontFamily.sans] }, + maxWidth: { + 'screen-sm': '425px' + }, colors: { gray: '#C6C6C8', 'purple-dark': '#432463', From 9047c6e7e2ad9396e161c159e2f7f8b00427dfa4 Mon Sep 17 00:00:00 2001 From: Sergio-e <33036058+Sergio-e@users.noreply.github.com> Date: Mon, 22 Jul 2024 10:53:16 -0600 Subject: [PATCH 09/11] Minor tailwind fix --- config/environments/development.rb | 3 +++ 1 file changed, 3 insertions(+) diff --git a/config/environments/development.rb b/config/environments/development.rb index d6d3d088..c5d02975 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -63,6 +63,9 @@ # Highlight code that triggered database queries in logs. config.active_record.verbose_query_logs = true + config.assets.debug = true + config.assets.digest = false + # Highlight code that enqueued background job in logs. config.active_job.verbose_enqueue_logs = true From f800f5714b3cea06e0683523b69ecd8c86db6cf3 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Mon, 22 Jul 2024 14:23:05 -0600 Subject: [PATCH 10/11] Address other improvements --- app/controllers/concerns/authentication.rb | 2 +- app/controllers/main_controller.rb | 2 -- app/helpers/navigation_helper.rb | 6 ++++++ app/views/layouts/application.html.erb | 4 +++- app/views/password_resets/edit.html.erb | 4 ++++ app/views/password_resets/new.html.erb | 4 ++++ config/locales/en.yml | 3 --- 7 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 app/helpers/navigation_helper.rb diff --git a/app/controllers/concerns/authentication.rb b/app/controllers/concerns/authentication.rb index 6414e533..6995625b 100644 --- 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 index c98a8eaa..88181c28 100644 --- 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/helpers/navigation_helper.rb b/app/helpers/navigation_helper.rb new file mode 100644 index 00000000..3aaa18e5 --- /dev/null +++ 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 index 3662aea6..5d6c07b8 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -16,7 +16,9 @@ <% if !current_page?(new_session_path) %>
- <%= inline_svg_tag("main-logo.svg", class: "w-full") %> + <%= link_to homepage_link do %> + <%= inline_svg_tag("main-logo.svg", class: "w-full") %> + <% end %>
<% end %> diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb index 3f53d382..92fdb96b 100644 --- a/app/views/password_resets/edit.html.erb +++ b/app/views/password_resets/edit.html.erb @@ -19,6 +19,10 @@ <%= 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" %>
+ +
+ Just remembered your password? <%= link_to "Log in instead", new_session_path, class: "font-black italic underline text-white" %> +
<%= form.button "Reset Your Password", type: "submit", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %> diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb index b6760857..e15b7a13 100644 --- a/app/views/password_resets/new.html.erb +++ b/app/views/password_resets/new.html.erb @@ -11,6 +11,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" } %>
+ +
+ Just remembered your password? <%= link_to "Log in instead", new_session_path, class: "font-black italic underline text-white" %> +
diff --git a/config/locales/en.yml b/config/locales/en.yml index 297afaf0..b9251f17 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1,8 +1,5 @@ en: controllers: - concerns: - authentication: - unauthorized: "You need to sign in or sign up before continuing." password_resets: create: notice: "Check your email to reset your password." From d2f34f144c914b280c65f65563ee4df9d2d6ee83 Mon Sep 17 00:00:00 2001 From: LuigiR0jas Date: Mon, 22 Jul 2024 14:25:43 -0600 Subject: [PATCH 11/11] Fix spec --- spec/system/user_sign_in_spec.rb | 1 - 1 file changed, 1 deletion(-) diff --git a/spec/system/user_sign_in_spec.rb b/spec/system/user_sign_in_spec.rb index 62f87f69..e86233ec 100644 --- a/spec/system/user_sign_in_spec.rb +++ b/spec/system/user_sign_in_spec.rb @@ -6,7 +6,6 @@ it "redirects to the login page when trying to access another page" do visit edit_password_path expect(page).to have_current_path(new_session_path) - expect(page).to have_content("You need to sign in or sign up before continuing.") end context "when the user inputs invalid credentials" do