feat: simultaneous logins modal has been added

src/containers/AccountModal/AccountModal.module.scss

@@ -8,3 +8,9 @@
     max-width: 50%;
   }
 }
+
+.title {
+  margin: 28px 0 28px 0;
+  font-weight: var(--body-font-weight-bold);
+  font-size: 19px;
+}

src/containers/AccountModal/AccountModal.tsx

@@ -12,6 +12,7 @@ import ResetPassword from './forms/ResetPassword';
 import CancelSubscription from './forms/CancelSubscription';
 import RenewSubscription from './forms/RenewSubscription';
 import EditPassword from './forms/EditPassword';
+import Simultaneouslogins from './forms/Simultaneouslogins';
 
 import { useConfigStore } from '#src/stores/ConfigStore';
 import { useAccountStore } from '#src/stores/AccountStore';
@@ -23,7 +24,7 @@ import Dialog from '#components/Dialog/Dialog';
 import { addQueryParam, removeQueryParam } from '#src/utils/location';
 import WaitingForPayment from '#src/components/WaitingForPayment/WaitingForPayment';
 
-const PUBLIC_VIEWS = ['login', 'create-account', 'forgot-password', 'reset-password', 'send-confirmation', 'edit-password'];
+const PUBLIC_VIEWS = ['login', 'create-account', 'forgot-password', 'reset-password', 'send-confirmation', 'edit-password', 'simultaneous-logins'];
 
 const AccountModal = () => {
   const navigate = useNavigate();
@@ -63,6 +64,8 @@ const AccountModal = () => {
       );
     }
     switch (view) {
+      case 'simultaneous-logins':
+        return <Simultaneouslogins />;
       case 'login':
         return <Login />;
       case 'create-account':

src/containers/AccountModal/forms/Simultaneouslogins.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router';
+
+import styles from '../AccountModal.module.scss';
+
+import Button from '#src/components/Button/Button';
+import { addQueryParam } from '#src/utils/location';
+
+const Simultaneouslogins = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  function loginClickHandler() {
+    navigate(addQueryParam(location, 'u', 'login'));
+  }
+
+  return (
+    <React.Fragment>
+      <h1 className={styles.title}>You have been logged out beacuse the simultaneous logins limit has been reached.</h1>
+      <Button type="submit" onClick={loginClickHandler} label="Ok" variant="contained" color="primary" size="large" fullWidth />
+    </React.Fragment>
+  );
+};
+export default Simultaneouslogins;

src/stores/NotificationsController.ts

@@ -27,7 +27,7 @@ export const subscribeToNotifications = async (uuid: string = '') => {
               break;
             case NotificationsTypes.ACCOUNT_LOGOUT:
               await getAccount(auth);
-              // redirect to login page with message
+              window.location.href = addQueryParams(window.location.href, { u: 'simultaneous-logins' });
               break;
             case NotificationsTypes.ACCESS_GRANTED:
               await reloadActiveSubscription();