@peassoft/mnr-web-topline 0.2.1 → 0.3.0

package/dist/css/index.css

@@ -165,6 +165,12 @@
   margin-top: 1.5rem;
 }
 
+.topline_profile_subtitle {
+  margin: 0;
+  font-size: 1.2em;
+  text-align: center;
+}
+
 .topline_profile_buttonsCont {
   margin-top: 2rem;
   display: flex;
@@ -172,6 +178,16 @@
   gap: 1rem;
 }
 
+.topline_profile_confirmationMesage {
+  text-align: center;
+}
+
+.topline_profile_confirmationButtonsCont {
+  margin-top: 2rem;
+  display: flex;
+  justify-content: center;
+}
+
 .topline_c_modal_overlay {
   position: fixed;
   z-index: 1;

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

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

package/dist/en/modules/password-change-beacon/index.js

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

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

@@ -19,8 +19,7 @@ import shouldRetry from './should-retry.js';
  * @param fetchApiOpts Fetch API options
  * @param requestOpts Custom options
  */
-export default async function request(url, fetchApiOpts) {
-  let requestOpts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+export default async function request(url, fetchApiOpts, requestOpts = {}) {
   const {
     expectedStatusCodes,
     timeoutMs,

package/dist/en/modules/topline-service/inner-service.js

@@ -17,11 +17,11 @@ export class InnerService {
   #updateRefreshTokenInDb;
   #logError;
   /** Registered outer event listeners */
-  #listeners = (() => new Set())();
+  #listeners = new Set();
   /** Registered inner "log-in" event listeners */
-  #innerLogInListeners = (() => new Set())();
+  #innerLogInListeners = new Set();
   /** Registered inner "create-account" event listeners */
-  #innerCreateAccountListeners = (() => new Set())();
+  #innerCreateAccountListeners = new Set();
   constructor(deps) {
     this.#getRefreshToken = deps.getRefreshToken;
     this.#setGrantToken = deps.setGrantToken;

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

@@ -6,6 +6,7 @@ import { innerToplineService, ToplineEventName } from '../topline-service/index.
 import { isObject } from '../../types/helpers.js';
 import { isToplineUser } from '../../types/data.js';
 import { userDataChangeBeaconExists, removeUserDataChangeBeacon } from '../user-data-change-beacon/index.js';
+import { passwordChangeBeaconExists, removePasswordChangeBeacon } from '../password-change-beacon/index.js';
 import { updateUser } from '../local-db/index.js';
 let activeSocket = null;
 let currConnectionRetries = 0;
@@ -29,8 +30,12 @@ function handleSocketMessage(e) {
   if (isObject(message) && 'type' in message && typeof message.type === 'string') {
     switch (message.type) {
       case 'logout':
-        innerToplineService.processLogout();
-        closeWebsocket();
+        if ('beacon' in message && typeof message.beacon === 'string' && passwordChangeBeaconExists(message.beacon)) {
+          removePasswordChangeBeacon(message.beacon);
+        } else {
+          innerToplineService.processLogout();
+          closeWebsocket();
+        }
         break;
       case 'sync':
         if ('syncId' in message && typeof message.syncId === 'string') {
@@ -39,8 +44,9 @@ function handleSocketMessage(e) {
         break;
       case 'user_data_change':
         if ('beacon' in message && typeof message.beacon === 'string' && 'user' in message && isToplineUser(message.user)) {
-          if (!userDataChangeBeaconExists(message.beacon)) {
+          if (userDataChangeBeaconExists(message.beacon)) {
             removeUserDataChangeBeacon(message.beacon);
+          } else {
             void updateUser(message.user);
             innerToplineService.emit(ToplineEventName.UserChange, message.user);
           }

package/dist/en/parts/profile/actions/change-password/index.d.ts

@@ -0,0 +1,16 @@
+export declare enum PasswordChangeResult {
+    Success = "success",
+    NetworkFailure = "network_failure",
+    /**
+     * Old password is incorrect. This case might occure when:
+     * (1) user makes an error while typing the old password, or
+     * (2) user doesn't remember their current password and tries a wrong one, or
+     * (3) user has changed the password in another instance of the app, the `logout`
+     *     message has not been received on a websocket (for any reason), and
+     *     the current `grant token` has not expired yet.
+     */
+    IncorrectOldPassword = "incorrect_old_password",
+    /** HTTP request is not authenticated with `refresh token`, or user no longer exists. */
+    Unauthorized = "unauthorized"
+}
+export default function changePassword(beacon: string, oldPassword: string, newPassword: string): Promise<PasswordChangeResult>;

package/dist/en/parts/profile/actions/change-password/index.js

@@ -0,0 +1,102 @@
+import WebError from '@memnrev/web-error';
+import { getGrantToken, setGrantToken, setRefreshToken } from '../../../../modules/tokens/index.js';
+import { logInvariant, logError } 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';
+import { updateGrantToken, updateRefreshToken } from '../../../../modules/local-db/index.js';
+export var PasswordChangeResult;
+(function (PasswordChangeResult) {
+  PasswordChangeResult["Success"] = "success";
+  PasswordChangeResult["NetworkFailure"] = "network_failure";
+  /**
+   * Old password is incorrect. This case might occure when:
+   * (1) user makes an error while typing the old password, or
+   * (2) user doesn't remember their current password and tries a wrong one, or
+   * (3) user has changed the password in another instance of the app, the `logout`
+   *     message has not been received on a websocket (for any reason), and
+   *     the current `grant token` has not expired yet.
+   */
+  PasswordChangeResult["IncorrectOldPassword"] = "incorrect_old_password";
+  /** HTTP request is not authenticated with `refresh token`, or user no longer exists. */
+  PasswordChangeResult["Unauthorized"] = "unauthorized";
+})(PasswordChangeResult || (PasswordChangeResult = {}));
+export default async function changePassword(beacon, oldPassword, newPassword) {
+  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 password');
+    return PasswordChangeResult.Unauthorized;
+  }
+  const url = `${getApiBaseUrl()}/private/user/change-password`;
+  const options = {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${grantToken}`,
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    body: JSON.stringify({
+      beacon,
+      currPassword: oldPassword,
+      newPassword
+    }),
+    credentials: getRequestCredentialsMode(),
+    cache: 'no-store',
+    redirect: 'error'
+  };
+  const response = await request(url, options, {
+    // Explicitly avoid retries as this operation is not idempotent
+    maxRetries: 0
+  });
+  if (!response) {
+    return PasswordChangeResult.NetworkFailure;
+  }
+  if (response.status === 401) {
+    const upgradedGrantToken = await innerToplineService.upgradeGrantToken();
+    if (!upgradedGrantToken) {
+      innerToplineService.processLogout();
+      return PasswordChangeResult.Unauthorized;
+    }
+    return await changePassword(beacon, oldPassword, newPassword);
+  }
+  let payload;
+  try {
+    payload = await response.json();
+  } catch (e) {
+    logError(new WebError({
+      name: 'UnexpectedError',
+      ...(e instanceof Error ? {
+        cause: e
+      } : {})
+    }, `parsing 200 response of request to ${url} failed`));
+    return PasswordChangeResult.NetworkFailure;
+  }
+  const {
+    result
+  } = payload;
+  switch (result) {
+    case 'OK':
+      {
+        const {
+          grantToken,
+          refreshToken
+        } = payload.tokens;
+        setGrantToken(grantToken);
+        setRefreshToken(refreshToken);
+        await Promise.all([updateGrantToken(grantToken), updateRefreshToken(refreshToken)]);
+        return PasswordChangeResult.Success;
+      }
+    case 'NO_USER':
+      innerToplineService.processLogout();
+      return PasswordChangeResult.Unauthorized;
+    case 'INVALID_PASSWORD':
+      return PasswordChangeResult.IncorrectOldPassword;
+    default:
+      {
+        const _exhaustiveCheck = result;
+        return _exhaustiveCheck;
+      }
+  }
+}

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

@@ -2,6 +2,7 @@ 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 PasswordChangeMarshal from './password-change-marshal/index.js';
 import { ToplineContext } from '../../shell/index.js';
 var LocalStep;
 (function (LocalStep) {
@@ -17,6 +18,7 @@ export default function Profile(props) {
   } = useContext(ToplineContext);
   const [localStep, setLocalStep] = useState(LocalStep.Root);
   const handleSwitchToPasswordChange = useCallback(() => setLocalStep(LocalStep.PasswordChange), []);
+  const handleReturningFromPasswordChange = useCallback(() => setLocalStep(LocalStep.Root), []);
   const getContents = user => {
     switch (localStep) {
       case LocalStep.Root:
@@ -26,8 +28,8 @@ export default function Profile(props) {
           onCancel: onClose
         });
       case LocalStep.PasswordChange:
-        return _jsx("div", {
-          children: "PasswordChange"
+        return _jsx(PasswordChangeMarshal, {
+          onCancel: handleReturningFromPasswordChange
         });
       default:
         {

package/dist/en/parts/profile/ui/password-change-confirmation/index.d.ts

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

package/dist/en/parts/profile/ui/password-change-confirmation/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@peassoft/mnr-web-ui-kit/button/index.js';
+export default function PasswordChangeConfirmation(props) {
+  const {
+    onOk
+  } = props;
+  return _jsxs(_Fragment, {
+    children: [_jsx("h2", {
+      className: 'topline_profile_subtitle',
+      children: "Password Change"
+    }), _jsx("p", {
+      className: 'topline_profile_confirmationMesage',
+      children: "You password has successfully been changed."
+    }), _jsx("div", {
+      className: 'topline_profile_confirmationButtonsCont',
+      children: _jsx(Button, {
+        label: 'OK',
+        onClick: onOk
+      })
+    })]
+  });
+}

package/dist/en/parts/profile/ui/password-change-form/index.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+type Props = {
+    onSuccess: () => unknown;
+    onCancel: () => unknown;
+};
+export default function PasswordChangeForm(props: Props): JSX.Element;
+export {};

package/dist/en/parts/profile/ui/password-change-form/index.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { InputField } from '@peassoft/mnr-web-ui-kit/input-field/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 useStateWithValidationReset from './use-state-with-validation-reset.js';
+import changePassword, { PasswordChangeResult } from '../../actions/change-password/index.js';
+import { createPasswordChangeBeacon } from '../../../../modules/password-change-beacon/index.js';
+var NewPasswordConfirmationError;
+(function (NewPasswordConfirmationError) {
+  NewPasswordConfirmationError["None"] = "none";
+  NewPasswordConfirmationError["Empty"] = "empty";
+  NewPasswordConfirmationError["NotMatching"] = "not_matching";
+})(NewPasswordConfirmationError || (NewPasswordConfirmationError = {}));
+export default function PasswordChangeForm(props) {
+  const {
+    onSuccess,
+    onCancel
+  } = props;
+  const [isInProgress, setIsInProgress] = useState(false);
+  const [hasOldPasswordValidationError, setHasOldPasswordValidationError] = useState(false);
+  const [hasNewPasswordValidationError, setHasNewPasswordValidationError] = useState(false);
+  const [newPasswordConfirmationError, setNewPasswordConfirmationError] = useState(NewPasswordConfirmationError.None);
+  const [oldPassword, setOldPassword] = useStateWithValidationReset('', setHasOldPasswordValidationError, false);
+  const [newPassword, setNewPassword] = useStateWithValidationReset('', setHasNewPasswordValidationError, false);
+  const [newPasswordConfirmation, setNewPasswordConfirmation] = useStateWithValidationReset('', setNewPasswordConfirmationError, NewPasswordConfirmationError.None);
+  const [savingError, setSavingError] = useState('');
+  const newPasswordConfirmationErrorMessage = useMemo(() => {
+    switch (newPasswordConfirmationError) {
+      case NewPasswordConfirmationError.None:
+        return '';
+      case NewPasswordConfirmationError.Empty:
+        return "Re-entering new password is required.";
+      case NewPasswordConfirmationError.NotMatching:
+        return "Passwords do not match.";
+      default:
+        {
+          const _exhaustiveCheck = newPasswordConfirmationError;
+          return _exhaustiveCheck;
+        }
+    }
+  }, [newPasswordConfirmationError]);
+  const validateInput = useCallback(() => {
+    let isCorrect = true;
+    if (!oldPassword) {
+      isCorrect = false;
+      setHasOldPasswordValidationError(true);
+    }
+    if (!newPassword) {
+      isCorrect = false;
+      setHasNewPasswordValidationError(true);
+    }
+    if (!newPasswordConfirmation) {
+      isCorrect = false;
+      setNewPasswordConfirmationError(NewPasswordConfirmationError.Empty);
+    } else if (newPasswordConfirmation !== newPassword) {
+      isCorrect = false;
+      setNewPasswordConfirmationError(NewPasswordConfirmationError.NotMatching);
+    }
+    return isCorrect;
+  }, [oldPassword, newPassword, newPasswordConfirmation]);
+  const resetErrors = useCallback(() => {
+    setHasOldPasswordValidationError(false);
+    setHasNewPasswordValidationError(false);
+    setNewPasswordConfirmationError(NewPasswordConfirmationError.None);
+    setSavingError('');
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (!validateInput()) return;
+    resetErrors();
+    setIsInProgress(true);
+    const beacon = createPasswordChangeBeacon();
+    const result = await changePassword(beacon, oldPassword, newPassword);
+    switch (result) {
+      case PasswordChangeResult.Success:
+        onSuccess();
+        break;
+      case PasswordChangeResult.NetworkFailure:
+        setSavingError("An error occurred while saving the new password. Check your internet connection and/or try again.");
+        setIsInProgress(false);
+        break;
+      case PasswordChangeResult.IncorrectOldPassword:
+        setSavingError("The current password is incorrect.");
+        setIsInProgress(false);
+        break;
+      case PasswordChangeResult.Unauthorized:
+        // Do nothing here. Everything needed has already been done by the action.
+        break;
+      default:
+        {
+          const _exhaustiveCheck = result;
+          return _exhaustiveCheck;
+        }
+    }
+  }, [validateInput, resetErrors, onSuccess, oldPassword, newPassword]);
+  return _jsxs("form", {
+    children: [_jsx("h2", {
+      className: 'topline_profile_subtitle',
+      children: "Password Change"
+    }), _jsx(InputField, {
+      type: 'password',
+      autocompleteAttribute: 'current-password',
+      label: "Your current password. Required.",
+      value: oldPassword,
+      errorMessage: hasOldPasswordValidationError ? "Enter your current password." : undefined,
+      onChange: setOldPassword
+    }), _jsx(InputField, {
+      type: 'password',
+      autocompleteAttribute: 'new-password',
+      label: "New password. Required.",
+      value: newPassword,
+      errorMessage: hasNewPasswordValidationError ? "Enter a new password." : undefined,
+      onChange: setNewPassword
+    }), _jsx(InputField, {
+      type: 'password',
+      label: "Enter the new password once again. Required.",
+      value: newPasswordConfirmation,
+      errorMessage: newPasswordConfirmationErrorMessage || undefined,
+      onChange: setNewPasswordConfirmation
+    }), !!savingError && _jsx(ErrorMessage, {
+      variant: 'standalone',
+      children: savingError
+    }), _jsxs("div", {
+      className: 'topline_profile_buttonsCont',
+      children: [_jsx(Button, {
+        label: "Save new password",
+        isInProgress: isInProgress,
+        onClick: handleSave
+      }), !isInProgress && _jsx(Button, {
+        label: "Cancel",
+        variant: 'secondary',
+        onClick: onCancel
+      })]
+    })]
+  });
+}

package/dist/en/parts/profile/ui/password-change-form/use-state-with-validation-reset.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function useStateWithValidationReset<T, V>(initialState: T, validationSetFn: React.Dispatch<React.SetStateAction<V>>, validationResetValue: V): [T, (newValue: T) => void];

package/dist/en/parts/profile/ui/password-change-form/use-state-with-validation-reset.js

@@ -0,0 +1,9 @@
+import { useState, useCallback } from 'react';
+export default function useStateWithValidationReset(initialState, validationSetFn, validationResetValue) {
+  const [value, setValue] = useState(initialState);
+  const handleChange = useCallback(newVal => {
+    validationSetFn(validationResetValue);
+    setValue(newVal);
+  }, [validationSetFn, validationResetValue]);
+  return [value, handleChange];
+}

package/dist/en/parts/profile/ui/password-change-marshal/index.d.ts

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

package/dist/en/parts/profile/ui/password-change-marshal/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import PasswordChangeForm from '../password-change-form/index.js';
+import PasswordChangeConfirmation from '../password-change-confirmation/index.js';
+var LocalStep;
+(function (LocalStep) {
+  LocalStep["Form"] = "form";
+  LocalStep["SuccessConfirmation"] = "success_confirmation";
+})(LocalStep || (LocalStep = {}));
+export default function PasswordChangeMarshal(props) {
+  const {
+    onCancel
+  } = props;
+  const [localStep, setLocalStep] = useState(LocalStep.Form);
+  const handleSuccess = useCallback(() => setLocalStep(LocalStep.SuccessConfirmation), []);
+  switch (localStep) {
+    case LocalStep.Form:
+      return _jsx(PasswordChangeForm, {
+        onSuccess: handleSuccess,
+        onCancel: onCancel
+      });
+    case LocalStep.SuccessConfirmation:
+      return _jsx(PasswordChangeConfirmation, {
+        onOk: onCancel
+      });
+    default:
+      {
+        const _exhaustiveCheck = localStep;
+        return _exhaustiveCheck;
+      }
+  }
+}

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

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

package/dist/ru/modules/password-change-beacon/index.js

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

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

@@ -19,8 +19,7 @@ import shouldRetry from './should-retry.js';
  * @param fetchApiOpts Fetch API options
  * @param requestOpts Custom options
  */
-export default async function request(url, fetchApiOpts) {
-  let requestOpts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+export default async function request(url, fetchApiOpts, requestOpts = {}) {
   const {
     expectedStatusCodes,
     timeoutMs,

package/dist/ru/modules/topline-service/inner-service.js

@@ -17,11 +17,11 @@ export class InnerService {
   #updateRefreshTokenInDb;
   #logError;
   /** Registered outer event listeners */
-  #listeners = (() => new Set())();
+  #listeners = new Set();
   /** Registered inner "log-in" event listeners */
-  #innerLogInListeners = (() => new Set())();
+  #innerLogInListeners = new Set();
   /** Registered inner "create-account" event listeners */
-  #innerCreateAccountListeners = (() => new Set())();
+  #innerCreateAccountListeners = new Set();
   constructor(deps) {
     this.#getRefreshToken = deps.getRefreshToken;
     this.#setGrantToken = deps.setGrantToken;

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

@@ -6,6 +6,7 @@ import { innerToplineService, ToplineEventName } from '../topline-service/index.
 import { isObject } from '../../types/helpers.js';
 import { isToplineUser } from '../../types/data.js';
 import { userDataChangeBeaconExists, removeUserDataChangeBeacon } from '../user-data-change-beacon/index.js';
+import { passwordChangeBeaconExists, removePasswordChangeBeacon } from '../password-change-beacon/index.js';
 import { updateUser } from '../local-db/index.js';
 let activeSocket = null;
 let currConnectionRetries = 0;
@@ -29,8 +30,12 @@ function handleSocketMessage(e) {
   if (isObject(message) && 'type' in message && typeof message.type === 'string') {
     switch (message.type) {
       case 'logout':
-        innerToplineService.processLogout();
-        closeWebsocket();
+        if ('beacon' in message && typeof message.beacon === 'string' && passwordChangeBeaconExists(message.beacon)) {
+          removePasswordChangeBeacon(message.beacon);
+        } else {
+          innerToplineService.processLogout();
+          closeWebsocket();
+        }
         break;
       case 'sync':
         if ('syncId' in message && typeof message.syncId === 'string') {
@@ -39,8 +44,9 @@ function handleSocketMessage(e) {
         break;
       case 'user_data_change':
         if ('beacon' in message && typeof message.beacon === 'string' && 'user' in message && isToplineUser(message.user)) {
-          if (!userDataChangeBeaconExists(message.beacon)) {
+          if (userDataChangeBeaconExists(message.beacon)) {
             removeUserDataChangeBeacon(message.beacon);
+          } else {
             void updateUser(message.user);
             innerToplineService.emit(ToplineEventName.UserChange, message.user);
           }

package/dist/ru/parts/profile/actions/change-password/index.d.ts

@@ -0,0 +1,16 @@
+export declare enum PasswordChangeResult {
+    Success = "success",
+    NetworkFailure = "network_failure",
+    /**
+     * Old password is incorrect. This case might occure when:
+     * (1) user makes an error while typing the old password, or
+     * (2) user doesn't remember their current password and tries a wrong one, or
+     * (3) user has changed the password in another instance of the app, the `logout`
+     *     message has not been received on a websocket (for any reason), and
+     *     the current `grant token` has not expired yet.
+     */
+    IncorrectOldPassword = "incorrect_old_password",
+    /** HTTP request is not authenticated with `refresh token`, or user no longer exists. */
+    Unauthorized = "unauthorized"
+}
+export default function changePassword(beacon: string, oldPassword: string, newPassword: string): Promise<PasswordChangeResult>;

package/dist/ru/parts/profile/actions/change-password/index.js

@@ -0,0 +1,102 @@
+import WebError from '@memnrev/web-error';
+import { getGrantToken, setGrantToken, setRefreshToken } from '../../../../modules/tokens/index.js';
+import { logInvariant, logError } 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';
+import { updateGrantToken, updateRefreshToken } from '../../../../modules/local-db/index.js';
+export var PasswordChangeResult;
+(function (PasswordChangeResult) {
+  PasswordChangeResult["Success"] = "success";
+  PasswordChangeResult["NetworkFailure"] = "network_failure";
+  /**
+   * Old password is incorrect. This case might occure when:
+   * (1) user makes an error while typing the old password, or
+   * (2) user doesn't remember their current password and tries a wrong one, or
+   * (3) user has changed the password in another instance of the app, the `logout`
+   *     message has not been received on a websocket (for any reason), and
+   *     the current `grant token` has not expired yet.
+   */
+  PasswordChangeResult["IncorrectOldPassword"] = "incorrect_old_password";
+  /** HTTP request is not authenticated with `refresh token`, or user no longer exists. */
+  PasswordChangeResult["Unauthorized"] = "unauthorized";
+})(PasswordChangeResult || (PasswordChangeResult = {}));
+export default async function changePassword(beacon, oldPassword, newPassword) {
+  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 password');
+    return PasswordChangeResult.Unauthorized;
+  }
+  const url = `${getApiBaseUrl()}/private/user/change-password`;
+  const options = {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${grantToken}`,
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    body: JSON.stringify({
+      beacon,
+      currPassword: oldPassword,
+      newPassword
+    }),
+    credentials: getRequestCredentialsMode(),
+    cache: 'no-store',
+    redirect: 'error'
+  };
+  const response = await request(url, options, {
+    // Explicitly avoid retries as this operation is not idempotent
+    maxRetries: 0
+  });
+  if (!response) {
+    return PasswordChangeResult.NetworkFailure;
+  }
+  if (response.status === 401) {
+    const upgradedGrantToken = await innerToplineService.upgradeGrantToken();
+    if (!upgradedGrantToken) {
+      innerToplineService.processLogout();
+      return PasswordChangeResult.Unauthorized;
+    }
+    return await changePassword(beacon, oldPassword, newPassword);
+  }
+  let payload;
+  try {
+    payload = await response.json();
+  } catch (e) {
+    logError(new WebError({
+      name: 'UnexpectedError',
+      ...(e instanceof Error ? {
+        cause: e
+      } : {})
+    }, `parsing 200 response of request to ${url} failed`));
+    return PasswordChangeResult.NetworkFailure;
+  }
+  const {
+    result
+  } = payload;
+  switch (result) {
+    case 'OK':
+      {
+        const {
+          grantToken,
+          refreshToken
+        } = payload.tokens;
+        setGrantToken(grantToken);
+        setRefreshToken(refreshToken);
+        await Promise.all([updateGrantToken(grantToken), updateRefreshToken(refreshToken)]);
+        return PasswordChangeResult.Success;
+      }
+    case 'NO_USER':
+      innerToplineService.processLogout();
+      return PasswordChangeResult.Unauthorized;
+    case 'INVALID_PASSWORD':
+      return PasswordChangeResult.IncorrectOldPassword;
+    default:
+      {
+        const _exhaustiveCheck = result;
+        return _exhaustiveCheck;
+      }
+  }
+}

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

@@ -2,6 +2,7 @@ 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 PasswordChangeMarshal from './password-change-marshal/index.js';
 import { ToplineContext } from '../../shell/index.js';
 var LocalStep;
 (function (LocalStep) {
@@ -17,6 +18,7 @@ export default function Profile(props) {
   } = useContext(ToplineContext);
   const [localStep, setLocalStep] = useState(LocalStep.Root);
   const handleSwitchToPasswordChange = useCallback(() => setLocalStep(LocalStep.PasswordChange), []);
+  const handleReturningFromPasswordChange = useCallback(() => setLocalStep(LocalStep.Root), []);
   const getContents = user => {
     switch (localStep) {
       case LocalStep.Root:
@@ -26,8 +28,8 @@ export default function Profile(props) {
           onCancel: onClose
         });
       case LocalStep.PasswordChange:
-        return _jsx("div", {
-          children: "PasswordChange"
+        return _jsx(PasswordChangeMarshal, {
+          onCancel: handleReturningFromPasswordChange
         });
       default:
         {

package/dist/ru/parts/profile/ui/password-change-confirmation/index.d.ts

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

package/dist/ru/parts/profile/ui/password-change-confirmation/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@peassoft/mnr-web-ui-kit/button/index.js';
+export default function PasswordChangeConfirmation(props) {
+  const {
+    onOk
+  } = props;
+  return _jsxs(_Fragment, {
+    children: [_jsx("h2", {
+      className: 'topline_profile_subtitle',
+      children: "Смена пароля"
+    }), _jsx("p", {
+      className: 'topline_profile_confirmationMesage',
+      children: "Ваш пароль успешно изменён."
+    }), _jsx("div", {
+      className: 'topline_profile_confirmationButtonsCont',
+      children: _jsx(Button, {
+        label: 'OK',
+        onClick: onOk
+      })
+    })]
+  });
+}

package/dist/ru/parts/profile/ui/password-change-form/index.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+type Props = {
+    onSuccess: () => unknown;
+    onCancel: () => unknown;
+};
+export default function PasswordChangeForm(props: Props): JSX.Element;
+export {};

package/dist/ru/parts/profile/ui/password-change-form/index.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { InputField } from '@peassoft/mnr-web-ui-kit/input-field/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 useStateWithValidationReset from './use-state-with-validation-reset.js';
+import changePassword, { PasswordChangeResult } from '../../actions/change-password/index.js';
+import { createPasswordChangeBeacon } from '../../../../modules/password-change-beacon/index.js';
+var NewPasswordConfirmationError;
+(function (NewPasswordConfirmationError) {
+  NewPasswordConfirmationError["None"] = "none";
+  NewPasswordConfirmationError["Empty"] = "empty";
+  NewPasswordConfirmationError["NotMatching"] = "not_matching";
+})(NewPasswordConfirmationError || (NewPasswordConfirmationError = {}));
+export default function PasswordChangeForm(props) {
+  const {
+    onSuccess,
+    onCancel
+  } = props;
+  const [isInProgress, setIsInProgress] = useState(false);
+  const [hasOldPasswordValidationError, setHasOldPasswordValidationError] = useState(false);
+  const [hasNewPasswordValidationError, setHasNewPasswordValidationError] = useState(false);
+  const [newPasswordConfirmationError, setNewPasswordConfirmationError] = useState(NewPasswordConfirmationError.None);
+  const [oldPassword, setOldPassword] = useStateWithValidationReset('', setHasOldPasswordValidationError, false);
+  const [newPassword, setNewPassword] = useStateWithValidationReset('', setHasNewPasswordValidationError, false);
+  const [newPasswordConfirmation, setNewPasswordConfirmation] = useStateWithValidationReset('', setNewPasswordConfirmationError, NewPasswordConfirmationError.None);
+  const [savingError, setSavingError] = useState('');
+  const newPasswordConfirmationErrorMessage = useMemo(() => {
+    switch (newPasswordConfirmationError) {
+      case NewPasswordConfirmationError.None:
+        return '';
+      case NewPasswordConfirmationError.Empty:
+        return "Необходимо повторить ввод нового пароля.";
+      case NewPasswordConfirmationError.NotMatching:
+        return "Подтверждение нового пароля не совпадает.";
+      default:
+        {
+          const _exhaustiveCheck = newPasswordConfirmationError;
+          return _exhaustiveCheck;
+        }
+    }
+  }, [newPasswordConfirmationError]);
+  const validateInput = useCallback(() => {
+    let isCorrect = true;
+    if (!oldPassword) {
+      isCorrect = false;
+      setHasOldPasswordValidationError(true);
+    }
+    if (!newPassword) {
+      isCorrect = false;
+      setHasNewPasswordValidationError(true);
+    }
+    if (!newPasswordConfirmation) {
+      isCorrect = false;
+      setNewPasswordConfirmationError(NewPasswordConfirmationError.Empty);
+    } else if (newPasswordConfirmation !== newPassword) {
+      isCorrect = false;
+      setNewPasswordConfirmationError(NewPasswordConfirmationError.NotMatching);
+    }
+    return isCorrect;
+  }, [oldPassword, newPassword, newPasswordConfirmation]);
+  const resetErrors = useCallback(() => {
+    setHasOldPasswordValidationError(false);
+    setHasNewPasswordValidationError(false);
+    setNewPasswordConfirmationError(NewPasswordConfirmationError.None);
+    setSavingError('');
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (!validateInput()) return;
+    resetErrors();
+    setIsInProgress(true);
+    const beacon = createPasswordChangeBeacon();
+    const result = await changePassword(beacon, oldPassword, newPassword);
+    switch (result) {
+      case PasswordChangeResult.Success:
+        onSuccess();
+        break;
+      case PasswordChangeResult.NetworkFailure:
+        setSavingError("При сохранении нового пароля произошла ошибка. Проверьте ваше подключение к интернету и/или попробуйте ещё раз.");
+        setIsInProgress(false);
+        break;
+      case PasswordChangeResult.IncorrectOldPassword:
+        setSavingError("Текущий пароль неверный.");
+        setIsInProgress(false);
+        break;
+      case PasswordChangeResult.Unauthorized:
+        // Do nothing here. Everything needed has already been done by the action.
+        break;
+      default:
+        {
+          const _exhaustiveCheck = result;
+          return _exhaustiveCheck;
+        }
+    }
+  }, [validateInput, resetErrors, onSuccess, oldPassword, newPassword]);
+  return _jsxs("form", {
+    children: [_jsx("h2", {
+      className: 'topline_profile_subtitle',
+      children: "Смена пароля"
+    }), _jsx(InputField, {
+      type: 'password',
+      autocompleteAttribute: 'current-password',
+      label: "Ваш текущий пароль. Обязательное поле.",
+      value: oldPassword,
+      errorMessage: hasOldPasswordValidationError ? "Введите ваш текущий пароль." : undefined,
+      onChange: setOldPassword
+    }), _jsx(InputField, {
+      type: 'password',
+      autocompleteAttribute: 'new-password',
+      label: "Новый пароль. Обязательное поле.",
+      value: newPassword,
+      errorMessage: hasNewPasswordValidationError ? "Введите новый пароль." : undefined,
+      onChange: setNewPassword
+    }), _jsx(InputField, {
+      type: 'password',
+      label: "Введите новый пароль ещё раз. Обязательное поле.",
+      value: newPasswordConfirmation,
+      errorMessage: newPasswordConfirmationErrorMessage || undefined,
+      onChange: setNewPasswordConfirmation
+    }), !!savingError && _jsx(ErrorMessage, {
+      variant: 'standalone',
+      children: savingError
+    }), _jsxs("div", {
+      className: 'topline_profile_buttonsCont',
+      children: [_jsx(Button, {
+        label: "Сохранить новый пароль",
+        isInProgress: isInProgress,
+        onClick: handleSave
+      }), !isInProgress && _jsx(Button, {
+        label: "Отменить",
+        variant: 'secondary',
+        onClick: onCancel
+      })]
+    })]
+  });
+}

package/dist/ru/parts/profile/ui/password-change-form/use-state-with-validation-reset.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function useStateWithValidationReset<T, V>(initialState: T, validationSetFn: React.Dispatch<React.SetStateAction<V>>, validationResetValue: V): [T, (newValue: T) => void];

package/dist/ru/parts/profile/ui/password-change-form/use-state-with-validation-reset.js

@@ -0,0 +1,9 @@
+import { useState, useCallback } from 'react';
+export default function useStateWithValidationReset(initialState, validationSetFn, validationResetValue) {
+  const [value, setValue] = useState(initialState);
+  const handleChange = useCallback(newVal => {
+    validationSetFn(validationResetValue);
+    setValue(newVal);
+  }, [validationSetFn, validationResetValue]);
+  return [value, handleChange];
+}

package/dist/ru/parts/profile/ui/password-change-marshal/index.d.ts

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

package/dist/ru/parts/profile/ui/password-change-marshal/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import PasswordChangeForm from '../password-change-form/index.js';
+import PasswordChangeConfirmation from '../password-change-confirmation/index.js';
+var LocalStep;
+(function (LocalStep) {
+  LocalStep["Form"] = "form";
+  LocalStep["SuccessConfirmation"] = "success_confirmation";
+})(LocalStep || (LocalStep = {}));
+export default function PasswordChangeMarshal(props) {
+  const {
+    onCancel
+  } = props;
+  const [localStep, setLocalStep] = useState(LocalStep.Form);
+  const handleSuccess = useCallback(() => setLocalStep(LocalStep.SuccessConfirmation), []);
+  switch (localStep) {
+    case LocalStep.Form:
+      return _jsx(PasswordChangeForm, {
+        onSuccess: handleSuccess,
+        onCancel: onCancel
+      });
+    case LocalStep.SuccessConfirmation:
+      return _jsx(PasswordChangeConfirmation, {
+        onOk: onCancel
+      });
+    default:
+      {
+        const _exhaustiveCheck = localStep;
+        return _exhaustiveCheck;
+      }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peassoft/mnr-web-topline",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Peassoft Topline widget for mem'n'rev web applications",
   "type": "module",
   "exports": {
@@ -38,7 +38,7 @@
     "@types/stampit": "^4.3.4",
     "autoprefixer": "^10.3.4",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "cpy-cli": "^5.0.0",
     "css-loader": "^7.1.2",
     "eslint": "^9.8.0",
@@ -65,7 +65,7 @@
     "@memnrev/web-error": "^0.3.0",
     "email-validator": "^2.0.4",
     "md5": "^2.3.0",
-    "react-error-boundary": "^5.0.0",
+    "react-error-boundary": "^6.0.0",
     "stampit": "^4.3.2",
     "uuid": "^11.1.0"
   },