From 3abf20b347c4011805a3376d0be61f89725ea22c Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 21 Jan 2025 12:22:27 -0500
Subject: [PATCH] feat: sso button token exchange

---
 web/components/SsoButton.ce.vue | 24 +++++++++++++++---------
 web/pages/index.vue             |  2 +-
 web/pages/login.vue             | 14 ++++++++++++++
 web/pages/webComponents.vue     |  2 +-
 4 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 web/pages/login.vue

diff --git a/web/components/SsoButton.ce.vue b/web/components/SsoButton.ce.vue
index a0e939689..5d72cda02 100644
--- a/web/components/SsoButton.ce.vue
+++ b/web/components/SsoButton.ce.vue
@@ -3,10 +3,15 @@ import Button from '~/components/Brand/Button.vue';
 import { ACCOUNT } from '~/helpers/urls';
 
 export interface Props {
-  ssoenabled?: boolean;
+  ssoenabled?: boolean | string;
+  ssoEnabled?: boolean;
 }
 const props = defineProps<Props>();
 
+const isSsoEnabled = computed<boolean>(
+  () => props['ssoenabled'] === true || props['ssoenabled'] === 'true' || props.ssoEnabled
+);
+
 const enterCallbackTokenIntoField = (token: string) => {
   const passwordField = document.querySelector('input[name=password]') as HTMLInputElement;
   const usernameField = document.querySelector('input[name=username]') as HTMLInputElement;
@@ -42,11 +47,11 @@ onMounted(async () => {
     const sessionState = getStateToken();
 
     if (code && state === sessionState) {
-      const token = await fetch(new URL('token', ACCOUNT), {
+      const token = await fetch(new URL('/oauth2/token', ACCOUNT), {
         method: 'POST',
         body: new URLSearchParams({
           code,
-          clientId: 'CONNECT_SERVER_SSO',
+          client_id: 'CONNECT_SERVER_SSO',
           grant_type: 'authorization_code',
         }),
       });
@@ -65,20 +70,21 @@ onMounted(async () => {
   }
 });
 
-const externalSSOUrl = computed<string>(() => {
+const navigateToExternalSSOUrl = () => {
   const url = new URL('sso', ACCOUNT);
   const callbackUrlLogin = new URL('login', window.location.origin);
   const state = generateStateToken();
-  callbackUrlLogin.searchParams.append('state', state);
 
   url.searchParams.append('callbackUrl', callbackUrlLogin.toString());
-  return url.toString();
-});
+  url.searchParams.append('state', state);
+
+  window.location.href = url.toString();
+};
 </script>
 
 <template>
-  <template v-if="props.ssoenabled === true">
-    <Button target="_blank" :href="externalSSOUrl">Sign In With Unraid.net Account</Button>
+  <template v-if="isSsoEnabled">
+    <Button btnStyle="outline" @click="navigateToExternalSSOUrl" >Sign In With Unraid.net Account</Button>
   </template>
 </template>
 
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 9f1bb9abb..b999b3910 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -156,7 +156,7 @@ onMounted(() => {
           <div class="bg-background">
             <hr class="border-black dark:border-white" />
             <h2 class="text-xl font-semibold font-mono">SSO Button Component</h2>
-              <SsoButtonCe :ssoEnabled="serverState.ssoEnabled" />
+              <SsoButtonCe :ssoenabled="serverState.ssoEnabled" />
           </div>
         </div>
       </client-only>
diff --git a/web/pages/login.vue b/web/pages/login.vue
new file mode 100644
index 000000000..aa7dd808b
--- /dev/null
+++ b/web/pages/login.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router';
+
+// Access route and router
+const route = useRoute();
+const router = useRouter();
+
+// Redirect to '/' with the current query parameters
+router.replace({ path: '/', query: route.query });
+</script>
+
+<template>
+  Redirecting you back to /
+</template>
\ No newline at end of file
diff --git a/web/pages/webComponents.vue b/web/pages/webComponents.vue
index fa00f542b..42159b072 100644
--- a/web/pages/webComponents.vue
+++ b/web/pages/webComponents.vue
@@ -80,7 +80,7 @@ onBeforeMount(() => {
       <h3 class="text-lg font-semibold font-mono">
         SSOSignInButtonCe
       </h3>
-      <unraid-sso-button :ssoEnabled="serverState.ssoEnabled" />
+      <unraid-sso-button :ssoenabled="serverState.ssoEnabled" />
     </unraid-i18n-host>
   </client-only>
 </template>