scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-04 19:53:19 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix eye icon placement in password fields [SCI-9217]

Browse source
This commit is contained in:
Ivan Kljun 2023-09-13 13:47:54 +02:00
parent daa708a840
commit 01a909c9e7
8 changed files with 94 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/sitewide/form_errors.js
View file

@ -16,6 +16,7 @@
* error that can happen/show. * error that can happen/show.
*/ */
var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) { var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) {
// console.log(input)
clearErr = _.isUndefined(clearErr) ? false : clearErr; clearErr = _.isUndefined(clearErr) ? false : clearErr;
errAttributes = _.isUndefined(errAttributes) ? '' : ' ' + errAttributes; errAttributes = _.isUndefined(errAttributes) ? '' : ' ' + errAttributes;
var $form = $(input).closest('form'); var $form = $(input).closest('form');
@ -37,9 +38,11 @@ var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) {
// Mark error form group // Mark error form group
var $formGroup = $(input).closest('.form-group'); var $formGroup = $(input).closest('.form-group');
if (!$formGroup.hasClass('has-error')) { $formGroup.each(function() {
$formGroup.addClass('has-error'); if (!$(this).hasClass('has-error')) {
} $(this).addClass('has-error');
}
});
var $errSpan = "<span class='help-block'" + var $errSpan = "<span class='help-block'" +
errAttributes + '>' + errorText + '.' + '</span>'; errAttributes + '>' + errorText + '.' + '</span>';

44
app/assets/stylesheets/shared_styles/elements/input_fields.scss
View file

@ -53,6 +53,10 @@
} }
} }
input.sci-input-field {
height: 36px !important;
}
.sn-icon { .sn-icon {
bottom: 6px; bottom: 6px;
position: absolute; position: absolute;
@ -166,4 +170,44 @@
} }
} }
} }
&.password-input-container {
.password-icon-wrapper {
position: relative;
input {
padding-right: 2.4em;
}
}
.sn-icon {
align-items: center;
display: flex;
height: 100%;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
}
.help-block {
left: 0;
position: absolute;
width: 100%;
&:nth-of-type(2) { top: 60px; }
&:nth-of-type(3) { top: 120px; }
}
&.error::before,
&.has-error {
padding-bottom: 0;
}
&.has-error {
margin-bottom: inherit;
padding-bottom: 2em;
}
}
} }

8
app/assets/stylesheets/sign_up.scss
View file

@ -25,12 +25,8 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.sci-input-container:not(.field_with_errors) { .sci-input-container:not(.field_with_errors) .minimum-password-length {
margin-bottom: 24px; @include font-small;
.minimum-password-length {
@include font-small;
}
} }
.sign-up-button { .sign-up-button {

24
app/views/users/invitations/edit.html.erb
View file

@ -8,26 +8,30 @@
<%= f.hidden_field :invitation_token %> <%= f.hidden_field :invitation_token %>
<p class="sci-input-container"> <div class="form-group sci-input-container">
<%= f.label :full_name %> <%= f.label :full_name %>
<%= f.text_field :full_name, <%= f.text_field :full_name,
value: (params[:user] ? params[:user][:full_name] : ''), value: (params[:user] ? params[:user][:full_name] : ''),
autofocus: true, autofocus: true,
class: 'sci-input-field' %> class: 'sci-input-field' %>
</p> </div>
<p class="sci-input-container"> <div class="form-group sci-input-container password-input-container">
<%= f.label :password %> <%= f.label :password %>
<% if @minimum_password_length %> <% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em> <em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %> <% end %>
<%= f.password_field :password, autocomplete: "off", class: "sci-input-field" %> <div class="password-icon-wrapper">
</p> <%= f.password_field :password, autocomplete: "off", class: "sci-input-field" %>
</div>
<p class="sci-input-container"> </div>
<div class="form-group sci-input-container password-input-container">
<%= f.label :password_confirmation %> <%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "off", class: "sci-input-field" %> <div class="password-icon-wrapper">
</p> <%= f.password_field :password_confirmation, autocomplete: "off", class: "sci-input-field" %>
</div>
</div>
<% if Rails.configuration.x.new_team_on_signup %> <% if Rails.configuration.x.new_team_on_signup %>
<p class="sci-input-container" <p class="sci-input-container"

6
app/views/users/registrations/_2fa_modal.html.erb
View file

@ -10,8 +10,10 @@
<div class="modal-body"> <div class="modal-body">
<p><%= t("users.registrations.edit.2fa_modal.disable.description") %></p> <p><%= t("users.registrations.edit.2fa_modal.disable.description") %></p>
<%= label_tag :password, t("users.registrations.edit.2fa_modal.disable.password_label") %> <%= label_tag :password, t("users.registrations.edit.2fa_modal.disable.password_label") %>
<div class="sci-input-container password-field"> <div class="sci-input-container password-field password-input-container">
<%= password_field_tag :password, '', class: "sci-input-field" %> <div class="password-icon-wrapper">
<%= password_field_tag :password, '', class: "sci-input-field" %>
</div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

6
app/views/users/registrations/edit_partials/_email.html.erb
View file

@ -25,9 +25,11 @@
<%= f.label :email, t("users.registrations.edit.new_email_label") %> <%= f.label :email, t("users.registrations.edit.new_email_label") %>
<%= f.email_field :email, class: "form-control sci-input-field", "data-role" => "edit" %> <%= f.email_field :email, class: "form-control sci-input-field", "data-role" => "edit" %>
</div> </div>
<div class="form-group sci-input-container"> <div class="form-group sci-input-container password-input-container">
<%= f.label :current_password, t("users.registrations.edit.current_password_label") %> <i><%=t "users.registrations.edit.password_explanation" %></i> <%= f.label :current_password, t("users.registrations.edit.current_password_label") %> <i><%=t "users.registrations.edit.password_explanation" %></i>
<%= f.password_field :current_password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear", id: 'edit-email-current-password' %> <div class="password-icon-wrapper">
<%= f.password_field :current_password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear", id: 'edit-email-current-password' %>
</div>
</div> </div>
<div class="align-right"> <div class="align-right">
<a href="#" class="btn btn-light" data-action="cancel"><%=t "general.cancel" %></a> <a href="#" class="btn btn-light" data-action="cancel"><%=t "general.cancel" %></a>

18
app/views/users/registrations/edit_partials/_password.html.erb
View file

@ -16,19 +16,25 @@
<div data-part="edit" style="display: none;"> <div data-part="edit" style="display: none;">
<div class="well"> <div class="well">
<h4><%=t "users.registrations.edit.password_title" %></h4> <h4><%=t "users.registrations.edit.password_title" %></h4>
<div class="form-group sci-input-container"> <div class="form-group sci-input-container password-input-container">
<%= f.label :current_password, t("users.registrations.edit.current_password_label") %> <i><%=t "users.registrations.edit.password_explanation" %></i> <%= f.label :current_password, t("users.registrations.edit.current_password_label") %> <i><%=t "users.registrations.edit.password_explanation" %></i>
<%= f.password_field :current_password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear", id: 'edit-password-current-password' %> <div class="password-icon-wrapper">
<%= f.password_field :current_password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear", id: 'edit-password-current-password' %>
</div>
</div> </div>
<div class="form-group sci-input-container"> <div class="form-group sci-input-container password-input-container">
<%= f.label :password, t("users.registrations.edit.new_password_label") %> <%= f.label :password, t("users.registrations.edit.new_password_label") %>
<div class="password-icon-wrapper">
<%= f.password_field :password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %> <%= f.password_field :password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %>
</div>
</div> </div>
<div class="form-group sci-input-container"> <div class="form-group sci-input-container password-input-container">
<%= f.label :password_confirmation, t("users.registrations.edit.new_password_2_label") %> <%= f.label :password_confirmation, t("users.registrations.edit.new_password_2_label") %>
<%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %> <div class="password-icon-wrapper">
<%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %>
</div>
</div> </div>
<div class="align-right"> <div class="align-right">

12
app/views/users/registrations/new.html.erb
View file

@ -25,17 +25,21 @@
<%= f.email_field :email, class: 'form-control sci-input-field' %> <%= f.email_field :email, class: 'form-control sci-input-field' %>
</div> </div>
<div class="form-group sci-input-container"> <div class="form-group sci-input-container password-input-container">
<%= f.label :password, t('users.registrations.new.password_label') %> <%= f.label :password, t('users.registrations.new.password_label') %>
<% if @minimum_password_length %> <% if @minimum_password_length %>
<em class="minimum-password-length"><%= t('users.registrations.new.minimum_password_length', password_length: @minimum_password_length) %></em> <em class="minimum-password-length"><%= t('users.registrations.new.minimum_password_length', password_length: @minimum_password_length) %></em>
<% end %> <% end %>
<%= f.password_field :password, autocomplete: 'off', class: 'form-control sci-input-field' %> <div class="password-icon-wrapper">
<%= f.password_field :password, autocomplete: 'off', class: 'form-control sci-input-field' %>
</div>
</div> </div>
<div class="form-group sci-input-container" id="password_confirmation_form"> <div class="form-group sci-input-container password-input-container" id="password_confirmation_form">
<%= f.label :password_confirmation, t('users.registrations.new.password_confirmation_label') %> <%= f.label :password_confirmation, t('users.registrations.new.password_confirmation_label') %>
<%= f.password_field :password_confirmation, autocomplete: 'off', class: 'form-control sci-input-field' %> <div class="password-icon-wrapper">
<%= f.password_field :password_confirmation, autocomplete: 'off', class: 'form-control sci-input-field' %>
</div>
</div> </div>
<% if Rails.configuration.x.new_team_on_signup %> <% if Rails.configuration.x.new_team_on_signup %>
<div class="form-group sci-input-container" id="team_name_form"> <div class="form-group sci-input-container" id="team_name_form">