Improve style pt. 2 (devise forms)

This commit is contained in:
riggraz
2019-09-19 18:30:29 +02:00
parent 409cdeef8a
commit 0a41c22ec1
8 changed files with 75 additions and 60 deletions

View File

@@ -11,4 +11,27 @@
.form-control:focus {
border-color: $astuto-grey;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(0, 0, 0, 0.6);
}
.new_user, .edit_user {
@extend .card;
width: 100%;
max-width: 360px;
text-align: center;
padding: 15px;
margin: 0 auto;
}
.deviseLinks {
@extend .new_user;
display: flex;
flex-direction: column;
margin-top: 24px;
a { color: #333; }
}

View File

@@ -1,15 +1,15 @@
<h2>Resend confirmation instructions</h2>
<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
<h2>Resend confirmation instructions</h2>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
<%= f.label :email, class: "sr-only" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email address", required: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Resend confirmation instructions", class: "btn btn-primary" %>
<%= f.submit "Resend confirmation instructions", class: "btn btn-dark btn-block" %>
</div>
<% end %>

View File

@@ -1,15 +1,15 @@
<h2>Forgot your password?</h2>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<h2>Forgot your password?</h2>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
<%= f.label :email, class: "sr-only" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email address", required: true, class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
<%= f.submit "Send me reset password instructions", class: "btn btn-dark btn-block" %>
</div>
<% end %>

View File

@@ -1,6 +1,6 @@
<h2>Profile settings</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<h2>Profile settings</h2>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
@@ -12,7 +12,7 @@
<%= f.label :email %>
<%= f.email_field :email, autocomplete: "email", class: "form-control" %>
<small id="emailGravatarHelp" class="form-text text-muted">
the email is <a href="https://gravatar.com">gravatar</a>ized
the email is <a href="https://gravatar.com" target="_blank">gravatar</a>ized
</small>
</div>
@@ -47,12 +47,15 @@
</div>
<div class="actions">
<%= f.submit "Update profile", class: "btn btn-primary" %>
<%= f.submit "Update profile", class: "btn btn-dark btn-block" %>
</div>
<% end %>
<br />
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger" %></p>
<div class="edit_user">
<h3>Cancel my account</h3>
<p>Unhappy?
<%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger btn-block" %>
</p>
</div>

View File

@@ -1,36 +1,31 @@
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<h2>Sign up</h2>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :full_name %>
<%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
<%= f.label :full_name, class: "sr-only" %>
<%= f.text_field :full_name, autofocus: true, placeholder: "Full name", required: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autocomplete: "email", class: "form-control" %>
<%= f.label :email, class: "sr-only" %>
<%= f.email_field :email, autocomplete: "email", placeholder: "Email address", required: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "new-password", class: "form-control" %>
<% if @minimum_password_length %>
<small id="passwordHelp" class="form-text text-muted">
<%= @minimum_password_length %> characters minimum
</small>
<% end %>
<%= f.label :password, class: "sr-only" %>
<%= f.password_field :password, placeholder: "Password", required: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
<%= f.label :password_confirmation, class: "sr-only" %>
<%= f.password_field :password_confirmation, placeholder: "Password confirmation", required: true, class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Sign up", class: "btn btn-primary" %>
<%= f.submit "Sign up", class: "btn btn-dark btn-block" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
<%= render "devise/shared/links" %>

View File

@@ -1,14 +1,14 @@
<h2>Log in</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<h2>Log in</h2>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
<%= f.label :email, class: "sr-only" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email address", required: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
<%= f.label :password, class: "sr-only" %>
<%= f.password_field :password, autocomplete: "current-password", placeholder: "Password", required: true, class: "form-control" %>
</div>
<% if devise_mapping.rememberable? %>
@@ -19,8 +19,8 @@
<% end %>
<div class="actions">
<%= f.submit "Log in", class: "btn btn-primary" %>
<%= f.submit "Log in", class: "btn btn-dark btn-block" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
<%= render "devise/shared/links" %>

View File

@@ -1,15 +1,7 @@
<% if resource.errors.any? %>
<div id="error_explanation" class="alert alert-danger">
<h4>
<%= I18n.t("errors.messages.not_saved",
count: resource.errors.count,
resource: resource.class.model_name.human.downcase)
%>
</h4>
<ul>
<% resource.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
<div id="error_explanation" class="alert container alert-danger">
<% resource.errors.full_messages.each do |message| %>
<span><%= message %></span><br />
<% end %>
</div>
<% end %>

View File

@@ -1,25 +1,27 @@
<div class="deviseLinks">
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %><br />
<%= 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) %><br />
<%= 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) %><br />
<%= 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) %><br />
<%= 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) %><br />
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
<% end %>
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %><br />
<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %>
<% end %>
<% end %>
</div>