Improve devise views

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

@@ -6,14 +6,15 @@
   <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
-      <%= f.label :email, 'Email address', class: 'block mb-1' %>
+      <%= f.label :email, 'Email address', class: 'block mb-1 w-full' %>
       <%= f.email_field :email,
         required: true, autofocus: true, autocomplete: "email",
         value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email),
-        class: "w-full sm:w-4/5" %>
+        class: "w-full" %>
     </p>
     <p class="mt-8">
-      <%= f.submit "Resend confirmation instructions", class: 'btn-md btn-blue' %>
+      <%= f.submit "Resend confirmation link",
+                   class: 'btn-md btn-blue w-full md:w-auto' %>
     </p>
   <% end %>
 

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

@@ -7,14 +7,17 @@
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
       <%= f.label :cn, 'User', class: 'block' %>
-      <%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org
+      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                            required: true, class: "w-full md:w-3/5"%>
+      <span class="ml-1 text-gray-500">@ kosmos.org</span>
     </p>
     <p>
       <%= f.label :email, 'Email address', class: 'block' %>
-      <%= f.email_field :email, autocomplete: "email", required: true %>
+      <%= f.email_field :email, autocomplete: "email", required: true,
+                                class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue' %>
+      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full md:w-auto' %>
     </p>
   <% end %>
 

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

@@ -5,14 +5,17 @@
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
       <%= f.label :cn, 'User', class: 'block' %>
-      <%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org
+      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                            class: "w-full md:w-3/5"%>
+      <span class="ml-1 text-gray-500">@ kosmos.org</span>
     </p>
     <p>
       <%= f.label :password, class: 'block' %>
-      <%= f.password_field :password, autocomplete: "current-password" %>
+      <%= f.password_field :password, autocomplete: "current-password",
+                                      class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Log in", class: 'btn-md btn-blue' %>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full md:w-auto' %>
     </p>
   <% end %>
 

app/views/layouts/application.html.erb

@@ -45,21 +45,23 @@
                 <% end %>
               </div>
               <div class="-mr-2 flex md:hidden">
-                <button type="button" id="toggle-mobile-nav"
-                        data-action="topbar#toggleMobileNav"
-                        class="bg-gray-900/50 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
-                  <span class="sr-only">Open main menu</span>
-                  <!-- Heroicon name: outline/menu -->
-                  <svg data-topbar-target="iconMobileMenuOpen" class="block h-6 w-6"
-                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                  </svg>
-                  <!-- Heroicon name: outline/x -->
-                  <svg data-topbar-target="iconMobileMenuClose" class="hidden h-6 w-6"
-                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
+                <% if user_signed_in? && current_user.confirmed? %>
+                  <button type="button" id="toggle-mobile-nav"
+                          data-action="topbar#toggleMobileNav"
+                          class="bg-gray-900/50 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+                    <span class="sr-only">Open main menu</span>
+                    <!-- Heroicon name: outline/menu -->
+                    <svg data-topbar-target="iconMobileMenuOpen" class="block h-6 w-6"
+                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                    <!-- Heroicon name: outline/x -->
+                    <svg data-topbar-target="iconMobileMenuClose" class="hidden h-6 w-6"
+                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                <% end %>
               </div>
             </div>
           </div>