@peassoft/mnr-web-topline 0.1.0 → 0.2.1

package/dist/css/index.css

@@ -155,6 +155,23 @@
   font-weight: bolder;
 }
 
+.topline_profile_grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  row-gap: 2rem;
+}
+
+.topline_profile_fieldCont {
+  margin-top: 1.5rem;
+}
+
+.topline_profile_buttonsCont {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 1rem;
+}
+
 .topline_c_modal_overlay {
   position: fixed;
   z-index: 1;

package/dist/en/modules/logger/index.d.ts

@@ -1 +1,2 @@
 export declare function logError(err: Error): void;
+export declare function logInvariant(msg: string): void;

package/dist/en/modules/logger/index.js

@@ -1,3 +1,6 @@
 export function logError(err) {
   console.error(err);
+}
+export function logInvariant(msg) {
+  console.error(msg);
 }

package/dist/en/modules/ui-lang/index.d.ts

@@ -0,0 +1,8 @@
+import type { NonEmptyArray } from '../../types/helpers.js';
+type UiLangDescriptor = {
+    code: string;
+    name: string;
+};
+export declare function getSupportedUiLangs(): NonEmptyArray<UiLangDescriptor>;
+export declare function getDefaultUiLangForUser(): UiLangDescriptor;
+export {};

package/dist/en/modules/ui-lang/index.js

@@ -0,0 +1,20 @@
+const supportedUiLangs = [{
+  code: 'en',
+  name: 'English'
+}, {
+  code: 'ru',
+  name: 'Русский'
+}];
+export function getSupportedUiLangs() {
+  return window.structuredClone(supportedUiLangs);
+}
+export function getDefaultUiLangForUser() {
+  for (const lang of window.navigator.languages) {
+    const normalizedLangCode = lang.slice(0, 2).toLowerCase();
+    const matchedDescriptor = supportedUiLangs.find(x => x.code === normalizedLangCode);
+    if (matchedDescriptor) {
+      return window.structuredClone(matchedDescriptor);
+    }
+  }
+  return supportedUiLangs[0];
+}

package/dist/en/modules/user-data-change-beacon/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Create new beacon for a user data change operation.
+ *
+ * Saves the created beacon in the local store.
+ */
+export declare function createUserDataChangeBeacon(): string;
+/**
+ * Check whether given beacon exists in the local store.
+ */
+export declare function userDataChangeBeaconExists(beacon: string): boolean;
+/**
+ * Remove given beacon from the local store
+ */
+export declare function removeUserDataChangeBeacon(beacon: string): void;

package/dist/en/modules/user-data-change-beacon/index.js

@@ -0,0 +1,25 @@
+import { v4 } from 'uuid';
+// Local store
+const userDataChangeBeacons = new Set();
+/**
+ * Create new beacon for a user data change operation.
+ *
+ * Saves the created beacon in the local store.
+ */
+export function createUserDataChangeBeacon() {
+  const beacon = v4();
+  userDataChangeBeacons.add(beacon);
+  return beacon;
+}
+/**
+ * Check whether given beacon exists in the local store.
+ */
+export function userDataChangeBeaconExists(beacon) {
+  return userDataChangeBeacons.has(beacon);
+}
+/**
+ * Remove given beacon from the local store
+ */
+export function removeUserDataChangeBeacon(beacon) {
+  userDataChangeBeacons.delete(beacon);
+}

package/dist/en/modules/websocket/index.js

@@ -4,6 +4,9 @@ import { getGrantToken } from '../tokens/index.js';
 import { logError } from '../logger/index.js';
 import { innerToplineService, ToplineEventName } from '../topline-service/index.js';
 import { isObject } from '../../types/helpers.js';
+import { isToplineUser } from '../../types/data.js';
+import { userDataChangeBeaconExists, removeUserDataChangeBeacon } from '../user-data-change-beacon/index.js';
+import { updateUser } from '../local-db/index.js';
 let activeSocket = null;
 let currConnectionRetries = 0;
 const MAX_RECONNECTION_DELAY_MS = 30000;
@@ -22,26 +25,37 @@ const closeCodes = {
 };
 /** Handle incoming message from websocket */
 function handleSocketMessage(e) {
-  if (e.data === 'logout') {
-    innerToplineService.processLogout();
-    closeWebsocket();
-  } else {
-    const message = JSON.parse(e.data);
-    if (isObject(message) && 'syncId' in message && typeof message.syncId === 'string') {
-      innerToplineService.emit(ToplineEventName.SyncNotification, message.syncId);
+  const message = JSON.parse(e.data);
+  if (isObject(message) && 'type' in message && typeof message.type === 'string') {
+    switch (message.type) {
+      case 'logout':
+        innerToplineService.processLogout();
+        closeWebsocket();
+        break;
+      case 'sync':
+        if ('syncId' in message && typeof message.syncId === 'string') {
+          innerToplineService.emit(ToplineEventName.SyncNotification, message.syncId);
+        }
+        break;
+      case 'user_data_change':
+        if ('beacon' in message && typeof message.beacon === 'string' && 'user' in message && isToplineUser(message.user)) {
+          if (!userDataChangeBeaconExists(message.beacon)) {
+            removeUserDataChangeBeacon(message.beacon);
+            void updateUser(message.user);
+            innerToplineService.emit(ToplineEventName.UserChange, message.user);
+          }
+        }
     }
   }
 }
 /** Open websocket */
 export function openWebsocket() {
-  closeWebsocket();
+  if (activeSocket) return;
   const wsUrl = getWebsocketUrl();
-  const socket = new window.WebSocket(wsUrl);
-  socket.addEventListener('open', handleSocketOpen);
-  socket.addEventListener('close', e => void handleSocketClose(e));
-  socket.addEventListener('message', handleSocketMessage);
-  activeSocket = socket;
-  currConnectionRetries = 0;
+  activeSocket = new window.WebSocket(wsUrl);
+  activeSocket.addEventListener('open', handleSocketOpen);
+  activeSocket.addEventListener('close', e => void handleSocketClose(e));
+  activeSocket.addEventListener('message', handleSocketMessage);
 }
 /** Close websocket */
 export function closeWebsocket() {
@@ -51,6 +65,7 @@ export function closeWebsocket() {
 }
 /** Handle for websocket "open" event */
 function handleSocketOpen() {
+  currConnectionRetries = 0;
   this.send(JSON.stringify({
     type: 'connection',
     data: {

package/dist/en/parts/profile/actions/save-user-data/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Save new user data on backend.
+ *
+ * Returned Promise is resolved with:
+ *
+ *   - true - if the operation succeeds;
+ *   - false - if the operation fails due to any reason.
+ */
+export default function saveUserData(beacon: string, userName: string, uiLang: string): Promise<boolean>;

package/dist/en/parts/profile/actions/save-user-data/index.js

@@ -0,0 +1,53 @@
+import { getGrantToken } from '../../../../modules/tokens/index.js';
+import { logInvariant } from '../../../../modules/logger/index.js';
+import { getApiBaseUrl, getRequestCredentialsMode } from '../../../../modules/env/index.js';
+import request from '../../../../modules/request/index.js';
+import { innerToplineService } from '../../../../modules/topline-service/index.js';
+/**
+ * Save new user data on backend.
+ *
+ * Returned Promise is resolved with:
+ *
+ *   - true - if the operation succeeds;
+ *   - false - if the operation fails due to any reason.
+ */
+export default async function saveUserData(beacon, userName, uiLang) {
+  const grantToken = getGrantToken();
+  if (!grantToken) {
+    // This situation is impossible: if a logout event is received on a websocket,
+    // this modal window is closed automatically; thus the user has no chance to start
+    // a saving operation.
+    logInvariant('Invariant: grant token must exist while changing user data');
+    return false;
+  }
+  const url = `${getApiBaseUrl()}/private/user/update-data`;
+  const options = {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${grantToken}`,
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    body: JSON.stringify({
+      beacon,
+      userName,
+      uiLang
+    }),
+    credentials: getRequestCredentialsMode(),
+    cache: 'no-store',
+    redirect: 'error'
+  };
+  const response = await request(url, options, {
+    maxRetries: 1
+  });
+  if (!response) {
+    return false;
+  }
+  if (response.status === 401) {
+    const upgradedGrantToken = await innerToplineService.upgradeGrantToken();
+    if (!upgradedGrantToken) {
+      return false;
+    }
+    return await saveUserData(beacon, userName, uiLang);
+  }
+  return true;
+}

package/dist/en/parts/profile/index.d.ts

@@ -0,0 +1 @@
+export { default as Profile } from './ui/index.js';

package/dist/en/parts/profile/index.js

@@ -0,0 +1 @@
+export { default as Profile } from './ui/index.js';

package/dist/en/parts/profile/ui/index.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from 'react';
+type Props = {
+    onClose: () => unknown;
+};
+export default function Profile(props: Props): JSX.Element | null;
+export {};

package/dist/en/parts/profile/ui/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useState, useCallback } from 'react';
+import Modal from '../../../shared/components/modal/index.js';
+import Root from './root/index.js';
+import { ToplineContext } from '../../shell/index.js';
+var LocalStep;
+(function (LocalStep) {
+  LocalStep["Root"] = "root";
+  LocalStep["PasswordChange"] = "password_change";
+})(LocalStep || (LocalStep = {}));
+export default function Profile(props) {
+  const {
+    onClose
+  } = props;
+  const {
+    user
+  } = useContext(ToplineContext);
+  const [localStep, setLocalStep] = useState(LocalStep.Root);
+  const handleSwitchToPasswordChange = useCallback(() => setLocalStep(LocalStep.PasswordChange), []);
+  const getContents = user => {
+    switch (localStep) {
+      case LocalStep.Root:
+        return _jsx(Root, {
+          user: user,
+          onChangePassword: handleSwitchToPasswordChange,
+          onCancel: onClose
+        });
+      case LocalStep.PasswordChange:
+        return _jsx("div", {
+          children: "PasswordChange"
+        });
+      default:
+        {
+          const _exhaustiveCheck = localStep;
+          return _exhaustiveCheck;
+        }
+    }
+  };
+  if (user == null) {
+    return null;
+  }
+  return _jsx(Modal, {
+    title: "My profile",
+    onClose: onClose,
+    children: getContents(user)
+  });
+}

package/dist/en/parts/profile/ui/root/get-initial-ui-lang.d.ts

@@ -0,0 +1,2 @@
+import type { ToplineUser } from '../../../../types/data.js';
+export default function getInitialUiLang(user: ToplineUser): string;

package/dist/en/parts/profile/ui/root/get-initial-ui-lang.js

@@ -0,0 +1,4 @@
+import { getDefaultUiLangForUser } from '../../../../modules/ui-lang/index.js';
+export default function getInitialUiLang(user) {
+  return user.uiLang ?? getDefaultUiLangForUser().code;
+}

package/dist/en/parts/profile/ui/root/get-initial-user-name.d.ts

@@ -0,0 +1,2 @@
+import type { ToplineUser } from '../../../../types/data.js';
+export default function getInitialUserName(user: ToplineUser): string;

package/dist/en/parts/profile/ui/root/get-initial-user-name.js

@@ -0,0 +1,3 @@
+export default function getInitialUserName(user) {
+  return user.userName ?? '';
+}

package/dist/en/parts/profile/ui/root/has-changes.d.ts

@@ -0,0 +1,7 @@
+import type { ToplineUser } from '../../../../types/data.js';
+type CurrData = {
+    userName: string;
+    uiLang: string;
+};
+export default function hasChanges(user: ToplineUser, currData: CurrData): boolean;
+export {};

package/dist/en/parts/profile/ui/root/has-changes.js

@@ -0,0 +1,11 @@
+import getInitialUserName from './get-initial-user-name.js';
+import getInitialUiLang from './get-initial-ui-lang.js';
+export default function hasChanges(user, currData) {
+  if (getInitialUserName(user) !== currData.userName) {
+    return true;
+  }
+  if (getInitialUiLang(user) !== currData.uiLang) {
+    return true;
+  }
+  return false;
+}

package/dist/en/parts/profile/ui/root/index.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from 'react';
+import type { ToplineUser } from '../../../../types/data.js';
+type Props = {
+    user: ToplineUser;
+    onChangePassword: () => unknown;
+    onCancel: () => unknown;
+};
+export default function Root(props: Props): JSX.Element;
+export {};

package/dist/en/parts/profile/ui/root/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { InputField } from '@peassoft/mnr-web-ui-kit/input-field/index.js';
+import { Select } from '@peassoft/mnr-web-ui-kit/select/index.js';
+import { TextButton } from '@peassoft/mnr-web-ui-kit/text-button/index.js';
+import { Button } from '@peassoft/mnr-web-ui-kit/button/index.js';
+import { ErrorMessage } from '@peassoft/mnr-web-ui-kit/error-message/index.js';
+import { createUserDataChangeBeacon } from '../../../../modules/user-data-change-beacon/index.js';
+import { getSupportedUiLangs } from '../../../../modules/ui-lang/index.js';
+import { updateUser } from '../../../../modules/local-db/index.js';
+import { innerToplineService, ToplineEventName } from '../../../../modules/topline-service/index.js';
+import saveUserData from '../../actions/save-user-data/index.js';
+import getInitialUserName from './get-initial-user-name.js';
+import getInitialUiLang from './get-initial-ui-lang.js';
+import hasChanges from './has-changes.js';
+export default function Root(props) {
+  const {
+    user,
+    onChangePassword,
+    onCancel
+  } = props;
+  const [userName, setUserName] = useState(getInitialUserName(user));
+  const [uiLang, setUiLang] = useState(getInitialUiLang(user));
+  const [isInProgress, setIsInProgress] = useState(false);
+  const [hasSavingError, setHasSavingError] = useState(false);
+  const uiLangOptions = useMemo(() => getSupportedUiLangs().map(langDescriptor => ({
+    id: langDescriptor.code,
+    value: langDescriptor.name
+  })), []);
+  const noop = useCallback(() => {}, []);
+  const handleUserNameChange = useCallback(val => setUserName(val), []);
+  const handleUiLangChange = useCallback(val => setUiLang(val), []);
+  const handleChangePasswordClick = useCallback(() => onChangePassword(), [onChangePassword]);
+  const handleSave = useCallback(async () => {
+    if (hasChanges(user, {
+      userName,
+      uiLang
+    })) {
+      setIsInProgress(true);
+      setHasSavingError(false);
+      const beacon = createUserDataChangeBeacon();
+      const savingResult = await saveUserData(beacon, userName, uiLang);
+      if (!savingResult) {
+        setIsInProgress(false);
+        setHasSavingError(true);
+        return;
+      }
+      const updatedUser = {
+        ...user,
+        userName,
+        uiLang
+      };
+      void updateUser(updatedUser);
+      innerToplineService.emit(ToplineEventName.UserChange, updatedUser);
+      onCancel();
+    }
+  }, [user, userName, uiLang, onCancel]);
+  return _jsxs(_Fragment, {
+    children: [_jsx(InputField, {
+      label: "Your email address. Cannot be changed.",
+      value: user.id,
+      disabled: true,
+      onChange: noop
+    }), _jsx(InputField, {
+      label: "Your name",
+      value: userName,
+      onChange: handleUserNameChange
+    }), _jsx(Select, {
+      label: "Select your preferred language for user interface",
+      items: uiLangOptions,
+      selectedItemId: uiLang,
+      onChange: handleUiLangChange
+    }), _jsx("div", {
+      className: 'topline_profile_fieldCont',
+      children: _jsx(TextButton, {
+        label: "Change my password",
+        onClick: handleChangePasswordClick
+      })
+    }), !!hasSavingError && _jsx(ErrorMessage, {
+      variant: 'standalone',
+      children: "An error occurred while saving changes. Check your internet connection and/or try again."
+    }), _jsxs("div", {
+      className: 'topline_profile_buttonsCont',
+      children: [_jsx(Button, {
+        label: "Save",
+        isInProgress: isInProgress,
+        onClick: handleSave
+      }), _jsx(Button, {
+        label: "Cancel",
+        variant: 'secondary',
+        onClick: onCancel
+      })]
+    })]
+  });
+}

package/dist/en/parts/shell/ui/shell/index.js

@@ -8,6 +8,7 @@ import Alternative from '../../../../shared/components/alternative/index.js';
 import { Login } from '../../../login/index.js';
 import { Signup } from '../../../signup/index.js';
 import { PasswordRecovery } from '../../../password-recovery/index.js';
+import { Profile } from '../../../profile/index.js';
 import ToplineContext from '../../context.js';
 import { globalRefs } from '../../../../modules/focus-marshal/index.js';
 import { initDb, getAllData } from '../../../../modules/local-db/index.js';
@@ -47,7 +48,7 @@ export default function Shell() {
         setModalWindowOpen('signup');
         break;
       case 'profile':
-        console.log('Opening Profile form...');
+        setModalWindowOpen('profile');
         break;
       case 'logout':
         handleUserChange(null);
@@ -93,7 +94,10 @@ export default function Shell() {
       }
     }
     void initData();
-  }, [handleUserChange, onReady]);
+  },
+  // We need this effect to run only once - on initial mount
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  []);
   useEffect(() => {
     if (isUserMenuOpen) {
       globalRefs.userMenuFirstItem.current?.focus();
@@ -114,28 +118,30 @@ export default function Shell() {
     };
   }, []);
   useEffect(() => {
-    let websocketClosed = false;
     let timer = null;
-    function handleVisibilityChange() {
+    async function handler() {
       if (timer) clearTimeout(timer);
       if (document.visibilityState === 'visible') {
-        if (websocketClosed) {
-          websocketClosed = false;
+        const {
+          user
+        } = await getAllData();
+        if (user) {
+          await refreshUser(user);
           openWebsocket();
         }
       } else {
-        timer = setTimeout(() => {
-          websocketClosed = true;
-          closeWebsocket();
-        }, 30000);
+        timer = setTimeout(closeWebsocket, 30000);
       }
     }
+    function handleVisibilityChange() {
+      void handler();
+    }
     document.addEventListener('visibilitychange', handleVisibilityChange);
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
   }, []);
-  let ModalWindow = null;
+  let ModalWindow;
   switch (modalWindowActive) {
     case 'login':
       ModalWindow = _jsx(Login, {
@@ -155,6 +161,20 @@ export default function Shell() {
       ModalWindow = _jsx(PasswordRecovery, {
         onClose: handleModalWindowClose
       });
+      break;
+    case 'profile':
+      ModalWindow = _jsx(Profile, {
+        onClose: handleModalWindowClose
+      });
+      break;
+    case null:
+      ModalWindow = null;
+      break;
+    default:
+      {
+        const _exhaustiveCheck = modalWindowActive;
+        return _exhaustiveCheck;
+      }
   }
   return _jsxs(_Fragment, {
     children: [_jsxs("div", {

package/dist/ru/modules/logger/index.d.ts

@@ -1 +1,2 @@
 export declare function logError(err: Error): void;
+export declare function logInvariant(msg: string): void;

package/dist/ru/modules/logger/index.js

@@ -1,3 +1,6 @@
 export function logError(err) {
   console.error(err);
+}
+export function logInvariant(msg) {
+  console.error(msg);
 }

package/dist/ru/modules/ui-lang/index.d.ts

@@ -0,0 +1,8 @@
+import type { NonEmptyArray } from '../../types/helpers.js';
+type UiLangDescriptor = {
+    code: string;
+    name: string;
+};
+export declare function getSupportedUiLangs(): NonEmptyArray<UiLangDescriptor>;
+export declare function getDefaultUiLangForUser(): UiLangDescriptor;
+export {};

package/dist/ru/modules/ui-lang/index.js

@@ -0,0 +1,20 @@
+const supportedUiLangs = [{
+  code: 'en',
+  name: 'English'
+}, {
+  code: 'ru',
+  name: 'Русский'
+}];
+export function getSupportedUiLangs() {
+  return window.structuredClone(supportedUiLangs);
+}
+export function getDefaultUiLangForUser() {
+  for (const lang of window.navigator.languages) {
+    const normalizedLangCode = lang.slice(0, 2).toLowerCase();
+    const matchedDescriptor = supportedUiLangs.find(x => x.code === normalizedLangCode);
+    if (matchedDescriptor) {
+      return window.structuredClone(matchedDescriptor);
+    }
+  }
+  return supportedUiLangs[0];
+}

package/dist/ru/modules/user-data-change-beacon/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Create new beacon for a user data change operation.
+ *
+ * Saves the created beacon in the local store.
+ */
+export declare function createUserDataChangeBeacon(): string;
+/**
+ * Check whether given beacon exists in the local store.
+ */
+export declare function userDataChangeBeaconExists(beacon: string): boolean;
+/**
+ * Remove given beacon from the local store
+ */
+export declare function removeUserDataChangeBeacon(beacon: string): void;

package/dist/ru/modules/user-data-change-beacon/index.js

@@ -0,0 +1,25 @@
+import { v4 } from 'uuid';
+// Local store
+const userDataChangeBeacons = new Set();
+/**
+ * Create new beacon for a user data change operation.
+ *
+ * Saves the created beacon in the local store.
+ */
+export function createUserDataChangeBeacon() {
+  const beacon = v4();
+  userDataChangeBeacons.add(beacon);
+  return beacon;
+}
+/**
+ * Check whether given beacon exists in the local store.
+ */
+export function userDataChangeBeaconExists(beacon) {
+  return userDataChangeBeacons.has(beacon);
+}
+/**
+ * Remove given beacon from the local store
+ */
+export function removeUserDataChangeBeacon(beacon) {
+  userDataChangeBeacons.delete(beacon);
+}

package/dist/ru/modules/websocket/index.js

@@ -4,6 +4,9 @@ import { getGrantToken } from '../tokens/index.js';
 import { logError } from '../logger/index.js';
 import { innerToplineService, ToplineEventName } from '../topline-service/index.js';
 import { isObject } from '../../types/helpers.js';
+import { isToplineUser } from '../../types/data.js';
+import { userDataChangeBeaconExists, removeUserDataChangeBeacon } from '../user-data-change-beacon/index.js';
+import { updateUser } from '../local-db/index.js';
 let activeSocket = null;
 let currConnectionRetries = 0;
 const MAX_RECONNECTION_DELAY_MS = 30000;
@@ -22,26 +25,37 @@ const closeCodes = {
 };
 /** Handle incoming message from websocket */
 function handleSocketMessage(e) {
-  if (e.data === 'logout') {
-    innerToplineService.processLogout();
-    closeWebsocket();
-  } else {
-    const message = JSON.parse(e.data);
-    if (isObject(message) && 'syncId' in message && typeof message.syncId === 'string') {
-      innerToplineService.emit(ToplineEventName.SyncNotification, message.syncId);
+  const message = JSON.parse(e.data);
+  if (isObject(message) && 'type' in message && typeof message.type === 'string') {
+    switch (message.type) {
+      case 'logout':
+        innerToplineService.processLogout();
+        closeWebsocket();
+        break;
+      case 'sync':
+        if ('syncId' in message && typeof message.syncId === 'string') {
+          innerToplineService.emit(ToplineEventName.SyncNotification, message.syncId);
+        }
+        break;
+      case 'user_data_change':
+        if ('beacon' in message && typeof message.beacon === 'string' && 'user' in message && isToplineUser(message.user)) {
+          if (!userDataChangeBeaconExists(message.beacon)) {
+            removeUserDataChangeBeacon(message.beacon);
+            void updateUser(message.user);
+            innerToplineService.emit(ToplineEventName.UserChange, message.user);
+          }
+        }
     }
   }
 }
 /** Open websocket */
 export function openWebsocket() {
-  closeWebsocket();
+  if (activeSocket) return;
   const wsUrl = getWebsocketUrl();
-  const socket = new window.WebSocket(wsUrl);
-  socket.addEventListener('open', handleSocketOpen);
-  socket.addEventListener('close', e => void handleSocketClose(e));
-  socket.addEventListener('message', handleSocketMessage);
-  activeSocket = socket;
-  currConnectionRetries = 0;
+  activeSocket = new window.WebSocket(wsUrl);
+  activeSocket.addEventListener('open', handleSocketOpen);
+  activeSocket.addEventListener('close', e => void handleSocketClose(e));
+  activeSocket.addEventListener('message', handleSocketMessage);
 }
 /** Close websocket */
 export function closeWebsocket() {
@@ -51,6 +65,7 @@ export function closeWebsocket() {
 }
 /** Handle for websocket "open" event */
 function handleSocketOpen() {
+  currConnectionRetries = 0;
   this.send(JSON.stringify({
     type: 'connection',
     data: {

package/dist/ru/parts/profile/actions/save-user-data/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Save new user data on backend.
+ *
+ * Returned Promise is resolved with:
+ *
+ *   - true - if the operation succeeds;
+ *   - false - if the operation fails due to any reason.
+ */
+export default function saveUserData(beacon: string, userName: string, uiLang: string): Promise<boolean>;

package/dist/ru/parts/profile/actions/save-user-data/index.js

@@ -0,0 +1,53 @@
+import { getGrantToken } from '../../../../modules/tokens/index.js';
+import { logInvariant } from '../../../../modules/logger/index.js';
+import { getApiBaseUrl, getRequestCredentialsMode } from '../../../../modules/env/index.js';
+import request from '../../../../modules/request/index.js';
+import { innerToplineService } from '../../../../modules/topline-service/index.js';
+/**
+ * Save new user data on backend.
+ *
+ * Returned Promise is resolved with:
+ *
+ *   - true - if the operation succeeds;
+ *   - false - if the operation fails due to any reason.
+ */
+export default async function saveUserData(beacon, userName, uiLang) {
+  const grantToken = getGrantToken();
+  if (!grantToken) {
+    // This situation is impossible: if a logout event is received on a websocket,
+    // this modal window is closed automatically; thus the user has no chance to start
+    // a saving operation.
+    logInvariant('Invariant: grant token must exist while changing user data');
+    return false;
+  }
+  const url = `${getApiBaseUrl()}/private/user/update-data`;
+  const options = {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${grantToken}`,
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    body: JSON.stringify({
+      beacon,
+      userName,
+      uiLang
+    }),
+    credentials: getRequestCredentialsMode(),
+    cache: 'no-store',
+    redirect: 'error'
+  };
+  const response = await request(url, options, {
+    maxRetries: 1
+  });
+  if (!response) {
+    return false;
+  }
+  if (response.status === 401) {
+    const upgradedGrantToken = await innerToplineService.upgradeGrantToken();
+    if (!upgradedGrantToken) {
+      return false;
+    }
+    return await saveUserData(beacon, userName, uiLang);
+  }
+  return true;
+}

package/dist/ru/parts/profile/index.d.ts

@@ -0,0 +1 @@
+export { default as Profile } from './ui/index.js';

package/dist/ru/parts/profile/index.js

@@ -0,0 +1 @@
+export { default as Profile } from './ui/index.js';

package/dist/ru/parts/profile/ui/index.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from 'react';
+type Props = {
+    onClose: () => unknown;
+};
+export default function Profile(props: Props): JSX.Element | null;
+export {};

package/dist/ru/parts/profile/ui/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useState, useCallback } from 'react';
+import Modal from '../../../shared/components/modal/index.js';
+import Root from './root/index.js';
+import { ToplineContext } from '../../shell/index.js';
+var LocalStep;
+(function (LocalStep) {
+  LocalStep["Root"] = "root";
+  LocalStep["PasswordChange"] = "password_change";
+})(LocalStep || (LocalStep = {}));
+export default function Profile(props) {
+  const {
+    onClose
+  } = props;
+  const {
+    user
+  } = useContext(ToplineContext);
+  const [localStep, setLocalStep] = useState(LocalStep.Root);
+  const handleSwitchToPasswordChange = useCallback(() => setLocalStep(LocalStep.PasswordChange), []);
+  const getContents = user => {
+    switch (localStep) {
+      case LocalStep.Root:
+        return _jsx(Root, {
+          user: user,
+          onChangePassword: handleSwitchToPasswordChange,
+          onCancel: onClose
+        });
+      case LocalStep.PasswordChange:
+        return _jsx("div", {
+          children: "PasswordChange"
+        });
+      default:
+        {
+          const _exhaustiveCheck = localStep;
+          return _exhaustiveCheck;
+        }
+    }
+  };
+  if (user == null) {
+    return null;
+  }
+  return _jsx(Modal, {
+    title: "Мой профиль",
+    onClose: onClose,
+    children: getContents(user)
+  });
+}

package/dist/ru/parts/profile/ui/root/get-initial-ui-lang.d.ts

@@ -0,0 +1,2 @@
+import type { ToplineUser } from '../../../../types/data.js';
+export default function getInitialUiLang(user: ToplineUser): string;

package/dist/ru/parts/profile/ui/root/get-initial-ui-lang.js

@@ -0,0 +1,4 @@
+import { getDefaultUiLangForUser } from '../../../../modules/ui-lang/index.js';
+export default function getInitialUiLang(user) {
+  return user.uiLang ?? getDefaultUiLangForUser().code;
+}

package/dist/ru/parts/profile/ui/root/get-initial-user-name.d.ts

@@ -0,0 +1,2 @@
+import type { ToplineUser } from '../../../../types/data.js';
+export default function getInitialUserName(user: ToplineUser): string;

package/dist/ru/parts/profile/ui/root/get-initial-user-name.js

@@ -0,0 +1,3 @@
+export default function getInitialUserName(user) {
+  return user.userName ?? '';
+}

package/dist/ru/parts/profile/ui/root/has-changes.d.ts

@@ -0,0 +1,7 @@
+import type { ToplineUser } from '../../../../types/data.js';
+type CurrData = {
+    userName: string;
+    uiLang: string;
+};
+export default function hasChanges(user: ToplineUser, currData: CurrData): boolean;
+export {};

package/dist/ru/parts/profile/ui/root/has-changes.js

@@ -0,0 +1,11 @@
+import getInitialUserName from './get-initial-user-name.js';
+import getInitialUiLang from './get-initial-ui-lang.js';
+export default function hasChanges(user, currData) {
+  if (getInitialUserName(user) !== currData.userName) {
+    return true;
+  }
+  if (getInitialUiLang(user) !== currData.uiLang) {
+    return true;
+  }
+  return false;
+}

package/dist/ru/parts/profile/ui/root/index.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from 'react';
+import type { ToplineUser } from '../../../../types/data.js';
+type Props = {
+    user: ToplineUser;
+    onChangePassword: () => unknown;
+    onCancel: () => unknown;
+};
+export default function Root(props: Props): JSX.Element;
+export {};

package/dist/ru/parts/profile/ui/root/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { InputField } from '@peassoft/mnr-web-ui-kit/input-field/index.js';
+import { Select } from '@peassoft/mnr-web-ui-kit/select/index.js';
+import { TextButton } from '@peassoft/mnr-web-ui-kit/text-button/index.js';
+import { Button } from '@peassoft/mnr-web-ui-kit/button/index.js';
+import { ErrorMessage } from '@peassoft/mnr-web-ui-kit/error-message/index.js';
+import { createUserDataChangeBeacon } from '../../../../modules/user-data-change-beacon/index.js';
+import { getSupportedUiLangs } from '../../../../modules/ui-lang/index.js';
+import { updateUser } from '../../../../modules/local-db/index.js';
+import { innerToplineService, ToplineEventName } from '../../../../modules/topline-service/index.js';
+import saveUserData from '../../actions/save-user-data/index.js';
+import getInitialUserName from './get-initial-user-name.js';
+import getInitialUiLang from './get-initial-ui-lang.js';
+import hasChanges from './has-changes.js';
+export default function Root(props) {
+  const {
+    user,
+    onChangePassword,
+    onCancel
+  } = props;
+  const [userName, setUserName] = useState(getInitialUserName(user));
+  const [uiLang, setUiLang] = useState(getInitialUiLang(user));
+  const [isInProgress, setIsInProgress] = useState(false);
+  const [hasSavingError, setHasSavingError] = useState(false);
+  const uiLangOptions = useMemo(() => getSupportedUiLangs().map(langDescriptor => ({
+    id: langDescriptor.code,
+    value: langDescriptor.name
+  })), []);
+  const noop = useCallback(() => {}, []);
+  const handleUserNameChange = useCallback(val => setUserName(val), []);
+  const handleUiLangChange = useCallback(val => setUiLang(val), []);
+  const handleChangePasswordClick = useCallback(() => onChangePassword(), [onChangePassword]);
+  const handleSave = useCallback(async () => {
+    if (hasChanges(user, {
+      userName,
+      uiLang
+    })) {
+      setIsInProgress(true);
+      setHasSavingError(false);
+      const beacon = createUserDataChangeBeacon();
+      const savingResult = await saveUserData(beacon, userName, uiLang);
+      if (!savingResult) {
+        setIsInProgress(false);
+        setHasSavingError(true);
+        return;
+      }
+      const updatedUser = {
+        ...user,
+        userName,
+        uiLang
+      };
+      void updateUser(updatedUser);
+      innerToplineService.emit(ToplineEventName.UserChange, updatedUser);
+      onCancel();
+    }
+  }, [user, userName, uiLang, onCancel]);
+  return _jsxs(_Fragment, {
+    children: [_jsx(InputField, {
+      label: "Ваш email. Не может быть изменён.",
+      value: user.id,
+      disabled: true,
+      onChange: noop
+    }), _jsx(InputField, {
+      label: "Ваше имя",
+      value: userName,
+      onChange: handleUserNameChange
+    }), _jsx(Select, {
+      label: "Выберите предпочитаемый язык для пользовательского интерфейса",
+      items: uiLangOptions,
+      selectedItemId: uiLang,
+      onChange: handleUiLangChange
+    }), _jsx("div", {
+      className: 'topline_profile_fieldCont',
+      children: _jsx(TextButton, {
+        label: "Изменить мой пароль",
+        onClick: handleChangePasswordClick
+      })
+    }), !!hasSavingError && _jsx(ErrorMessage, {
+      variant: 'standalone',
+      children: "При сохранении изменений произошла ошибка. Проверьте ваше подключение к интернету и/или попробуйте ещё раз."
+    }), _jsxs("div", {
+      className: 'topline_profile_buttonsCont',
+      children: [_jsx(Button, {
+        label: "Сохранить",
+        isInProgress: isInProgress,
+        onClick: handleSave
+      }), _jsx(Button, {
+        label: "Отменить",
+        variant: 'secondary',
+        onClick: onCancel
+      })]
+    })]
+  });
+}

package/dist/ru/parts/shell/ui/shell/index.js

@@ -8,6 +8,7 @@ import Alternative from '../../../../shared/components/alternative/index.js';
 import { Login } from '../../../login/index.js';
 import { Signup } from '../../../signup/index.js';
 import { PasswordRecovery } from '../../../password-recovery/index.js';
+import { Profile } from '../../../profile/index.js';
 import ToplineContext from '../../context.js';
 import { globalRefs } from '../../../../modules/focus-marshal/index.js';
 import { initDb, getAllData } from '../../../../modules/local-db/index.js';
@@ -47,7 +48,7 @@ export default function Shell() {
         setModalWindowOpen('signup');
         break;
       case 'profile':
-        console.log('Opening Profile form...');
+        setModalWindowOpen('profile');
         break;
       case 'logout':
         handleUserChange(null);
@@ -93,7 +94,10 @@ export default function Shell() {
       }
     }
     void initData();
-  }, [handleUserChange, onReady]);
+  },
+  // We need this effect to run only once - on initial mount
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  []);
   useEffect(() => {
     if (isUserMenuOpen) {
       globalRefs.userMenuFirstItem.current?.focus();
@@ -114,28 +118,30 @@ export default function Shell() {
     };
   }, []);
   useEffect(() => {
-    let websocketClosed = false;
     let timer = null;
-    function handleVisibilityChange() {
+    async function handler() {
       if (timer) clearTimeout(timer);
       if (document.visibilityState === 'visible') {
-        if (websocketClosed) {
-          websocketClosed = false;
+        const {
+          user
+        } = await getAllData();
+        if (user) {
+          await refreshUser(user);
           openWebsocket();
         }
       } else {
-        timer = setTimeout(() => {
-          websocketClosed = true;
-          closeWebsocket();
-        }, 30000);
+        timer = setTimeout(closeWebsocket, 30000);
       }
     }
+    function handleVisibilityChange() {
+      void handler();
+    }
     document.addEventListener('visibilitychange', handleVisibilityChange);
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
   }, []);
-  let ModalWindow = null;
+  let ModalWindow;
   switch (modalWindowActive) {
     case 'login':
       ModalWindow = _jsx(Login, {
@@ -155,6 +161,20 @@ export default function Shell() {
       ModalWindow = _jsx(PasswordRecovery, {
         onClose: handleModalWindowClose
       });
+      break;
+    case 'profile':
+      ModalWindow = _jsx(Profile, {
+        onClose: handleModalWindowClose
+      });
+      break;
+    case null:
+      ModalWindow = null;
+      break;
+    default:
+      {
+        const _exhaustiveCheck = modalWindowActive;
+        return _exhaustiveCheck;
+      }
   }
   return _jsxs(_Fragment, {
     children: [_jsxs("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peassoft/mnr-web-topline",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Peassoft Topline widget for mem'n'rev web applications",
   "type": "module",
   "exports": {
@@ -30,7 +30,7 @@
     "@memnrev/dict-replacer": "^0.1.0",
     "@memnrev/eslint-v9-config": "^0.1.1",
     "@microsoft/api-extractor": "^7.38.0",
-    "@peassoft/mnr-web-ui-kit": "^0.1.0",
+    "@peassoft/mnr-web-ui-kit": "^0.1.2",
     "@types/jest": "^29.5.4",
     "@types/md5": "^2.3.3",
     "@types/react": "^19.0.2",
@@ -66,7 +66,8 @@
     "email-validator": "^2.0.4",
     "md5": "^2.3.0",
     "react-error-boundary": "^5.0.0",
-    "stampit": "^4.3.2"
+    "stampit": "^4.3.2",
+    "uuid": "^11.1.0"
   },
   "peerDependencies": {
     "react": ">= 19 < 20",