Don't allow using passager if Crypto API is not present

[oegea]

Bug issue

🐛 Describe the bug

When Passager is accessed from a browser which not supports the crypto web API, the app will load with apparent success, but will crash once a crypto operation is requested (i.e. during the login process).

🧑🏽‍🔧 To Reproduce

1. Install a web browser which doesn't support the crypto web api.
2. Access Passager, and try to login.
3. During the login process, the app will become unresponsive, without offering any visual message error.

✅ Expected behavior

The app should display a message when used browser does not support the cypto API, not allowing to perform any kind of operation, and encouraging the user to user an updated browser.

📸 Screenshots

Does not apply.

💻 System information

Any old web browser which does not support the Crypto Web API.

💬 Additional context

Crypto Web API compatibility can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API#browser_compatibility

[VarunGitGood]

can we use conditional rendering for this
if the user does not have it itll prompt the user and if he/she does then the login page will load

[oegea]

Yep. The idea is to create a new component which will return its children if the crypto API is available and if not, will return an error message saying that current browser is not supported.

Thanks to this kind of architecture, it's possible then to wrap the login page as children of that component.

Example:

const NotSupportedBrowserChecker = ({children}) => {
   if (isBrowserSupported() === false){ // TODO: Create a function to detect if browser is supported
      // TODO: Display a message indicating that browser is not supported
      return;
   }
   
   return children;
}

And then it is possible to wrap the Login page within NotSupportedBrowserChecker