Add sso login (google, github)

bitcart · Aug 13, 2024 · 8b8280d · 8b8280d
1 parent c718c52
commit 8b8280d
Show file tree

Hide file tree

Showing 5 changed files with 1,774 additions and 1,549 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -8,3 +8,8 @@ html {
 .cursor-pointer:hover {
   cursor: pointer;
 }
+.sso-auth-button {
+  color: #4285f4;
+  border-color: #4285f4;
+  margin-top: 10px; /* Добавляем отступ между кнопками */
+}
diff --git a/package.json b/package.json
@@ -51,5 +51,6 @@
     "vue-server-renderer": "<2.7",
     "vue-template-compiler": "<2.7",
     "vuetify-loader": "1.7.3"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/pages/login/index.vue b/pages/login/index.vue
@@ -28,6 +28,33 @@
               prepend-icon="lock"
               type="password"
             />
+            <v-layout
+              column
+              align-center
+              justify-center
+              class="auth-buttons"
+              mb-6
+            >
+              <v-btn
+                class="sso-auth-button"
+                color="white"
+                background="primary"
+                outlined
+                @click="ssoAuth('google')"
+              >
+                <v-icon left> mdi-google </v-icon>
+                Sign in with Google
+              </v-btn>
+              <v-btn
+                class="sso-auth-button"
+                color="white"
+                outlined
+                @click="ssoAuth('github')"
+              >
+                <v-icon left> mdi-github </v-icon>
+                Sign in with Github
+              </v-btn>
+            </v-layout>
             <universal-captcha v-model="captchaCode" />
             <UIExtensionSlot name="login_form_extra" />
             <div v-if="!$store.state.policies.disable_registration">
@@ -74,6 +101,12 @@ export default {
       askForEmailVerify: false,
     }
   },
+  beforeMount() {
+    const error = this.$route.query.error
+    if (error) {
+      this.usernameErrors.push(error)
+    }
+  },
   methods: {
     login() {
       this.askForEmailVerify = false
@@ -120,6 +153,12 @@ export default {
           })
       }
     },
+    ssoAuth(provider) {
+      window.open(
+        this.$axios.defaults.baseURL + "/users/login/" + provider,
+        "_self"
+      )
+    },
   },
 }
 </script>
diff --git a/pages/register.vue b/pages/register.vue
@@ -41,6 +41,33 @@
                 prepend-icon="lock"
                 type="password"
               />
+              <v-layout
+                column
+                align-center
+                justify-center
+                class="auth-buttons"
+                mb-6
+              >
+                <v-btn
+                  class="sso-auth-button"
+                  color="white"
+                  background="primary"
+                  outlined
+                  @click="ssoAuth('google')"
+                >
+                  <v-icon left> mdi-google </v-icon>
+                  Sign up with Google
+                </v-btn>
+                <v-btn
+                  class="sso-auth-button"
+                  color="white"
+                  outlined
+                  @click="ssoAuth('github')"
+                >
+                  <v-icon left> mdi-github </v-icon>
+                  Sign up with Github
+                </v-btn>
+              </v-layout>
               <universal-captcha v-model="captchaCode" />
               <UIExtensionSlot name="register_form_extra" />
               <div>
@@ -172,6 +199,12 @@ export default {
           })
       }
     },
+    ssoAuth(provider) {
+      window.open(
+        this.$axios.defaults.baseURL + "/users/login/" + provider,
+        "_self"
+      )
+    },
   },
 }
 </script>