feat(PWA): Allow login using OAuth

frontend/src/views/Login.vue

@@ -32,6 +32,20 @@
  Login
  </Button>
  </form>
+
+ <template v-if="authProviders.data?.length">
+ <div class="text-center text-sm text-gray-600 my-4">or</div>
+ <div class="space-y-4">
+ <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 with {{ provider.provider_name }}
+ </a>
+ </div>
+ </template>
  </div>
  </div>
 
@@ -88,7 +102,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 +155,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,5 +21,44 @@ def get_context_for_dev():
 
 def get_boot():
  return frappe._dict(
- {"site_name": frappe.local.site, "push_relay_server_url": frappe.conf.get("push_relay_server_url")}
+ {"site_name": frappe.local.site, "push_relay_server_url": frappe.conf.get("push_relay_server_url") or ""}
  )
+
+
+@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