From 90579487505e917993f72a4c1665f57e57fd6f48 Mon Sep 17 00:00:00 2001
From: Zachary Chai <zachary.chai@blindsidenetworks.com>
Date: Fri, 20 Jan 2017 14:34:30 -0500
Subject: [PATCH] oauth signin buttons per provider spec

---
 app/assets/images/g-normal.png            | Bin 0 -> 771 bytes
 app/assets/images/twitter_signin_logo.png | Bin 0 -> 1226 bytes
 app/assets/stylesheets/sessions.scss      |   5 +--
 app/assets/stylesheets/shared.scss        |  39 ++++++++++++++++++++++
 app/views/layouts/application.html.erb    |   4 +++
 app/views/sessions/new.erb                |  31 ++++++++++++++++-
 app/views/shared/_signup.html.erb         |  18 +---------
 config/locales/en-us.yml                  |   2 +-
 8 files changed, 76 insertions(+), 23 deletions(-)
 create mode 100644 app/assets/images/g-normal.png
 create mode 100644 app/assets/images/twitter_signin_logo.png

diff --git a/app/assets/images/g-normal.png b/app/assets/images/g-normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8d4958e4edd1f40dbfafe836a86227eb938e160
GIT binary patch
literal 771
zcmV+e1N{7nP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-~to?5HFrM4T1mw0+2~W
zK~z}7?UqkSlW`cwKkxgxHl5Se{F6CFk(QKVsc1!pS)L;3&>?R@CPEMqg>@07Lp6d9
zdGioL9Xcps9ZaMSdI+*Z`G=I1DPuUX%`vz3|LrhpyhwAprI$Uo-;eM6e82Da_xzsU
zBgnEWvx_0J%aIn47O?9AGPe3baBddg>mfo57Q!|waxj2o$VXLu6m@eed+LvGDW8yN
z9|+r*ahrPye*P5ykE&|O>FPl$Do&k%;OrEx?mNh9j)an`Y8%j-`%)tyyt;z3y$yNY
zt=N~0rDRl?kRuU7-{y(ftWgIJR+4M(L)7J@rUu;R9tF9WUqJSaF4QNQ6gdC*dwe6q
z=<fC=OunfDvU39OvrBm28X+tq8uHLT=|?(Hyfe2Tviux%jRR@_FFZr#Xs=#RDfy-j
zgg(@QXF4h-WI%P!iXce}%!6TnT!K?3iKfboZPtKqDR%aTLmS8e#->AYQ)H`&E8xF(
z!ayjQTc9Zc&rH+|?*f^TFp{Wr!MIOQ_KYytU9nTuYlS3=P*;!WnPEPZ!#&4gIu^${
zU*4?140L8G)~_amJRJ@EU6&ff?LS75!ZzOcO1QSxge{__@5>9U>-K-*U0#{NkHJ`l
z0}U0@_62D2S{Tz_AwV?As?SO1yKcs9lN+#e&INA1{DI9Gv;S<BL~fRlTq|Dj{^at=
zE!;tmV!t%I2-DtjBtc}+ZR4x+J3>T*#@>O-TZdK+{q30)=8DNbMpLWv+@5%Z!|zI{
z@(cYJxqrHiV`Wlm29oML69cUesVg|LDYi^k%;O6u6C&TzJn$!G9To;HqgY%^Sl5^F
zhXWWida4X2T8xdHF*YI!Vrp7(dMHf`NDJ7B_zi9K_6JNx^qc?y002ovPDHLkV1mA`
BTSx!^

literal 0
HcmV?d00001

diff --git a/app/assets/images/twitter_signin_logo.png b/app/assets/images/twitter_signin_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..17d213ba5cacd67cdf653b8a86f3b9edd352e29b
GIT binary patch
literal 1226
zcmeAS@N?(olHy`uVBq!ia0vp^${@_a3?wz#owI=yOS+@4BLl<6e(pbstU$g(vPY0F
z14ES>14Ba#1H&(%P{RubhEf9thF1v;3|2E37{m+a><YADU|_rz;1l8sR3N+X(<mBd
zApnfl>!x$0fYh9lAirP+1_9T!2o)wqZYC)s)7{_y-Y+mJO<_#B?x1w`$NRG`{LS}c
z*lYe=nJQNNWxgpZ>!y90=C5C^Of*v5_rpu1=hxqNcRqfxEjaw{g;v0iGlG0;rZUJc
z{_xe4qwLbZ?YtGg-+S=1zWx8Vm4(H0&X0c!1Q;0^I5di{|NlN!SSV%o{%8OGUP<C)
zl+WM$;^+VWKcDZ(lV#x2@J!51@YLkW-FmnT=uXBYZ+91l4pvzYAcwug)7O>#A)^SN
zywLGgH-X8XQNh#2F~s8Z+w;zoSsVpeAJk>v-j)kNPx|l9dU3B~<*R##?>(2*-tXlx
zN%22-LP}0jRvI6-w{`(*wzPxdwz6+e9=v$+=Fuy*ck6ezFYkHq)OXj9AHROGe^8sy
z)Z{#a$;s0%qQXTbe^JMx<fO+9KUj_iBnkbfofLc{J1eTnEp3|9rec<+J9}zk7cSVa
zBEnF0sZ8RsHG7(VgoJf2+vTPZ5`A2n^DFP7%p4)!S<z9Jm#*<0^my^&&8utXwtJNl
zdw>1<dh)=6RlLs5hm}o!c^^Bbex+sM$(1i9ThE+3yINgWM^AVCnssYWrz979+j8Ev
z-d+8heUpWamEA>&mdl$zcb{IJy=&**-SrhUmu|V1U;lji_3huspI<lM(yCbhl)cHM
z|CrQ_$D+XCQ!R0gC`m~yNwrEYN(E93Mh1rFx(0^2Mg}2<CRWCVR)!Y32Bua92AW!{
zBvCZv=BH$)RpQnVQ7*I;s6i5BLvVgtNqJ&XDuZK6ep0G}XKrG8YEWuoN@d~6RA2$a
Oz~JfX=d#Wzp$Pzw#5vOd

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/sessions.scss b/app/assets/stylesheets/sessions.scss
index 0890194e..bafc7bbc 100644
--- a/app/assets/stylesheets/sessions.scss
+++ b/app/assets/stylesheets/sessions.scss
@@ -1,10 +1,7 @@
 .login {
   .center-panel {
     .center-panel-size {
-      max-width: 600px
-    }
-    .center-panel-content-size {
-      max-width: 500px;
+      max-width: 400px
     }
   }
 }
diff --git a/app/assets/stylesheets/shared.scss b/app/assets/stylesheets/shared.scss
index 91c8ff89..9b4f9e6e 100644
--- a/app/assets/stylesheets/shared.scss
+++ b/app/assets/stylesheets/shared.scss
@@ -118,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;
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 38fdbedc..ca6114c9 100644
--- a/app/views/layouts/application.html.erb
+++ b/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,6 +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>
+      <% unless params[:controller] == 'sessions' && params[:action] == 'new' %>
+        <%= render 'shared/signup' %>
+      <% end %>
     </div>
     <!-- End of Header -->
 
diff --git a/app/views/sessions/new.erb b/app/views/sessions/new.erb
index 75ba8b10..b3dde2ed 100644
--- a/app/views/sessions/new.erb
+++ b/app/views/sessions/new.erb
@@ -1,10 +1,39 @@
+<% 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">
-          <%= render 'shared/signup' %>
+          <% 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>
diff --git a/app/views/shared/_signup.html.erb b/app/views/shared/_signup.html.erb
index 12840b19..0530e157 100644
--- a/app/views/shared/_signup.html.erb
+++ b/app/views/shared/_signup.html.erb
@@ -1,4 +1,4 @@
-<span class="signup">
+<span class="signup pull-right">
   <% if current_user %>
     <% if !@user %>
       <%= link_to current_user.name, current_user.room_url %> |
@@ -9,21 +9,5 @@
   <% 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>
diff --git a/config/locales/en-us.yml b/config/locales/en-us.yml
index 6fc4a6ab..09ff4814 100644
--- a/config/locales/en-us.yml
+++ b/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,7 @@ 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}
   signup_description: Login for customized sessions
   start: Start
   start_meeting: Start Meeting