session expired modal

[yokwejuste]

Summary

Description of PR here...
Closes #906

Changes

• New component for the session expiration
• Removing the toast for expired token and dispatching the Expiration component

Screenshots

Progress

---

[coderatomy]

Alright, nice work so far. Revert the rest apart from sessionExpired and it's jss. Also rename it to sessionExpiredModal

Simply create a new route called session-update or anything better and link it to this component.
Then inside a useEffect in either App.js or PageWrapper.jsx you redirect to this route once the token is expired.
Let's see how that goes

Am still looking for a replacement of this useEffect. It's not as fast as we would want it to be

[yokwejuste]

Hey @srish @DonPresh @coderatomy here is the look of the result of the implementation.

Please I'll like a review on this.

cc: @tuxology @aqsaaqeel @brrkrmn

[coderatomy]

Hey @yokwejuste, please note my comment above and in the issue description. They contain a clear workaround this issue plus the reasons why. If you wouldn't like to follow that pattern, please provide a proper explanation for this approach wrapping all different scenarios and we see the way forward

For the design, please also note the blurred background and it is actually better that way, thanks to @DonPresh's design integrity. That's why I insist on calling it SessionExpiredModal than SessionExpiredCard

[yokwejuste]

Hey @yokwejuste, please note my comment above and in the issue description. They contain a clear workaround this issue plus the reasons why. If you wouldn't like to follow that pattern, please provide a proper explanation for this approach wrapping all different scenarios and we see the way forward

For the design, please also note the blurred background and it is actually better that way, thanks to @DonPresh's design integrity

Thanks for this @coderatomy, I'm jumping on to this today. :)

[tuxology]

Use color from theme

[tuxology]

This color is left. This should be our primary color red

[tuxology]

@yokwejuste I have left a few comments on the design. Also how does this look in responsive mode? I think we need some uniformity in the design across the site. Please try to use as many standard MUI components as possible which we can then theme.

[yokwejuste]

@yokwejuste I have left a few comments on the design. Also how does this look in responsive mode? I think we need some uniformity in the design across the site. Please try to use as many standard MUI components as possible which we can then theme.

Got it, thanks,

I'm on it right now

[yokwejuste]

updates with different screen responsiveness

[NdibeRaymond]

few comments mostly about proper translation. Nice work @yokwejuste !

[coderatomy]

FYI @tuxology @NdibeRaymond @yokwejuste. Since #931 we are recording the initialUrl in the localStorage before logging out and then redirect the user to it after logging in. So I think here the user will be redirected to /session-expired after logging in.
We can use regex to ignore recording this url but a better solution would be to record the url before routing to the session modal, then use that instead.

I haven't tested this PR locally yet, but I believe that will be the experience

[tuxology]

Left one minor comment. Also please check comment from @coderatomy about the session-expired route issue #933 (comment) Can you test it and let me know if this is the case? If yes, lets fix it.

[tuxology]

This color is left. This should be our primary color red

[tuxology]

@yokwejuste Also, we've left the svg. Lets remove this #933 (comment)

[yokwejuste]

@tuxology I think it looks good now

[tuxology]

LGTM now 🌈