diff --git a/app/helpers/users/registrations_helper.rb b/app/helpers/users/registrations_helper.rb new file mode 100644 index 0000000000..fa840555e4 --- /dev/null +++ b/app/helpers/users/registrations_helper.rb @@ -0,0 +1,23 @@ +# frozen_string_literal: true + +module Users::RegistrationsHelper + def error_message_on(resource, attribute) + return unless resource.respond_to?(:errors) && resource.errors.include?(attribute) + error = field_error(resource, attribute) + + content_tag(:div, error, class: "tracking-wider block text-xs font-semibold text-red-600") + end + + def error_message_class(resource, attribute) + if resource.respond_to?(:errors) && resource.errors.include?(attribute) + "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(resource, attribute) + resource.errors[attribute].first + end +end diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index 52b435abf9..7985e0d0b6 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -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; + } } diff --git a/app/models/user.rb b/app/models/user.rb index ea2b0ac08c..b7c53b34f2 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -99,17 +99,17 @@ class User < ApplicationRecord belongs_to :company, optional: true - validates :first_name, :last_name, :email, :encrypted_password, presence: true - 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 devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable, :trackable, :confirmable + validates :first_name, :last_name, + presence: true, + format: { with: /\A[a-zA-Z]+\z/ } + validates :first_name, :last_name, length: { maximum: 50 } + after_create :assign_default_role private diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb index 9f8aa824e9..5353904065 100644 --- a/app/views/devise/registrations/new.html.erb +++ b/app/views/devise/registrations/new.html.erb @@ -10,36 +10,47 @@ Sign Up <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> - <%= render "devise/shared/error_messages", resource: resource %>
- +
+ + <%= + if f.object.errors.include?(:first_name) + error_message_on(f.object, :first_name) + else + error_message_on(f.object, :last_name) + end + %> +
- <%= 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)}" %>
- <%= 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)}" %>
-
-
- <%= f.label :email, class: "tracking-wider block text-sm font-semibold text-miru-dark-purple-1000" %> +
+
+
+ <%= f.label :email, class: "tracking-wider block text-xs font-semibold text-miru-dark-purple-1000" %> + <%= error_message_on(f.object, :email) %> +
- <%= 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)}" %>
- <%= f.label :password, class: "tracking-wider block text-sm font-semibold text-miru-dark-purple-1000" %> - <% if @minimum_password_length %> - (<%= @minimum_password_length %> characters minimum) - <% end %> +
+ <%= f.label :password, class: "tracking-wider block text-xs font-semibold text-miru-dark-purple-1000" %> + <%= error_message_on(f.object, :password) %> +
- +
@@ -49,9 +60,12 @@
- <%= f.label :password, class: "tracking-wider block text-sm font-semibold text-miru-dark-purple-1000" %> +
+ <%= 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) %> +
- +
diff --git a/config/application.rb b/config/application.rb index 86c55276ae..5a31cbdbbb 100644 --- a/config/application.rb +++ b/config/application.rb @@ -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 diff --git a/config/initializers/devise.rb b/config/initializers/devise.rb index 14c79ba3f7..4c4d62ef52 100644 --- a/config/initializers/devise.rb +++ b/config/initializers/devise.rb @@ -183,7 +183,7 @@ # Email regex used to validate email formats. It simply asserts that # one (and only one) @ exists in the given string. This is mainly # to give user feedback and not to assert the e-mail validity. - config.email_regexp = /\A[^@\s]+@[^@\s]+\z/ + config.email_regexp = /\A([^\s]+)((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i # ==> Configuration for :timeoutable # The time you want to timeout the user session without activity. After this diff --git a/config/locales/devise.en.yml b/config/locales/devise.en.yml index 260e1c4ba6..85a6c958e6 100644 --- a/config/locales/devise.en.yml +++ b/config/locales/devise.en.yml @@ -63,3 +63,23 @@ 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" + invalid: "First and last name must only contain letters" + last_name: + blank: "First and last name can't be blank" + invalid: "First and last name must only contain letters" + email: + blank: "Email can't be blank" + invalid: "Invalid Email ID" + taken: "Email ID already exists"