Warning when storage unavailable detected

public/locales/en.json

@@ -98,5 +98,8 @@
   "Your data": "Your data",
   "Recommended applications": "Recommended applications",
   "The following applications are using Masq:": "The following applications are using Masq:",
-  "Open Qwant Maps": "Open Qwant Maps"
+  "Open Qwant Maps": "Open Qwant Maps",
+  "Masq can't create a profile in this browser": "Masq can't create a profile in this browser",
+  "Chances are that you are currrently browsing in a private window.": "Chances are that you are currrently browsing in a private window.",
+  "Please, try to open a normal window by selecting \"new window\" in your browser's menu and retry to create a Masq profile.": "Please, try to open a normal window by selecting \"new window\" in your browser's menu and retry to create a Masq profile."
 }

public/locales/fr.json

@@ -98,5 +98,8 @@
   "Your data": "Vos données",
   "Recommended applications": "Applications recommandées",
   "The following applications are using Masq:": "Les applications suivantes utilisent Masq :",
-  "Open Qwant Maps": "Ouvrir Qwant Maps"
+  "Open Qwant Maps": "Ouvrir Qwant Maps",
+  "Masq can't create a profile in this browser": "Masq ne peut pas créer de profil dans ce navigateur",
+  "Chances are that you are currrently browsing in a private window.": "Il est possible que vous soyez en navigation privée.",
+  "Please, try to open a normal window by selecting \"new window\" in your browser's menu and retry to create a Masq profile.": "Dans le menu de votre navigateur, choisissez \"nouvelle fenêtre\" et ré-essayez de créer un profil Masq."
 }

src/App.jsx

@@ -18,8 +18,6 @@ import styles from './App.module.scss'
 const history = createHashHistory()
 const { MasqError } = common.errors
 
-// listen for errors event and display them
-
 const authenticatedRoutes = [
   {
     path: '/apps',

src/containers/Login/Login.jsx

@@ -9,8 +9,9 @@ import { ReactComponent as Logo } from '../../assets/logo.svg'
 import { ReactComponent as Cubes } from '../../assets/cubes.svg'
 import { ReactComponent as PlusSquare } from '../../assets/plus-square.svg'
 import { Avatar, Button, TextField, Typography, Space } from '../../components'
-import { Signup, SyncDevice, QRCodeModal } from '../../modals'
+import { Signup, SyncDevice, QRCodeModal, UnavailableStorage } from '../../modals'
 import { Landing } from '../../containers'
+import { isBrowserStorageAvailable } from '../../lib/browser'
 
 import styles from './Login.module.scss'
 
@@ -25,9 +26,11 @@ class Login extends Component {
       signup: false,
       sync: false,
       password: '',
-      qrcodeModal: false
+      qrcodeModal: false,
+      unavailableStorage: false
     }
 
+    this.onCloseUnavailableStorage = this.onCloseUnavailableStorage.bind(this)
     this.handleClickSyncProfile = this.handleClickSyncProfile.bind(this)
     this.handleClickNewProfile = this.handleClickNewProfile.bind(this)
     this.onPasswordChange = this.onPasswordChange.bind(this)
@@ -45,10 +48,16 @@ class Login extends Component {
     const { setCurrentAppRequest } = this.props
     this.props.fetchUsers()
 
+    this.isStorageAvailable = await isBrowserStorageAvailable()
+
     if (window.location.hash.substr(0, 7) !== '#/link/') {
       return
     }
 
+    if (!this.isStorageAvailable) {
+      return this.setState({ unavailableStorage: true })
+    }
+
     const hash = window.location.hash.substr(7) // ignore #/link/ characters
     if (!hash.length) return
     const decoded = Buffer.from(hash, 'base64')
@@ -87,8 +96,12 @@ class Login extends Component {
     this.setState({ signup: false })
   }
 
-  handleClickNewProfile () {
-    this.setState({ signup: true })
+  async handleClickNewProfile () {
+    if (!this.isStorageAvailable) {
+      this.setState({ unavailableStorage: true })
+    } else {
+      this.setState({ signup: true })
+    }
   }
 
   handleClickSyncProfile () {
@@ -133,6 +146,10 @@ class Login extends Component {
     this.setState({ qrcodeModal: false })
   }
 
+  onCloseUnavailableStorage () {
+    this.setState({ unavailableStorage: false })
+  }
+
   renderQRCodeModal () {
     if (this.props.currentAppRequest && remoteWebRTCEnabled) {
       return (
@@ -212,7 +229,11 @@ class Login extends Component {
 
   render () {
     const { users, currentAppRequest } = this.props
-    const { selectedUser, signup } = this.state
+    const { selectedUser, signup, unavailableStorage } = this.state
+
+    if (unavailableStorage) {
+      return <UnavailableStorage onClose={this.onCloseUnavailableStorage} />
+    }
 
     const children = () => {
       if (users.length === 0) {

src/lib/browser.js

@@ -1,4 +1,7 @@
 import { detect } from 'detect-browser'
+import { utils } from 'masq-common'
+
+const { dbExists } = utils
 
 const SUPPORTED_BROWSERS_CODES = [
   'firefox',
@@ -26,8 +29,20 @@ const isBrowserSupported = () => {
   return !!SUPPORTED_BROWSERS_CODES.includes(browser.name)
 }
 
+const isBrowserStorageAvailable = async () => {
+  return new Promise(async (resolve) => {
+    try {
+      await dbExists('testPrivateBrowsing')
+      resolve(true)
+    } catch (err) {
+      resolve(false)
+    }
+  })
+}
+
 export {
   isBrowserSupported,
+  isBrowserStorageAvailable,
   SUPPORTED_BROWSERS,
   SUPPORTED_BROWSERS_CODES
 }

src/modals/UnavailableStorage/UnavailableStorage.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { Frown } from 'react-feather'
+import { Modal, Typography, Space } from '../../components'
+
+import styles from './UnavailableStorage.module.scss'
+
+const UnavailableStorage = ({ onClose }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal width={511} onClose={onClose}>
+      <div className={styles.UnsupportedBrowser}>
+        <Typography type='title-modal'>{t('Masq can\'t create a profile in this browser')}</Typography>
+        <Space size={16} />
+        <Frown size={96} color={styles.colorRed} />
+        <Space size={16} />
+        <Typography type='paragraph-modal'>{t('Chances are that you are currrently browsing in a private window.')}</Typography>
+        <Typography type='paragraph-modal'>{t('Please, try to open a normal window by selecting "new window" in your browser\'s menu and retry to create a Masq profile.')}</Typography>
+      </div>
+    </Modal>
+  )
+}
+
+UnavailableStorage.propTypes = {
+  onClose: PropTypes.func
+}
+
+export default UnavailableStorage

src/modals/UnavailableStorage/UnavailableStorage.module.scss

@@ -0,0 +1,15 @@
+@import '../../styles/colors.scss';
+
+.UnsupportedBrowser {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  height: 100%;
+  padding-bottom: 32px;
+
+  .fontMedium {
+    font-weight: 500;
+  }
+}

src/modals/index.js

@@ -8,3 +8,4 @@ export { default as DeleteProfileDialog } from './DeleteProfileDialog/DeleteProf
 export { default as DeleteAppDialog } from './DeleteAppDialog/DeleteAppDialog'
 export { default as PasswordEdit } from './PasswordEdit/PasswordEdit'
 export { default as UnsupportedBrowser } from './UnsupportedBrowser/UnsupportedBrowser'
+export { default as UnavailableStorage } from './UnavailableStorage/UnavailableStorage'

test/browser.test.js

@@ -1,7 +1,11 @@
 import * as sinon from 'sinon'
 import DetectBrowser from 'detect-browser'
 
-import { isBrowserSupported, SUPPORTED_BROWSERS_CODES } from '../src/lib/browser'
+import {
+  isBrowserSupported,
+  isBrowserStorageAvailable,
+  SUPPORTED_BROWSERS_CODES
+} from '../src/lib/browser'
 
 const { expect } = require('chai')
 
@@ -38,4 +42,9 @@ describe('Browser support', () => {
 
     expect(isBrowserSupported()).to.be.false
   })
+
+  it('should detect that storage is not available', async () => {
+    const res = await isBrowserStorageAvailable()
+    expect(res).to.be.true
+  })
 })