Improvements to the new sign in flow

app/assets/javascripts/persona.js.coffee

@@ -1,7 +1,11 @@
 $ ->
-  $('#persona-button').click (event) ->
+  $('#persona-button, #log-in').click (event) ->
     event.preventDefault()
-    navigator.id.request { siteName: window.location.hostname }
+    navigator.id.request {
+      siteName: 'Asciinema',
+      backgroundColor: '#d95525',
+      siteLogo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wHGBMiFVqqanYAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVRo3u3KoQEAAAgDoP3/tBaD0WiATAJwVIsgCIIgCIIgCIIgCIIgCIIgCMKHADAafyL3ebnQxskAAAAASUVORK5CYII='
+    }
 
   if window.browserIdUser
     $('.session-info .logout').click (event) ->
@@ -12,8 +16,6 @@ $ ->
     loggedInUser: window.browserIdUser
 
     onlogin: (assertion) ->
-      console.log 'onlogin'
-
       if assertion
         form = $(
           "<form action='/auth/browser_id/callback'>" +
@@ -24,5 +26,4 @@ $ ->
         form.submit()
 
     onlogout: ->
-      console.log 'onlogout'
       window.location = '/logout'

app/assets/stylesheets/application.css

@@ -11,6 +11,8 @@
  *= require bootstrap
  *= require home
  *= require login
+ *= require users
+ *= require forms
  *= require asciicasts
  *= require terminal
  *= require player/colors

app/assets/stylesheets/forms.css.sass

@@ -0,0 +1,4 @@
+.field_with_errors
+  span.error
+    color: red
+    margin-left: 5px

app/assets/stylesheets/login.css.sass

@@ -1,4 +1,4 @@
-#login
+.login
   margin: 0
   padding: 0
 

app/assets/stylesheets/users.css.sass

@@ -0,0 +1,23 @@
+.new-user, .returning-user
+  float: left
+
+.new-user
+  width: 49%
+
+  .new_user
+    margin-top: 30px
+
+    .user_nickname
+      label
+        font-weight: bold
+
+      abbr
+        display: none
+
+.returning-user
+  width: 49%
+  border-left: 1px solid #bbb
+  box-sizing: border-box
+  -webkit-box-sizing: border-box
+  -moz-box-sizing: border-box
+  padding-left: 30px

app/views/layouts/_session_info.html.slim

@@ -10,4 +10,4 @@ ul.session-info
           a.logout href=logout_path Log out
   - else
     li
-      a href=login_path Log in
+      a#log-in href=login_path Sign in

app/views/sessions/new.html.erb

@@ -1,25 +0,0 @@
-<section class="supplimental">
-  <div class="wrapper">
-    <h1>Log In</h1>
-
-    <p>
-      We recommend logging in with your email using <%= link_to "Mozilla Persona", "https://login.persona.org/" %>.
-      Look <%= link_to "here", "https://developer.mozilla.org/en-US/docs/Persona" %> for more details.
-    </p>
-
-    <ul id="login">
-      <li><%= link_to image_tag('persona_sign_in_blue.png', :title => "Log in via Persona"), '#', :id => 'persona-button' %></li>
-    </ul>
-
-    <%# <p> %>
-    <%#   Or just log in with your GitHub or Twitter account: %>
-    <%# </p> %>
-
-    <%# <ul id="login"> %>
-    <%#   <li><%= link_to "Log in via Github", github_auth_path, :class => 'btn-auth btn-github' %1></li> %>
-    <%#   <li><%= link_to "Log in via Twitter", twitter_auth_path, :class => 'btn-auth btn-twitter' %1></li> %>
-    <%# </ul> %>
-  </div>
-
-  <div class="vertical-expander"></div>
-</section>

app/views/sessions/new.html.slim

@@ -0,0 +1,8 @@
+section.supplimental
+  .wrapper
+    h1 Log In
+
+    ul#login
+      li = link_to image_tag('email_sign_in_black.png', :title => "Sign in with your email"), '#', :id => 'persona-button'
+
+  .vertical-expander

app/views/users/new.html.slim

@@ -1,32 +1,38 @@
 section.supplimental
   .wrapper
-    p There is no account with email #{@user.email}.
 
-    h2 That's because I am here for the first time
+    .new-user
+      h2 New user?
 
-    h3 Pick your username:
+      p
+        ' Every Asciinema user gets a profile page at
+        br
+        a href="#"
+          | http://asciinema.org/~
+          strong username
+        ' . Pick a desired username below.
 
-    = simple_form_for @user, :url => user_path do |f|
-      = f.input :nickname, label: 'Username', required: true, input_html: { 'data-behavior' => 'focus' }
-      = f.button :submit
+      = simple_form_for @user, :url => user_path do |f|
+        p = f.input :nickname, label: 'Pick a username:', required: true, input_html: { 'data-behavior' => 'focus' }
+        p.actions = f.button :submit, 'Start recording'
 
-    hr
+    .returning-user
+      h2 Returning user?
 
-    /* p */
-    /*   |  We recommend logging in with your email using */ 
-    /*   = link_to "Mozilla Persona", "https://login.persona.org/" */
-    /*   | . Look */ 
-    /*   = link_to "here", "https://developer.mozilla.org/en-US/docs/Persona" */
-    /*   |  for more details. */ 
+      p
+        ' There is no account associated with the email
+        strong = @user.email
+        ' .
 
-    h2 That's because I've been logging in via Github/Twitter
+      p
+        ' However, if you have been previously signing in to Asciinema via
+        ' Github or Twitter then click a proper button below so we can locate
+        ' your existing account:
 
-    p
-      | If you have been previously logging in via Github or Twitter
-      | pls do it again. One time!
+      ul.login
+        li = link_to "Sign in via Github", github_auth_path, :class => 'btn-auth btn-github'
+        li = link_to "Sign in via Twitter", twitter_auth_path, :class => 'btn-auth btn-twitter'
 
-    ul.login
-      li = link_to "Log in via Github", github_auth_path, :class => 'btn-auth btn-github'
-      li = link_to "Log in via Twitter", twitter_auth_path, :class => 'btn-auth btn-twitter'
+      p Note: this is one-time task. You won't be asked to do it again.
 
   .vertical-expander

vendor/assets/stylesheets/auth-buttons.css.scss

@@ -47,7 +47,7 @@
     float: left;
     width: 22px;
     height: 22px;
-    background: url(auth-icons.png) no-repeat 99px 99px;
+    background: image-url("auth-icons.png") no-repeat 99px 99px;
 }
 
 /*