feat(ocm): base64 encoded invite token

Author: Jannik Stehle

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>

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
     }
   }
 })

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" />
@@ -69,7 +69,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')"
@@ -116,7 +118,8 @@ import {
   useClientService,
   useMessages,
   formatDateFromJSDate,
-  formatRelativeDateFromJSDate
+  formatRelativeDateFromJSDate,
+  useConfigStore
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { inviteListSchema, inviteSchema } from '../schemas'
@@ -138,6 +141,7 @@ export default defineComponent({
   setup() {
     const { showMessage, showErrorMessage } = useMessages()
     const clientService = useClientService()
+    const configStore = useConfigStore()
     const { $gettext, current: currentLanguage } = useGettext()
 
     const lastCreatedToken = ref('')
@@ -163,7 +167,7 @@ export default defineComponent({
         },
         {
           name: 'token',
-          title: $gettext('Invite code'),
+          title: $gettext('Invite token'),
           alignH: haveLinks ? 'right' : 'left',
           type: 'slot'
         },
@@ -192,6 +196,11 @@ 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)) {
@@ -239,9 +248,11 @@ export default defineComponent({
                   'New token has been created and copied to your clipboard. Send it to the invitee(s).'
                 )
           })
-          lastCreatedToken.value = tokenInfo.token
+
+          const quickToken = encodeInviteToken(tokenInfo.token)
+          lastCreatedToken.value = quickToken
           if (!recipient) {
-            navigator.clipboard.writeText(tokenInfo.token)
+            navigator.clipboard.writeText(quickToken)
           }
         }
       } catch (error) {
@@ -286,7 +297,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.')
@@ -347,7 +358,8 @@ export default defineComponent({
       fields,
       inputForFocusEmail,
       formatDate,
-      formatDateRelative
+      formatDateRelative,
+      encodeInviteToken
     }
   }
 })
@@ -356,10 +368,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%;