feat: sso button token exchange

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>
 

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>

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>

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>