From 5df05d7b5db13b2d4b6d0cfdc15c02fba7bd3c48 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Fri, 4 Jul 2014 12:20:39 +0200
Subject: [PATCH] style login, signup and getting_started

---
 .../app/controllers/getting_started.js.coffee |  4 +-
 .../app/controllers/login.js.coffee           |  4 +-
 .../app/controllers/signup.js.coffee          |  4 +-
 .../app/views/getting_started.jst.eco         | 41 ++++----
 .../javascripts/app/views/login.jst.eco       | 90 +++++++++--------
 .../javascripts/app/views/signup.jst.eco      | 17 ++--
 app/assets/stylesheets/layout.css             |  4 +
 app/assets/stylesheets/zzz.css                | 96 +++++++++++++++----
 8 files changed, 172 insertions(+), 88 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/getting_started.js.coffee b/app/assets/javascripts/app/controllers/getting_started.js.coffee
index 66a406226..7dd104a86 100644
--- a/app/assets/javascripts/app/controllers/getting_started.js.coffee
+++ b/app/assets/javascripts/app/controllers/getting_started.js.coffee
@@ -1,5 +1,5 @@
 class Index extends App.ControllerContent
-  className: 'getstarted fit vertical center justified'
+  className: 'getstarted fit'
 
   events:
     'submit form':   'submit',
@@ -144,6 +144,8 @@ class Index extends App.ControllerContent
 
     @el.find('.master_user').addClass('hide')
     @el.find('.agent_user').removeClass('hide')
+    @el.find('.tabs .tab.active').removeClass('active')
+    @el.find('.tabs .invite_agents').addClass('active')
 #    @el.find('.master_user').fadeOut('slow', =>
 #      @el.find('.agent_user').fadeIn()
 #    )
diff --git a/app/assets/javascripts/app/controllers/login.js.coffee b/app/assets/javascripts/app/controllers/login.js.coffee
index dcc87a325..e9e7e198b 100644
--- a/app/assets/javascripts/app/controllers/login.js.coffee
+++ b/app/assets/javascripts/app/controllers/login.js.coffee
@@ -1,5 +1,5 @@
 class Index extends App.ControllerContent
-  className: 'login fit vertical center justified'
+  className: 'login fit'
   
   events:
     'submit #login': 'login'
@@ -113,7 +113,7 @@ class Index extends App.ControllerContent
 
     # login shake
     @delay(
-      => @shake( @el.find('#login') ),
+      => @shake( @el.find('.hero-unit') ),
       600
     )
 
diff --git a/app/assets/javascripts/app/controllers/signup.js.coffee b/app/assets/javascripts/app/controllers/signup.js.coffee
index a3da92107..0a2ade213 100644
--- a/app/assets/javascripts/app/controllers/signup.js.coffee
+++ b/app/assets/javascripts/app/controllers/signup.js.coffee
@@ -1,5 +1,5 @@
 class Index extends App.ControllerContent
-  className: 'container signup'
+  className: 'signup fit'
 
   events:
     'submit form': 'submit'
@@ -30,7 +30,7 @@ class Index extends App.ControllerContent
     @html App.view('signup')()
 
     new App.ControllerForm(
-      el:        @el.find('#form-signup')
+      el:        @el.find('form')
       model:     App.User
       required:  'signup'
       autofocus: true
diff --git a/app/assets/javascripts/app/views/getting_started.jst.eco b/app/assets/javascripts/app/views/getting_started.jst.eco
index de5e87765..5c8c07e65 100644
--- a/app/assets/javascripts/app/views/getting_started.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started.jst.eco
@@ -1,22 +1,23 @@
-<div class="hero-unit">
-  <h1><%- @T( 'Getting started!' ) %><small></small></h1>
-  <ol class="horizontal tabs progress-tabs tabs-condensed">
-    <li class="tab contain-text active"><%- @T( 'Create Admin' ) %></li>
-    <li class="tab contain-text"><%- @T( 'Invite Agents' ) %></li>
-    <li class="tab contain-text"><%- @T( 'Configure Channels' ) %></li>
-  </ol>
-  <% if @master_user: %>
-  <div class="master_user hero-left">
-    <h2><%- @T( 'Create Admin' ) %></h2>
-    <form class="form-stacked" id="form-master">
-      <button type="submit" class="btn btn-primary submit"><%- @T( 'Next...' ) %></button>
-    </form>
-  </div>
-  <% end %>
-  <div class="agent_user hero-left hide">
-    <h2><%- @T( 'Invite Agents' ) %></h2>
-    <form class="form-stacked" id="form-agent">
-      <button type="submit" class="btn btn-primary submit"><%- @T( 'Send invitation' ) %></button>
-    </form>
+<div class="fullHeight vertical center justified">
+  <div class="hero-unit">
+    <ol class="horizontal tabs progress-tabs tabs-condensed">
+      <li class="create_admin tab contain-text active"><%- @T( 'Create Admin' ) %></li>
+      <li class="invite_agents tab contain-text"><%- @T( 'Invite Agents' ) %></li>
+      <li class="configure_channels tab contain-text"><%- @T( 'Configure Channels' ) %></li>
+    </ol>
+    <% if @master_user: %>
+    <div class="master_user hero-left">
+      <form class="form-stacked clearfix" id="form-master">
+        <button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Next Step' ) %></button>
+      </form>
+    </div>
+    <% end %>
+    <div class="agent_user hero-left hide">
+      <form class="form-stacked clearfix" id="form-agent">
+        <div class="form-controls">
+          <button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Send Invitation' ) %></button>
+        </div>
+      </form>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco
index ed27f8011..bc1f00e5c 100644
--- a/app/assets/javascripts/app/views/login.jst.eco
+++ b/app/assets/javascripts/app/views/login.jst.eco
@@ -1,46 +1,56 @@
-<p>Login with zeughaus.znuny.com:</p> <!-- how do you pass @T a parameter? @T( 'Login with %s', zeughaus.znuny.com )? -->
+<div class="fullHeight vertical center justified">
+  <p>Login with zeughaus.znuny.com:</p> <!-- how do you pass @T a parameter? @T( 'Login with %s', zeughaus.znuny.com )? -->
 
-<div class="hero-unit">
-  <form id="login">
-    <label for="username"><%- @Ti( 'Username / email' ) %></label>
-    <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
+  <div class="hero-unit">
+    <img class="logo" src="http://znuny.com/assets/logo_small.png" alt="<%= @C( 'product_name' ) %>">
+    <form id="login">
+      <div class="form-group">
+        <label for="username"><%- @Ti( 'Username / email' ) %></label>
+        <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
+      </div>
+   
+      <div class="form-group">
+        <label for="password"><%- @Ti( 'Password' ) %></label>
+        <input id="password" name="password" type="password" class="form-control"/>
+      </div>
 
-    <label for="password"><%- @Ti( 'Password' ) %></label>
-    <input id="password" name="password" type="password" class="form-control"/>
+      <div class="form-controls">
+        <button class="btn btn-primary" type="submit"><%- @T( 'Sign in' ) %></button>
 
-    <button class="btn btn-primary" type="submit"><%- @T( 'Sign in' ) %></button>
+        <% if @C('user_lost_password'): %>
+        <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
+        <% end %>
+      </div>
+    </form>
+  </div>
 
-    <div>
-      <% if @C('user_lost_password'): %>
-      <span class="small">&middot;</span>
-      <a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a>
-      <% end %>
+  <p>
+    <%- @T( "You're already registered with your E-Mail adress if you've been in touch with our support team.") %><br>
+    <%- @T( "You can request your password") %> <a href="#"><%- @T( "here") %></a>.
+  </p>
+
+  <% if @C('user_create_account'): %>
+  <hr>
+
+  <p>
+    <a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
+  </p>
+  <% end %>
+
+  <% if !_.isEmpty( @auth_providers ): %>
+  <hr>
+
+    <div class="col-12">
+      <p>--- <%- @T( 'or' ) %> ---</p>
     </div>
-  </form>
+
+    <div class="col-12">
+      <p><%- @T( 'Sign in using' ) %></p>
+      <ul>
+      <% for auth_provider in @auth_providers: %>
+        <li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
+      <% end %>
+      </ul>
+    </div>
+  <% end %>
 </div>
-
-<% if !_.isEmpty( @auth_providers ): %>
-  <div class="col-12">
-    <p>--- <%- @T( 'or' ) %> ---</p>
-  </div>
-
-  <div class="col-12">
-    <p><%- @T( 'Sign in using' ) %></p>
-    <ul>
-    <% for auth_provider in @auth_providers: %>
-      <li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
-    <% end %>
-    </ul>
-  </div>
-<% end %>
-
-<% if @C('user_create_account'): %>
-  <div class="col-12">
-    <p>--- <%- @T( 'or' ) %> ---</p>
-  </div>
-
-  <div class="col-12">
-    <p><%- @T( 'New to %s join today!',  @C( 'product_name' ) ) %></p>
-    <p><a href="#signup" class="btn btn-default"><%- @T( 'Sign up' ) %></a>
-  </div>
-<% end %>
diff --git a/app/assets/javascripts/app/views/signup.jst.eco b/app/assets/javascripts/app/views/signup.jst.eco
index a9b71599f..7c576c872 100644
--- a/app/assets/javascripts/app/views/signup.jst.eco
+++ b/app/assets/javascripts/app/views/signup.jst.eco
@@ -1,8 +1,11 @@
-<div class="hero-unit">
-  <h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %><small></small></h1>
-    <form class="form-group form-normal">
-      <p id="form-signup"></p>
-      <a href="#/" class="btn btn-default cancel"><%- @T( 'Cancel' ) %></a>
-      <button class="btn btn-primary submit"><%- @T( 'Create my account' ) %></button>
-    </form>
+<div class="fullHeight vertical center justified">
+  <div class="hero-unit">
+    <h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
+      <form>
+        <div class="form-controls">
+          <a class="subtle-link standalone pull-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+          <button class="btn btn-primary submit pull-right"><%- @T( 'Create my account' ) %></button>
+        </div>
+      </form>
+  </div>
 </div>
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index ee6e29538..a82278bde 100755
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -38,6 +38,10 @@
   flex-direction: column-reverse;
 }
 
+.fullHeight {
+  min-height: 100%;
+}
+
 .relative {
   position: relative;
 }
diff --git a/app/assets/stylesheets/zzz.css b/app/assets/stylesheets/zzz.css
index 8a72e043d..8f2db4426 100644
--- a/app/assets/stylesheets/zzz.css
+++ b/app/assets/stylesheets/zzz.css
@@ -1,3 +1,13 @@
+body {
+  font-family: "FiraSansOT", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.7;
+}
+
+#app > nav {
+  position: relative;
+  z-index: 1;
+}
+
 .glyphicon {
   font-size: 13px;
 }
@@ -404,7 +414,7 @@ label {
   font-size: 12px;
   font-weight: normal;
   letter-spacing: 0.1em;
-  padding-left: 2px;
+  padding: 0 2px;
 }
 
 .form-group .help-message {
@@ -434,6 +444,8 @@ label {
 
   .help-inline {
     color: red;
+    padding: 0 2px;
+    font-size: 13px;
   }
 
 .content {
@@ -443,6 +455,7 @@ label {
 
   .content.fit {
     background: #2c2d36;
+    z-index: 1;
   }
 
 .form-large {
@@ -479,10 +492,16 @@ label {
   margin-bottom: 4px;
 }
 
-/* to show checkboxes below in getting_started */
-.form-stacked .form-group .checkbox label {
-  display: block
+.form-stacked .checkbox label {
+  color: inherit;
+  font-size: 13px;
+  text-transform: inherit;
+  vertical-align: baseline;
+  letter-spacing: inherit;
+  display: block;
 }
+
+
 /*
  * bootstrap changes
  */
@@ -555,28 +574,61 @@ label {
 }
 
 /*
- *
+ * hero-unit (used on getstarted, login, signup)
  */
 
 .hero-unit {
   width: 500px;
-  padding: 3px 25px 23px;
+  margin: 10px 0 25px;
+  padding: 23px 25px;
   border: 1px solid #e5f0f5;
   color: inherit;
   background-color: white;
   border-radius: 6px;
+  box-shadow: 
+    0 8px 17px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.hero-unit p {
-  font-size: 16px;
-  line-height: 22px;
+  .hero-unit h1 {
+    margin-top: 0;
+  }
+
+.login .hero-unit {
+  width: 430px;
 }
 
-.hero-unit .small {
-  font-size: 12px;
-  line-height: 20px;
-  color: #999999;
-}
+  .login .logo {
+    margin: 30px auto;
+    display: block;
+  }
+
+  .login p {
+    max-width: 400px;
+    color: hsl(210,8%,42%);
+    text-align: center;
+  }
+
+  .login hr {
+    margin: 12px 0 23px;
+    border-top-color: rgba(255,255,255,.15);
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .login p a {
+    color: hsl(210,8%,54%);
+    text-decoration: underline;
+  }
+
+  .subtle-link {
+    color: rgba(0,0,0,.32);
+    text-decoration: underline;
+  }
+
+  .subtle-link:hover {
+    color: rgba(0,0,0,.5);
+  }
 
 ol.tabs {
   padding: 0;
@@ -588,6 +640,7 @@ ol.tabs li {
 }
 
 .tabs {
+  margin-bottom: 20px;
   color: #b8b8b8;
   border: 1px solid rgba(0,8,14,.08);
   border-radius: 3px;
@@ -603,16 +656,19 @@ ol.tabs li {
   }
 
   .tab {
+    height: 43px;
     padding: 10px;
     text-align: center;
     border-right: 1px solid rgba(0,8,14,.08);
     cursor: pointer;
     flex-grow: 1;
+    box-shadow: 0 2px rgba(0,0,0,.03);
   }
 
   .tab.active {
     color: white;
     background: #444a4f;
+    box-shadow: none;
   }
 
   .tab:first-child {
@@ -624,7 +680,6 @@ ol.tabs li {
     border-right: none;
   }
 
-
 .contain-text {
   white-space: nowrap;
   overflow: hidden;
@@ -638,6 +693,15 @@ form {
   margin: 0 0 0 0;
 }
 
+.form-controls {
+  margin-top: 10px;
+}
+
+form a.standalone {
+  line-height: 40px;
+  margin: 0 5px;
+}
+
 form.form-inline select,
 form.form-inline input[type="text"],
 form.form-inline input[type="password"] {
@@ -1080,7 +1144,7 @@ footer {
 
 .btn {
   font-size: 14px;
-  padding: 10px 14px 9px;
+  padding: 9px 14px;
 }
 
 .btn-primary {