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.

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

[BE]Signup validations #70

Merged
merged 10 commits into from
Jan 13, 2022
23 changes: 23 additions & 0 deletions app/helpers/users/registrations_helper.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# frozen_string_literal: true

module Users::RegistrationsHelper
def error_message_on(object, method)
return unless object.respond_to?(:errors) && object.errors.include?(method)
error = field_error(object, method)

content_tag(:div, error, class: "tracking-wider block text-xs font-semibold text-red-600")
end

def error_message_class(object, method)
if object.respond_to?(:errors) && object.errors.include?(method)
"rounded tracking-wider appearance-none border border-red-600 block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-red-600 focus:border-red-600 sm:text-base"
else
"rounded tracking-wider appearance-none border border-gray-100 block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-miru-gray-1000 focus:border-miru-gray-1000 sm:text-base"
end
end

private
def field_error(object, method)
object.errors[method].first
end
end
5 changes: 5 additions & 0 deletions app/javascript/stylesheets/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,9 @@
font-family: "Manrope";
src: url("../fonts/Manrope.woff2") format("woff2"), url("../fonts/Manrope.woff") format("woff");
}

.field_with_errors {
display: flex;
justify-content: space-between;
}
}
5 changes: 3 additions & 2 deletions app/models/user.rb
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,11 @@ class User < ApplicationRecord

belongs_to :company, optional: true

validates :first_name, :last_name, :email, :encrypted_password, presence: true
validates :first_name, :last_name,
presence: true,
format: { with: /\A[a-zA-Z]+\z/, message: "First and last name must only contain letters" }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you move the message to en.yml

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

validates :first_name, :last_name, length: { maximum: 50 }
validates :email, format: { with: /^([^\s]+)((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, multiline: true }
validates :encrypted_password, length: { minimum: 6 }

# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
Expand Down
44 changes: 29 additions & 15 deletions app/views/devise/registrations/new.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,47 @@
Sign Up
</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div>
<div class="field">
<label class="tracking-wider block text-sm font-semibold text-miru-dark-purple-1000">Name</label>
<div class="field_with_errors">
<label class="tracking-wider block text-xs font-semibold text-miru-dark-purple-1000">Name</label>
<%=
if f.object.errors.include?(:first_name)
error_message_on(f.object, :first_name)
else
error_message_on(f.object, :last_name)
end
%>
</div>
<div class="mt-1 flex -space-x-px">
<div class="mr-4 w-1/2 flex-1 min-w-0">
<%= f.text_field :first_name, autofocus: true, class: "rounded tracking-wider appearance-none border border-gray-100 block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-miru-gray-1000 focus:border-miru-gray-1000 sm:text-base" %>
<%= f.text_field :first_name, autofocus: true, class: "#{error_message_class(f.object, :first_name)}" %>
</div>
<div class="w-1/2 flex-1 min-w-0">
<%= f.text_field :last_name, autofocus: true, class: "rounded tracking-wider appearance-none border border-gray-100 block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-miru-gray-1000 focus:border-miru-gray-1000 sm:text-base" %>
<%= f.text_field :last_name, autofocus: true, class: "#{error_message_class(f.object, :last_name)}" %>
</div>
</div>
</div>
</div>
<div>
<div class="field mt-4">
<%= f.label :email, class: "tracking-wider block text-sm font-semibold text-miru-dark-purple-1000" %>
<div class="mt-4">
<div class="field">
<div class="field_with_errors">
<%= f.label :email, class: "tracking-wider block text-xs font-semibold text-miru-dark-purple-1000" %>
<%= error_message_on(f.object, :email) %>
</div>
<div class="mt-1">
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "rounded tracking-wider appearance-none border border-gray-100 block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-miru-gray-1000 focus:border-miru-gray-1000 sm:text-base" %>
<%= f.text_field :email, autofocus: true, class: "#{error_message_class(f.object, :email)}" %>
</div>
</div>
</div>
<div class="mt-4">
<div class="field" x-data="{ show: true }">
<%= f.label :password, class: "tracking-wider block text-sm font-semibold text-miru-dark-purple-1000" %>
<% if @minimum_password_length %>
<em class="text-xs text-miru-dark-purple-400">(<%= @minimum_password_length %> characters minimum)</em>
<% end %>
<div class="field_with_errors">
<%= f.label :password, class: "tracking-wider block text-xs font-semibold text-miru-dark-purple-1000" %>
<%= error_message_on(f.object, :password) %>
</div>
<div class="mt-1 relative">
<input name="user[password]" placeholder="" id="user_password" :type="show ? 'password' : 'text'" class="rounded tracking-wider appearance-none border border-gray-100 block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-miru-gray-1000 focus:border-miru-gray-1000 sm:text-base">
<input name="user[password]" placeholder="" id="user_password" :type="show ? 'password' : 'text'" class="<%= error_message_class(f.object, :password) %>" >
<div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
<img src="<%= image_url 'password_icon.svg' %>" @click="show = !show" :class="{'hidden': !show, 'block':show }" class="h-4 w-4 text-miru-han-purple-1000 cursor-pointer">
<img src="<%= image_url 'password_icon_text.svg' %>" @click="show = !show" :class="{'block': !show, 'hidden':show }" class="h-4 w-4 text-miru-han-purple-1000 cursor-pointer">
Expand All @@ -49,9 +60,12 @@
</div>
<div class="mt-4">
<div class="field" x-data="{ show: true }">
<%= f.label :password, class: "tracking-wider block text-sm font-semibold text-miru-dark-purple-1000" %>
<div class="field_with_errors">
<%= f.label :password_confirmation, 'Confirm Password', class: "tracking-wider block text-xs font-semibold text-miru-dark-purple-1000" %>
<%= error_message_on(f.object, :password_confirmation) %>
</div>
<div class="mt-1 relative">
<input name="user[password_confirmation]" placeholder="" id="user_password_confirmation" :type="show ? 'password' : 'text'" class="rounded tracking-wider appearance-none border border-gray-100 block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-miru-gray-1000 focus:border-miru-gray-1000 sm:text-base">
<input name="user[password_confirmation]" placeholder="" id="user_password_confirmation" :type="show ? 'password' : 'text'" class="<%= error_message_class(f.object, :password_confirmation) %>">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
<img src="<%= image_url 'password_icon.svg' %>" @click="show = !show" :class="{'hidden': !show, 'block':show }" class="h-4 w-4 text-miru-han-purple-1000 cursor-pointer">
<img src="<%= image_url 'password_icon_text.svg' %>" @click="show = !show" :class="{'block': !show, 'hidden':show }" class="h-4 w-4 text-miru-han-purple-1000 cursor-pointer">
Expand Down
4 changes: 4 additions & 0 deletions config/application.rb
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ class Application < Rails::Application

config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]

config.action_view.field_error_proc = Proc.new { |html_tag, instance|
"#{html_tag}".html_safe
}

if email_delivery_method = ENV["EMAIL_DELIVERY_METHOD"]
config.action_mailer.delivery_method = email_delivery_method.to_sym
end
Expand Down
18 changes: 18 additions & 0 deletions config/locales/devise.en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,21 @@ en:
not_saved:
one: "1 error prohibited this %{resource} from being saved:"
other: "%{count} errors prohibited this %{resource} from being saved:"
activerecord:
errors:
models:
user:
attributes:
password:
too_short: "Password must be at least %{count} characters long"
blank: "Password can't be blank"
password_confirmation:
confirmation: "Passwords dont' match"
first_name:
blank: "First and last name can't be blank"
last_name:
blank: "First and last name can't be blank"
email:
invalid: "Invalid Email ID"
blank: "Email can't be blank"
taken: "Email ID already exists"