Neatened up social login/register buttons

app/Services/SocialAuthService.php

@@ -181,14 +181,24 @@ class SocialAuthService
     public function getActiveDrivers()
     {
         $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;
     }
 
+    /**
+     * 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

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' => [

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;

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;

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;
+  }
+}
 
 
 

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',

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 => $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)
-                        &nbsp;
+                        {{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
+                    </a>
                 @endforeach
             @endif
         </div>

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>
+                @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]) }}
-                    &nbsp;
+                    </a>
                 @endforeach
             @endif
         </div>