diff --git a/app/assets/images/google-logo.png b/app/assets/images/google-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa00573300e89d5f872f17733daf30a815ef90ff
Binary files /dev/null and b/app/assets/images/google-logo.png differ
diff --git a/app/assets/images/google_logo.png b/app/assets/images/google_logo.png
deleted file mode 100644
index b8d4958e4edd1f40dbfafe836a86227eb938e160..0000000000000000000000000000000000000000
Binary files a/app/assets/images/google_logo.png and /dev/null differ
diff --git a/app/assets/images/office365-logo.jpeg b/app/assets/images/office365-logo.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e020ddbfc660814709f31e9a3ef411666ea64681
Binary files /dev/null and b/app/assets/images/office365-logo.jpeg differ
diff --git a/app/assets/images/twitter-logo.png b/app/assets/images/twitter-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5446fac5bc4c10f85dd99e89b60152925381600
Binary files /dev/null and b/app/assets/images/twitter-logo.png differ
diff --git a/app/assets/images/twitter_logo.png b/app/assets/images/twitter_logo.png
deleted file mode 100644
index 17d213ba5cacd67cdf653b8a86f3b9edd352e29b..0000000000000000000000000000000000000000
Binary files a/app/assets/images/twitter_logo.png and /dev/null differ
diff --git a/app/assets/images/windows-logo.png b/app/assets/images/windows-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c68685ba0331ded3203d7de1684785654d353fe
Binary files /dev/null and b/app/assets/images/windows-logo.png differ
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 644eeeb6d7868faa1b177d6841e447323b03f149..87fb2c792c91fd9add9ccb484bc0bd1039f2a046 100755
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -58,10 +58,10 @@
font-weight: normal;
}
-
-.customBtn-google {
- display: inline-block;
- background: #4688F1;
+.customBtn {
+ display: block;
+ text-align: center;
+ background: #cccccc;
color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
-webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
@@ -69,6 +69,7 @@
white-space: nowrap;
border-radius: 2px;
border: 1px solid transparent;
+ margin-bottom:20px;
&:hover {
cursor: pointer;
color: #ffffff;
@@ -93,5 +94,53 @@
font-family: 'Roboto', sans-serif;
}
+ .customBtn-image {
+ background: #ffffff;
+ background-size: 18px 18px;
+ padding:10px 10px 10px 10px;
+ }
+}
+
+.customBtn-google {
+ @extend .customBtn;
+ background: #4688f1;
+
+ .customBtn-image {
+ background: #ffffff image-url("google-logo.png") no-repeat left top;
+ background-size: 18px 18px;
+ padding:10px 10px 10px 10px;
+ }
+}
+
+.customBtn-twitter {
+ @extend .customBtn;
+ background: #1da1f2;
+
+ .customBtn-image {
+ background: #ffffff image-url("twitter-logo.png") no-repeat left top;
+ background-size: 18px 18px;
+ padding:10px 10px 10px 10px;
+ }
+}
+
+.customBtn-microsoft_office365 {
+ @extend .customBtn;
+ background: #f65314;
+ .customBtn-image {
+ background: #ffffff image-url("office365-logo.jpeg") no-repeat left top;
+ background-size: 18px 18px;
+ padding:10px 10px 10px 10px;
+ }
+}
+
+.customBtn-microsoft_windows {
+ @extend .customBtn;
+ background: #00a1f1;
+
+ .customBtn-image {
+ background: #ffffff image-url("windows-logo.png") no-repeat left top;
+ background-size: 18px 18px;
+ padding:10px 10px 10px 10px;
+ }
}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index a4078634623eeca3da24e854022bc13e82432ceb..7283d93ed4bfb6aa1eb923cdf4f8e5913c0fa996 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -28,7 +28,7 @@ module ApplicationHelper
# Determines which providers can show a login button in the login modal.
def iconset_providers
- configured_providers & [:google, :twitter]
+ configured_providers & [:google, :twitter, :microsoft_office365]
end
# Generates the login URL for a specific provider.
diff --git a/app/views/shared/modals/_login_modal.html.erb b/app/views/shared/modals/_login_modal.html.erb
index 6595d54abb7f75ddf2c55247445efde22c568bde..a0fa176dd77e617dffa540bab1767428c746c981 100644
--- a/app/views/shared/modals/_login_modal.html.erb
+++ b/app/views/shared/modals/_login_modal.html.erb
@@ -21,32 +21,15 @@
<div class="card-title">
<h3><%= t("login") %></h3>
</div>
-
<% unless iconset_providers.length.zero? %>
-
- <% if configured_providers.include? :google %>
- <% provider = :google %>
+ <% iconset_providers.each do |provider| %>
<%= link_to omniauth_login_url(provider), class: "customBtn-#{provider}" do %>
- <span class="customBtn-icon">
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
- </span>
- <span class="customBtn-text"><%= t("modal.login.with", provider: provider.capitalize) %></span>
- <% end %>
- <% end %>
-
- <% if configured_providers.include? :twitter %>
- <% provider = :twitter %>
- <%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
- <i class="fab fa-<%= provider %>"></i> <%= t("modal.login.with", provider: provider.capitalize) %>
- <% end %>
- <% end %>
-
- <% if configured_providers.include? :microsoft_office365 %>
- <%= link_to omniauth_login_url(:microsoft_office365), class: "btn btn-pill btn-primary btn-block" do %>
- <i class="fab fa-windows"></i> <%= t("modal.login.with", provider: "Office365") %>
+ <span class="customBtn-icon">
+ <img class="customBtn-image"></img>
+ </span>
+ <span class="customBtn-text"><%= t("modal.login.with", provider: t("provider.#{provider}")) %></span>
<% end %>
<% end %>
-
<div class="or-line my-6">
<div>
<span class="text-uppercase">
@@ -55,7 +38,6 @@
</div>
</div>
<% end %>
-
<%= form_for(:session, url: create_session_path) do |f| %>
<div class="form-group">
<div class="input-icon">
@@ -65,7 +47,6 @@
<%= f.text_field :email, class: "form-control", placeholder: t("email"), value: "" %>
</div>
</div>
-
<div class="form-group">
<div class="input-icon">
<span class="input-icon-addon">
@@ -74,7 +55,6 @@
<%= f.password_field :password, class: "form-control", placeholder: t("password"), value: "" %>
</div>
</div>
-
<div class="form-footer">
<%= f.submit t("login"), class: "btn btn-outline-primary btn-block btn-pill" %>
</div>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 2247a4bfbd98ac68940a1210825609d01bc524b2..ae03bb29519beff2f38896da3ea49b96d7afc800 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -21,31 +21,15 @@
<h4 class="mt-2"><%= t("signup.subtitle") %></h4>
</div>
<div class="card-body background">
- <% unless configured_providers.length.zero? %>
-
- <% if configured_providers.include? :google %>
- <% provider = :google %>
+ <% unless iconset_providers.length.zero? %>
+ <% iconset_providers.each do |provider| %>
<%= link_to omniauth_login_url(provider), class: "customBtn-#{provider}" do %>
<span class="customBtn-icon">
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
+ <img class="customBtn-image"></img>
</span>
- <span class="customBtn-text"><%= t("signup.with", provider: provider.capitalize) %></span>
- <% end %>
- <% end %>
-
- <% if configured_providers.include? :twitter %>
- <% provider = :twitter %>
- <%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
- <i class="fab fa-<%= provider %>"></i> <%= t("signup.with", provider: provider.capitalize) %>
+ <span class="customBtn-text"><%= t("signup.with", provider: t("provider.#{provider}")) %></span>
<% end %>
<% end %>
-
- <% if configured_providers.include? :microsoft_office365 %>
- <%= link_to omniauth_login_url(:microsoft_office365), class: "btn btn-pill btn-primary btn-block" do %>
- <i class="fab fa-windows"></i> <%= t("signup.with", provider: "Office365") %>
- <% end %>
- <% end %>
-
<div class="or-line my-3">
<div>
<span class="text-uppercase" style="background-color: #F5F7FB;">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b18f3eea0d70fe2f7d193a7b09bc7b939fe1541f..9b1c488f0eb5bb0b7aa56c44176ab008e37efd21 100755
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -100,6 +100,10 @@ en:
with: Sign in with %{provider}
omniauth_error: An error occured while authenticating with omniauth. Please try again or contact an administrator!
password: Password
+ provider:
+ google: Google
+ microsoft_office365: Office 365
+ twitter: Twitter
recording:
email: Email Recording
no_recordings: This room has no %{inject}recordings.