Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Authentication Views #49

Merged
merged 12 commits into from
Jul 22, 2024
Merged

Authentication Views #49

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
942c633
Log in view WIP
LuigiR0jas Jul 15, 2024
73b535c
Merge branch 'main' into 17-authentication-views
LuigiR0jas Jul 15, 2024
0068b79
Add sign up views, password recovery views
LuigiR0jas Jul 15, 2024
495d3ea
Add top bar, input active states
LuigiR0jas Jul 16, 2024
3fc34b5
Fix layout
LuigiR0jas Jul 17, 2024
c4daebc
Bump library patch for security reasons
LuigiR0jas Jul 17, 2024
ff057a8
Fix tests
LuigiR0jas Jul 17, 2024
bab084d
Remove unused test ids
LuigiR0jas Jul 17, 2024
04d5ba3
Adress review comments and other fixes
LuigiR0jas Jul 20, 2024
9047c6e
Minor tailwind fix
Sergio-e Jul 22, 2024
f800f57
Address other improvements
LuigiR0jas Jul 22, 2024
d2f34f1
Fix spec
LuigiR0jas Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 5 additions & 1 deletion Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -514,6 +517,7 @@ DEPENDENCIES
faker
fuubar
importmap-rails
inline_svg
letter_opener (~> 1.10)
mission_control-jobs
propshaft
Expand Down
54 changes: 54 additions & 0 deletions app/assets/images/main-logo-with-date.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions app/assets/images/main-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion app/assets/stylesheets/application.tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
2 changes: 1 addition & 1 deletion app/controllers/password_resets_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
55 changes: 31 additions & 24 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,35 @@
<!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) %>
LuigiR0jas marked this conversation as resolved.
Show resolved Hide resolved
<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">
<%= inline_svg_tag("main-logo.svg", class: "w-full") %>
</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>
43 changes: 23 additions & 20 deletions app/views/password_resets/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
<h1>Reset Your Password</h1>
LuigiR0jas marked this conversation as resolved.
Show resolved Hide resolved
<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>
<%= form.label :password %>
<%= form.password_field :password %>
</div>
<div class="w-full">
<%= render partial: "shared/form_errors", locals: { errors: form.object.errors.full_messages } %>

<div>
<%= form.label :password_confirmation %>
<%= form.password_field :password_confirmation %>
</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.submit "Reset Your Password" %>
</div>
<% end %>
<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>
LuigiR0jas marked this conversation as resolved.
Show resolved Hide resolved
</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>
27 changes: 17 additions & 10 deletions app/views/password_resets/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
<h1>Reset Your Password</h1>
LuigiR0jas marked this conversation as resolved.
Show resolved Hide resolved
<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>
</div>

<div>
<%= form.submit "Reset password" %>
</div>
<% end %>
<%= form.button "Send recovery email", type: "submit", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase" %>
<% end %>
</div>
10 changes: 10 additions & 0 deletions app/views/password_resets/post_submit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
55 changes: 32 additions & 23 deletions app/views/registrations/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
<h1>Sign Up</h1>
<div class="flex flex-col items-center flex-1 px-5 py-10 bg-purple-dark">
LuigiR0jas marked this conversation as resolved.
Show resolved Hide resolved
<%= form_with model: @user, url: registration_path, 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">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">
<%= render partial: "shared/form_errors", locals: { errors: form.object.errors.full_messages } %>

<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, 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" %>
</div>

<div>
<%= form.label :email %>
<%= form.email_field :email, data: { test_id: "email_field" } %>
</div>
<div class="flex flex-col mb-6">
<%= 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" %>
<p class="text-xs text-white">Password should contain at least 8 characters</p>
</div>

<div>
<%= form.label :password %>
<%= form.password_field :password, data: { test_id: "password_field" } %>
</div>
<div class="flex flex-col">
<%= 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" %>
</div>
</div>

<div>
<%= form.label :password_confirmation %>
<%= form.password_field :password_confirmation, data: { test_id: "password_confirmation_field" } %>
</div>
<div class="flex flex-col items-center mb-10">
<span class="text-white">Already have an account? <%= link_to "Log in instead", new_session_path, class: "font-black italic underline text-white" %></span>
</div>
</div>
</div>

<div>
<%= form.submit "Sign Up", data: { test_id: "sign_up_button" } %>
</div>
<% end %>
<%= 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 %>
</div>
Loading