Accept OOB invite

services/tenant-ui/frontend/src/components/connections/acceptInvitation/AcceptInviteForm.vue

@@ -1,5 +1,32 @@
 <template>
   <form v-if="urlEntryStep" @submit.prevent="handleSubmit(!v$.$invalid)">
+    <!-- Invitation type -->
+    <div class="mb-3">
+      <span>{{ $t('connect.invitation.type') }}</span>
+      <div class="my-2">
+        <RadioButton
+          v-model="isOob"
+          input-id="type1"
+          name="type"
+          :value="false"
+        />
+        <label for="type1" class="ml-2">{{
+          $t('connect.invitation.typeConnections')
+        }}</label>
+      </div>
+      <div>
+        <RadioButton
+          v-model="isOob"
+          input-id="type2"
+          name="type"
+          :value="true"
+        />
+        <label for="type2" class="ml-2">{{
+          $t('connect.invitation.typeOob')
+        }}</label>
+      </div>
+    </div>
+
     <div class="field">
       <div class="flex justify-content-between">
         <label
@@ -38,15 +65,21 @@
       <i class="pi pi-info-circle"></i>
       {{ $t('connect.acceptInvitation.supportedUrl') }}
       <strong>
-        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        <code>http://&lt;acapy_url&gt;?c_i=&lt;base64 encode&gt;</code>
+        <code>
+          {{
+            $t('connect.acceptInvitation.supportedUrlEx', [
+              isOob ? 'oob' : 'c_i',
+            ])
+          }}
+        </code>
       </strong>
     </div>
   </form>
 
   <AcceptInviteSubmission
     v-else
     :invitation-string="invitationString"
+    :is-oob="isOob"
     @closed="$emit('closed')"
   />
 </template>
@@ -57,6 +90,7 @@ import { reactive, ref } from 'vue';
 // PrimeVue / Validation
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
+import RadioButton from 'primevue/radiobutton';
 import { required, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useToast } from 'vue-toastification';
@@ -70,6 +104,7 @@ defineEmits(['closed']);
 
 const urlEntryStep = ref(true);
 const invitationString = ref('{}');
+const isOob = ref(false);
 
 // Skip URL enter
 const skipUrl = () => {
@@ -97,7 +132,7 @@ const handleSubmit = async (isFormValid: boolean) => {
   try {
     const inviteParam = paramFromUrlString(
       formFields.inviteUrl,
-      'c_i'
+      isOob.value ? 'oob' : 'c_i'
     ) as string;
     if (!inviteParam) {
       throw Error('Invalid format for invitation URL');

services/tenant-ui/frontend/src/components/connections/acceptInvitation/AcceptInviteSubmission.vue

@@ -77,12 +77,16 @@ const { loading } = storeToRefs(useConnectionStore());
 
 const emit = defineEmits(['closed', 'success']);
 
-const props = defineProps({
-  invitationString: {
-    type: String,
-    default: '{}',
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    invitationString?: string;
+    isOob?: boolean;
+  }>(),
+  {
+    invitationString: '{}',
+    isOob: false,
+  }
+);
 
 // Validation
 const formFields = reactive({
@@ -111,7 +115,8 @@ const handleSubmit = async (isFormValid: boolean) => {
   try {
     await connectionStore.receiveInvitation(
       formFields.invitationJson,
-      formFields.alias
+      formFields.alias,
+      props.isOob
     );
     emit('success');
     // close up on success

services/tenant-ui/frontend/src/plugins/i18n/locales/en.json

@@ -161,6 +161,7 @@
       "skipUrl": "Skip URL and use JSON",
       "submit": "Accept",
       "supportedUrl": "Supported URL format is",
+      "supportedUrlEx": "http://<acapy_url>?{0}=<base64 encode>",
       "url": "Invitation URL"
     },
     "connections": {

services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json

@@ -160,6 +160,7 @@
       "skipUrl": "Skip URL and use JSON <FR>",
       "submit": "Accept <FR>",
       "supportedUrl": "Supported URL format is <FR>",
+      "supportedUrlEx": "http://<acapy_url>?{0}=<base64 encode>",
       "url": "Invitation URL <FR>"
     },
     "connections": {

services/tenant-ui/frontend/src/plugins/i18n/locales/ja.json

@@ -160,6 +160,7 @@
       "skipUrl": "Skip URL and use JSON <JA>",
       "submit": "Accept <JA>",
       "supportedUrl": "Supported URL format is <JA>",
+      "supportedUrlEx": "http://<acapy_url>?{0}=<base64 encode>",
       "url": "Invitation URL <JA>"
     },
     "connections": {

services/tenant-ui/frontend/src/store/connectionStore.ts

@@ -133,16 +133,23 @@ export const useConnectionStore = defineStore('connection', () => {
     return invitationData;
   }
 
-  async function receiveInvitation(invite: string, alias: string) {
+  async function receiveInvitation(
+    invite: string,
+    alias: string,
+    oob: boolean
+  ) {
     console.log('> connectionStore.receiveInvitation');
     error.value = null;
     loading.value = true;
 
     let acceptedData = null;
     const payload = JSON.parse(invite);
 
+    const url = oob
+      ? API_PATH.OUT_OF_BAND_RECIEVE
+      : API_PATH.CONNECTIONS_RECEIVE_INVITATION;
     await acapyApi
-      .postHttp(API_PATH.CONNECTIONS_RECEIVE_INVITATION, payload, {
+      .postHttp(url, payload, {
         params: { alias, auto_accept: true },
       })
       .then((res) => {