feat(PWA): Allow login using OAuth

frontend/src/views/Login.vue

@@ -32,6 +32,18 @@
 							Login
 						</Button>
 					</form>
+
+					<div v-if="authProviders.data?.length" class="mt-2 space-y-2">
+						<hr>
+						<a
+							v-for="provider in authProviders.data"
+							:key="provider.name"
+							class="flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base p-2 rounded"
+							:href="provider.auth_url"
+						>
+							Login via {{ provider.provider_name }}
+						</a>
+					</div>
 				</div>
 			</div>
 
@@ -88,7 +100,7 @@
 <script setup>
 import { IonPage, IonContent } from "@ionic/vue"
 import { inject, reactive, ref } from "vue"
-import { Input, Button, ErrorMessage, Dialog } from "frappe-ui"
+import { Input, Button, ErrorMessage, Dialog, createResource } from "frappe-ui"
 
 import FrappeHRLogo from "@/components/icons/FrappeHRLogo.vue"
 
@@ -141,4 +153,9 @@ async function submit(e) {
 		errorMessage.value = error.messages.join("\n")
 	}
 }
+
+const authProviders = createResource({
+	url: "hrms.www.hrms.oauth_providers",
+	auto: true,
+});
 </script>

hrms/www/hrms.py

@@ -21,3 +21,42 @@ def get_context_for_dev():
 
 def get_boot():
 	return frappe._dict({"push_relay_server_url": frappe.conf.get("push_relay_server_url")})
+
+
+@frappe.whitelist(allow_guest=True)
+def oauth_providers():
+	from frappe.utils.html_utils import get_icon_html
+	from frappe.utils.oauth import get_oauth2_authorize_url, get_oauth_keys
+	from frappe.utils.password import get_decrypted_password
+
+	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, "/hrms"),
+					"icon": icon,
+				}
+			)
+
+	return out