Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
86625a76 1 parent ee495450

Neatened up social login/register buttons

Inline Side-by-side
Showing 8 changed files with 67 additions and 30 deletions
...@@ -181,15 +181,25 @@ class SocialAuthService ...@@ -181,15 +181,25 @@ class SocialAuthService
181 public function getActiveDrivers() 181 public function getActiveDrivers()
182 { 182 {
183 $activeDrivers = []; 183 $activeDrivers = [];
184 - foreach ($this->validSocialDrivers as $driverName) { 184 + foreach ($this->validSocialDrivers as $driverKey) {
185 - if ($this->checkDriverConfigured($driverName)) { 185 + if ($this->checkDriverConfigured($driverKey)) {
186 - $activeDrivers[$driverName] = true; 186 + $activeDrivers[$driverKey] = $this->getDriverName($driverKey);
187 } 187 }
188 } 188 }
189 return $activeDrivers; 189 return $activeDrivers;
190 } 190 }
191 191
192 /** 192 /**
193 + * Get the presentational name for a driver.
194 + * @param $driver
195 + * @return mixed
196 + */
197 + public function getDriverName($driver)
198 + {
199 + return config('services.' . strtolower($driver) . '.name');
200 + }
201 +
202 + /**
193 * @param string $socialDriver 203 * @param string $socialDriver
194 * @param \Laravel\Socialite\Contracts\User $socialUser 204 * @param \Laravel\Socialite\Contracts\User $socialUser
195 * @return SocialAccount 205 * @return SocialAccount
......
...@@ -41,30 +41,35 @@ return [ ...@@ -41,30 +41,35 @@ return [
41 'client_id' => env('GITHUB_APP_ID', false), 41 'client_id' => env('GITHUB_APP_ID', false),
42 'client_secret' => env('GITHUB_APP_SECRET', false), 42 'client_secret' => env('GITHUB_APP_SECRET', false),
43 'redirect' => env('APP_URL') . '/login/service/github/callback', 43 'redirect' => env('APP_URL') . '/login/service/github/callback',
44 + 'name' => 'GitHub',
44 ], 45 ],
45 46
46 'google' => [ 47 'google' => [
47 'client_id' => env('GOOGLE_APP_ID', false), 48 'client_id' => env('GOOGLE_APP_ID', false),
48 'client_secret' => env('GOOGLE_APP_SECRET', false), 49 'client_secret' => env('GOOGLE_APP_SECRET', false),
49 'redirect' => env('APP_URL') . '/login/service/google/callback', 50 'redirect' => env('APP_URL') . '/login/service/google/callback',
51 + 'name' => 'Google',
50 ], 52 ],
51 53
52 'slack' => [ 54 'slack' => [
53 'client_id' => env('SLACK_APP_ID', false), 55 'client_id' => env('SLACK_APP_ID', false),
54 'client_secret' => env('SLACK_APP_SECRET', false), 56 'client_secret' => env('SLACK_APP_SECRET', false),
55 'redirect' => env('APP_URL') . '/login/service/slack/callback', 57 'redirect' => env('APP_URL') . '/login/service/slack/callback',
58 + 'name' => 'Slack',
56 ], 59 ],
57 60
58 'facebook' => [ 61 'facebook' => [
59 'client_id' => env('FACEBOOK_APP_ID', false), 62 'client_id' => env('FACEBOOK_APP_ID', false),
60 'client_secret' => env('FACEBOOK_APP_SECRET', false), 63 'client_secret' => env('FACEBOOK_APP_SECRET', false),
61 'redirect' => env('APP_URL') . '/login/service/facebook/callback', 64 'redirect' => env('APP_URL') . '/login/service/facebook/callback',
65 + 'name' => 'Facebook',
62 ], 66 ],
63 67
64 'twitter' => [ 68 'twitter' => [
65 'client_id' => env('TWITTER_APP_ID', false), 69 'client_id' => env('TWITTER_APP_ID', false),
66 'client_secret' => env('TWITTER_APP_SECRET', false), 70 'client_secret' => env('TWITTER_APP_SECRET', false),
67 'redirect' => env('APP_URL') . '/login/service/twitter/callback', 71 'redirect' => env('APP_URL') . '/login/service/twitter/callback',
72 + 'name' => 'Twitter',
68 ], 73 ],
69 74
70 'ldap' => [ 75 'ldap' => [
......
...@@ -54,6 +54,9 @@ $button-border-radius: 2px; ...@@ -54,6 +54,9 @@ $button-border-radius: 2px;
54 &.muted { 54 &.muted {
55 @include generate-button-colors(#EEE, #888); 55 @include generate-button-colors(#EEE, #888);
56 } 56 }
57 + &.muted-light {
58 + @include generate-button-colors(#666, #e4e4e4);
59 + }
57 } 60 }
58 61
59 .text-button { 62 .text-button {
...@@ -92,6 +95,9 @@ $button-border-radius: 2px; ...@@ -92,6 +95,9 @@ $button-border-radius: 2px;
92 width: 100%; 95 width: 100%;
93 text-align: center; 96 text-align: center;
94 display: block; 97 display: block;
98 + &.text-left {
99 + text-align: left;
100 + }
95 } 101 }
96 102
97 .button.icon { 103 .button.icon {
...@@ -100,6 +106,19 @@ $button-border-radius: 2px; ...@@ -100,6 +106,19 @@ $button-border-radius: 2px;
100 } 106 }
101 } 107 }
102 108
109 +.button.svg {
110 + svg {
111 + display: inline-block;
112 + position: absolute;
113 + left: $-m;
114 + top: $-s - 2px;
115 + width: 24px;
116 + }
117 + padding: $-s $-m;
118 + padding-bottom: $-s - 2px;
119 + padding-left: $-m*2 + 24px;
120 +}
121 +
103 .button[disabled] { 122 .button[disabled] {
104 background-color: #BBB; 123 background-color: #BBB;
105 cursor: default; 124 cursor: default;
......
...@@ -55,20 +55,6 @@ div[class^="col-"] img { ...@@ -55,20 +55,6 @@ div[class^="col-"] img {
55 } 55 }
56 } 56 }
57 57
58 -.center-box {
59 - margin: $-xl auto 0 auto;
60 - padding: $-m $-xxl $-xl*2 $-xxl;
61 - max-width: 346px;
62 - display: inline-block;
63 - text-align: left;
64 - vertical-align: top;
65 - &.login {
66 - background-color: #EEE;
67 - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
68 - border: 1px solid #DDD;
69 - }
70 -}
71 -
72 .row { 58 .row {
73 margin-left: -$-m; 59 margin-left: -$-m;
74 margin-right: -$-m; 60 margin-right: -$-m;
......
...@@ -251,10 +251,24 @@ $btt-size: 40px; ...@@ -251,10 +251,24 @@ $btt-size: 40px;
251 } 251 }
252 } 252 }
253 253
254 - 254 +.center-box {
255 - 255 + margin: $-xl auto 0 auto;
256 - 256 + padding: $-m $-xxl $-xl $-xxl;
257 - 257 + width: 420px;
258 + max-width: 100%;
259 + display: inline-block;
260 + text-align: left;
261 + vertical-align: top;
262 + //border: 1px solid #DDD;
263 + input {
264 + width: 100%;
265 + }
266 + &.login {
267 + background-color: #EEE;
268 + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
269 + border: 1px solid #DDD;
270 + }
271 +}
258 272
259 273
260 274
......
...@@ -18,6 +18,8 @@ return [ ...@@ -18,6 +18,8 @@ return [
18 */ 18 */
19 'sign_up' => 'Sign up', 19 'sign_up' => 'Sign up',
20 'log_in' => 'Log in', 20 'log_in' => 'Log in',
21 + 'log_in_with' => 'Login with :socialDriver',
22 + 'sign_up_with' => 'Sign up with :socialDriver',
21 'logout' => 'Logout', 23 'logout' => 'Logout',
22 24
23 'name' => 'Name', 25 'name' => 'Name',
......
...@@ -32,10 +32,11 @@ ...@@ -32,10 +32,11 @@
32 32
33 @if(count($socialDrivers) > 0) 33 @if(count($socialDrivers) > 0)
34 <hr class="margin-top"> 34 <hr class="margin-top">
35 - <h3 class="text-muted">{{ trans('auth.social_login') }}</h3> 35 + @foreach($socialDrivers as $driver => $name)
36 - @foreach($socialDrivers as $driver => $enabled) 36 + <a id="social-login-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
37 - <a id="social-login-{{$driver}}" href="{{ baseUrl("/login/service/" . $driver) }}">@icon($driver, ['width' => 56])</a> 37 + @icon($driver)
38 - &nbsp; 38 + {{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
39 + </a>
39 @endforeach 40 @endforeach
40 @endif 41 @endif
41 </div> 42 </div>
......
...@@ -35,11 +35,11 @@ ...@@ -35,11 +35,11 @@
35 35
36 @if(count($socialDrivers) > 0) 36 @if(count($socialDrivers) > 0)
37 <hr class="margin-top"> 37 <hr class="margin-top">
38 - <h3 class="text-muted">{{ trans('auth.social_registration') }}</h3> 38 + @foreach($socialDrivers as $driver => $name)
39 - <p class="text-small">{{ trans('auth.social_registration_text') }}</p> 39 + <a id="social-register-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
40 - @foreach($socialDrivers as $driver => $enabled) 40 + @icon($driver)
41 - <a href="{{ baseUrl("/register/service/" . $driver) }}">@icon($driver, ['width' => 56])</a> 41 + {{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
42 - &nbsp; 42 + </a>
43 @endforeach 43 @endforeach
44 @endif 44 @endif
45 </div> 45 </div>
......