Merge pull request #5112 from svbergerem/login-redesign

Redesign login page

Conflicts:
	Changelog.md

Changelog.md

@@ -9,6 +9,7 @@
 * 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)
 * Port contacts and community spotlight pages to Bootstrap [#5118](https://github.com/diaspora/diaspora/pull/5118)
+* 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)

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");

app/assets/stylesheets/new_styles/_forms.scss

@@ -86,8 +86,8 @@ form.block-form {
   }
 }
 
-textarea, input[type=text] {
+textarea, input[type=text], input[type=password] {
-  &:focus {
+  &:focus, &:invalid:focus {
     border: 1px solid $border-dark-grey;
     outline: none;
     -webkit-box-shadow: none;

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;
+    }
+  }
+}

app/controllers/sessions_controller.rb

@@ -4,7 +4,7 @@
 
 class SessionsController < Devise::SessionsController
 
-  layout "application", :only => [:new]
+  layout "with_header_with_footer", :only => [:new]
-  before_filter -> { @css_framework = :bootstrap }, only: [:new]
+  use_bootstrap_for :new
 
 end

app/views/sessions/new.html.erb

@@ -1,48 +0,0 @@
-<% content_for :page_title do %>
-    <%= "#{AppConfig.settings.pod_name} / #{t('devise.sessions.new.sign_in')}" %>
-<% end %>
-
-<div id="login">
-  <h1 id="huge-text">
-    <%= AppConfig.settings.pod_name %>
-  </h1>
-
-  <%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => "form-horizontal block-form"}, :autocomplete => 'off') do |f| %>
-        <fieldset>
-          <div class="control-group">
-              <label class="control-label" for="user_username" style="width: 40%; text-align: center; padding: 10px 0; overflow: hidden">            
-                <%= t('registrations.new.username') %>
-              </label>
-
-              <div class="controls">
-                <%= f.text_field :username, :required => true, :pattern => "[A-Za-z0-9_.@\-]+", :autocapitalize => "off", :autocorrect => "off", :autofocus => true, :style => "width: 60%;" %>
-              </div>
-          </div>
-
-          <div class="control-group">
-            <label class="control-label" for="user_password" style="width: 40%; text-align: center; padding: 10px 0; overflow: hidden">
-                <%= t('registrations.new.password') %>
-            </label>
-
-            <div class="controls">
-                <%= f.password_field :password, :placeholder => "••••••••", :required => true, :style => "width: 60%;" %>
-            </div>
-          </div>
-        </fieldset>
-
-        <%= f.hidden_field :remember_me, :value => 1 %>
-        <%= f.submit t('devise.sessions.new.sign_in'), :class => "new-btn" %>
-  <% end %>
-
-  <% if display_password_reset_link? %>
-      <br/>
-      <%= link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link" %>
-  <% end %>
-
-  <% if display_registration_link? %>
-      <br/>
-      <br/>
-      <br/>
-      <%= link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name) %>
-  <% end %>
-</div>

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)