make forms gooder

loftwah · Sep 6, 2024 · e9956a9 · e9956a9
1 parent 56c25d8
commit e9956a9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
@@ -6,27 +6,29 @@
 
     <div>
       <%= f.label :email, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.email_field :email, autofocus: true, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.email_field :email, autofocus: true, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: '[email protected]' %>
     </div>
 
     <div>
       <%= f.label :username, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :username, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :username, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Your unique username' %>
     </div>
 
     <div>
       <%= f.label :full_name, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :full_name, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :full_name, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Your full name' %>
     </div>
 
     <div>
       <%= f.label :tags, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :tags, value: @user.parsed_tags.join(', '), class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :tags, value: @user.parsed_tags.join(', '), class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'e.g., music, photography, travel (comma-separated)' %>
+      <p class="text-gray-400 text-sm mt-1">Add or edit tags to describe your interests (comma-separated)</p>
     </div>
 
     <div>
       <%= f.label :avatar, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :avatar, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :avatar, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'https://linkarooie.com/your-avatar-image.jpg' %>
+      <p class="text-gray-400 text-sm mt-1">Enter a URL for your avatar image</p>
     </div>
 
     <div>
@@ -38,44 +40,48 @@
         ['Rainbow', 'rainbow'],
         ['Rainbow Overlay', 'rainbow-overlay']
       ], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <p class="text-gray-400 text-sm mt-1">Choose a border style for your avatar</p>
     </div>
 
     <div>
       <%= f.label :banner, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :banner, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :banner, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'https://linkarooie.com/your-banner-image.jpg' %>
+      <p class="text-gray-400 text-sm mt-1">Enter a URL for your profile banner image</p>
     </div>
 
     <div class="flex items-center">
       <%= f.check_box :banner_enabled, class: 'mr-2' %>
       <%= f.label :banner_enabled, class: 'text-lime-200 font-semibold' %>
+      <p class="text-gray-400 text-sm ml-2">Enable or disable your profile banner</p>
     </div>
 
     <div>
       <%= f.label :description, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_area :description, rows: 3, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_area :description, rows: 3, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Tell us about yourself...' %>
     </div>
 
     <div class="flex items-center">
       <%= f.check_box :public_analytics, class: 'mr-2' %>
       <%= f.label :public_analytics, class: 'text-lime-200 font-semibold' %>
+      <p class="text-gray-400 text-sm ml-2">Make your profile analytics public</p>
     </div>
 
     <div>
       <%= f.label :password, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.password_field :password, autocomplete: "off", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.password_field :password, autocomplete: "off", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Leave blank if you don\'t want to change it' %>
       <% if @minimum_password_length %>
-        <p class="text-gray-400 mt-2 text-sm"><%= @minimum_password_length %> characters minimum (leave blank if you don't want to change it)</p>
+        <p class="text-gray-400 mt-2 text-sm"><%= @minimum_password_length %> characters minimum</p>
       <% end %>
     </div>
 
     <div>
       <%= f.label :password_confirmation, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.password_field :password_confirmation, autocomplete: "off", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.password_field :password_confirmation, autocomplete: "off", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Confirm new password' %>
     </div>
 
     <div>
       <%= f.label :current_password, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.password_field :current_password, autocomplete: "off", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.password_field :current_password, autocomplete: "off", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Enter your current password' %>
       <p class="text-gray-400 mt-2 text-sm">We need your current password to confirm your changes</p>
     </div>
 
@@ -86,11 +92,7 @@
 
   <div class="mt-8 border-t border-gray-700 pt-6">
     <h3 class="text-xl font-bold mb-4 text-lime-200">Cancel my account</h3>
-    <p class="mb-4 text-gray-300">Unhappy? You can cancel your account here.</p>
+    <p class="mb-4 text-gray-300">Unhappy? You can cancel your account here. This action cannot be undone.</p>
     <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure? This action cannot be undone." }, method: :delete, class: 'bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out' %>
   </div>
 </div>
-
-<div class="mt-4 text-center">
-  <%= link_to 'Back', :back, class: 'text-lime-300 hover:text-lime-100 transition duration-300 ease-in-out' %>
-</div>
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
@@ -6,40 +6,42 @@
 
     <div>
       <%= f.label :email, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: '[email protected]' %>
     </div>
 
     <div>
       <%= f.label :password, class: 'block text-lime-200 font-semibold mb-2' %>
       <% if @minimum_password_length %>
         <em class="text-gray-400 text-sm">(<%= @minimum_password_length %> characters minimum)</em>
       <% end %>
-      <%= f.password_field :password, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.password_field :password, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Choose a strong password' %>
     </div>
 
     <div>
       <%= f.label :password_confirmation, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Confirm your password' %>
     </div>
 
     <div>
       <%= f.label :username, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :username, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :username, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Choose a unique username' %>
     </div>
 
     <div>
       <%= f.label :full_name, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :full_name, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :full_name, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Your full name' %>
     </div>
 
     <div>
       <%= f.label :tags, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :tags, value: @user.parsed_tags.join(', '), class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :tags, value: @user.parsed_tags.join(', '), class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'e.g., music, photography, travel (comma-separated)' %>
+      <p class="text-gray-400 text-sm mt-1">Add tags to describe your interests (comma-separated)</p>
     </div>
 
     <div>
       <%= f.label :avatar, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :avatar, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :avatar, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'https://linkarooie.com/your-avatar-image.jpg' %>
+      <p class="text-gray-400 text-sm mt-1">Enter a URL for your avatar image</p>
     </div>
 
     <div>
@@ -51,22 +53,23 @@
         ['Rainbow', 'rainbow'],
         ['Rainbow Overlay', 'rainbow-overlay']
       ], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <p class="text-gray-400 text-sm mt-1">Choose a border style for your avatar</p>
     </div>
 
     <div>
       <%= f.label :banner, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :banner, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :banner, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'https://linkarooie.com/your-banner-image.jpg' %>
+      <p class="text-gray-400 text-sm mt-1">Enter a URL for your profile banner image</p>
     </div>
 
     <div>
       <%= f.label :description, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_area :description, rows: 3, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_area :description, rows: 3, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Tell us a bit about yourself...' %>
     </div>
 
-    <!-- Invite code field -->
     <div>
       <%= f.label :invite_code, "Invite Code", class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.text_field :invite_code, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.text_field :invite_code, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500', placeholder: 'Enter your invite code' %>
     </div>
 
     <div class="actions text-center">
@@ -77,4 +80,4 @@
 
 <div class="mt-4 text-center">
   <%= render "devise/shared/links" %>
-</div>
+</div>