Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add login via authentication providers

Browse source
This commit is contained in:
Felix Niklas 2014-07-07 12:31:03 +02:00
parent e6d2e646f0
commit a73c4bd586
5 changed files with 105 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/images/facebook.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 29 22" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y1="0%" x2="0" y2="100%" id="0"><stop stop-color="#fff" offset="0%"/><stop stop-color="#e6eaf1" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="m0 17h29v5h-29v-5" fill="#778eba"/><path d="m17.919 22v-10.06h-2.919v-3.97h2.977v-4.04c0-2.084 1.598-3.935 4.052-3.935h4.971v3.808h-3.863c-1.071 0-1.193.038-1.193 1.033l-.008 3.132h3.552l-.386 3.97h-3.225l.101 10.06h-4.058" fill="url(#0)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 511 B

1
app/assets/images/google.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 29 22" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y1="0%" x2="0" y2="100%" id="0"><stop stop-color="#fff" offset="0%"/><stop stop-color="#fae7e3" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd" transform="translate(2)"><path d="m21.06 8.04v-3.044h-2.01v3.044h-3.044v1.911h3.044v3.044h2.01v-3.044h2.944v-1.911h-2.944" fill="#fdf4f2"/><path d="m11.12 12.664c-.606-.436-1.766-1.496-1.766-2.119 0-.73.205-1.09 1.288-1.949 1.11-.88 1.895-2.118 1.895-3.558 0-1.714-.752-3.384-2.163-3.935h2.127l1.502-1.102h-6.71c-3.01 0-5.839 2.314-5.839 4.995 0 2.739 2.051 4.95 5.111 4.95.213 0 .42-.004.622-.019-.199.386-.341.821-.341 1.273 0 .761.403 1.379.913 1.882-.385 0-.757.011-1.163.011-3.726 0-6.594 2.41-6.594 4.908 0 2.461 3.144 4 6.869 4 4.248 0 6.594-2.447 6.594-4.908 0-1.973-.573-3.155-2.346-4.428m-3.607-3.665c-1.633-.051-3.185-1.896-3.466-4.12-.282-2.225.813-3.928 2.445-3.878 1.632.051 3.185 1.836 3.466 4.061.281 2.225-.813 3.988-2.445 3.937m-1.226 12c-2.488 0-4.284-1.612-4.284-3.549 0-1.898 2.228-3.478 4.716-3.451.58.006 1.121.102 1.612.265 1.35.962 2.319 1.505 2.592 2.6.051.222.079.451.079.684 0 1.937-1.219 3.45-4.716 3.45" fill="url(#0)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
app/assets/images/twitter.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 29 22" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y1="0%" x2="0" y2="100%" id="0"><stop stop-color="#fff" offset="0%"/><stop stop-color="#e9f7fc" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="m24.17 4.163c1.017-.625 1.797-1.614 2.165-2.793-.951.579-2.01.999-3.127 1.225-.898-.981-2.178-1.594-3.594-1.594-2.719 0-4.924 2.261-4.924 5.05 0 .396.044.781.128 1.151-4.092-.211-7.72-2.221-10.149-5.275-.424.746-.667 1.613-.667 2.538 0 1.752.869 3.297 2.19 4.203-.807-.026-1.566-.253-2.23-.631-.001.021-.001.042-.001.063 0 2.446 1.697 4.487 3.95 4.951-.413.115-.848.177-1.297.177-.317 0-.626-.032-.926-.091.627 2.01 2.445 3.466 4.6 3.506-1.685 1.354-3.808 2.162-6.115 2.162-.397 0-.789-.024-1.175-.071 2.179 1.433 4.767 2.269 7.548 2.269 9.06 0 14.01-7.693 14.01-14.366 0-.219-.005-.437-.014-.653.962-.712 1.797-1.601 2.457-2.613-.883.402-1.832.673-2.828.795" fill="url(#0)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 947 B

41
app/assets/javascripts/app/views/login.jst.eco
View file

@ -21,6 +21,30 @@
<a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
<% end %>
</div>
<% if true or !_.isEmpty( @auth_providers ): %>
<div class="separator">
<span class="separator-text"><%- @T( 'or sign in using' ) %></span>
</div>
<div class="auth_providers horizontal stretch">
<!--<% for auth_provider in @auth_providers: %>
<li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
<% end %>-->
<a class="auth_provider facebook horizontal">
<span class="provider_icon"></span>
<span class="provider_name flex">Facebook</span>
</a>
<a class="auth_provider google horizontal">
<span class="provider_icon"></span>
<span class="provider_name flex">Google+</span>
</a>
<a class="auth_provider twitter horizontal">
<span class="provider_icon"></span>
<span class="provider_name flex">Twitter</span>
</a>
</div>
<% end %>
</form>
</div>
@ -36,21 +60,4 @@
<a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
</p>
<% end %>
<% if !_.isEmpty( @auth_providers ): %>
<hr>
<div class="col-12">
<p>--- <%- @T( 'or' ) %> ---</p>
</div>
<div class="col-12">
<p><%- @T( 'Sign in using' ) %></p>
<ul>
<% for auth_provider in @auth_providers: %>
<li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
<% end %>
</ul>
</div>
<% end %>
</div>

80
app/assets/stylesheets/zzz.css → app/assets/stylesheets/zzz.css.erb
View file

@ -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 <form></form> area e. g. for modal dialogs
*/