refactor(auth): simultaneous login message from login component

* feat: design changes * feat: codecep test * fix: codecep tests * chore: fix tests * chore: revert test changes * chore: fix comments * chore: fix comments * chore: fix comments * fix: comments * revert: chore:fix comments * fix: tests * fix: test * fix: comments * fix: pr comments * Update src/components/LoginForm/LoginForm.tsx Co-authored-by: Danny Budzinski <dbudzins@users.noreply.github.com> * Update src/components/LoginForm/LoginForm.tsx Co-authored-by: Danny Budzinski <dbudzins@users.noreply.github.com> * fix: comments * fix: pr comments * fix: comments * fix: comments * fix: comments --------- Co-authored-by: Filip Naumovski <filip.naumovski@jwplayer.com> Co-authored-by: Darko <darkoatanasovski@gmail.com> Co-authored-by: Danny Budzinski <dbudzins@users.noreply.github.com> Co-authored-by: naumovski-filip <111125899+naumovski-filip@users.noreply.github.com>
jwplayer · Jul 21, 2023 · a7d2288 · a7d2288
1 parent ff64909
commit a7d2288
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 53 deletions.
diff --git a/public/locales/en/account.json b/public/locales/en/account.json
@@ -84,12 +84,12 @@
     "google": "Sign in with Google",
     "hide_password": "Hide password",
     "not_registered": "New to {{siteName}}?",
-    "ok": "Ok",
     "password": "Password",
     "sign_in": "Sign in",
     "sign_up": "Sign up",
-    "simultaneous_logins": "You have been logged out because the simultaneous logins limit has been reached.",
+    "simultaneous_logins": "The maximum number of active sessions for this account has been reached. Signing in here will sign you out from another session or device.",
     "twitter": "Sign in with Twitter",
+    "unexpected_error": "An unexpected error occurred.",
     "view_password": "View password",
     "wrong_combination": "Incorrect email/password combination",
     "wrong_email": "Please check your email and try again."

diff --git a/public/locales/es/account.json b/public/locales/es/account.json
@@ -90,12 +90,12 @@
     "google": "Inicia sesión con Google",
     "hide_password": "Ocultar contraseña",
     "not_registered": "¿Nuevo/a en {{siteName}}?",
-    "ok": "Ok",
     "password": "Contraseña",
     "sign_in": "Iniciar sesión",
     "sign_up": "Registrarse",
-    "simultaneous_logins": "Se ha cerrado la sesión porque se ha alcanzado el límite de inicios de sesión simultáneos",
+    "simultaneous_logins": "Se ha alcanzado el número máximo de sesiones activas para esta cuenta. Iniciar sesión aquí lo cerrará en otra sesión o dispositivo.",
     "twitter": "Inicia sesión con Twitter",
+    "unexpected_error": "Ocurrió un error inesperado.",
     "view_password": "Ver contraseña",
     "wrong_combination": "Combinación de correo electrónico/contraseña incorrecta",
     "wrong_email": "Por favor, verifica tu correo electrónico e intenta nuevamente."

diff --git a/src/components/LoginForm/LoginForm.module.scss b/src/components/LoginForm/LoginForm.module.scss
@@ -15,3 +15,7 @@
   margin-top: 24px;
   text-align: center;
 }
+.top {
+  margin-top: 24px;
+  text-align: left;
+}
diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
@@ -27,15 +27,32 @@ type Props = {
   values: LoginFormData;
   submitting: boolean;
   siteName?: string;
+  messageKey?: string;
 };
 
-const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting, siteName }: Props) => {
+export const simultaneousLoginWarningKey = 'simultaneous_logins';
+
+const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting, siteName, messageKey }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
   const { t } = useTranslation('account');
   const location = useLocation();
 
+  const getTranslatedErrorMessage = (messageId: string | undefined) => {
+    switch (messageId) {
+      case simultaneousLoginWarningKey:
+        return t('login.simultaneous_logins');
+    }
+    return t('login.unexpected_error');
+  };
+
   return (
     <form onSubmit={onSubmit} data-testid={testId('login-form')} noValidate>
+      {messageKey && (
+        <div className={styles.top}>
+          <FormFeedback variant="warning">{getTranslatedErrorMessage(messageKey)}</FormFeedback>
+        </div>
+      )}
+
       <SocialButtonsList />
       <h2 className={styles.title}>{t('login.sign_in')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}

diff --git a/src/containers/AccountModal/AccountModal.module.scss b/src/containers/AccountModal/AccountModal.module.scss
@@ -8,9 +8,3 @@
     max-width: 50%;
   }
 }
-
-.simultaneousLoginsTitle {
-  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
@@ -13,7 +13,6 @@ import CancelSubscription from './forms/CancelSubscription';
 import RenewSubscription from './forms/RenewSubscription';
 import EditPassword from './forms/EditPassword';
 import EditCardDetails from './forms/EditCardDetails';
-import SimultaneousLoginsNotification from './forms/SimultaneousLoginsNotification';
 
 import { useConfigStore } from '#src/stores/ConfigStore';
 import { useAccountStore } from '#src/stores/AccountStore';
@@ -22,7 +21,7 @@ import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import Welcome from '#components/Welcome/Welcome';
 import PaymentFailed from '#components/PaymentFailed/PaymentFailed';
 import Dialog from '#components/Dialog/Dialog';
-import { addQueryParam, removeQueryParam } from '#src/utils/location';
+import { addQueryParam, removeMultipleQueryParams } from '#src/utils/location';
 import DeleteAccountModal from '#src/components/DeleteAccountModal/DeleteAccountModal';
 import FinalizePayment from '#components/FinalizePayment/FinalizePayment';
 import WaitingForPayment from '#components/WaitingForPayment/WaitingForPayment';
@@ -62,7 +61,7 @@ const AccountModal = () => {
   }, [viewParam, loading, isPublicView, user, toLogin]);
 
   const closeHandler = useEventCallback(() => {
-    navigate(removeQueryParam(location, 'u'));
+    navigate(removeMultipleQueryParams(location, ['u', 'message']));
   });
 
   const renderForm = () => {
@@ -73,11 +72,10 @@ const AccountModal = () => {
         </div>
       );
     }
+
     switch (view) {
-      case 'simultaneous-logins':
-        return <SimultaneousLoginsNotification />;
       case 'login':
-        return <Login />;
+        return <Login messageKey={message} />;
       case 'create-account':
         return <Registration />;
       case 'personal-details':

diff --git a/src/containers/AccountModal/forms/Login.tsx b/src/containers/AccountModal/forms/Login.tsx
@@ -10,7 +10,11 @@ import { removeQueryParam } from '#src/utils/location';
 import type { LoginFormData } from '#types/account';
 import { login } from '#src/stores/AccountController';
 
-const Login = () => {
+type Props = {
+  messageKey?: string;
+};
+
+const Login: React.FC<Props> = ({ messageKey }: Props) => {
   const { siteName } = useConfigStore((s) => s.config);
   const navigate = useNavigate();
   const location = useLocation();
@@ -43,7 +47,17 @@ const Login = () => {
   const initialValues: LoginFormData = { email: '', password: '' };
   const { handleSubmit, handleChange, values, errors, submitting } = useForm(initialValues, loginSubmitHandler, validationSchema);
 
-  return <LoginForm onSubmit={handleSubmit} onChange={handleChange} values={values} errors={errors} submitting={submitting} siteName={siteName} />;
+  return (
+    <LoginForm
+      messageKey={messageKey}
+      onSubmit={handleSubmit}
+      onChange={handleChange}
+      values={values}
+      errors={errors}
+      submitting={submitting}
+      siteName={siteName}
+    />
+  );
 };
 
 export default Login;
diff --git a/src/containers/AccountModal/forms/SimultaneousLoginsNotification.tsx b/src/containers/AccountModal/forms/SimultaneousLoginsNotification.tsx
diff --git a/src/stores/AccountController.ts b/src/stores/AccountController.ts
@@ -146,7 +146,6 @@ export const login = async (email: string, password: string) => {
     useAccountStore.setState({ loading: false });
   });
 };
-
 export async function logout() {
   await useService(async ({ accountService }) => {
     // this invalidates all entitlements caches which makes the useEntitlement hook to verify the entitlements.
@@ -164,11 +163,9 @@ export async function logout() {
 
     await restoreFavorites();
     await restoreWatchHistory();
-
     await accountService?.logout();
   });
 }
-
 export const register = async (email: string, password: string) => {
   await useService(async ({ accountService, accessModel, config }) => {
     useAccountStore.setState({ loading: true });

diff --git a/src/stores/NotificationsController.ts b/src/stores/NotificationsController.ts
@@ -2,6 +2,7 @@ import { logout, reloadActiveSubscription } from './AccountController';
 
 import useService from '#src/hooks/useService';
 import { addQueryParams } from '#src/utils/formatting';
+import { simultaneousLoginWarningKey } from '#src/components/LoginForm/LoginForm';
 
 export enum NotificationsTypes {
   ACCESS_GRANTED = 'access.granted',
@@ -23,12 +24,6 @@ export const subscribeToNotifications = async (uuid: string = '') => {
           case NotificationsTypes.SUBSCRIBE_FAILED:
             window.location.href = addQueryParams(window.location.href, { u: 'payment-error', message: notification.resource?.message });
             break;
-          case NotificationsTypes.ACCOUNT_LOGOUT:
-            await logout();
-            if (notification.resource?.reason === 'sessions_limit') {
-              window.location.href = addQueryParams(window.location.href, { u: 'simultaneous-logins' });
-            }
-            break;
           case NotificationsTypes.ACCESS_GRANTED:
             await reloadActiveSubscription();
             window.location.href = addQueryParams(window.location.href, { u: 'welcome' });
@@ -40,6 +35,13 @@ export const subscribeToNotifications = async (uuid: string = '') => {
           case NotificationsTypes.SUBSCRIBE_REQUIRES_ACTION:
             window.location.href = notification.resource?.redirect_to_url;
             break;
+          case NotificationsTypes.ACCOUNT_LOGOUT:
+            if (notification.resource?.reason === 'sessions_limit') {
+              window.location.href = addQueryParams(window.location.href, { u: 'login', message: simultaneousLoginWarningKey });
+            } else {
+              await logout();
+            }
+            break;
           default:
             break;
         }