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

Update css for login screen

Browse source
This commit is contained in:
aignatov-bio 2020-03-27 09:43:49 +01:00
parent ee037ea13c
commit 8ff4b540e2
11 changed files with 306 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/assets/stylesheets/forgot_password.scss Normal file
View file

@ -0,0 +1,33 @@
// scss-lint:disable SelectorDepth NestingDepth IdSelector
.forgot-password-layout {
#content-wrapper {
margin-left: 0;
.container:first-child {
padding: 0;
}
}
.forgot-password-container {
display: flex;
.forgot-password-form-wrapper {
flex-basis: 50%;
flex-grow: 1;
.center-block-narrow {
margin-top: 72px;
padding: 0 50px;
}
.forgot-password-title {
margin-bottom: 24px;
}
.sci-input-container {
margin-bottom: 24px;
}
}
}
}

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

@ -3,6 +3,7 @@
.sci-input-container {
display: inline-block;
position: relative;
width: 100%;
label {
@include font-small;
@ -14,8 +15,8 @@
.sci-input-field {
@include font-button;
animation-timing-function: $timing-function-sharp;
border: $border-default;
border-radius: $border-radius-default;
border: $border-secondary;
border-radius: $border-radius-default !important;
box-shadow: none;
height: 36px;
outline: 0;

53
app/assets/stylesheets/sign_up.scss Normal file
View file

@ -0,0 +1,53 @@
// scss-lint:disable SelectorDepth NestingDepth IdSelector
.sign-up-layout {
#content-wrapper {
margin-left: 0;
.container:first-child {
padding: 0;
}
}
.sign-up-container {
display: flex;
.sign-up-form-wrapper {
flex-basis: 50%;
flex-grow: 1;
.center-block-narrow {
margin-top: 72px;
padding: 0 50px;
}
.sign-up-title {
margin-bottom: 24px;
}
.sci-input-container {
margin-bottom: 24px;
}
.sign-up-button {
padding: 7px 32px;
}
.linkedin-container {
margin-bottom: 24px;
.linkedin-link {
margin-right: 15px;
}
.linkedin-signin-button {
margin: 0;
}
span {
font-weight: bold;
}
}
}
}
}

67
app/assets/stylesheets/sing_in.scss Normal file
View file

@ -0,0 +1,67 @@
.sign-in-layout {
#content-wrapper {
margin-left: 0;
.container:first-child {
padding: 0;
}
}
.sign-in-container {
display: flex;
.sign-in-form-wrapper {
flex-grow: 1;
flex-basis: 50%;
.center-block-narrow {
margin-top: 72px;
padding: 0 50px;
}
.log-in-title {
margin-bottom: 24px;
}
.remember-me {
align-items: center;
display: flex;
margin-bottom: 24px;
label {
margin-left: 8px;
margin-bottom: 0;
}
}
.sci-input-container {
margin-bottom: 24px;
}
.linkedin-container {
margin-bottom: 24px;
.linkedin-link {
margin-right: 15px;
}
.linkedin-signin-button {
margin: 0;
}
span {
font-weight: bold;
}
}
.log-in-button {
padding: 7px 32px;
}
.forgot-password-link {
display: inline-block;
margin-bottom: 16px;
}
}
}
}

5
app/helpers/form_tag_helper.rb
View file

@ -1,9 +1,12 @@
# frozen_string_literal: true
module FormTagHelper
def recaptcha_input_tag
if Rails.configuration.x.enable_recaptcha
res = "<div class='form-group "
res = "<div class='form-group sci-input-container"
res << 'has-error' if flash[:recaptcha_error]
res << "'>"
res << label_tag(:recaptcha_label, 'Let us know you’re human. Enter the captcha below.')
res << recaptcha_tags
if flash[:recaptcha_error]
res << "<span class='help-block'>"

42
app/views/users/passwords/new.html.erb
View file

@ -1,25 +1,29 @@
<% provide(:head_title, t("devise.passwords.new.head_title")) %>
<% content_for(:body_class, 'forgot-password-layout') %>
<div class="forgot-password-container">
<div class="forgot-password-form-wrapper">
<div class="center-block center-block-narrow">
<h1 class="forgot-password-title"><%=t "devise.passwords.new.title" %></h1>
<div class="center-block center-block-narrow">
<h2><%=t "devise.passwords.new.title" %></h2>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<% if not resource.errors.empty? %>
<div class="alert alert-danger" id="alert-flash">
<%= devise_error_messages! %>
</div>
<% end %>
<% if not resource.errors.empty? %>
<div class="alert alert-danger" id="alert-flash">
<%= devise_error_messages! %>
<div class="form-group sci-input-container">
<%= f.label :email %><br /actions>
<%= f.email_field :email, autofocus: true, class: "form-control sci-input-field" %>
</div>
<div class="form-group">
<%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %>
</div>
<% end %>
<%= render partial: 'users/shared/links', locals: {linkedin_skip: true} %>
</div>
<% end %>
<div class="form-group">
<%= f.label :email %><br /actions>
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %>
</div>
<% end %>
<%= render "users/shared/links" %>
</div>
</div>

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

@ -1,53 +1,64 @@
<% provide(:head_title, t('users.registrations.new.head_title')) %>
<% content_for(:body_class, 'sign-up-layout') %>
<div class="sign-up-container">
<div class="sign-up-form-wrapper">
<div class="center-block center-block-narrow">
<h1 class="sign-up-title"><%= t 'users.registrations.new.head_title' %></h1>
<div class="center-block center-block-narrow">
<h1><%= t 'users.registrations.new.head_title' %></h1>
<div data-hook="sign-up-form-hook">
<%= form_for(:user, as: resource_name, url: registration_path(resource_name), html: { id: "sign-up-form" } ) do |f| %>
<%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
<div class="linkedin-container">
<%= render partial: "users/shared/linkedin_sign_in_links", locals: { resource_name: resource_name } %>
<span><%= t("devise.sessions.new.or") %></span>
</div>
<% end -%>
<div class="form-group">
<%= f.label :full_name %>
<%= f.text_field :full_name, autofocus: true, class: 'form-control' %>
</div>
<div data-hook="sign-up-form-hook">
<%= form_for(:user, as: resource_name, url: registration_path(resource_name), html: { id: "sign-up-form" } ) do |f| %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
</div>
<div class="form-group sci-input-container">
<%= f.label :full_name %>
<%= f.text_field :full_name, autofocus: true, class: 'form-control sci-input-field' %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<div class="form-group sci-input-container">
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control sci-input-field' %>
</div>
<div class="form-group sci-input-container">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %>
<%= f.password_field :password, autocomplete: 'off', class: 'form-control sci-input-field' %>
</div>
<div class="form-group sci-input-container" id="password_confirmation_form">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: 'off', class: 'form-control sci-input-field' %>
</div>
<% if Rails.configuration.x.new_team_on_signup %>
<div class="form-group sci-input-container" id="team_name_form">
<%= label :team, :name, t('users.registrations.new.team_name_label') %>
<% if @team %>
<%= text_field :team, :name, class: 'form-control sci-input-field', value: @team.name,
placeholder: t('users.registrations.new.team_name_placeholder') %>
<% else %>
<%= text_field :team, :name, class: 'form-control sci-input-field',
placeholder: t('users.registrations.new.team_name_placeholder') %>
<% end %>
</div>
<% end %>
<%= recaptcha_input_tag %>
<div class="form-group" data-hook="sign-up-form-submit">
<%= f.submit 'Sign up', class: 'btn btn-primary sign-up-button' %>
</div>
<% end %>
<%= f.password_field :password, autocomplete: 'off', class: 'form-control' %>
</div>
<%= render partial: 'users/shared/links', locals: {linkedin_skip: true} %>
</div>
<div class="form-group" id="password_confirmation_form">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: 'off', class: 'form-control' %>
</div>
<% if Rails.configuration.x.new_team_on_signup %>
<div class="form-group" id="team_name_form">
<%= label :team, :name, t('users.registrations.new.team_name_label') %>
<% if @team %>
<%= text_field :team, :name, class: 'form-control', value: @team.name,
placeholder: t('users.registrations.new.team_name_placeholder') %>
<% else %>
<%= text_field :team, :name, class: 'form-control',
placeholder: t('users.registrations.new.team_name_placeholder') %>
<% end %>
<span><small><%= t 'users.registrations.new.team_name_help' %></small></span>
</div>
<% end %>
<%= recaptcha_input_tag %>
<div class="form-group" data-hook="sign-up-form-submit">
<%= f.submit 'Sign up', class: 'btn btn-primary' %>
</div>
<% end %>
</div>
<%= render 'users/shared/links' %>
</div>
<% if resource and not resource.errors.empty? %>

74
app/views/users/sessions/new.html.erb
View file

@ -1,36 +1,46 @@
<% provide(:head_title, t("devise.sessions.new.head_title")) %>
<% content_for(:body_class, 'sign-in-layout') %>
<div class="sign-in-container">
<div class="sign-in-form-wrapper">
<div class="center-block center-block-narrow">
<h1 class="log-in-title"><%=t "devise.sessions.new.title" %></h1>
<div class="center-block center-block-narrow">
<h1><%=t "devise.sessions.new.title" %></h1>
<%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
<div class="linkedin-container">
<%= render partial: "users/shared/linkedin_sign_in_links", locals: { resource_name: resource_name } %>
<span><%= t("devise.sessions.new.or") %></span>
</div>
<% end -%>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="input-group">
<span class="input-group-addon" style="text-transform: capitalize;">
<%= :email %>
</span>
<%= f.email_field :email, autofocus: true, class: "form-control", placeholder: t("devise.sessions.new.email_placeholder") %>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="input-group sci-input-container">
<%= f.label :email, t("devise.sessions.new.email_field") %>
<%= f.email_field :email, autofocus: true, class: "form-control sci-input-field", placeholder: t("devise.sessions.new.email_placeholder") %>
</div>
<div class="input-group sci-input-container">
<%= f.label :password, t("devise.sessions.new.password_field") %>
<%= f.password_field :password, autocomplete: "off", class: "form-control sci-input-field", placeholder: t("devise.sessions.new.password_placeholder") %>
</div>
<% if devise_mapping.rememberable? && !@simple_sign_in %>
<div class="field remember-me">
<div class="sci-checkbox-container">
<%= f.check_box :remember_me, class: "sci-checkbox" %>
<span class="sci-checkbox-label"></span>
</div>
<%= f.label :remember_me, t("devise.sessions.new.remember_me") %>
</div>
<% end %>
<%= hidden_field_tag(:simple_sign_in, @simple_sign_in) %>
<div class="actions" style="margin-top: 10px; margin-bottom: 10px;">
<%= f.submit t("devise.sessions.new.submit"), class: "btn btn-primary log-in-button" %>
</div>
<% end %>
<%= render partial: "users/shared/links", locals: {linkedin_skip: true} unless @simple_sign_in %>
</div>
<div class="input-group" style="margin-top: 10px;">
<span class="input-group-addon" style="text-transform: capitalize;">
<%= :password %>
</span>
<%= f.password_field :password, autocomplete: "off", class: "form-control", placeholder: t("devise.sessions.new.password_placeholder") %>
</div>
<% if devise_mapping.rememberable? && !@simple_sign_in %>
<div class="field" style="margin-top: 10px;">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<%= hidden_field_tag(:simple_sign_in, @simple_sign_in) %>
<div class="actions" style="margin-top: 10px; margin-bottom: 10px;">
<%= f.submit t("devise.sessions.new.submit"), class: "btn btn-primary" %>
</div>
<% end %>
<%= render "users/shared/links" unless @simple_sign_in %>
</div>
</div>
</div>

10
app/views/users/shared/_linkedin_sign_in_links.html.erb Normal file
View file

@ -0,0 +1,10 @@
<%- if devise_mapping.omniauthable? && resource_class.omniauth_providers.any? %>
<%= link_to omniauth_authorize_path(resource_name, :linkedin), method: :post, title: "Sign in with LinkedIn", class: 'linkedin-link' do %>
<%= image_tag('linkedin/Sign-in-Large---Default.png',
class: 'linkedin-signin-button',
alt: "Sign in with LinkedIn",
onmouseover: "src='#{image_path('linkedin/Sign-in-Large---Hover.png')}'",
onmouseout: "src='#{image_path('linkedin/Sign-in-Large---Default.png')}'",
onclick: "src='#{image_path('linkedin/Sign-in-Large---Active.png')}'") %>
<% end -%>
<% end -%>

21
app/views/users/shared/_links.html.erb
View file

@ -5,12 +5,12 @@
<%= link_to login, new_session_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.registerable? && Rails.configuration.x.enable_user_registration && controller_name != 'registrations' %>
<%= link_to t("devise.links.signup"), new_registration_path(resource_name) %><br />
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to t("devise.links.forgot"), new_password_path(resource_name), class: 'forgot-password-link' %><br />
<% end -%>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to t("devise.links.forgot"), new_password_path(resource_name) %><br />
<%- if devise_mapping.registerable? && Rails.configuration.x.enable_user_registration && controller_name != 'registrations' %>
<%= link_to t("devise.links.signup"), new_registration_path(resource_name), class: 'signup-link' %><br />
<% end -%>
<%- if Rails.configuration.x.enable_email_confirmations && devise_mapping.confirmable? && controller_name != 'confirmations' %>
@ -25,16 +25,9 @@
<div data-hook="omniauth-sign-in-links"></div>
<% end -%>
<%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
<%- if devise_mapping.omniauthable? && resource_class.omniauth_providers.any? && controller_name != 'registrations' %>
<%= link_to omniauth_authorize_path(resource_name, :linkedin), method: :post, :title => "Sign in with LinkedIn" do %>
<%= image_tag('linkedin/Sign-in-Large---Default.png',
class: 'linkedin-signin-button',
alt: "Sign in with LinkedIn",
onmouseover: "src='#{image_path('linkedin/Sign-in-Large---Hover.png')}'",
onmouseout: "src='#{image_path('linkedin/Sign-in-Large---Default.png')}'",
onclick: "src='#{image_path('linkedin/Sign-in-Large---Active.png')}'") %>
<% end -%>
<%- unless defined?(linkedin_skip) %>
<%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
<%= render partial: "users/shared/linkedin_sign_in_links", locals: { resource_name: resource_name } %>
<% end -%>
<% end -%>

15
config/locales/en.yml
View file

@ -19,15 +19,19 @@ en:
new:
head_title: "Forgot password"
title: "Forgot your password?"
submit: "Send me reset password instructions"
submit: "Reset password"
registrations:
password_changed: "Password successfully updated."
sessions:
new:
head_title: "Log in"
title: "Log in"
email_placeholder: "username@email.com"
password_placeholder: "pass****"
or: "OR"
email_field: "E-mail"
email_placeholder: "john.doe@email.com"
password_field: "Password"
password_placeholder: "Enter password"
remember_me: "Remember me"
submit: "Log in"
create:
team_name: "%{user}'s projects"
@ -1535,7 +1539,10 @@ en:
head_title: "Sign up"
team_name_label: "Team name"
team_name_placeholder: "e.g. John's lab"
team_name_help: "This is the name of your lab or your group. You can invite other members to your team if needed."
email_label: "E-mail"
full_name_label: "Full name"
password_label: "Password"
password_confirmation_label: "Password confirmation"
new_with_provider:
head_title: "Complete the Sign up"
statistics: