Skip to content

Commit

Permalink
devise views styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelson
michelson committed Aug 11, 2023
1 parent e3a9c01 commit 07607ab
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 94 deletions.
29 changes: 17 additions & 12 deletions app/views/devise/confirmations/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@

<div class="min-h-full flex flex-col space-y-2 justify-center py-12 sm:px-6 lg:px-8">

<h2 class="text-2xl">Resend confirmation instructions</h2>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="min-h-full flex flex-col space-y-2 justify-center py-12 sm:px-6 lg:px-8">

<div class="field">
<%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
</div>
<h2 class="text-2xl">Resend confirmation instructions</h2>

<div class="actions mt-4">
<%= f.submit "Resend confirmation instructions" %>
</div>
<% end %>
<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, class: "space-y-2 flex flex-col" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>

<%= render "devise/shared/links" %>
<div class="field">
<%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
</div>

<div class="actions mt-4">
<%= f.submit "Resend confirmation instructions" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

</div>

</div>
6 changes: 5 additions & 1 deletion app/views/devise/passwords/edit.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@

<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">

<h2>Change your password</h2>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: {
method: :put, class: "space-y-2 flex flex-col" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<%= f.hidden_field :reset_password_token %>

Expand All @@ -27,4 +30,5 @@
<%= render "devise/shared/links" %>

</div>
</div>
31 changes: 18 additions & 13 deletions app/views/devise/passwords/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

<h2>Forgot your password?</h2>
<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<h2 class="text-2xl">Forgot your password?</h2>

<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<%= form_for(resource,
as: resource_name,
url: password_path(resource_name),
html: { method: :post, class: "space-y-2 flex flex-col" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>

<div class="actions">
<%= f.submit "Send me reset password instructions" %>
</div>
<% end %>
<div class="field">
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>

<%= render "devise/shared/links" %>
<div class="actions">
<%= f.submit "Send me reset password instructions" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

</div>
</div>
9 changes: 4 additions & 5 deletions app/views/devise/registrations/new.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,10 @@
</div>

<div class="field mt-10">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password" %>
<%= f.password_field :password,
autocomplete: "new-password",
hint: "#{@minimum_password_length} characters minimum"
%>
</div>

<div class="field">
Expand Down
3 changes: 2 additions & 1 deletion app/views/devise/sessions/new.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white dark:bg-gray-900 py-8 px-4 shadow sm:rounded-lg sm:px-10">

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= form_for(resource, as: resource_name,
url: session_path(resource_name), html: { class: "space-y-2 flex flex-col" }) do |f| %>
<div>
<div class="mt-1">
<%= f.email_field :email,
Expand Down
93 changes: 47 additions & 46 deletions app/views/devise/shared/_links.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,58 @@
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %>
<% end %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %>
<% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %>
<% end %>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>
<% end %>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
<% end %>

<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white rounded-lg text-gray-500">
<%= link_to gettext("Register"), new_user_registration_path %>
<%= gettext("Or continue with") %>
</span>
</div>
</div>

<div class="mt-6 grid grid-cols-4 gap-3">

<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>


<div>
<%= button_to omniauth_authorize_path(resource_name, provider), data: { turbo: false },
class: "w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm bg-white dark:bg-black text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900" do %>
<span class="sr-only"><%= gettext("Sign in with #{OmniAuth::Utils.camelize(provider)}") %></span>
<%= raw icon_for(provider) %>
<% end %>
</div>

<% end %>
<% end %>

</div>
</div>

<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-black text-gray-500">
<%= link_to gettext("Register"), new_user_registration_path %>
<%= gettext("Or continue with") %>
</span>
</div>
</div>

<div class="mt-6 grid grid-cols-4 gap-3">
<div class="flex flex-col space-y-2 mt-2 text-xs">
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %>
<% end %>
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %>
<% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %>
<% end %>
<div>
<%= button_to omniauth_authorize_path(resource_name, provider), data: { turbo: false },
class: "w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm bg-white dark:bg-black text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900" do %>
<span class="sr-only"><%= gettext("Sign in with #{OmniAuth::Utils.camelize(provider)}") %></span>
<%= raw icon_for(provider) %>
<% end %>
</div>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>
<% end %>
<% end %>
<% end %>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
<% end %>
</div>

</div>
</div>


29 changes: 17 additions & 12 deletions app/views/devise/unlocks/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
<h2>Resend unlock instructions</h2>

<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<h2 class="text-2xl">Resend unlock instructions</h2>

<div class="actions">
<%= f.submit "Resend unlock instructions" %>
</div>
<% end %>
<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post, class: "space-y-2 flex flex-col" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>

<%= render "devise/shared/links" %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>

<div class="actions">
<%= f.submit "Resend unlock instructions" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

</div>
8 changes: 4 additions & 4 deletions app/views/shared/_user_menu.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@
<a href="#" class="hidden block- px-4 py-2 text-sm text-gray-700 dark:text-gray-300">
License
</a>
<%= link_to "Routes.user_session_path(@conn, :delete)}",
<%= button_to destroy_user_session_path,
method: :delete,
class: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300" do %>
<%= gettext("Log out") %>
Expand Down Expand Up @@ -262,11 +262,11 @@
<% # end %>
<% if !current_user %>
<%= link_to "Routes.user_registration_path(@conn, :new)}", class: "block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800" do %>
<%= link_to new_user_registration_path, class: "block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800" do %>
<%= gettext("Register") %>
<% end %>
<%= link_to "Routes.user_session_path(@conn, :new)}", class:
<%= link_to new_user_session_path, class:
"block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800" do %>
<%= gettext("Log in") %>
<% end %>
Expand Down Expand Up @@ -343,7 +343,7 @@
<div class="border-1"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300">Support</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300">License</a>
<%= link_to "Routes.user_session_path(@conn, :delete)}", method: :delete, class: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300" do %>
<%= button_to destroy_user_session_path, method: :delete, class: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300" do %>
<%= gettext("Log out") %>
<% end %>

Expand Down

0 comments on commit 07607ab

Please sign in to comment.