Neatened up social login/register buttons

diff --git a/app/Services/SocialAuthService.php b/app/Services/SocialAuthService.php
index 710f956963f56885d35d21a56536d618e78c9327..2c15e73ce4d460215ac76a8f44a9ebf9c10e6617 100644 (file)
--- a/app/Services/SocialAuthService.php
+++ b/app/Services/SocialAuthService.php
@@ -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

diff --git a/config/services.php b/config/services.php
index 8c17897e49e96d40fd83a145d479345006002785..fe58cbb9ae0cd9b80d26a85d5c783c47261a74c1 100644 (file)
--- a/config/services.php
+++ b/config/services.php
@@ -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' => [

diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 791a5bb72a62b4eaabcd1762004559b5c1d39db5..6e03c9217cc29ea39bce87f44817dca4a22535e8 100644 (file)
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -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;

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 231c12d4d7469d2468058e369bb0e6e5ea50bab5..b32dafd384c5377d960fae7dcceb897c8565e8d3 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -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;

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 7d33bd0a640e87be1abeec580ee95f5beae3e3a8..967aba76b755796c44c798f15ab94331c3c2fdd9 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -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;
+  }
+}
 
 
 

diff --git a/resources/lang/en/auth.php b/resources/lang/en/auth.php
index b734828fc7d617675da040d25c954277f0139f4e..a1232efc6819b7a7310a635c0b5efb775020f8e9 100644 (file)
--- a/resources/lang/en/auth.php
+++ b/resources/lang/en/auth.php
@@ -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',

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 6c8b1720cbd37461b982eb67a16e0b61c73ab6f7..706747b8b65eecca75056c33f85a89bcb1a7ebf4 100644 (file)
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -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>

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 860508df04830f2c5e998ea0d1f4a560c18f2215..d5db4afa8a4987d94e28198d8e26d6edbe7e3fa5 100644 (file)
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -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>