[refs #228] sign_in page
This commit is contained in:
parent
7992bb60d9
commit
a1bfe66791
|
@ -0,0 +1,75 @@
|
|||
//= require jquery
|
||||
//= require jquery_ujs
|
||||
|
||||
$(document).ready(function() {
|
||||
function logIn() {
|
||||
$('#new_user').submit();
|
||||
//~ $("#hint").fadeIn("slow");
|
||||
//~ document.getElementById("user_login").className="registartion-input-error";
|
||||
//~ document.getElementById("user_password").className="registartion-input-error";
|
||||
}
|
||||
});
|
||||
|
||||
function disError(elem) {
|
||||
$("#hint").fadeOut("fast");
|
||||
if (document.getElementById("user_login").className=="registartion-input-error") {
|
||||
if (this.id=="user_login") {
|
||||
document.getElementById("user_login").className="registartion-input-focus";
|
||||
} else {
|
||||
document.getElementById("user_login").className="registartion-input-no-focus";
|
||||
}
|
||||
}
|
||||
if (document.getElementById("user_password").className=="registartion-input-error") {
|
||||
if (this.id=="user_password") {
|
||||
document.getElementById("user_password").className="registartion-input-focus";
|
||||
} else {
|
||||
document.getElementById("user_password").className="registartion-input-no-focus";
|
||||
}
|
||||
}
|
||||
buttonCheck();
|
||||
}
|
||||
|
||||
function buttonCheck() {
|
||||
if ((document.getElementById("user_login").value!="")&&(document.getElementById("user_login").value!="Логин или email")&&(document.getElementById("user_password").value!="")&&(document.getElementById("user_password").value!="Пароль")) {
|
||||
document.getElementById("btnLogin").className = "button";
|
||||
|
||||
} else {
|
||||
document.getElementById("btnLogin").className = "button disabled";
|
||||
}
|
||||
}
|
||||
|
||||
function changeCheck(el)
|
||||
|
||||
{
|
||||
var el = el,
|
||||
input = el.getElementsByTagName("input")[0];
|
||||
|
||||
if(input.checked)
|
||||
{
|
||||
el.style.backgroundPosition="0 0";
|
||||
input.checked=false;
|
||||
}
|
||||
else
|
||||
{
|
||||
el.style.backgroundPosition="0 -17px";
|
||||
input.checked=true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
function startChangeCheck(el)
|
||||
|
||||
{
|
||||
var el = el,
|
||||
input = el.getElementsByTagName("input")[0];
|
||||
if(input.checked)
|
||||
{
|
||||
el.style.backgroundPosition="0 -17px";
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function startCheck()
|
||||
{
|
||||
|
||||
startChangeCheck(document.getElementById("niceCheckbox1"));
|
||||
}
|
|
@ -0,0 +1,274 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Tahoma, Geneva, Helvetica, sans-serif;
|
||||
color: #565667;
|
||||
background: #1f60a1 image-url("bg.png") repeat-x;
|
||||
min-width: 940px;
|
||||
min-height: 300px;
|
||||
text-align: center;
|
||||
height: 100%; }
|
||||
|
||||
header, section, footer, aside, nav, article, menu {
|
||||
display: block; }
|
||||
|
||||
input {
|
||||
&[type="text"]:focus, &[type="password"]:focus, &:focus {
|
||||
outline: none; } }
|
||||
|
||||
select:focus {
|
||||
outline: none; }
|
||||
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
.wrap {
|
||||
width: 940px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
min-height: 95%; }
|
||||
|
||||
.both {
|
||||
clear: both; }
|
||||
|
||||
/* Header */
|
||||
|
||||
header div {
|
||||
&.logo {
|
||||
background: image-url("logo.png") no-repeat 50% 100%;
|
||||
height: 89px;
|
||||
width: 233px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding-top: 12%; }
|
||||
&.text {
|
||||
color: #FFF;
|
||||
font-size: 28px;
|
||||
width: 800px;
|
||||
text-align: left;
|
||||
margin-left: 90px;
|
||||
margin-top: 50px;
|
||||
font-family: Arial;
|
||||
text-shadow: 0px 1px 1px #000000;
|
||||
filter: dropshadow(color = black, offx = 0, offy = 1);
|
||||
padding-left: 0px; } }
|
||||
|
||||
.niceCheck {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background: image-url("checkbox.png");
|
||||
input {
|
||||
display: none; } }
|
||||
|
||||
/* Content */
|
||||
|
||||
article {
|
||||
width: 257px;
|
||||
height: 227px;
|
||||
background: #1c394c image-url("bg-signup.png") repeat-x;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #38658c;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 75px;
|
||||
-webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5); }
|
||||
|
||||
a.button {
|
||||
background: #125687;
|
||||
background: image-url("button-green-normal.png");
|
||||
border-radius: 3px;
|
||||
color: #FFF;
|
||||
font-family: Tahoma;
|
||||
font-size: 12px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: normal;
|
||||
padding: 5px 25px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
height: 25px;
|
||||
width: 106px;
|
||||
text-decoration: none; }
|
||||
|
||||
input.button {
|
||||
background: #125687;
|
||||
background: image-url("button-green-normal.png");
|
||||
border-radius: 3px;
|
||||
color: #FFF;
|
||||
font-family: Tahoma;
|
||||
font-size: 12px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: normal;
|
||||
padding: 5px 25px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
height: 25px;
|
||||
width: 106px;
|
||||
text-decoration: none;
|
||||
padding: 5px 27px 8px 27px;
|
||||
height: 28px;
|
||||
width: 110px; }
|
||||
|
||||
a.button:hover, input.button:hover {
|
||||
background: #1874b6;
|
||||
background: image-url("button-green-hover.png");
|
||||
cursor: pointer; }
|
||||
|
||||
a.button:active, input.button:active {
|
||||
background: image-url("button-green-press.png"); }
|
||||
|
||||
a.button {
|
||||
&:disabled, &.disabled {
|
||||
background: #125687;
|
||||
background: image-url("button-green-disabled.png");
|
||||
cursor: default; } }
|
||||
|
||||
input.button:disabled {
|
||||
background: #125687;
|
||||
background: image-url("button-green-disabled.png");
|
||||
cursor: default; }
|
||||
|
||||
article h1 {
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
font-family: Tahoma;
|
||||
margin-bottom: 5px; }
|
||||
|
||||
.registartion-input, .registartion-input-focus, .registartion-input-error, .registartion-input-no-focus {
|
||||
height: 24px;
|
||||
width: 217px;
|
||||
border: 1px solid #8199a9;
|
||||
border-radius: 2px;
|
||||
color: #cfcfcf;
|
||||
font-family: Tahoma;
|
||||
font-size: 12px;
|
||||
padding-left: 10px;
|
||||
margin-top: 10px; }
|
||||
|
||||
.registartion-input-focus, .registartion-input-focus-signup {
|
||||
color: #575756;
|
||||
-webkit-box-shadow: 0px 0px 7px 2px rgba(126, 183, 237, 0.75);
|
||||
-moz-box-shadow: 0px 0px 7px 2px rgba(126, 183, 237, 0.75);
|
||||
box-shadow: 0px 0px 7px 2px rgba(126, 183, 237, 0.75); }
|
||||
|
||||
.registartion-input-no-focus, .registartion-input-no-focus-signup {
|
||||
color: #575756; }
|
||||
|
||||
.registartion-input-error, .registartion-input-error-signup {
|
||||
border: 1px solid #bd4d40;
|
||||
outline: 1px solid #bd4d40;
|
||||
outline-offset: -2px; }
|
||||
|
||||
div {
|
||||
&.registration div {
|
||||
&.remember {
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
padding-left: 15px;
|
||||
padding-top: 5px;
|
||||
div {
|
||||
&.check {
|
||||
float: left;
|
||||
margin-top: 15px;
|
||||
margin-right: 4px; }
|
||||
&.text {
|
||||
float: left;
|
||||
margin-top: 15px; } } }
|
||||
&.in {
|
||||
float: right;
|
||||
padding-right: 15px;
|
||||
padding-top: 15px; } }
|
||||
&.hr {
|
||||
margin-top: 10px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #264862;
|
||||
border-top: 1px solid #264862; } }
|
||||
|
||||
article div.other div {
|
||||
&.left {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 6px;
|
||||
margin-left: 15px; }
|
||||
&.right {
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
margin-top: 13px; } }
|
||||
|
||||
div {
|
||||
&.forgot {
|
||||
width: 257px;
|
||||
text-align: center;
|
||||
margin: 0 auto; }
|
||||
&.password {
|
||||
float: right;
|
||||
padding-top: 4px;
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
a {
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline; } } } }
|
||||
|
||||
nav {
|
||||
width: 96px;
|
||||
height: 47px;
|
||||
background: image-url("registration.png") no-repeat;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #FFF;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 10px; } }
|
||||
|
||||
div.error {
|
||||
background: image-url("error-message.png");
|
||||
width: 237px;
|
||||
height: 35px;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
margin-top: -159px;
|
||||
margin-left: 582px;
|
||||
display: none;
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 7px;
|
||||
text-align: center; } }
|
||||
|
||||
/* Footer */
|
||||
|
||||
footer {
|
||||
height: 32px;
|
||||
padding-left: 15px;
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
li {
|
||||
display: inline;
|
||||
a {
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline; } } } } }
|
|
@ -1,22 +1,30 @@
|
|||
#block-login.block
|
||||
%h2= title t("layout.sessions.sign_in_header")
|
||||
.content.login
|
||||
- if flash.present?
|
||||
.flash
|
||||
- flash.each do |key, value|
|
||||
.message{ :title => key.to_s.humanize, :class => (key == :alert ? "error" : key) }
|
||||
%p= value
|
||||
.wrap
|
||||
%nav
|
||||
%p= link_to t("layout.devise.shared_links.sign_up"), new_register_request_path
|
||||
/ Top block
|
||||
%header
|
||||
.logo
|
||||
/ Page
|
||||
%article
|
||||
- is_error = flash.first.first == :alert # Trash
|
||||
= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :class => "form login" }) do |f|
|
||||
.group.wat-cf
|
||||
.left= f.label :login, :class => "label right"
|
||||
.right= f.text_field :login, :class => "text_field"
|
||||
.group.wat-cf
|
||||
.left= f.label :password, :class => "label right"
|
||||
.right= f.password_field :password, :class => "text_field"
|
||||
.group.navform.wat-cf
|
||||
.right
|
||||
%button.button{:type => "submit"}
|
||||
= image_tag 'code.png', :alt => "Save"
|
||||
= t("layout.login")
|
||||
%span.text_button_padding
|
||||
= render :partial => "devise/shared/links"
|
||||
%h1= title t("layout.sessions.sign_in_header")
|
||||
= f.text_field :login, :class => "registartion-input #{is_error ? "registartion-input-error" : ''}", :onClick => "this.className='registartion-input-focus';disError(this);", :onblur => "if(this.value==''){this.value='Логин или email';this.className='registartion-input';}else{this.className='registartion-input-no-focus';};buttonCheck();", :onfocus => "if(this.value=='Логин или email'){this.value='';this.className='registartion-input-focus';};", :onkeydown => "buttonCheck();", :type => "text", :value => "Логин или email"
|
||||
%br/
|
||||
= f.password_field :password, :class => "registartion-input #{is_error ? "registartion-input-error" : ''}", :onClick => "this.className='registartion-input-focus';disError(this);", :onblur => "if(this.value==''){this.value='Пароль';this.className='registartion-input';}else{this.className='registartion-input-no-focus';};buttonCheck();", :onfocus => "if(this.value=='Пароль'){this.value='';this.className='registartion-input-focus';};", :onkeydown => "buttonCheck();", :type => "password", :value => "Пароль"
|
||||
%br/
|
||||
.registration
|
||||
.remember
|
||||
.check
|
||||
%span#niceCheckbox1.niceCheck{:onclick => "changeCheck(this)"}
|
||||
= f.check_box :remember_me
|
||||
.text=t('devise.sessions.remember_me')
|
||||
.in=f.submit t('layout.devise.shared_links.sign_in'), :class => 'button disabled', :id => 'btnLogin'
|
||||
%div{:style => "clear: both;"}
|
||||
.hr
|
||||
.both
|
||||
#hint.error{:style => is_error ? 'display: block;' : ''}
|
||||
%p=t('devise.failure.invalid')
|
||||
.forgot
|
||||
.password
|
||||
%p= link_to t("layout.devise.shared_links.forgot_password"), new_password_path(resource_name)
|
|
@ -3,13 +3,11 @@
|
|||
%head
|
||||
%meta{:content => "text/html; charset=utf-8", "http-equiv" => "content-type"}
|
||||
= display_meta_tags :site => APP_CONFIG['project_name']
|
||||
= stylesheet_link_tag "application"
|
||||
= javascript_include_tag "application"
|
||||
= stylesheet_link_tag "login"
|
||||
= javascript_include_tag "login"
|
||||
= csrf_meta_tag
|
||||
%body
|
||||
#container
|
||||
#box
|
||||
= render :partial => "layouts/flashes"
|
||||
= yield
|
||||
-# render :partial => "layouts/flashes"
|
||||
= yield
|
||||
|
||||
= render 'layouts/counters' unless current_user.try(:admin?)
|
||||
|
|
|
@ -22,6 +22,7 @@ en:
|
|||
sessions:
|
||||
signed_in: 'Signed in successfully.'
|
||||
signed_out: 'Signed out successfully.'
|
||||
remember_me: 'Remember me'
|
||||
passwords:
|
||||
send_instructions: 'You will receive an email with instructions about how to reset your password in a few minutes.'
|
||||
updated: 'Your password was changed successfully. You are now signed in.'
|
||||
|
|
|
@ -24,6 +24,7 @@ ru:
|
|||
sessions:
|
||||
signed_in: "Вход в систему выполнен."
|
||||
signed_out: "Выход из системы выполнен."
|
||||
remember_me: 'Запомнить меня'
|
||||
passwords:
|
||||
send_instructions: "В течение нескольких минут вы получите e-mail с инструкциями по восстановлению вашего пароля."
|
||||
updated: "Ваш пароль изменён. Теперь вы вошли в систему."
|
||||
|
|
Loading…
Reference in New Issue