new login page. kept the old one for safe keeping.

app/assets/javascripts/widgets/flash-messages.js

@@ -8,13 +8,7 @@
 
     this.animateMessages = function() {
       var flashMessages = $("#flash_notice, #flash_error, #flash_alert");
-      flashMessages.animate({
-        top: 0
-      }, 400).delay(4000).animate({
-        top: -100
-      }, 400, function(){
-        $(this).remove();
-      });
+      flashMessages.addClass("expose")
     };
 
     this.render = function(result) {

app/assets/stylesheets/_mixins.css.scss

@@ -78,10 +78,16 @@ $default-border-radius: 3px;
 }
 
 @mixin transition($type, $speed:$speed, $easing:$easing){
-  -webkit-transition: $type $speed $easing;
-  -moz-transition: $type $speed $easing;
-  -o-transition: $type $speed $easing;
-  transition: $type $speed $easing;
+  -webkit-transition : $type $speed $easing;
+     -moz-transition : $type $speed $easing;
+       -o-transition : $type $speed $easing;
+          transition : $type $speed $easing;
+}
+
+@mixin animate($name, $speed:$speed, $occurances:"") {
+  -webkit-animation : $name $speed $occurances;
+     -moz-animation : $name $speed $occurances;
+      -ms-animation : $name $speed $occurances;
 }
 
 @mixin animation($name, $speed:0.2s, $easing:ease-in-out) {

app/assets/stylesheets/new-templates.css.scss

@@ -2,6 +2,9 @@
 @import 'new_styles/new_mixins';
 @import 'new_styles/variables';
 
+/* core */
+@import 'new_styles/flash_messages';
+
 /* custom animations */
 @import 'new_styles/animations';
 

app/assets/stylesheets/new_styles/_flash_messages.scss

@@ -0,0 +1,48 @@
+/* animations */
+@-webkit-keyframes expose {
+	0%   { top : -100px; }
+	15%  { top : 0; }
+	85%  { top : 0; }
+	100% { top : -100px; }
+}
+@-moz-keyframes expose {
+	0%   { top : -100px; }
+	15%  { top : 0; }
+	85%  { top : 0; }
+	100% { top : -100px; }
+}
+@-ms-keyframes expose {
+	0%   { top : -100px; }
+	15%  { top : 0; }
+	85%  { top : 0; }
+	100% { top : -100px; }
+}
+
+/* styles */
+#flash_alert,
+#flash_notice,
+#flash_alert {
+  position : fixed;
+  top : -100px;
+  left : 0;
+  width : 100%;
+
+  text-align : center;
+
+  &.expose {
+    @include animation(expose, 4s)
+  }
+
+  .message {
+    @include border-radius(6px);
+    @include box-shadow(0, 1px, 4px, rgba(0,0,0,0.8));
+
+    display : inline-block;
+    padding : 10px 20px 8px 20px;
+    margin-top : 10px;
+    background-color : rgba(0,0,0,0.8);
+    color : #fff;
+
+    border : 1px solid rgba(255,255,255,0.7);
+  }
+}

app/assets/stylesheets/new_styles/_forms.scss

@@ -1,3 +1,10 @@
+/* autocomplete colors */
+input:-webkit-autofill{
+  background-color: #fff !important;
+  background-image: none !important;
+}
+
+
 form.block-form {
   display : inline-block;
 

app/assets/stylesheets/new_styles/_login.scss

@@ -2,9 +2,7 @@
   position : absolute;
   top : 0;
   left : 0;
-  margin-top : 200px;
-  //background-color : #afc652;
-  min-height : 100%;
+  padding-top : 200px;
   min-width : 100%;
 
   //color : #fff;
@@ -21,4 +19,10 @@
     color : #ddd;
     text-shadow : 0 1px 0 #fff;
   }
+
+  #forgot_password_link {
+    margin : 40px;
+    color : #999;
+    clear : all;
+  }
 }

app/controllers/sessions_controller.rb

@@ -3,4 +3,7 @@
 #   the COPYRIGHT file.
 
 class SessionsController < Devise::SessionsController
+
+  layout "post", :only => [:new]
+
 end

app/views/sessions/new.html.erb

@@ -1,10 +1,13 @@
-<div id="login">
+<% content_for :page_title do %>
+    <%= "Diaspora* / #{t('devise.sessions.new.sign_in')}" %>
+<% end %>
 
+<div id="login">
   <h1 id="huge-text">
     DIASPORA
   </h1>
 
-  <%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => "form-horizontal block-form", :autocomplete => 'off'}) do |f| %>
+  <%= 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">
@@ -12,7 +15,7 @@
               </label>
 
               <div class="controls">
-                <%= f.text_field :username, :required => true, :pattern => "[A-Za-z0-9_]+" %>
+                <%= f.text_field :username, :required => true, :pattern => "[A-Za-z0-9_]+", :autocapitalize => "off", :autocorrect => "off" %>
               </div>
           </div>
 
@@ -28,5 +31,17 @@
         </fieldset>
 
         <%= f.submit "Sign In", :class => "new-btn" %>
-    <% end %>
+  <% 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/users/logged_out.haml

@@ -1,29 +0,0 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
--#   licensed under the Affero General Public License version 3 or later.  See
--#   the COPYRIGHT file.
-
-- content_for :head do
-  :css
-    body { margin-top: 220px; }
-
-#grey_header
-  .row
-    %h3
-      = t('.signed_out')
-
-    %h1
-      = t('.go_mobile')
-
-.container{:style => 'text-align:center;'}
-  .row.mobile_row
-    = image_tag 'diaspora_mobile_screens.png', :width => 480, :height => 300
-
-  .row
-    %h4
-      = t('.simply_visit')
-      %strong
-        = link_to AppConfig[:pod_url], stream_path
-      = t('.on_your_mobile_device')
-
-    %p.dull
-      = t('.works_on_modern')