优化第三方登录

plugins/Social/Repositories/CustomerRepo.php

@@ -33,20 +33,20 @@ class CustomerRepo
         Providers\Douban::NAME,
         Providers\Facebook::NAME,
         Providers\FeiShu::NAME,
-        Providers\Figma::NAME,
-        Providers\GitHub::NAME,
-        Providers\Gitee::NAME,
+        // Providers\Figma::NAME,
+        // Providers\GitHub::NAME,
+        // Providers\Gitee::NAME,
         Providers\Google::NAME,
         Providers\Line::NAME,
         Providers\Linkedin::NAME,
-        Providers\OpenWeWork::NAME,
+        // Providers\OpenWeWork::NAME,
         Providers\Outlook::NAME,
-        Providers\QCloud::NAME,
+        // Providers\QCloud::NAME,
         Providers\QQ::NAME,
-        Providers\Taobao::NAME,
-        Providers\Tapd::NAME,
+        // Providers\Taobao::NAME,
+        // Providers\Tapd::NAME,
         Providers\WeChat::NAME,
-        Providers\WeWork::NAME,
+        // Providers\WeWork::NAME,
         Providers\Weibo::NAME,
     ];
 

plugins/Social/Views/admin/config.blade.php

@@ -37,9 +37,10 @@
                 <el-form-item prop="provider" class="mb-0">
                   <el-select size="small" v-model="item.provider" @change="(e) => {providerChange(e, index)}" placeholder="{{ __('Social::setting.provider') }}">
                     <el-option
-                      v-for="item in source.providers"
+                      v-for="item in providers"
                       :key="item.code"
                       :label="item.label"
+                      :disabled="item.disabled"
                       :value="item.code">
                     </el-option>
                   </el-select>
@@ -151,6 +152,21 @@
       }
     },
 
+    computed: {
+      providers() {
+        let providers = @json(Plugin\Social\Repositories\CustomerRepo::allProviders());
+
+        providers.forEach(e => {
+          if (this.form.social.some(s => s.provider == e.code)) {
+            e.disabled = true;
+          }
+        })
+
+
+        return providers;
+      }
+    },
+
     methods: {
       submit(form) {
         this.$refs[form].validate((valid) => {
@@ -174,7 +190,10 @@
       },
 
       addRow() {
-        this.form.social.push({provider: this.source.providers[1].code, status: 1, key: '', secret: '', callback: `plugin/social/callbacks/${this.source.providers[1].code}`, sort_order: this.form.social.length})
+        let providers = this.source.providers.filter(e => !this.form.social.some(s => s.provider == e.code))
+        if (providers.length) {
+          this.form.social.push({provider: providers[0].code, status: 1, key: '', secret: '', callback: `plugin/social/callbacks/${this.source.providers[1].code}`, sort_order: this.form.social.length})
+        }
       }
     }
   })

plugins/Social/Views/shop/Bootstrap.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Bootstrap.php
+ *
+ * @copyright  2022 beikeshop.com - All Rights Reserved
+ * @link       https://beikeshop.com
+ * @author     Edward Yang <yangjin@guangda.work>
+ * @created    2022-10-12 17:33:29
+ * @modified   2022-10-12 17:33:29
+ */
+
+namespace Plugin\Social;
+
+
+class Bootstrap
+{
+    public function boot()
+    {
+        $this->addSocialData();
+    }
+
+    /**
+     * 增加第三方登录方式
+     */
+    private function addSocialData()
+    {
+        add_filter('login.social.buttons', function ($buttons) {
+            $providers = plugin_setting('social.setting');
+            if (empty($providers)) {
+                return $buttons;
+            }
+
+            foreach ($providers as $provider) {
+                $buttons[] = view('Social::shop/social_button', ['provider' => $provider])->render();
+            }
+            return $buttons;
+        });
+    }
+}

plugins/Social/Views/shop/social_button.blade.php

@@ -1,4 +1,4 @@
 <button type="button" class="btn border fw-bold w-100 mb-3" class="provider-btn" onclick="bk.openWin('{{ plugin_route('social.redirect', $provider['provider']) }}')">
     <img src="{{ plugin_resize('social' , '/image/' . $provider['provider'] . '.png') }}" class="img-fluid wh-20 me-2">
-    {{ __("Social::providers.".$provider['provider']) }}
+    {{ __("Social::providers.".$provider['provider']) }} {{ __('shop/login.login') }}
 </button>

resources/beike/shop/default/css/login.scss

@@ -40,6 +40,10 @@ body.page-login, body.page-forgotten {
     }
   }
 
+  .vr-wrap {
+    margin: 0 80px;
+  }
+
   .login-wrap {
     @media (min-width: 768px) {
       display: flex;
@@ -50,7 +54,6 @@ body.page-login, body.page-forgotten {
       border: none;
       @media (min-width: 768px) {
         width: 340px;
-        margin: 0 60px;
       }
     }
   }
@@ -63,11 +66,12 @@ body.page-login, body.page-forgotten {
       margin-top: 0 !important;
     }
 
+    .vr-wrap {
+      margin: 0 60px;
+    }
+
     .card {
       border: none;
-      @media (min-width: 768px) {
-        margin: 0 30px;
-      }
     }
   }
 
@@ -96,7 +100,15 @@ body.page-login, body.page-forgotten {
     }
 
     .btn {
-      border-color: #ccc !important;
+      // border-color: #ccc !important;
+      color: #666;
+
+      img {
+        // transform: translateY(-50%);
+        position: absolute;
+        left: 40px;
+      }
+
       &:hover {
         background-color: #eee;
       }

resources/lang/de/shop/login.php

@@ -36,4 +36,5 @@ return [
      'customer_inactive' => 'Benutzer wurde deaktiviert',
      'login_successfully' => 'erfolgreich angemeldet',
      'register_success' => 'erfolgreich registriert',
+     'third_party_logins' => 'erwähnenswert',
 ];

resources/lang/en/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => 'The customer is inactive!',
     'login_successfully' => 'Login successfully!',
     'register_success' => 'Registered successfully',
+    'third_party_logins' => 'Third-party Login',
 ];

resources/lang/es/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => 'El usuario está deshabilitado',
     'login_successfully' => 'Inicio de sesión correcto',
     'register_success' => 'registración exitosa',
+    'third_party_logins' => 'vale la pena mencionar',
 ];

resources/lang/fr/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => 'L\'utilisateur est désactivé',
     'login_successfully' => 'connexion réussie',
     'register_success' => 'succès de l\'inscription',
+    'third_party_logins' => 'à noter',
 ];

resources/lang/it/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => 'l\'utente è stato disabilitato',
     'login_successfully' => 'login con successo',
     'register_success' => 'registrato con successo',
+    'third_party_logins' => 'Vale la pena citare',
 ];

resources/lang/ja/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => 'ユーザーは無効です',
     'login_successfully' => 'ログイン成功',
     'register_success' => '登録完了',
+    'third_party_logins' => '言及する価値がある',
 ];

resources/lang/ru/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => 'Пользователь отключен',
     'login_successfully' => 'Успешный вход в систему',
     'register_success' => 'Вы успешно зарегистрировались',
+    'third_party_logins' => 'Стоит отметить',
 ];

resources/lang/zh_cn/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => '用户已被禁用',
     'login_successfully' => '登录成功',
     'register_success' => '注册成功',
+    'third_party_logins' => '第三方登录',
 ];

resources/lang/zh_hk/shop/login.php

@@ -36,4 +36,5 @@ return [
     'customer_inactive' => '用戶已被禁用',
     'login_successfully' => '登錄成功',
     'register_success' => '註冊成功',
+    'third_party_logins' => '第三方登錄',
 ];

themes/default/account/login.blade.php

@@ -41,7 +41,7 @@
 
         @if($social_buttons)
           <div class="social-wrap px-2">
-            <div class="title mb-4"><span>第三方登录</span></div>
+            <div class="title mb-4"><span>{{ __('shop/login.third_party_logins') }}</span></div>
             @foreach($social_buttons as $button)
               {!! $button !!}
             @endforeach
@@ -49,7 +49,7 @@
         @endif
       </div>
 
-      <div class="d-flex">
+      <div class="d-flex vr-wrap">
         <div class="vr bg-secondary"></div>
       </div>
       <div class="card">