Redesign login page

AsherBond · Aug 14, 2014 · 0d064cb · 0d064cb
1 parent 7f3ff6b
commit 0d064cb
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 55 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -8,6 +8,7 @@
 * Clarify explanations and defaults in diaspora.yml.example [#5088](https://github.com/diaspora/diaspora/pull/5088)
 * Consistent header spacing on Bootstrap pages [#5108](https://github.com/diaspora/diaspora/pull/5108)
 * Port settings pages (account, profile, privacy, services) to Bootstrap [#5039](https://github.com/diaspora/diaspora/pull/5039)
+* Redesign login page [#5112](https://github.com/diaspora/diaspora/pull/5112)
 
 ## Bug fixes
 * Fix hiding of poll publisher on close [#5029](https://github.com/diaspora/diaspora/issues/5029)

diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss
@@ -33,7 +33,6 @@ a { color : $link-blue  }
   }
 }
 
-#login,
 #forgot_password,
 #reset_password {
   background-image : image_url("texture/light-bg.png");

diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss
@@ -86,14 +86,14 @@ form.block-form {
   }
 }
 
-textarea, input[type=text] {
-  &:focus {
+textarea, input[type=text], input[type=password] {
+  &:focus, &:invalid:focus {
     border: 1px solid $border-dark-grey;
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none;
-    }
   }
+}
 
 /* buttons to be extracted? */
 .new-btn {

diff --git a/app/assets/stylesheets/new_styles/_login.scss b/app/assets/stylesheets/new_styles/_login.scss
@@ -1,4 +1,3 @@
-#login,
 #forgot_password,
 #reset_password {
   position : absolute;
@@ -32,3 +31,51 @@
     clear : all;
   }
 }
+
+#login {
+  padding-top: 20px;
+  .branding-asterisk {
+    margin: auto;
+    width: 154px;
+    height: 154px;
+  }
+  .form-signin {
+    margin-bottom: 30px;
+
+    .form-control {
+      font-size: 16px;
+      height: auto;
+      padding: 10px;
+      padding-left: 40px;
+    }
+    fieldset {
+      margin-bottom: 20px;
+    }
+    .entypo {
+      position: relative;
+      display: inline-block;
+      width: 20px;
+      text-align: center;
+      top: -6px;
+      left: 12px;
+      color: $text-grey;
+      font-size: 20px;
+    }
+    input[type=text], input[type=password] {
+      &:focus {
+        border: 1px solid #ccc;
+      }
+    }
+    input[type=text] {
+      margin-bottom: -24px;
+      @include border-radius(5px, 5px, 0, 0);
+    }
+    input[type=password] {
+      margin-bottom: -23px;
+      @include border-radius(0, 0, 5px, 5px);
+    }
+    #forgot_password_link {
+      margin-top: 20px;
+    }
+  }
+}
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
@@ -4,7 +4,7 @@
 
 class SessionsController < Devise::SessionsController
 
-  layout "application", :only => [:new]
-  before_filter -> { @css_framework = :bootstrap }, only: [:new]
+  layout "with_header_with_footer", :only => [:new]
+  use_bootstrap_for :new
 
 end
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
diff --git a/app/views/sessions/new.html.haml b/app/views/sessions/new.html.haml
@@ -0,0 +1,40 @@
+- content_for :page_title do
+  = AppConfig.settings.pod_name + " / " + t('devise.sessions.new.sign_in')
+
+.container-fluid#login
+  .row-fluid
+    .span12.text-center
+      .branding-asterisk
+      %h1
+        = AppConfig.settings.pod_name
+
+  .row-fluid
+    .span4.offset4
+      = form_for resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-signin'}, :autocomplete => 'off' do |f|
+        %fieldset
+          = f.text_field :username, 
+                         :placeholder => t('registrations.new.username'), 
+                         :class => 'input-block-level form-control', 
+                         :required => true, 
+                         :pattern => '[A-Za-z0-9_.@\-]+', 
+                         :autocapitalize => 'off', 
+                         :autocorrect => 'off', 
+                         :autofocus => true
+          %i.entypo.user
+
+          = f.password_field :password, 
+                             :placeholder => t('registrations.new.password'), 
+                             :class => 'input-block-level form-control',
+                             :required => true
+          %i.entypo.lock
+
+        = f.hidden_field :remember_me, :value => 1
+        = f.submit t('devise.sessions.new.sign_in'), :class => 'btn btn-large btn-block green'
+
+      - if display_password_reset_link?
+        .text-center
+          = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link"
+
+      - if display_registration_link?
+        .text-center
+          = link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)