Merge pull request #229 from warpc/228-sign_in

[Refs #228] sign in
2012-02-29 09:22:42 -08:00 · 2012-02-29 09:22:42 -08:00 · 6e8b48188e
parent 7992bb60d9 89a5cf56b2
commit 6e8b48188e
7 changed files with 375 additions and 28 deletions
--- a/app/assets/javascripts/login.js
+++ b/app/assets/javascripts/login.js
@ -0,0 +1,55 @@
+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() {
+  var login_default = document.getElementById("login_default").value;
+  var pass_default = document.getElementById("password_default").value;
+  if ((document.getElementById("user_login").value!="")&&(document.getElementById("user_login").value!=login_default)&&
+       (document.getElementById("user_password").value!="")&&(document.getElementById("user_password").value!=pass_default)) {
+    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"));
+}
--- a/app/assets/stylesheets/login.scss
+++ b/app/assets/stylesheets/login.scss
@ -0,0 +1,276 @@
+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: 3px 27px 8px 27px;
+  height: 25px;
+  width: auto; }
+
+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, &.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;
+  a {
+    font-size: 14px;
+    color: #FFF;
+    margin: 0;
+    padding: 0;
+    padding-top: 10px;
+    text-decoration: none;} }
+
+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; } } } } }
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@ -1,22 +1,34 @@
-#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
+    %a{:href => new_register_request_path}
+      %p=t("layout.devise.shared_links.sign_up")
+  / Top block
+  %header
+    .logo
+  / Page
+  %article
+    - is_error = (flash.try(:first).try(:first) == :alert && flash.try(:first).try(:last) == t('devise.failure.invalid')) # Trash
+    - login = t('devise.sessions.login'); password = t('devise.sessions.password')
+    =hidden_field_tag :login_default, login
+    =hidden_field_tag :password_default, password
    = 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" : ''}", :onblur => "if(this.value==''){this.value='#{login}';this.className='registartion-input';} else{this.className='registartion-input-no-focus';};buttonCheck();", :onfocus => "if(this.value=='#{login}'){this.value='';this.className='registartion-input-focus';};", :onkeydown => "buttonCheck();", :type => "text", :value => login
+      %br/
+      = f.password_field :password, :class => "registartion-input #{is_error ? "registartion-input-error" : ''}", :onblur => "if(this.value==''){this.value='#{password}';this.className='registartion-input';}else{this.className='registartion-input-no-focus';};buttonCheck();", :onfocus => "if(this.value=='#{password}'){this.value='';this.className='registartion-input-focus';};", :onkeydown => "buttonCheck();", :type => "password", :value => password
+      %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)
--- a/app/views/layouts/sessions.html.haml
+++ b/app/views/layouts/sessions.html.haml
@ -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?)
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@ -62,7 +62,7 @@ Rosa::Application.configure do
  config.assets.digest = true

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
-  config.assets.precompile += %w()
+  config.assets.precompile += %w(login.css login.js)
 end

 # require 'stub_xml_rpc'
--- a/config/locales/devise.en.yml
+++ b/config/locales/devise.en.yml
@ -22,6 +22,9 @@ en:
    sessions:
      signed_in: 'Signed in successfully.'
      signed_out: 'Signed out successfully.'
+      remember_me: 'Remember me'
+      login: 'Login or email'
+      password: 'Password'
    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.'
--- a/config/locales/devise.ru.yml
+++ b/config/locales/devise.ru.yml
@ -24,6 +24,9 @@ ru:
    sessions:
      signed_in: "Вход в систему выполнен."
      signed_out: "Выход из системы выполнен."
+      remember_me: 'Запомнить меня'
+      login: 'Логин или email'
+      password: 'Пароль'
    passwords:
      send_instructions: "В течение нескольких минут вы получите e-mail с инструкциями по восстановлению вашего пароля."
      updated: "Ваш пароль изменён. Теперь вы вошли в систему."