🐛 Fix authorize

app/pages/auth/authorize.vue

@@ -7,7 +7,7 @@
       <div class="pa-8">
         <div class="mb-4">
           <img
-            :src="$vuetify.theme.current.dark ? IconDark : IconLight"
+            :src="colorMode.value == 'dark' ? IconDark : IconLight"
             alt="CloudyLamb"
             height="60"
             width="60"
@@ -34,32 +34,36 @@
 
               <!-- App Info Section -->
               <div v-if="clientInfo" class="mb-6">
-                <div class="d-flex align-center mb-4">
+                <div class="d-flex align-center mb-4 text-left">
-                  <v-avatar
-                    v-if="clientInfo.picture"
-                    :src="clientInfo.picture.url"
-                    :alt="clientInfo.client_name"
-                    size="large"
-                    class="mr-3"
-                  />
                   <div>
                     <h3 class="text-xl font-semibold">
-                      {{ clientInfo.client_name || 'Unknown Application' }}
+                      {{ clientInfo.clientName || "Unknown Application" }}
                     </h3>
                     <p class="text-base">
-                      {{ isNewApp ? 'wants to access your Solar Network account' : 'wants to access your account' }}
+                      {{
+                        isNewApp
+                          ? "wants to access your Solar Network account"
+                          : "wants to access your account"
+                      }}
                     </p>
                   </div>
                 </div>
 
                 <!-- Requested Permissions -->
-                <v-card variant="outlined" class="pa-4 mb-4">
+                <v-card variant="outlined" class="pa-4 mb-4 text-left">
                   <h4 class="font-medium mb-2">
-                    This will allow {{ clientInfo.client_name || 'the app' }} to:
+                    This will allow
+                    {{ clientInfo.clientName || "the app" }} to:
                   </h4>
                   <ul class="space-y-1">
-                    <li v-for="scope in requestedScopes" :key="scope" class="d-flex align-start">
+                    <li
-                      <v-icon class="mt-1 mr-2" color="success">mdi-check-box</v-icon>
+                      v-for="scope in requestedScopes"
+                      :key="scope"
+                      class="d-flex align-start"
+                    >
+                      <v-icon class="mt-1 mr-2" color="success" size="18"
+                        >mdi-check</v-icon
+                      >
                       <span>{{ scope }}</span>
                     </li>
                   </ul>
@@ -86,27 +90,6 @@
                     Deny
                   </v-btn>
                 </div>
-
-                <div class="mt-4 text-sm text-center">
-                  By authorizing, you agree to the
-                  <v-btn
-                    variant="text"
-                    size="small"
-                    @click="openTerms"
-                    class="px-1 text-capitalize"
-                  >
-                    Terms of Service
-                  </v-btn>
-                  and
-                  <v-btn
-                    variant="text"
-                    size="small"
-                    @click="openPrivacy"
-                    class="px-1 text-capitalize"
-                  >
-                    Privacy Policy
-                  </v-btn>
-                </div>
               </div>
             </div>
           </v-col>
@@ -118,12 +101,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from "vue"
-import { useRoute } from 'vue-router'
+import { useRoute } from "vue-router"
-import { useSolarNetwork } from '~/composables/useSolarNetwork'
+import { useSolarNetwork } from "~/composables/useSolarNetwork"
 
-import IconLight from '~/assets/images/cloudy-lamb.png'
+import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from '~/assets/images/cloudy-lamb@dark.png'
+import IconDark from "~/assets/images/cloudy-lamb@dark.png"
+
+const colorMode = useColorMode()
 
 const route = useRoute()
 const api = useSolarNetwork()
@@ -137,11 +122,9 @@ const isLoading = ref(true)
 const isAuthorizing = ref(false)
 const error = ref<string | null>(null)
 const clientInfo = ref<{
-  client_name?: string
+  clientName?: string
-  home_uri?: string
+  homeUri?: string
   picture?: { url: string }
-  terms_of_service_uri?: string
-  privacy_policy_uri?: string
   scopes?: string[]
 } | null>(null)
 const isNewApp = ref(false)
@@ -158,7 +141,8 @@ async function fetchClientInfo() {
     clientInfo.value = await api(`/id/auth/open/authorize?${queryString}`)
     checkIfNewApp()
   } catch (err: any) {
-    error.value = err.message || 'An error occurred while loading the authorization request'
+    error.value =
+      err.message || "An error occurred while loading the authorization request"
   } finally {
     isLoading.value = false
   }
@@ -173,19 +157,19 @@ function checkIfNewApp() {
 async function handleAuthorize() {
   isAuthorizing.value = true
   try {
-    const data = await api<{ redirect_uri?: string }>('/auth/open/authorize', {
+    const data = await api<{ redirect_uri?: string }>(
-      method: 'POST',
+      "/id/auth/open/authorize",
-      body: {
+      {
-        ...route.query,
+        method: "POST",
-        authorize: 'true',
+        query: route.query
-      },
+      }
-    })
+    )
 
     if (data.redirect_uri) {
       window.location.href = data.redirect_uri
     }
   } catch (err: any) {
-    error.value = err.message || 'An error occurred during authorization'
+    error.value = err.message || "An error occurred during authorization"
   } finally {
     isAuthorizing.value = false
   }
@@ -195,29 +179,21 @@ function handleDeny() {
   // Redirect back to the client with an error
   // Ensure redirect_uri is always a string (not an array)
   const redirectUriStr = Array.isArray(route.query.redirect_uri)
-    ? route.query.redirect_uri[0] || clientInfo.value?.home_uri || '/'
+    ? route.query.redirect_uri[0] || clientInfo.value?.homeUri || "/"
-    : route.query.redirect_uri || clientInfo.value?.home_uri || '/'
+    : route.query.redirect_uri || clientInfo.value?.homeUri || "/"
   const redirectUri = new URL(redirectUriStr)
   // Ensure state is always a string (not an array)
   const state = Array.isArray(route.query.state)
-    ? route.query.state[0] || ''
+    ? route.query.state[0] || ""
-    : route.query.state || ''
+    : route.query.state || ""
   const params = new URLSearchParams({
-    error: 'access_denied',
+    error: "access_denied",
-    error_description: 'The user denied the authorization request',
+    error_description: "The user denied the authorization request",
-    state: state,
+    state: state
   })
   window.open(`${redirectUri}?${params}`, "_self")
 }
 
-function openTerms() {
-  window.open(clientInfo.value?.terms_of_service_uri || '#', "_blank")
-}
-
-function openPrivacy() {
-  window.open(clientInfo.value?.privacy_policy_uri || '#', "_blank")
-}
-
 // Lifecycle
 onMounted(() => {
   fetchClientInfo()