As an user, in case my account have expirated, I want to be informed and have a process to reactivate my account

[jdauphant]

Your use case

In case your account is disactivate, inform the user and permit to send an email to reactivate the account

Have you considered any alternatives?

No response

Additional context

No response

Keywords : expiration renew

[estellecomment]

Is this the deactivation for which you need to click a link in your email ? ("Renouvelez votre compte tchap")
If so, the backend sends the link, and the link is a page served by the backend, so there is nothing to do on the frontend.

[jdauphant]

There is an alerting popup in the frontend that inform the desactivation of the account and permit the reactivation of the account.

[jdauphant]

(I don't have the screenshot)

[jdauphant]

On tchap-web-v2 :

[jdauphant]

There is proposition with a code to enter : https://github.com/tchapgouv/tchap-design/issues/26

[mcalinghee]

On tchap-web-v4 :

[estellecomment]

Let's try à beta without this. (if it's a blocker we'll reconsider)

[jdauphant]

We can implement with something like that :

        let newEmailRequested = false;
 /**
     * React on Sync State Changed
     * @param state 
     * @param prevState 
     * @param data 
     */
    static onSyncStateChange(state: SyncState, prevState: SyncState, data: ISyncStateData) {
        if (data && data.error && data.error.errcode === "ORG_MATRIX_EXPIRED_ACCOUNT") {
            Modal.createTrackedDialog('Expired Account Dialog', '', ExpiredAccountDialog, {
                newEmailRequested: newEmailRequested,
                onRequestNewEmail: () => {
                    newEmailRequested = true;
                    TchapUtils.requestNewExpiredAccountEmail();
                },
                onFinished: () => {
                    newEmailRequested = false;
                },
            });
        }
    }

    static setupExpirationAccount() {
        const cli = MatrixClientPeg.get();

        this.boundOnSyncStateChange = this.boundOnSyncStateChange || this.onSyncStateChange.bind(this);

        cli.on(ClientEvent.Sync, this.boundOnSyncStateChange);

    }

     /**
     * Request a new validation email for expired account.
     */
     static requestNewExpiredAccountEmail() {
        const homeserverUrl = MatrixClientPeg.get().getHomeserverUrl();
        const accessToken = MatrixClientPeg.get().getAccessToken();
        const url = `${homeserverUrl}/_matrix/client/unstable/account_validity/send_mail`;
        const options = {https://github.com/matrix-org/synapse-email-account-validity
            method: 'POST',
            headers: {
                Authorization: `Bearer ${accessToken}`,
            },
        };

        fetch(url, options);
    }
}

(source https://github.com/tchapgouv/matrix-react-sdk-v3/blob/develop/src/components/structures/MatrixChat.tsx#L1328-L1342 )

Other tasks :

• find where we should call setupExpirationAccount to initiate the call
• Integrate the dialog : https://github.com/tchapgouv/matrix-react-sdk-v3/blob/develop/src/tchap/components/dialogs/ExpiredAccountDialog.js
• Convert the dialog to typescript

We can modularize as module called "matrix-react-email-account-validity", it would be nice (I could be a generic plugin that work with https://github.com/matrix-org/synapse-email-account-validity).

[giomfo]

Let's try à beta without this. (if it's a blocker we'll reconsider)

I think this point is a blocker except if the beta testers are aware of this limitation (which need to be connected on another client which supports the account renewal)

[odelcroi]

We can modularize as module called "matrix-react-email-account-validity", it would be nice (I could be a generic plugin that work with https://github.com/matrix-org/synapse-email-account-validity).
I like the idea, it can be an open source contribution.
What do you have in mind to build such "plugin" ? I'm not sure element web have a mecanism to integrate frontend plugin? -> any ideas @weeman1337 ?

I thought of :

• npm module with a root component to import at app level that will listen to ORG_MATRIX_EXPIRED_ACCOUNT errors and the display panel.

[weeman1337]

You could check if this https://github.com/matrix-org/matrix-react-sdk-module-api provides an API that enabled you doing what you want. After a quick read opening dialogs should be possible.

If not you could „npm module with a root component to import at app level that will listen to ORG_MATRIX_EXPIRED_ACCOUNT errors and the display panel.“ give a try.

[odelcroi]

analysis

After a deeper analysis, this is what we need :
1 - Detect error 403 with the code ORG_MATRIX_EXPIRED_ACCOUNT in tchap app lifecycle,
- suspend the client synchronization
- trigger a process to renew account
- display a panel to inform users to renew the account
- disable any other interactions in the app
2 - Resume the client synchronisation and close the panel when account is not expired anymore

I'm considering 3 approaches for the integration (from less to most intrusive) :

• create a module with the moduleAPI
• create a non intrusive independant component
• modify MatrixChat

solution

ORG_MATRIX_EXPIRED_ACCOUNT errors can be detected by listening to the events ClientEvent.Sync as proposed by @jdauphant.

• what about login and other API calls?

Panels can be opened with the moduleAPI as mentionned by @weeman1337

How can we suspend/resume the client synchronisation?

• from the moduleAPI ? still searching
• from an external component? still searching
• modifying MatrixChat : ok

How can we disable any other interactions in the app?

• from the moduleAPI ? still searching
• from an external component? still searching
• modifying MatrixChat : ok

[jdauphant]

Can you just block the UI interaction with an overlay and force reload the app after the validation ?

[estellecomment]

It would be nice for the user to get a visual confimation in tchap-web that the account is successfully renewed. They should see "You have successfully renewed your account" somewhere in the app. If we just reload/resume silently, it may not be clear to the user what happened.

(but maybe first we should get the principle working, and think about UX after :) )

[odelcroi]

Test cases

• account is expired, user is logged off, user login, the expiration panel is displayed after logging in
• account is not expired, user is logged in, the expiration panel is displayed as soon as the account is expired
• expired panel is open, user requests new email
• expired panel is open, user requests second email before 30 seconds
• expired panel is open, user requests new email, but sending fails (hard to test in dev...)
• expired panel is open, user clicks on 'ok' button before clicking on the email link
• expired panel is open, user cliks on email link, user clicks on 'ok' button

[odelcroi]

POST requests to expire/renew account (usefull for testing)

#disable account
curl --location --request POST 'https://matrix.agent1.tchap.incubateur.net/_synapse/admin/v1/account_validity/validity' \
--header 'Authorization: Bearer <ADMIN_TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{
    "user_id": "<matrixID-of-user>",
    "expiration_ts": 1,
    "enable_renewal_emails": true
}'

#renew account
curl --location --request POST 'https://matrix.agent1.tchap.incubateur.net/_synapse/admin/v1/account_validity/validity' \
--header 'Authorization: Bearer <ADMIN_TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{
    "user_id": "<matrixID-of-user>",
    "expiration_ts": 1699633609,
    "enable_renewal_emails": true
}'
``
`