From a73c4bd586e8ba754e25b899d5943b0cbbae4394 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 7 Jul 2014 12:31:03 +0200 Subject: [PATCH] add login via authentication providers --- app/assets/images/facebook.svg | 1 + app/assets/images/google.svg | 1 + app/assets/images/twitter.svg | 1 + .../javascripts/app/views/login.jst.eco | 41 ++++++---- .../stylesheets/{zzz.css => zzz.css.erb} | 80 ++++++++++++++++++- 5 files changed, 105 insertions(+), 19 deletions(-) create mode 100644 app/assets/images/facebook.svg create mode 100644 app/assets/images/google.svg create mode 100644 app/assets/images/twitter.svg rename app/assets/stylesheets/{zzz.css => zzz.css.erb} (92%) diff --git a/app/assets/images/facebook.svg b/app/assets/images/facebook.svg new file mode 100644 index 000000000..8169576b4 --- /dev/null +++ b/app/assets/images/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/google.svg b/app/assets/images/google.svg new file mode 100644 index 000000000..fd0188ca2 --- /dev/null +++ b/app/assets/images/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/twitter.svg b/app/assets/images/twitter.svg new file mode 100644 index 000000000..3c466d6cb --- /dev/null +++ b/app/assets/images/twitter.svg @@ -0,0 +1 @@ + \ 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 bc1f00e5c..0f7de87ef 100644 --- a/app/assets/javascripts/app/views/login.jst.eco +++ b/app/assets/javascripts/app/views/login.jst.eco @@ -21,6 +21,30 @@ <%- @T( 'Forgot password?' ) %> <% end %> + + <% if true or !_.isEmpty( @auth_providers ): %> +
+ <%- @T( 'or sign in using' ) %> +
+ +
+ + + + + Google+ + + +
+ <% end %> @@ -36,21 +60,4 @@ <%- @T( 'Register as a new customer' ) %>

<% end %> - - <% if !_.isEmpty( @auth_providers ): %> -
- -
-

--- <%- @T( 'or' ) %> ---

-
- -
-

<%- @T( 'Sign in using' ) %>

- -
- <% end %> diff --git a/app/assets/stylesheets/zzz.css b/app/assets/stylesheets/zzz.css.erb similarity index 92% rename from app/assets/stylesheets/zzz.css rename to app/assets/stylesheets/zzz.css.erb index 202212f01..5f906938a 100644 --- a/app/assets/stylesheets/zzz.css +++ b/app/assets/stylesheets/zzz.css.erb @@ -579,7 +579,7 @@ label { .hero-unit { width: 500px; - margin: 10px 0 25px; + margin: 10px 0; padding: 23px 25px; border: 1px solid #e5f0f5; color: inherit; @@ -605,13 +605,14 @@ label { } .login p { + margin: 10px 0; max-width: 400px; color: hsl(210,8%,42%); text-align: center; } .login hr { - margin: 12px 0 23px; + margin: 10px 0; border-top-color: rgba(255,255,255,.15); width: 100%; max-width: 400px; @@ -687,6 +688,81 @@ ol.tabs li { text-overflow: ellipsis } +.separator { + margin: 20px 0; + position: relative; + text-align: center; +} + + .separator:before { + content: ""; + position: absolute; + width: 100%; + height: 1px; + top: 50%; + left: 0; + margin-top: -1px; + background: #e6e6e6; + } + + .separator-text { + padding: 0 10px; + color: #999; + font-size: 12px; + letter-spacing: 0.1em; + text-transform: uppercase; + background: white; + display: inline-block; + position: relative; + } + +.auth_provider { + padding: 9px 7px 8px; + color: white; + line-height: 22px; + text-align: center; + border-radius: 2px; +} + + .auth_provider:not(:last-child) { + margin-right: 8px; + } + + .auth_provider:hover { + color: white; + cursor: pointer; + text-decoration: none; + } + + .auth_provider.facebook { + background-color: #4f699c; + } + + .auth_provider.google { + background-color: #d8543c; + } + + .auth_provider.twitter { + background-color: #2eaee1; + } + +.provider_icon { + width: 29px; + height: 22px; +} + + .facebook .provider_icon { + background-image: url(<%= asset_path "facebook.svg" %>); + } + + .google .provider_icon { + background-image: url(<%= asset_path "google.svg" %>); + } + + .twitter .provider_icon { + background-image: url(<%= asset_path "twitter.svg" %>); + } + /* * removed margin of forms to not break the layout with submit buttons within
area e. g. for modal dialogs */