Invite app

[James-Mart]

Invite app

The invite process for psibase has two primary goals:

1. To allow users to invite other users to the network.
2. To simplify the process of whitelabeling an invite process from within third-party applications

Specifications

There are two user experiences related to invites:

1. The inviter experience
2. The invitee experience

Inviter experience

An inviter needs the following abilities:

• Generate invites
  • Provide an invite label (kept locally), for simpler tracking/management
• Track invite status - Pending/accepted/rejected/expired
• Revoke an invite
• Copy invite URL

To accomplish this, the invite plugin needs:

• A function called generateInvite that returns the generated invite ID

Invitee experience

Whitelabel page

An invitee is one who clicks an invite URL. The invite URL is specific to the app responsible for generating the invite. For example, if a third-party game is responsible for generating the invite, the invitee follows a link to game.psibase/invited?invite_id=x (or similar) that offers a whitelabeled invite experience.

In our case, the invites are generated in the very general context of the network itself, rather than to a specific app in the network. Therefore, the invite link should take the invitee to a page that very briefly describes the network in general so the invitee has a sense of what it is that they were invited to. This could be at psibase.tld/invited.

This whitelabel page has the following capabilities:

• Allow user to reject invite (by simply calling reject on invite plugin)
• Or allow user to "accept" invite (which really takes them to the invite response page)

Response page

I think this should actually be the standard UI for the accounts login oauth page. Temporarily as an MVP, we can implement this to be accessed as an actual redirect, rather than a plugin popup window, until plugin popups are supported.

The URL can be something like: accounts.psibase.tld/login?app=abc&invite_id=xyz.

• Should show:
  • The name of the app to which the user is invited
  • The account name of the inviter
• Capabilities:
  • Allow user to reject invite
  • Allow user to accept invite by selecting a pre-existing account with which to accept
  • Allow user to accept invite by creating a new account
    • If the new account is their first account, also configure the local browser password used to unlock the supervisor.

Invitee experience design artifacts

Whitelabel page flow

flowchart TD
    classDef red stroke:#f00
    classDef green stroke:#0f0

    generateInvite[Generate and share invite link]
    clickInvite[Whitelabeled invitation experience]
    respondOrReject{{Respond to or reject invite?}}
    rejectInvite[Reject invite]
    respondToInvite[Respond to invite]
    rejectCall>`invite->reject`]
    redirectTo[Redirect to `Response Page`]
    redirectBack[Redirect back from `Response Page`]
    
    subgraph responsePage["accounts.psibase.tld/login?invite_id=..."]
        info[...see `Response Page` flow]
    end


    generateInvite --> clickInvite 
    clickInvite --> respondOrReject --> respondToInvite --> redirectTo --> responsePage
    respondOrReject --> rejectInvite --> rejectCall:::red

    responsePage --> redirectBack --> handleAccept[Handle accept/reject]
    rejectCall --> handleRejection[Handle rejection]

Response page flow

flowchart TD
    classDef red stroke:#f00
    classDef green stroke:#0f0

        accountExists{{Does a user account exist?}}
        acceptWith{{Select/Create/Reject}}
        createFirstOrReject{{Create first account or reject?}}
        createFirst[Create first]
        reject>`invite->reject`]
        accountExistsYes[User has an account]
        accountExistsNo[User has no account]
        setupPassword[Set Up Password]
        configNewAccount[Configure new account] 
        addNewAccount>`invite->acceptCreate`]
        nowWhat{{Learn more or return to app?}}
        homepage[Learn more - Redirect: home page]
        existingAccount[Select existing]
        submitAccept>`invite->accept`]
        newAccount[Create account]

        accountExists --> accountExistsNo
            accountExistsNo --> createFirstOrReject 
            createFirstOrReject --> createFirst --> setupPassword
            createFirstOrReject --> reject:::red
            setupPassword --> configNewAccount
            configNewAccount --> addNewAccount:::green
            addNewAccount --> nowWhat
            nowWhat --> homepage
        accountExists --> accountExistsYes
            accountExistsYes --> acceptWith
            acceptWith --> reject
            acceptWith --> existingAccount
                existingAccount --> submitAccept:::green
            acceptWith --> newAccount
                newAccount --> configNewAccount
        
        submitAccept --> appReturn
        nowWhat --> appReturn

[Velua]

in the context of fractally, an invite is created THROUGH fractally, which in turn creates side effects on fractally based tables,

game.psibase/invited?invite_id=x invite.psibase.io/redeem?invite_id=x

Invite is a pure service / plugin.

Dashboard is to generate the invites. Accounts is to redeem them.

Dashboard changes

The addition of a "Generate invite" button in the settings cog for now, subsequent updates to the dashboard in general might create a new layout to advertise basic functions like this in a more prominent manner. After pressing the button, display a modal which offers the link in a nicely formatted way with a copy to clipboard button as well.

Dashboard will also need to accommodate some kind of callback page, advising the user of the successful account creation.

• [x] Create invite button
• [x] Invite modal with refresh functionality
• [x] Actual engagement of the plugin to create the invite
• [x] Callback page
• [x] Installation of React Router

Account changes

Account page which allows for account selection and redemption of invite.

[Velua]

Query Params

• callback_uri
• app
• invite_token - Elsewhere known as invite_id