chore: handle errors

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

@@ -5,13 +5,23 @@
   <div class="sm:mx-auto sm:w-full sm:max-w-sm space-y-4 text-indigo-900">
     <%= form_with(model: resource, url: registration_path(resource_name), class: "space-y-4", local: true) do |f| %>
       <div>
-        <%= f.label :email, "Correo electrónico", class: "block text-sm/6 font-medium" %>
-        <%= f.email_field :email, class: "block w-full rounded-md bg-white px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-indigo-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-700 sm:text-sm/6", required: true, autofocus: true %>
+        <%= f.label :email, "Correo electrónico", class: "block text-sm/6 font-medium #{resource.errors[:email].any? ? 'text-red-600' : 'text-indigo-900'}" %>
+        <div class="relative w-full">
+          <%= f.email_field :email, class: "block w-full rounded-md bg-white px-3 py-1.5 outline-1 -outline-offset-1 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 #{resource.errors[:email].any? ? 'outline-red-600 focus:outline-2 focus:outline-red-600' : 'outline-indigo-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-700'}", required: true, autofocus: true %>
+          <%= render 'shared/invalid_icon', resource: resource, field: :email %>
+        </div>
+        <%= render 'shared/info_and_errors', resource: resource, field: :email, text: '' %>
       </div>
 
-      <%= render 'shared/password_field', f:, resource:, field: :password, label_text: "Nueva contraseña", autocomplete: "new-password", required: true, with_forgot_password_link: false %>
+      <div>
+        <%= render 'shared/password_field', f:, resource:, field: :password, label_text: "Nueva contraseña", autocomplete: "new-password", required: true, with_forgot_password_link: false %>
+        <%= render 'shared/info_and_errors', resource: resource, field: :password, text: 'Debe contener al menos 6 caracteres' %>
+      </div>
 
-      <%= render 'shared/password_field', f:, resource:, field: :password_confirmation, label_text: "Confirma tu nueva contraseña", autocomplete: "new-password", required: true, with_forgot_password_link: false %>
+      <div>
+        <%= render 'shared/password_field', f:, resource:, field: :password_confirmation, label_text: "Confirma tu nueva contraseña", autocomplete: "new-password", required: true, with_forgot_password_link: false %>
+        <%= render 'shared/info_and_errors', resource: resource, field: :password_confirmation, text: '' %>
+      </div>
 
       <%= f.button "Registrarse", class: "flex w-full justify-center rounded-md bg-indigo-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700 cursor-pointer" %>
     <% end %>

app/views/shared/_info_and_errors.html.erb

@@ -1,11 +1,7 @@
-<div class='mdc-text-field-helper-line'>
-  <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">
-    <% if resource.errors[field].any? %>
-      <span class='mdc-text-field-helper-text--validation-msg' role='alert'>
-        <%= resource.errors[field].to_sentence.capitalize %>
-      </span>
-    <% elsif text %>
-      <span><%= text %></span>
-    <% end %>
-  </div>
+<div class="mt-1 h-2 text-sm text-gray-600">
+  <% if resource.errors[field].any? %>
+    <span class="text-red-600" role="alert">
+      <%= resource.errors[field].to_sentence.capitalize %>
+    </span>
+  <% end %>
 </div>

app/views/shared/_invalid_icon.html.erb

@@ -1,3 +1,5 @@
 <% if resource.errors[field].any? %>
-  <i aria-hidden="true" class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing">error</i>
+  <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-red-700">
+    <span class="material-icons">error</span>
+  </span>
 <% end %>

app/views/shared/_password_field.html.erb

@@ -1,14 +1,18 @@
 <div class="items-center justify-between" data-controller="textfield show-password">
   <div class="flex items-center justify-between">
-    <%= f.label field, label_text, class: "block text-sm/6 font-medium text-indigo-900" %>
+    <%= f.label field, label_text, class: "block text-sm/6 font-medium #{resource.errors[field].any? ? 'text-red-600' : 'text-indigo-900'}" %>
+
     <% if with_forgot_password_link %>
       <%= link_to '¿Has olvidado tu contraseña?', new_password_path(resource), class: "font-semibold text-indigo-700 hover:text-indigo-600 text-sm" %>
     <% end %>
   </div>
   <div class="relative w-full">
-    <%= f.password_field field, class: "block w-full pr-10 rounded-md bg-white px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-indigo-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-700 sm:text-sm/6", required:, autofocus: true, autocomplete:, data: { show_password_target: "password" } %>
-    <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-indigo-700 hover:text-indigo-600 cursor-pointer" data-action="show-password#toggle">
+    <%= f.password_field field, class: "block w-full pr-16 rounded-md bg-white px-3 py-1.5 text-base outline-1 -outline-offset-1 #{resource.errors[field].any? ? 'outline-red-600 focus:outline-2 focus:outline-red-600' : 'outline-indigo-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-700'} sm:text-sm/6", required:, autofocus: true, autocomplete:, data: { show_password_target: "password" } %>
+
+    <button type="button" class="absolute inset-y-0 <%= resource.errors[field].any? ? 'right-6' : 'right-0' %> flex items-center pr-3 cursor-pointer <%= resource.errors[field].any? ? "text-red-700 hover:text-red-600" : "text-indigo-700 hover:text-indigo-600" %> " data-action="show-password#toggle">
       <span class="material-icons" data-show-password-target="icon">visibility</span>
     </button>
+
+    <%= render 'shared/invalid_icon', resource: resource, field: field %>
   </div>
 </div>