Fix error that invite link doesn't work inside chat

frontend/controller/router.js

@@ -42,8 +42,8 @@ const loginGuard = {
 
 const inviteGuard = {
   guard: (to, from) => {
-    // ex: http://localhost:8000/app/join#groupId=21XWnNRE7vggw4ngGqmQz5D4vAwPYqcREhEkGop2mYZTKVkx8H&secret=5157
-    return !(to.hash.includes('groupId=') && to.hash.includes('secret='))
+    // ex: http://localhost:8000/app/join?groupId=21XWnNRE7vggw4ngGqmQz5D4vAwPYqcREhEkGop2mYZTKVkx8H&secret=5157
+    return !(to.query.groupId && to.query.secret)
   },
   redirect: (to, from) => ({ path: '/' })
 }

frontend/model/contracts/shared/voting/proposals.js

@@ -44,7 +44,7 @@ export function notifyAndArchiveProposal ({ state, proposalHash, proposal, contr
 export function buildInvitationUrl (groupId: string, groupName: string, inviteSecret: string, creatorID?: string): string {
   const rootGetters = sbp('state/vuex/getters')
   const creatorUsername = creatorID && rootGetters.usernameFromID(creatorID)
-  return `${location.origin}/app/join#?${(new URLSearchParams({
+  return `${location.origin}/app/join?${(new URLSearchParams({
       groupId: groupId,
       groupName: groupName,
       secret: inviteSecret,

frontend/views/pages/Join.vue

@@ -103,7 +103,7 @@ export default ({
   },
   mounted () {
     // For some reason in some Cypress tests it loses the route query when initialized is called
-    this.ephemeral.hash = new URLSearchParams(this.$route.hash.slice(1))
+    this.ephemeral.query = Object.assign({}, this.$route.query)
     if (syncFinished || !this.ourIdentityContractId) {
       this.initialize()
     } else {
@@ -114,8 +114,8 @@ export default ({
     async initialize () {
       try {
         const messageToAskAnother = L('You should ask for a new one. Sorry about that!')
-        const groupId = this.ephemeral.hash.get('groupId')
-        const secret = this.ephemeral.hash.get('secret')
+        const groupId = this.ephemeral.query.groupId
+        const secret = this.ephemeral.query.secret
         if (!groupId || !secret) {
           console.error('Invalid invite link: missing group ID or secret')
           this.ephemeral.errorMsg = messageToAskAnother
@@ -143,7 +143,7 @@ export default ({
         }
         if (this.ourIdentityContractId) {
           const myGroupIds = Object.keys(this.$store.state[this.ourIdentityContractId]?.groups || {})
-          const targetGroupId = this.ephemeral.hash?.get('groupId') || ''
+          const targetGroupId = this.ephemeral.query?.groupId || ''
           const targetGroupState = this.$store.state[targetGroupId] || {}
 
           if (this.currentGroupId && [PROFILE_STATUS.ACTIVE, PROFILE_STATUS.PENDING].includes(targetGroupState?.profiles?.[this.ourIdentityContractId])) {
@@ -161,15 +161,15 @@ export default ({
           }
           return
         }
-        const creatorID = this.ephemeral.hash.get('creatorID')
-        const creatorUsername = this.ephemeral.hash.get('creatorUsername')
+        const creatorID = this.ephemeral.query.creatorID
+        const creatorUsername = this.ephemeral.query.creatorUsername
         const who = creatorUsername || creatorID
         const message = who
           ? L('{who} invited you to join their group!', { who })
           : L('You were invited to join')
 
         this.ephemeral.invitation = {
-          groupName: this.ephemeral.hash.get('groupName') ?? L('(group name unavailable)'),
+          groupName: this.ephemeral.query.groupName ?? L('(group name unavailable)'),
           creatorID,
           creatorUsername,
           message
@@ -196,8 +196,8 @@ export default ({
     },
     async accept () {
       this.ephemeral.errorMsg = null
-      const groupId = this.ephemeral.hash.get('groupId')
-      const secret = this.ephemeral.hash.get('secret')
+      const groupId = this.ephemeral.query.groupId
+      const secret = this.ephemeral.query.secret
 
       const profileStatus = this.$store.state.contracts[groupId]?.profiles?.[this.ourIdentityContractId]?.status
       if ([PROFILE_STATUS.ACTIVE, PROFILE_STATUS.PENDING].includes(profileStatus)) {

test/cypress/integration/group-proposals.spec.js

@@ -388,7 +388,7 @@ describe('Proposals - Add members', () => {
   })
 
   it('an invalid invitation link cannot be used', () => {
-    cy.visit('/app/join#?groupId=321&secret=123')
+    cy.visit('/app/join?groupId=321&secret=123')
     cy.getByDT('pageTitle')
       .invoke('text')
       .should('contain', 'Oh no! This invite is not valid')
@@ -408,6 +408,9 @@ describe('Proposals - Add members', () => {
     cy.getByDT('openAllProposals').click()
     cy.get('[data-test="modal"] > .c-container .c-title').should('contain', 'Archived proposals')
     cy.getByDT('modal').within(() => {
+      // NOTE: this is to wait until all of the 5 proposals are loaded inside the modal
+      cy.get('.c-container > .c-header-info .has-text-1').should('contain', '5 proposals')
+
       getProposalItems().eq(2).within(() => {
         cy.getByDT('title', 'p').should('contain', 'You proposed')
         cy.getByDT('statusDescription')

test/cypress/support/commands.js

@@ -15,10 +15,10 @@ const API_URL = Cypress.config('baseUrl')
 // util funcs
 const randomFromArray = arr => arr[Math.floor(Math.random() * arr.length)] // importing giLodash.js fails for some reason.
 const getParamsFromInvitationLink = invitationLink => {
-  const params = new URLSearchParams(new URL(invitationLink).hash.slice(1))
+  const url = new URL(invitationLink)
   return {
-    groupId: params.get('groupId'),
-    inviteSecret: params.get('secret')
+    groupId: url.searchParams.get('groupId'),
+    inviteSecret: url.searchParams.get('secret')
   }
 }