From 690dec7c46b8b63fd497b4bff4e34fd30de445e1 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@kiteworks.com>
Date: Mon, 2 Dec 2024 16:17:08 +0100
Subject: [PATCH] fix(ocm): base64 encoded invite token

---
 changelog/unreleased/bugfix-ocm-invite-flow   |   6 +
 packages/web-app-ocm/src/schemas.ts           |  10 -
 .../src/views/IncomingInvitations.vue         | 175 +++++-------------
 .../src/views/OutgoingInvitations.vue         |  77 +++-----
 4 files changed, 76 insertions(+), 192 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-ocm-invite-flow

diff --git a/changelog/unreleased/bugfix-ocm-invite-flow b/changelog/unreleased/bugfix-ocm-invite-flow
new file mode 100644
index 00000000000..706b334157a
--- /dev/null
+++ b/changelog/unreleased/bugfix-ocm-invite-flow
@@ -0,0 +1,6 @@
+Bugfix: OCM invite flow
+
+We've fixed the OCM invite flow and made it more user-friendly.
+
+https://github.com/owncloud/web/pull/11992
+https://github.com/owncloud/web/issues/11983
diff --git a/packages/web-app-ocm/src/schemas.ts b/packages/web-app-ocm/src/schemas.ts
index 7b4005951a7..645c398af3d 100644
--- a/packages/web-app-ocm/src/schemas.ts
+++ b/packages/web-app-ocm/src/schemas.ts
@@ -11,13 +11,3 @@ export type InviteSchema = z.infer<typeof inviteSchema>
 
 export const inviteListSchema = z.array(inviteSchema)
 export type InviteListSchema = z.infer<typeof inviteListSchema>
-
-// Provider
-export const providerSchema = z.object({
-  domain: z.string(),
-  full_name: z.string()
-})
-export type ProviderSchema = z.infer<typeof providerSchema>
-
-export const providerListSchema = z.array(providerSchema)
-export type ProviderListSchema = z.infer<typeof providerListSchema>
diff --git a/packages/web-app-ocm/src/views/IncomingInvitations.vue b/packages/web-app-ocm/src/views/IncomingInvitations.vue
index 70a2588d74c..fba93748098 100644
--- a/packages/web-app-ocm/src/views/IncomingInvitations.vue
+++ b/packages/web-app-ocm/src/views/IncomingInvitations.vue
@@ -1,59 +1,38 @@
 <template>
   <div id="incoming" class="sciencemesh-app">
     <div>
-      <div class="oc-flex oc-flex-middle oc-px-m oc-py-s">
+      <div class="oc-flex oc-flex-middle oc-px-m oc-pt-s">
         <oc-icon name="user-received" />
         <h2 class="oc-px-s" v-text="$gettext('Accept invitations')" />
         <oc-contextual-helper class="oc-pl-xs" v-bind="helperContent" />
       </div>
-      <div v-if="!providers.length" class="oc-flex oc-flex-center oc-flex-middle">
-        <oc-icon name="error-warning" fill-type="line" class="oc-mr-s" size="large" />
-        <span v-text="$gettext('The list of institutions is empty. Please contact your admin.')" />
-      </div>
-      <div v-else class="oc-flex oc-flex-column oc-flex-middle oc-flex-center oc-p-m">
+      <div class="oc-flex oc-flex-column oc-flex-middle oc-flex-center oc-p-m">
         <div class="oc-width-1-2">
           <oc-text-input
-            ref="tokenInput"
             v-model="token"
             :label="$gettext('Enter invite token')"
             :clear-button-enabled="true"
-            class="oc-mb-m"
+            class="oc-mb-s"
+            @update:model-value="decodeInviteToken"
           />
-          <oc-select
-            v-model="provider"
-            :label="$gettext('Select institution of inviter')"
-            :options="providers"
-            class="oc-mb-m"
-            :position-fixed="true"
-            :loading="loading"
+          <div
+            :class="{
+              'oc-text-input-danger': providerError && token,
+              'oc-text-input-success': provider
+            }"
           >
-            <template #option="{ full_name, domain }">
-              <div class="oc-text-break">
-                <span class="option">
-                  <strong v-text="full_name" />
-                </span>
-                <span class="option" v-text="domain" />
-              </div>
-            </template>
-            <template #no-options> No institutions found with this name</template>
-            <template #selected-option="{ full_name, domain }">
-              <div class="options-wrapper oc-text-break">
-                <strong class="oc-mr-s oc-text-break" v-text="full_name" />
-                <small
-                  v-oc-tooltip="domain"
-                  v-text="domain.length > 17 ? domain.slice(0, 20) + '...' : domain"
-                />
-              </div>
-            </template>
-          </oc-select>
-          <div v-if="providerError" class="oc-text-input-message">
-            <span
-              class="oc-text-input-danger"
-              v-text="$gettext('Unknown institution. Check invitation url or select from list')"
-            />
+            <span v-text="$gettext('Institution:')" />
+            <span v-if="!token" v-text="'-'" />
+            <span v-else-if="provider" v-text="provider" />
+            <span v-else v-text="$gettext('invalid invite token')" />
           </div>
         </div>
-        <oc-button size="small" :disabled="acceptInvitationButtonDisabled" @click="acceptInvite">
+        <oc-button
+          size="small"
+          :disabled="acceptInvitationButtonDisabled"
+          class="oc-mt-s"
+          @click="acceptInvite"
+        >
           <oc-icon name="add" />
           <span v-text="$gettext('Accept invitation')" />
         </oc-button>
@@ -63,35 +42,23 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, unref } from 'vue'
-import {
-  queryItemAsString,
-  useClientService,
-  useRoute,
-  useRouter,
-  useMessages,
-  useConfigStore
-} from '@ownclouders/web-pkg'
+import { computed, defineComponent, ref, unref } from 'vue'
+import { useClientService, useRoute, useRouter, useMessages } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
-import { onBeforeRouteUpdate, RouteLocationNormalized } from 'vue-router'
-import { ProviderSchema, providerListSchema } from '../schemas'
-import { OcTextInput } from '@ownclouders/design-system/components'
 
 export default defineComponent({
   emits: ['highlightNewConnections'],
   setup(props, { emit }) {
     const { showErrorMessage } = useMessages()
     const router = useRouter()
+    const route = useRoute()
     const clientService = useClientService()
-    const configStore = useConfigStore()
     const { $gettext } = useGettext()
 
     const token = ref<string>(undefined)
-    const provider = ref<ProviderSchema>(undefined)
-    const providers = ref<ProviderSchema[]>([])
-    const loading = ref(true)
+    const decodedToken = ref<string>(undefined)
+    const provider = ref<string>(undefined)
     const providerError = ref(false)
-    const tokenInput = ref<InstanceType<typeof OcTextInput>>()
 
     const helperContent = computed(() => {
       return {
@@ -103,7 +70,7 @@ export default defineComponent({
     })
 
     const acceptInvitationButtonDisabled = computed(() => {
-      return !unref(token) || !unref(provider) || unref(provider).full_name === 'Unknown provider'
+      return !unref(decodedToken) || !unref(provider)
     })
 
     const errorPopup = (error: Error) => {
@@ -117,8 +84,8 @@ export default defineComponent({
     const acceptInvite = async () => {
       try {
         await clientService.httpAuthenticated.post('/sciencemesh/accept-invite', {
-          token: unref(token),
-          providerDomain: unref(provider).domain
+          token: unref(decodedToken),
+          providerDomain: unref(provider)
         })
         token.value = undefined
         provider.value = undefined
@@ -134,90 +101,32 @@ export default defineComponent({
         errorPopup(error)
       }
     }
-    const listProviders = async () => {
-      try {
-        const { data: allProviders } = await clientService.httpAuthenticated.get(
-          '/sciencemesh/list-providers',
-          {
-            schema: providerListSchema
-          }
-        )
-        providers.value = allProviders.filter((p) => !isMyProviderSelectedProvider(p))
-      } catch (error) {
-        errorPopup(error)
-      } finally {
-        loading.value = false
-      }
-    }
-    const scrollToForm = () => {
-      const el = document.getElementById('sciencemesh-accept-invites')
-      if (el) {
-        el.scrollIntoView()
-      }
-    }
-    const isMyProviderSelectedProvider = (p: ProviderSchema) => {
-      // the protocol is not important, we just need the host and port, it's there to make it compatible with URL
-      const toURL = (purl: string) =>
-        new URL(purl.split('://').length === 1 ? `https://${purl}` : purl)
-      const { host: configStoreHost, port: configStorePort } = toURL(configStore.serverUrl)
-      const { host: providerSchemaHost, port: providerSchemaPort } = toURL(p.domain)
 
-      return [
-        // ensure that the config store host is not empty, minimal check
-        !!configStoreHost,
-        // ensure that the provider schema host is not empty, minimal check
-        !!providerSchemaHost,
-        // check if the host is the same
-        configStoreHost === providerSchemaHost,
-        // also check the port, multiple instances can run on the same host but not on the same port...
-        configStorePort === providerSchemaPort
-      ].every((c) => c)
-    }
-
-    const handleParams = (to: RouteLocationNormalized) => {
-      const tokenQuery = to.query.token
-      if (tokenQuery) {
-        token.value = queryItemAsString(tokenQuery)
-        unref(tokenInput).focus()
-        scrollToForm()
-      }
-      const providerDomainQuery = to.query.providerDomain
-      if (providerDomainQuery) {
-        const matchedProvider = unref(providers)?.find(
-          (p) => p.domain === queryItemAsString(providerDomainQuery)
-        )
-        if (matchedProvider) {
-          provider.value = matchedProvider
-          providerError.value = false
-        } else {
-          provider.value = {
-            full_name: 'Unknown provider',
-            domain: queryItemAsString(providerDomainQuery)
-          }
-          providerError.value = true
+    const decodeInviteToken = (value: string) => {
+      try {
+        const decoded = atob(value)
+        if (!decoded.includes('@')) {
+          throw new Error()
         }
+        const [token, serverUrl] = decoded.split('@')
+        provider.value = serverUrl
+        decodedToken.value = token
+        providerError.value = false
+      } catch (e) {
+        provider.value = ''
+        decodedToken.value = ''
+        providerError.value = true
       }
     }
 
-    const route = useRoute()
-    onMounted(async () => {
-      await listProviders()
-      handleParams(unref(route))
-    })
-    onBeforeRouteUpdate((to) => {
-      handleParams(to)
-    })
-
     return {
-      tokenInput,
       helperContent,
       token,
       provider,
-      providers,
-      loading,
       providerError,
       acceptInvitationButtonDisabled,
-      acceptInvite
+      acceptInvite,
+      decodeInviteToken
     }
   }
 })
diff --git a/packages/web-app-ocm/src/views/OutgoingInvitations.vue b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
index 1a63d9c6cbd..3f5a12babd4 100644
--- a/packages/web-app-ocm/src/views/OutgoingInvitations.vue
+++ b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sciencemesh-app">
     <div>
-      <div class="oc-flex oc-flex-middle oc-px-m oc-py-s">
+      <div class="oc-flex oc-flex-middle oc-px-m oc-pt-s">
         <oc-icon name="user-shared" />
         <h2 class="oc-px-s" v-text="$gettext('Invite users')"></h2>
         <oc-contextual-helper class="oc-pl-xs" v-bind="helperContent" />
@@ -40,17 +40,6 @@
                 !descriptionErrorMessage && `${formInput.description?.length || 0}/${50}`
               "
             />
-            <oc-text-input
-              id="invite_token_recipient"
-              ref="inputForFocusEmail"
-              v-model="formInput.recipient"
-              class="oc-mb-s"
-              type="email"
-              :clear-button-enabled="true"
-              :error-message="emailErrorMessage"
-              :label="$gettext('Email to send the invitation (optional)')"
-            />
-            <!-- <oc-text-input label="Add an recipient to sent the token (optional)"/> -->
             <input type="submit" class="oc-hidden" />
           </form> </template
       ></oc-modal>
@@ -69,7 +58,9 @@
         <oc-table v-else :fields="fields" :data="sortedTokens" :highlighted="lastCreatedToken">
           <template #token="rowData">
             <div class="invite-code-wrapper oc-flex">
-              <span class="oc-display-inline-block oc-text-truncate">{{ rowData.item.token }}</span>
+              <div class="oc-text-truncate">
+                <span class="oc-text-truncate">{{ encodeInviteToken(rowData.item.token) }}</span>
+              </div>
               <oc-button
                 id="oc-sciencemesh-copy-token"
                 v-oc-tooltip="$gettext('Copy invite token')"
@@ -109,14 +100,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, unref } from 'vue'
-import * as EmailValidator from 'email-validator'
 import {
   NoContentMessage,
   AppLoadingSpinner,
   useClientService,
   useMessages,
   formatDateFromJSDate,
-  formatRelativeDateFromJSDate
+  formatRelativeDateFromJSDate,
+  useConfigStore
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { inviteListSchema, inviteSchema } from '../schemas'
@@ -138,19 +129,17 @@ export default defineComponent({
   setup() {
     const { showMessage, showErrorMessage } = useMessages()
     const clientService = useClientService()
+    const configStore = useConfigStore()
     const { $gettext, current: currentLanguage } = useGettext()
 
     const lastCreatedToken = ref('')
     const showInviteModal = ref(false)
     const formInput = ref({
-      description: '',
-      recipient: ''
+      description: ''
     })
     const tokens = ref<Token[]>([])
     const loading = ref(true)
-    const emailErrorMessage = ref(null)
     const descriptionErrorMessage = ref<string>()
-    const inputForFocusEmail = ref<HTMLInputElement>()
     const fields = computed(() => {
       const haveLinks = unref(sortedTokens)[0]?.link
 
@@ -163,7 +152,7 @@ export default defineComponent({
         },
         {
           name: 'token',
-          title: $gettext('Invite code'),
+          title: $gettext('Invite token'),
           alignH: haveLinks ? 'right' : 'left',
           type: 'slot'
         },
@@ -192,13 +181,13 @@ export default defineComponent({
       }
     })
 
+    const encodeInviteToken = (token: string) => {
+      const url = new URL(configStore.serverUrl)
+      return btoa(`${token}@${url.host}`)
+    }
+
     const generateToken = async () => {
-      const { description, recipient } = unref(formInput)
-      if (recipient.length > 0 && !EmailValidator.validate(recipient)) {
-        emailErrorMessage.value = $gettext('Please enter a valid email address!')
-        unref(inputForFocusEmail).focus()
-        return
-      }
+      const { description } = unref(formInput)
 
       if (unref(descriptionErrorMessage)) {
         return
@@ -207,8 +196,7 @@ export default defineComponent({
         const { data: tokenInfo } = await clientService.httpAuthenticated.post(
           '/sciencemesh/generate-invite',
           {
-            ...(description && { description }),
-            ...(recipient && { recipient })
+            ...(description && { description })
           },
           {
             schema: inviteSchema
@@ -231,18 +219,14 @@ export default defineComponent({
           showMessage({
             title: $gettext('Success'),
             status: 'success',
-            desc: recipient
-              ? $gettext('New token has been created and sent to %{recipient}.', {
-                  recipient
-                })
-              : $gettext(
-                  'New token has been created and copied to your clipboard. Send it to the invitee(s).'
-                )
+            desc: $gettext(
+              'New token has been created and copied to your clipboard. Send it to the invitee(s).'
+            )
           })
-          lastCreatedToken.value = tokenInfo.token
-          if (!recipient) {
-            navigator.clipboard.writeText(tokenInfo.token)
-          }
+
+          const quickToken = encodeInviteToken(tokenInfo.token)
+          lastCreatedToken.value = quickToken
+          navigator.clipboard.writeText(quickToken)
         }
       } catch (error) {
         lastCreatedToken.value = ''
@@ -286,7 +270,7 @@ export default defineComponent({
       })
     }
     const copyToken = (rowData: { item: { link: string; token: string } }) => {
-      navigator.clipboard.writeText(rowData.item.token)
+      navigator.clipboard.writeText(encodeInviteToken(rowData.item.token))
       showMessage({
         title: $gettext('Invite token copied'),
         desc: $gettext('Invite token has been copied to your clipboard.')
@@ -308,8 +292,7 @@ export default defineComponent({
     const resetGenerateInviteToken = () => {
       showInviteModal.value = false
       formInput.value = {
-        description: '',
-        recipient: ''
+        description: ''
       }
     }
 
@@ -338,16 +321,15 @@ export default defineComponent({
       resetGenerateInviteToken,
       generateToken,
       formInput,
-      emailErrorMessage,
       loading,
       sortedTokens,
       copyToken,
       copyLink,
       lastCreatedToken,
       fields,
-      inputForFocusEmail,
       formatDate,
-      formatDateRelative
+      formatDateRelative,
+      encodeInviteToken
     }
   }
 })
@@ -356,10 +338,7 @@ export default defineComponent({
 <style lang="scss">
 .sciencemesh-app {
   .invite-code-wrapper {
-    max-width: 100%;
-    @media (max-width: $oc-breakpoint-xlarge) {
-      max-width: 200px;
-    }
+    width: 200px;
   }
   #invite-tokens-empty {
     height: 100%;