[ui-authorization] authorize application by providing client id

Co-authored-by: Maciej Samoraj <[email protected]>
janeirodigital · Nov 6, 2023 · ad39c40 · ad39c40
1 parent cb210ad
commit ad39c40
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 13 deletions.
diff --git a/ui/authorization/src/components/AuthorizeApp.vue b/ui/authorization/src/components/AuthorizeApp.vue
@@ -227,15 +227,18 @@ import {
   DataInstance
 } from '@janeirodigital/sai-api-messages';
 import { reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { useCoreStore } from '@/store/core';
 import { useAppStore } from '@/store/app';
+const router = useRouter()
 
 const coreStore = useCoreStore();
 const appStore = useAppStore();
 
 const props = defineProps<{
   application: Partial<Application>;
   authorizationData: AuthorizationData;
+  redirect: Boolean
 }>();
 
 type PropagatingScope = 'none' | 'all';
@@ -567,7 +570,13 @@ function authorize(granted = true) {
 watch(
   () => appStore.accessAuthorization,
   (accessAuthorization) => {
-    if (accessAuthorization) window.location.href = accessAuthorization.callbackEndpoint;
+    if (accessAuthorization) {
+      if(props.redirect) {
+        window.location.href = accessAuthorization.callbackEndpoint;
+      } else {
+        router.push( { name: 'application-list' })
+      }
+    }
   }
 );
 </script>
diff --git a/ui/authorization/src/store/app.ts b/ui/authorization/src/store/app.ts
@@ -47,8 +47,16 @@ export const useAppStore = defineStore('app', () => {
     loadedDataInstances[registrationId] = [...dataInstances];
   }
 
+  async function listApplications(force = false) {
+    if (!applicationList.length || force) {
+      const applications = await backend.listApplications();
+      applicationList.push(...applications);
+    }
+  }
+
   async function authorizeApp(authorization: Authorization) {
     accessAuthorization.value = await backend.authorizeApp(authorization);
+    listApplications(true);
   }
 
   async function listSocialAgents() {
@@ -59,13 +67,6 @@ export const useAppStore = defineStore('app', () => {
     application.value = await backend.getApplication(applicationId);
   }
 
-  async function listApplications() {
-    if (!applicationList.length) {
-      const applications = await backend.listApplications();
-      applicationList.push(...applications);
-    }
-  }
-
   async function listDataRegistries(agentId: string, lang = 'en') {
     if (!dataRegistryList.length) {
       const dataRegistries = await backend.listDataRegistires(agentId, lang);

diff --git a/ui/authorization/src/views/ApplicationList.vue b/ui/authorization/src/views/ApplicationList.vue
@@ -1,14 +1,82 @@
+<style>
+  #add-button {
+    display: block;
+    margin: 16px auto 0;
+  }
+</style>
 <template>
-  <v-list>
-    <v-list-item v-for="application in appStore.applicationList" :key="application.id" :prepend-avatar="application.logo" :title="application.name">
-    </v-list-item>
-  </v-list>
+  <v-container>
+    <v-list>
+      <v-list-item
+        v-for="application in appStore.applicationList"
+        :key="application.id" :prepend-avatar="application.logo"
+        :title="application.name">
+      </v-list-item>
+    </v-list>
+    <v-btn
+      id="add-button"
+      color="primary"
+      @click="addDialog = true"
+    >
+      <v-icon icon="mdi-plus"></v-icon>Add application
+    </v-btn>
+    <v-dialog
+      persistent
+      fullscreen
+      width="100vw"
+      v-model="addDialog"
+    >
+      <v-card>
+        <v-card-title>
+          Add application
+        </v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="addClientId"
+            label="Client Id"
+          ></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            color="warning"
+            variant="tonal"
+            @click="addDialog = false"
+          >
+            Cancel
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            :disabled="!addClientId"
+            @click="addApplication"
+          >
+            Next
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { useAppStore } from '@/store/app';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
 
 const appStore = useAppStore()
 appStore.listApplications()
 
-</script>
+const addDialog = ref(false)
+const addClientId = ref('')
+
+// http://localhost:3000/acme/projectron/vue
+function addApplication() {
+  addDialog.value = false
+  if (addClientId.value) {
+    router.push({ name: 'authorization', query: { client_id: addClientId.value, redirect: 'false' }})
+  }
+}
+
+</script>
diff --git a/ui/authorization/src/views/Authorization.vue b/ui/authorization/src/views/Authorization.vue
@@ -4,6 +4,7 @@
       v-if="!route.query.resource && appStore.authorizationData && appStore.application"
       :application="appStore.application"
       :authorizationData="appStore.authorizationData"
+      :redirect="route.query.redirect !== 'false'"
     ></AuthorizeApp>
     <AuthorizeAgent v-if="!route.query.resource && agent" :agent="agent"></AuthorizeAgent>
     <ShareResource
@@ -33,6 +34,7 @@ const resourceId = ref<string | undefined>();
 watch(
   () => [route.query.client_id, route.query.resource],
   ([client_id, resource]) => {
+    if (route.name !== 'authorization') return
     if (route.query.webid) return;
     if (!client_id || Array.isArray(client_id)) throw new Error('one client_id is required');
     clientId.value = client_id;