From 06f367956ba3102b62d42c0a2b42996264b3b3c1 Mon Sep 17 00:00:00 2001
From: Borislav Petrovikj <borislav.petrovikj@inplayer.com>
Date: Mon, 5 Jun 2023 15:10:15 +0200
Subject: [PATCH] feat: simultaneous logins modal has been added

---
 .../AccountModal/AccountModal.module.scss     |  6 +++++
 src/containers/AccountModal/AccountModal.tsx  |  5 +++-
 .../AccountModal/forms/Simultaneouslogins.tsx | 23 +++++++++++++++++++
 src/stores/NotificationsController.ts         |  2 +-
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/containers/AccountModal/forms/Simultaneouslogins.tsx

diff --git a/src/containers/AccountModal/AccountModal.module.scss b/src/containers/AccountModal/AccountModal.module.scss
index 725a8eb87..97da0630b 100644
--- a/src/containers/AccountModal/AccountModal.module.scss
+++ b/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;
+}
diff --git a/src/containers/AccountModal/AccountModal.tsx b/src/containers/AccountModal/AccountModal.tsx
index 70784c36a..b0c1bae59 100644
--- a/src/containers/AccountModal/AccountModal.tsx
+++ b/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':
diff --git a/src/containers/AccountModal/forms/Simultaneouslogins.tsx b/src/containers/AccountModal/forms/Simultaneouslogins.tsx
new file mode 100644
index 000000000..f6b84acf3
--- /dev/null
+++ b/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;
diff --git a/src/stores/NotificationsController.ts b/src/stores/NotificationsController.ts
index 282e850e6..ba7577f75 100644
--- a/src/stores/NotificationsController.ts
+++ b/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();