Neatened up social login/register buttons

This commit is contained in:
Dan Brown 2017-02-05 15:28:53 +00:00
parent ee495450cc
commit 86625a7642
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
8 changed files with 67 additions and 30 deletions

View File

@ -181,14 +181,24 @@ class SocialAuthService
public function getActiveDrivers()
{
$activeDrivers = [];
foreach ($this->validSocialDrivers as $driverName) {
if ($this->checkDriverConfigured($driverName)) {
$activeDrivers[$driverName] = true;
foreach ($this->validSocialDrivers as $driverKey) {
if ($this->checkDriverConfigured($driverKey)) {
$activeDrivers[$driverKey] = $this->getDriverName($driverKey);
}
}
return $activeDrivers;
}
/**
* Get the presentational name for a driver.
* @param $driver
* @return mixed
*/
public function getDriverName($driver)
{
return config('services.' . strtolower($driver) . '.name');
}
/**
* @param string $socialDriver
* @param \Laravel\Socialite\Contracts\User $socialUser

View File

@ -41,30 +41,35 @@ return [
'client_id' => env('GITHUB_APP_ID', false),
'client_secret' => env('GITHUB_APP_SECRET', false),
'redirect' => env('APP_URL') . '/login/service/github/callback',
'name' => 'GitHub',
],
'google' => [
'client_id' => env('GOOGLE_APP_ID', false),
'client_secret' => env('GOOGLE_APP_SECRET', false),
'redirect' => env('APP_URL') . '/login/service/google/callback',
'name' => 'Google',
],
'slack' => [
'client_id' => env('SLACK_APP_ID', false),
'client_secret' => env('SLACK_APP_SECRET', false),
'redirect' => env('APP_URL') . '/login/service/slack/callback',
'name' => 'Slack',
],
'facebook' => [
'client_id' => env('FACEBOOK_APP_ID', false),
'client_secret' => env('FACEBOOK_APP_SECRET', false),
'redirect' => env('APP_URL') . '/login/service/facebook/callback',
'name' => 'Facebook',
],
'twitter' => [
'client_id' => env('TWITTER_APP_ID', false),
'client_secret' => env('TWITTER_APP_SECRET', false),
'redirect' => env('APP_URL') . '/login/service/twitter/callback',
'name' => 'Twitter',
],
'ldap' => [

View File

@ -54,6 +54,9 @@ $button-border-radius: 2px;
&.muted {
@include generate-button-colors(#EEE, #888);
}
&.muted-light {
@include generate-button-colors(#666, #e4e4e4);
}
}
.text-button {
@ -92,6 +95,9 @@ $button-border-radius: 2px;
width: 100%;
text-align: center;
display: block;
&.text-left {
text-align: left;
}
}
.button.icon {
@ -100,6 +106,19 @@ $button-border-radius: 2px;
}
}
.button.svg {
svg {
display: inline-block;
position: absolute;
left: $-m;
top: $-s - 2px;
width: 24px;
}
padding: $-s $-m;
padding-bottom: $-s - 2px;
padding-left: $-m*2 + 24px;
}
.button[disabled] {
background-color: #BBB;
cursor: default;

View File

@ -55,20 +55,6 @@ div[class^="col-"] img {
}
}
.center-box {
margin: $-xl auto 0 auto;
padding: $-m $-xxl $-xl*2 $-xxl;
max-width: 346px;
display: inline-block;
text-align: left;
vertical-align: top;
&.login {
background-color: #EEE;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #DDD;
}
}
.row {
margin-left: -$-m;
margin-right: -$-m;

View File

@ -251,10 +251,24 @@ $btt-size: 40px;
}
}
.center-box {
margin: $-xl auto 0 auto;
padding: $-m $-xxl $-xl $-xxl;
width: 420px;
max-width: 100%;
display: inline-block;
text-align: left;
vertical-align: top;
//border: 1px solid #DDD;
input {
width: 100%;
}
&.login {
background-color: #EEE;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #DDD;
}
}

View File

@ -18,6 +18,8 @@ return [
*/
'sign_up' => 'Sign up',
'log_in' => 'Log in',
'log_in_with' => 'Login with :socialDriver',
'sign_up_with' => 'Sign up with :socialDriver',
'logout' => 'Logout',
'name' => 'Name',

View File

@ -32,10 +32,11 @@
@if(count($socialDrivers) > 0)
<hr class="margin-top">
<h3 class="text-muted">{{ trans('auth.social_login') }}</h3>
@foreach($socialDrivers as $driver => $enabled)
<a id="social-login-{{$driver}}" href="{{ baseUrl("/login/service/" . $driver) }}">@icon($driver, ['width' => 56])</a>
&nbsp;
@foreach($socialDrivers as $driver => $name)
<a id="social-login-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
@icon($driver)
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
</a>
@endforeach
@endif
</div>

View File

@ -35,11 +35,11 @@
@if(count($socialDrivers) > 0)
<hr class="margin-top">
<h3 class="text-muted">{{ trans('auth.social_registration') }}</h3>
<p class="text-small">{{ trans('auth.social_registration_text') }}</p>
@foreach($socialDrivers as $driver => $enabled)
<a href="{{ baseUrl("/register/service/" . $driver) }}">@icon($driver, ['width' => 56])</a>
&nbsp;
@foreach($socialDrivers as $driver => $name)
<a id="social-register-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
@icon($driver)
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
</a>
@endforeach
@endif
</div>