feat: added auth provider login (login via frappe)

crm/api/auth.py

@@ -0,0 +1,38 @@
+import frappe
+
+@frappe.whitelist(allow_guest=True)
+def oauth_providers():
+	from frappe.utils.html_utils import get_icon_html
+	from frappe.utils.password import get_decrypted_password
+	from frappe.utils.oauth import get_oauth2_authorize_url, get_oauth_keys
+
+	out = []
+	providers = frappe.get_all(
+		"Social Login Key",
+		filters={"enable_social_login": 1},
+		fields=["name", "client_id", "base_url", "provider_name", "icon"],
+		order_by="name",
+	)
+
+	for provider in providers:
+		client_secret = get_decrypted_password("Social Login Key", provider.name, "client_secret")
+		if not client_secret:
+			continue
+
+		icon = None
+		if provider.icon:
+			if provider.provider_name == "Custom":
+				icon = get_icon_html(provider.icon, small=True)
+			else:
+				icon = f"<img src='{provider.icon}' alt={provider.provider_name}>"
+
+		if provider.client_id and provider.base_url and get_oauth_keys(provider.name):
+			out.append(
+				{
+					"name": provider.name,
+					"provider_name": provider.provider_name,
+					"auth_url": get_oauth2_authorize_url(provider.name, "/crm"),
+					"icon": icon,
+				}
+			)
+	return out

frontend/src/pages/Login.vue

@@ -2,7 +2,12 @@
   <div class="flex h-screen w-screen justify-center bg-gray-100">
     <div class="mt-32 w-full px-4">
       <div class="mx-auto mt-6 w-full px-4 sm:w-96">
-        <form method="POST" action="/api/method/login" @submit.prevent="submit">
+        <form
+          v-if="showEmailLogin"
+          method="POST"
+          action="/api/method/login"
+          @submit.prevent="submit"
+        >
           <div>
             <FormControl
               variant="outline"
@@ -38,19 +43,46 @@
             Login
           </Button>
         </form>
+        <div
+          class="mx-auto space-y-2"
+          v-if="authProviders.data && !showEmailLogin"
+        >
+          <Button @click="showEmailLogin = true" variant="solid" class="w-full">
+            Login via email
+          </Button>
+          <a
+            class="flex justify-center items-center gap-2 w-full rounded border bg-gray-900 px-3 py-1 text-center text-base h-7 focus:outline-none focus:ring-2 focus:ring-gray-400 text-white transition-colors hover:bg-gray-700"
+            v-for="provider in authProviders.data"
+            :key="provider.name"
+            :href="provider.auth_url"
+          >
+            <div v-if="provider.icon" v-html="provider.icon"/>
+            Login via {{ provider.provider_name }}
+          </a>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
 import { ref } from 'vue'
-import { FormControl, ErrorMessage } from 'frappe-ui'
+import { FormControl, ErrorMessage, createResource } from 'frappe-ui'
 import { sessionStore } from '@/stores/session'
 
 const session = sessionStore()
+let showEmailLogin = ref(false)
 let email = ref('')
 let password = ref('')
 
+let authProviders = createResource({
+  url: 'crm.api.auth.oauth_providers',
+  auto: true,
+  onSuccess(data) {
+    showEmailLogin.value = data.length === 0
+  },
+})
+authProviders.fetch()
+
 function submit() {
   session.login.submit({
     usr: email.value,