Merge pull request #86 from zach-chai/login_updates

Login updates

app/assets/stylesheets/landing.scss

@@ -21,6 +21,10 @@
     width: 200px;
     padding: 0;
   }
+  .login-text {
+    font-size: 16px;
+    padding-right: 5px;
+  }
 }
 
 .rooms {

app/assets/stylesheets/sessions.scss

@@ -0,0 +1,7 @@
+.login {
+  .center-panel {
+    .center-panel-size {
+      max-width: 400px
+    }
+  }
+}

app/assets/stylesheets/shared.scss

@@ -26,7 +26,7 @@ html, body {
   background: #ffffff;
 }
 
-.app-background {
+.background {
   height: 350px;
   width: 100%;
   background: asset-url('greenlight_background');
@@ -35,6 +35,10 @@ html, body {
   background-repeat: no-repeat;
 }
 
+body[data-controller=landing].app-background {
+  @extend .background;
+}
+
 body[data-controller=landing][data-action=rooms].app-background {
   background-image: asset-url('bg_personal_room');
 }
@@ -61,14 +65,14 @@ body[data-controller=landing][data-action=rooms].app-background {
   padding: 20px;
 }
 
-.center-panel {
+.center-block {
-  .center-block {
   float: none;
-  }
+}
+.center-panel {
   .center-panel-size {
     max-width: 900px
   }
-  .center-panel-conent-size {
+  .center-panel-content-size {
     max-width: 800px;
   }
 
@@ -114,3 +118,42 @@ body[data-controller=landing][data-action=rooms].app-background {
 .popover {
   max-width: none;
 }
+
+a.signin-link {
+  &:hover, &:focus {
+    cursor: pointer;
+    text-decoration: none;
+  }
+}
+
+.signin-link {
+  .signin-icon {
+    vertical-align: middle;
+    width: 35px;
+    height: 35px;
+  }
+  .signin-button {
+    background: white;
+    width: 250px;
+    border: thin solid #888;
+    border-radius: 2px;
+    white-space: nowrap;
+    padding: 5px;
+    margin-bottom: 14px;
+  }
+  .signin-icon-wrapper {
+    display: inline-block;
+    width: 40px;
+  }
+  .signin-text-wrapper {
+    display: inline-block;
+    width: 200px;
+  }
+  .signin-text {
+    font-family: 'Roboto', sans-serif;
+    vertical-align: middle;
+    font-size: 14px;
+    font-weight: bold;
+    color: #444;
+  }
+}

app/controllers/sessions_controller.rb

@@ -15,6 +15,10 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
 class SessionsController < ApplicationController
+
+  def new
+  end
+
   def create
     @user = User.from_omniauth(request.env['omniauth.auth'])
     session[:user_id] = @user.id

app/views/landing/_rooms_center_panel.html.erb

@@ -28,7 +28,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 <% end %>
 
 <%= render layout: 'shared/center_panel' do %>
-  <div class="center-block center-panel-conent-size col-xs-12">
+  <div class="center-block center-panel-content-size col-xs-12">
     <% if admin? %>
       <%= render 'shared/meeting_url', hidden: false %>
     <% else %>

app/views/landing/index.html.erb

@@ -33,12 +33,18 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
     <div class="center-panel-wrapper">
       <%= render layout: 'shared/center_panel' do %>
-        <div class="center-block center-panel-conent-size col-xs-12">
+        <div class="center-block center-panel-content-size col-xs-12">
           <%= render 'shared/meeting_url', hidden: false %>
           <%= render 'shared/join_form' %>
         </div>
       <% end %>
     </div>
 
+    <div class="center-block col-xs-6 login">
+      <div class="text-center">
+        <span class="login-text"><%= t('login_description') %></span> <%= link_to 'Login', '/users/login', class: 'btn btn-lg btn-primary' %>
+      </div>
+    </div>
+
   </div>
 </div>

app/views/landing/meetings.html.erb

@@ -36,7 +36,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
     <div class="center-panel-wrapper">
       <%= render layout: 'shared/center_panel' do %>
-        <div class="center-block center-panel-conent-size col-xs-12">
+        <div class="center-block center-panel-content-size col-xs-12">
           <%= render 'shared/meeting_url', hidden: true %>
           <%= render 'shared/join_form' %>
         </div>

app/views/layouts/application.html.erb

@@ -23,6 +23,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
   </head>
 
   <body class="app-background" data-controller="<%= params[:controller] %>" data-action="<%= params[:action] %>">
@@ -35,35 +36,9 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
       <span class="logo-wrapper pull-left">
         <%= link_to image_tag("bbb-logo.png", :alt => "BigBlueButton", :class => "logo"), root_path %>
       </span>
-      <span class="signup pull-right">
+      <% unless params[:controller] == 'sessions' && params[:action] == 'new' %>
-        <% if current_user %>
+        <%= render 'shared/signup' %>
-          <% if !@user %>
-            <%= link_to current_user.name, current_user.room_url %> |
-          <% else %>
-            <%= current_user.name %> |
       <% end %>
-          <%= link_to t('logout'), user_logout_url %>
-        <% elsif @user %>
-          <%= t('are_you', name: @user.username) %> |
-          <%= link_to t('login'), "/auth/#{@user.provider}" %>
-        <% else %>
-          <% if omniauth_providers_configured.present? %>
-            <span class="signup-description hidden-xs">
-              <%= t('oauth_signup') %>
-            </span>
-          <% end %>
-          <% if omniauth_providers_configured(:twitter) %>
-            <%= link_to('/auth/twitter', :class => "btn icon btn-lg btn-social-icon btn-twitter") do %>
-              <span class="fa fa-twitter"></span>
-            <% end %>
-          <% end %>
-          <% if omniauth_providers_configured(:google) %>
-            <%= link_to('/auth/google', :class => "btn icon btn-lg btn-social-icon btn-google") do %>
-              <span class="fa fa-google"></span>
-            <% end %>
-          <% end %>
-        <% end %>
-      </span>
     </div>
     <!-- End of Header -->
 

app/views/sessions/new.erb

@@ -0,0 +1,43 @@
+<% content_for :title do %>
+  <div class="title">
+    <h2><%= t('log_in') %></h2>
+  </div>
+<% end %>
+
+<div class="page-wrapper login">
+  <div class="container-fluid">
+
+    <div class="center-panel-wrapper">
+      <%= render layout: 'shared/center_panel' do %>
+        <div class="center-block center-panel-content-size col-xs-12">
+          <% if omniauth_providers_configured(:twitter) %>
+            <%= link_to '/auth/twitter', class: "signin-link signin-link-twitter" do %>
+              <div class="signin-button center-block">
+                <div class="signin-icon-wrapper">
+                  <%= image_tag("twitter_signin_logo.png", alt: "T", class: "signin-icon") %>
+                </div>
+                <div class="signin-text-wrapper text-center">
+                  <span class="signin-text"><%= t('signin_text', provider: 'Twitter') %></span>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+          <% if omniauth_providers_configured(:google) %>
+              <%= link_to '/auth/google', class: "signin-link signin-link-google" do %>
+                <div class="signin-button center-block">
+                  <div class="signin-icon-wrapper">
+                    <%= image_tag("g-normal.png", alt: "G", class: "signin-icon") %>
+                  </div>
+                  <div class="signin-text-wrapper text-center">
+                    <span class="signin-text"><%= t('signin_text', provider: 'Google') %></span>
+                  </div>
+                </div>
+              <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+
+  </div>
+</div>

app/views/shared/_signup.html.erb

@@ -0,0 +1,13 @@
+<span class="signup pull-right">
+  <% if current_user %>
+    <% if !@user %>
+      <%= link_to current_user.name, current_user.room_url %> |
+    <% else %>
+      <%= current_user.name %> |
+    <% end %>
+    <%= link_to t('logout'), user_logout_url %>
+  <% elsif @user %>
+    <%= t('are_you', name: @user.username) %> |
+    <%= link_to t('login'), "/auth/#{@user.provider}" %>
+  <% end %>
+</span>

config/locales/en-us.yml

@@ -89,7 +89,6 @@ en-US:
       phrase1: "One of your recordings has just been made available."
       phrase2: "Access the following website to view it and publish to other users: %{url}"
       subject: "Your recording is ready!"
-  oauth_signup: Signup for customized meetings
   past_recordings: Past Recordings
   footer_html: "%{greenlight_link} build %{version}, Powered by %{bbb_link}"
   presentation: Presentation
@@ -97,6 +96,8 @@ en-US:
   published: Published
   return_to_room: Return to your personal room
   session_url_explanation: The meeting will be taking place using the following URL
+  signin_text: Log in with %{provider}
+  login_description: Login for customized sessions
   start: Start
   start_meeting: Start Meeting
   your_personal_room: Your Personal Room

config/routes.rb

@@ -19,6 +19,7 @@ Rails.application.routes.draw do
   mount ActionCable.server => '/cable'
 
   resources :users, only: [:edit, :update]
+  get '/users/login', to: 'sessions#new'
   get '/users/logout', to: 'sessions#destroy', as: :user_logout
 
   match '/auth/:provider/callback', to: 'sessions#create', via: [:get, :post]