[BE]Signup validations (#70)

* Signup validations on all fields

* Functionality for organization setup (#57)

* adding the org setup

* redirecting after org setup to the root page

* adding the org setup

* redirecting after org setup to the root page

* minor fix

* minor fix

* did the functionality

* added company_id

* added controller

* styled the org setup page without the two tabs

* added the new schema with country and timezone in the model

* added company factory

* removed comments from factory

* text field for business phone

* deleted unwanted migrations

* used up and down instead of change

* model constraint added to companies migration

* Company model validation added

* schema and validation updated

* company attribute and validation updated

* remove logo_url coloumn from companies table

* seed added and typo fixed

* recreate gemfile.lock

* unit test for company model added

* removed test coverage

* added linux arch in gemlock file

* company routes added

* role and user-company migration added

* typo fixed in AddCompanyIdToUser

* restored previous migration

* removed null: false constraint from AddCompanyIdToUser

* company form updated

* replaced city-state gem with countries gem

* conflict fix

* Add minor changes

* Dependent destroy added

Co-authored-by: Akhil G Krishnan <akhilgkrishnan4u@gmail.com>
Co-authored-by: Abinash Panda <abinashp@protonmail.ch>

* Keshav/add rolify (#67)

* removed role attribute from user

* removed roles from user

* added rolify

* fixed schema

* code review changes

* Rails upgraded to 7.0.1 and Ruby upgraded to 3.1.0 (#68)

* Rails upgraded to 7.0.1 and Ruby upgraded to 3.1.0

* bundle lock fix

* Validate all fields on signup page

* Put back custom email validation

* Prefer devise validation on email first, use meaningful names and keep error messages in locales

* Group custom validations together

* Override devise email validation and remove custom validation

Co-authored-by: JUDIS <61043700+judis007@users.noreply.github.com>
Co-authored-by: Akhil G Krishnan <akhilgkrishnan4u@gmail.com>
Co-authored-by: Abinash Panda <abinashp@protonmail.ch>
Co-authored-by: Keshav Biswa <keshavbiswa21@gmail.com>

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

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;
+  }
 }

app/models/user.rb

@@ -38,17 +38,17 @@ class User < ApplicationRecord
   has_many :timesheet_entries
   rolify
 
-  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
 
   has_one_attached :avatar

app/views/devise/registrations/new.html.erb

@@ -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">
@@ -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">

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

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

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"