mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-28 13:12:05 +00:00
Neatened up social login/register buttons
This commit is contained in:
parent
ee495450cc
commit
86625a7642
@ -181,14 +181,24 @@ class SocialAuthService
|
|||||||
public function getActiveDrivers()
|
public function getActiveDrivers()
|
||||||
{
|
{
|
||||||
$activeDrivers = [];
|
$activeDrivers = [];
|
||||||
foreach ($this->validSocialDrivers as $driverName) {
|
foreach ($this->validSocialDrivers as $driverKey) {
|
||||||
if ($this->checkDriverConfigured($driverName)) {
|
if ($this->checkDriverConfigured($driverKey)) {
|
||||||
$activeDrivers[$driverName] = true;
|
$activeDrivers[$driverKey] = $this->getDriverName($driverKey);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return $activeDrivers;
|
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 string $socialDriver
|
||||||
* @param \Laravel\Socialite\Contracts\User $socialUser
|
* @param \Laravel\Socialite\Contracts\User $socialUser
|
||||||
|
@ -41,30 +41,35 @@ return [
|
|||||||
'client_id' => env('GITHUB_APP_ID', false),
|
'client_id' => env('GITHUB_APP_ID', false),
|
||||||
'client_secret' => env('GITHUB_APP_SECRET', false),
|
'client_secret' => env('GITHUB_APP_SECRET', false),
|
||||||
'redirect' => env('APP_URL') . '/login/service/github/callback',
|
'redirect' => env('APP_URL') . '/login/service/github/callback',
|
||||||
|
'name' => 'GitHub',
|
||||||
],
|
],
|
||||||
|
|
||||||
'google' => [
|
'google' => [
|
||||||
'client_id' => env('GOOGLE_APP_ID', false),
|
'client_id' => env('GOOGLE_APP_ID', false),
|
||||||
'client_secret' => env('GOOGLE_APP_SECRET', false),
|
'client_secret' => env('GOOGLE_APP_SECRET', false),
|
||||||
'redirect' => env('APP_URL') . '/login/service/google/callback',
|
'redirect' => env('APP_URL') . '/login/service/google/callback',
|
||||||
|
'name' => 'Google',
|
||||||
],
|
],
|
||||||
|
|
||||||
'slack' => [
|
'slack' => [
|
||||||
'client_id' => env('SLACK_APP_ID', false),
|
'client_id' => env('SLACK_APP_ID', false),
|
||||||
'client_secret' => env('SLACK_APP_SECRET', false),
|
'client_secret' => env('SLACK_APP_SECRET', false),
|
||||||
'redirect' => env('APP_URL') . '/login/service/slack/callback',
|
'redirect' => env('APP_URL') . '/login/service/slack/callback',
|
||||||
|
'name' => 'Slack',
|
||||||
],
|
],
|
||||||
|
|
||||||
'facebook' => [
|
'facebook' => [
|
||||||
'client_id' => env('FACEBOOK_APP_ID', false),
|
'client_id' => env('FACEBOOK_APP_ID', false),
|
||||||
'client_secret' => env('FACEBOOK_APP_SECRET', false),
|
'client_secret' => env('FACEBOOK_APP_SECRET', false),
|
||||||
'redirect' => env('APP_URL') . '/login/service/facebook/callback',
|
'redirect' => env('APP_URL') . '/login/service/facebook/callback',
|
||||||
|
'name' => 'Facebook',
|
||||||
],
|
],
|
||||||
|
|
||||||
'twitter' => [
|
'twitter' => [
|
||||||
'client_id' => env('TWITTER_APP_ID', false),
|
'client_id' => env('TWITTER_APP_ID', false),
|
||||||
'client_secret' => env('TWITTER_APP_SECRET', false),
|
'client_secret' => env('TWITTER_APP_SECRET', false),
|
||||||
'redirect' => env('APP_URL') . '/login/service/twitter/callback',
|
'redirect' => env('APP_URL') . '/login/service/twitter/callback',
|
||||||
|
'name' => 'Twitter',
|
||||||
],
|
],
|
||||||
|
|
||||||
'ldap' => [
|
'ldap' => [
|
||||||
|
@ -54,6 +54,9 @@ $button-border-radius: 2px;
|
|||||||
&.muted {
|
&.muted {
|
||||||
@include generate-button-colors(#EEE, #888);
|
@include generate-button-colors(#EEE, #888);
|
||||||
}
|
}
|
||||||
|
&.muted-light {
|
||||||
|
@include generate-button-colors(#666, #e4e4e4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-button {
|
.text-button {
|
||||||
@ -92,6 +95,9 @@ $button-border-radius: 2px;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
|
&.text-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.icon {
|
.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] {
|
.button[disabled] {
|
||||||
background-color: #BBB;
|
background-color: #BBB;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
@ -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 {
|
.row {
|
||||||
margin-left: -$-m;
|
margin-left: -$-m;
|
||||||
margin-right: -$-m;
|
margin-right: -$-m;
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -18,6 +18,8 @@ return [
|
|||||||
*/
|
*/
|
||||||
'sign_up' => 'Sign up',
|
'sign_up' => 'Sign up',
|
||||||
'log_in' => 'Log in',
|
'log_in' => 'Log in',
|
||||||
|
'log_in_with' => 'Login with :socialDriver',
|
||||||
|
'sign_up_with' => 'Sign up with :socialDriver',
|
||||||
'logout' => 'Logout',
|
'logout' => 'Logout',
|
||||||
|
|
||||||
'name' => 'Name',
|
'name' => 'Name',
|
||||||
|
@ -32,10 +32,11 @@
|
|||||||
|
|
||||||
@if(count($socialDrivers) > 0)
|
@if(count($socialDrivers) > 0)
|
||||||
<hr class="margin-top">
|
<hr class="margin-top">
|
||||||
<h3 class="text-muted">{{ trans('auth.social_login') }}</h3>
|
@foreach($socialDrivers as $driver => $name)
|
||||||
@foreach($socialDrivers as $driver => $enabled)
|
<a id="social-login-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
|
||||||
<a id="social-login-{{$driver}}" href="{{ baseUrl("/login/service/" . $driver) }}">@icon($driver, ['width' => 56])</a>
|
@icon($driver)
|
||||||
|
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
|
||||||
|
</a>
|
||||||
@endforeach
|
@endforeach
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,11 +35,11 @@
|
|||||||
|
|
||||||
@if(count($socialDrivers) > 0)
|
@if(count($socialDrivers) > 0)
|
||||||
<hr class="margin-top">
|
<hr class="margin-top">
|
||||||
<h3 class="text-muted">{{ trans('auth.social_registration') }}</h3>
|
@foreach($socialDrivers as $driver => $name)
|
||||||
<p class="text-small">{{ trans('auth.social_registration_text') }}</p>
|
<a id="social-register-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
|
||||||
@foreach($socialDrivers as $driver => $enabled)
|
@icon($driver)
|
||||||
<a href="{{ baseUrl("/register/service/" . $driver) }}">@icon($driver, ['width' => 56])</a>
|
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
|
||||||
|
</a>
|
||||||
@endforeach
|
@endforeach
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user