@peassoft/mnr-web-topline 0.1.0

package/dist/en/parts/shell/ui/logo/logo-short.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @stylistic/max-len */
+export default function LogoShort() {
+  return _jsxs("svg", {
+    width: '180',
+    height: '40',
+    viewBox: '0 0 180 40',
+    className: 'topline_shell_shortLogo',
+    children: [_jsx("path", {
+      d: 'M131.4375,24.234375 L131.4375,27.796875 C131.4375,28.6614627 131.234377,29.3098937 130.828125,29.7421875 C130.421873,30.1744813 129.906253,30.390625 129.28125,30.390625 C128.666664,30.390625 128.16146,30.1718772 127.765625,29.734375 C127.36979,29.2968728 127.171875,28.6510459 127.171875,27.796875 L127.171875,15.921875 C127.171875,14.0051988 127.864576,13.046875 129.25,13.046875 C129.958337,13.046875 130.468748,13.2708311 130.78125,13.71875 C131.093752,14.1666689 131.265625,14.8281206 131.296875,15.703125 C131.807294,14.8281206 132.330726,14.1666689 132.867188,13.71875 C133.403649,13.2708311 134.119787,13.046875 135.015625,13.046875 C135.911463,13.046875 136.781246,13.2708311 137.625,13.71875 C138.468754,14.1666689 138.890625,14.760413 138.890625,15.5 C138.890625,16.0208359 138.710939,16.4505191 138.351562,16.7890625 C137.992186,17.1276059 137.604169,17.296875 137.1875,17.296875 C137.031249,17.296875 136.653649,17.2005218 136.054688,17.0078125 C135.455726,16.8151032 134.927086,16.71875 134.46875,16.71875 C133.843747,16.71875 133.333335,16.8828109 132.9375,17.2109375 C132.541665,17.5390641 132.234376,18.0260384 132.015625,18.671875 C131.796874,19.3177116 131.645834,20.085933 131.5625,20.9765625 C131.479166,21.867192 131.4375,22.9531186 131.4375,24.234375 Z M152.328125,22.765625 L143.984375,22.765625 C143.994792,23.7343798 144.190102,24.588538 144.570312,25.328125 C144.950523,26.067712 145.455726,26.6249981 146.085938,27 C146.716149,27.3750019 147.411455,27.5625 148.171875,27.5625 C148.682294,27.5625 149.148435,27.5026048 149.570312,27.3828125 C149.99219,27.2630202 150.40104,27.0755221 150.796875,26.8203125 C151.19271,26.5651029 151.55729,26.2916681 151.890625,26 C152.22396,25.7083319 152.656247,25.3125025 153.1875,24.8125 C153.406251,24.6249991 153.718748,24.53125 154.125,24.53125 C154.562502,24.53125 154.916665,24.6510405 155.1875,24.890625 C155.458335,25.1302095 155.59375,25.4687478 155.59375,25.90625 C155.59375,26.2916686 155.44271,26.7421849 155.140625,27.2578125 C154.83854,27.7734401 154.382816,28.2682268 153.773438,28.7421875 C153.164059,29.2161482 152.398442,29.6093734 151.476562,29.921875 C150.554683,30.2343766 149.494798,30.390625 148.296875,30.390625 C145.557278,30.390625 143.427091,29.6093828 141.90625,28.046875 C140.385409,26.4843672 139.625,24.3645967 139.625,21.6875 C139.625,20.427077 139.812498,19.2578179 140.1875,18.1796875 C140.562502,17.1015571 141.109371,16.1770872 141.828125,15.40625 C142.546879,14.6354128 143.432286,14.0442729 144.484375,13.6328125 C145.536464,13.2213521 146.703119,13.015625 147.984375,13.015625 C149.65105,13.015625 151.080723,13.367184 152.273438,14.0703125 C153.466152,14.773441 154.359372,15.6822861 154.953125,16.796875 C155.546878,17.9114639 155.84375,19.0468692 155.84375,20.203125 C155.84375,21.276047 155.536461,21.9713526 154.921875,22.2890625 C154.307289,22.6067724 153.442714,22.765625 152.328125,22.765625 Z M143.984375,20.34375 L151.71875,20.34375 C151.614583,18.8854094 151.221358,17.7942745 150.539062,17.0703125 C149.856767,16.3463505 148.958339,15.984375 147.84375,15.984375 C146.781245,15.984375 145.908858,16.3515588 145.226562,17.0859375 C144.544267,17.8203162 144.130209,18.9062428 143.984375,20.34375 Z M161.65625,15.703125 L165.109375,25.390625 L168.828125,15.28125 C169.119793,14.4687459 169.406249,13.8932309 169.6875,13.5546875 C169.968751,13.2161441 170.39583,13.046875 170.96875,13.046875 C171.510419,13.046875 171.971352,13.2291648 172.351562,13.59375 C172.731773,13.9583352 172.921875,14.3802059 172.921875,14.859375 C172.921875,15.0468759 172.888021,15.2656237 172.820312,15.515625 C172.752604,15.7656263 172.67448,15.9999989 172.585938,16.21875 C172.497395,16.4375011 172.395834,16.6874986 172.28125,16.96875 L168.1875,27.125 C168.072916,27.4166681 167.92448,27.7864561 167.742188,28.234375 C167.559895,28.6822939 167.356772,29.0651026 167.132812,29.3828125 C166.908853,29.7005224 166.632814,29.9479158 166.304688,30.125 C165.976561,30.3020842 165.578127,30.390625 165.109375,30.390625 C164.505205,30.390625 164.023439,30.2526055 163.664062,29.9765625 C163.304686,29.7005195 163.039063,29.3984391 162.867188,29.0703125 C162.695312,28.7421859 162.406252,28.0937548 162,27.125 L157.9375,17.078125 C157.84375,16.8281237 157.747396,16.5781263 157.648438,16.328125 C157.549479,16.0781237 157.466146,15.822918 157.398438,15.5625 C157.330729,15.302082 157.296875,15.0781259 157.296875,14.890625 C157.296875,14.5989569 157.385416,14.3098973 157.5625,14.0234375 C157.739584,13.7369777 157.984373,13.5026051 158.296875,13.3203125 C158.609377,13.1380199 158.947915,13.046875 159.3125,13.046875 C160.020837,13.046875 160.507811,13.249998 160.773438,13.65625 C161.039064,14.062502 161.333332,14.7447869 161.65625,15.703125 Z',
+      fill: '#3F72AF'
+    }), _jsx("path", {
+      d: 'M100.078125,15.40625 L100.078125,15.921875 C100.828129,14.9322867 101.648433,14.2057315 102.539062,13.7421875 C103.429692,13.2786435 104.453119,13.046875 105.609375,13.046875 C106.734381,13.046875 107.739579,13.2916642 108.625,13.78125 C109.510421,14.2708358 110.171873,14.9635372 110.609375,15.859375 C110.890626,16.3802109 111.072916,16.9427053 111.15625,17.546875 C111.239584,18.1510447 111.28125,18.9218703 111.28125,19.859375 L111.28125,27.796875 C111.28125,28.6510459 111.085939,29.2968728 110.695312,29.734375 C110.304686,30.1718772 109.796878,30.390625 109.171875,30.390625 C108.536455,30.390625 108.020835,30.1666689 107.625,29.71875 C107.229165,29.2708311 107.03125,28.6302125 107.03125,27.796875 L107.03125,20.6875 C107.03125,19.281243 106.835939,18.2057329 106.445312,17.4609375 C106.054686,16.7161421 105.276048,16.34375 104.109375,16.34375 C103.348955,16.34375 102.656253,16.5703102 102.03125,17.0234375 C101.406247,17.4765648 100.947918,18.0989544 100.65625,18.890625 C100.447916,19.5260448 100.34375,20.713533 100.34375,22.453125 L100.34375,27.796875 C100.34375,28.6614627 100.143231,29.3098937 99.7421875,29.7421875 C99.3411438,30.1744813 98.8229198,30.390625 98.1875,30.390625 C97.5729136,30.390625 97.0677103,30.1666689 96.671875,29.71875 C96.2760397,29.2708311 96.078125,28.6302125 96.078125,27.796875 L96.078125,15.46875 C96.078125,14.6562459 96.2552066,14.0494812 96.609375,13.6484375 C96.9635434,13.2473938 97.4479136,13.046875 98.0625,13.046875 C98.4375019,13.046875 98.7760402,13.1354158 99.078125,13.3125 C99.3802098,13.4895842 99.6223949,13.7552066 99.8046875,14.109375 C99.9869801,14.4635434 100.078125,14.8958308 100.078125,15.40625 Z',
+      fill: '#DBE2EF'
+    }), _jsx("path", {
+      d: 'M88.09375,11.4375 L87.859375,11.4375 C87.2760387,11.4375 86.7473982,11.2005232 86.2734375,10.7265625 C85.7994768,10.2526018 85.5625,9.69271156 85.5625,9.046875 C85.5625,8.380205 85.7994768,7.82291891 86.2734375,7.375 C86.7473982,6.92708109 87.3333298,6.703125 88.03125,6.703125 C88.5104191,6.703125 88.9583313,6.84114445 89.375,7.1171875 C89.7916687,7.39323055 90.1145822,7.7942682 90.34375,8.3203125 C90.5729178,8.8463568 90.6875,9.48957953 90.6875,10.25 C90.6875,11.2812552 90.4687522,12.2473913 90.03125,13.1484375 C89.5937478,14.0494837 89.059899,14.7630182 88.4296875,15.2890625 C87.799476,15.8151068 87.2291692,16.078125 86.71875,16.078125 C86.3958317,16.078125 86.1328135,15.9765635 85.9296875,15.7734375 C85.7265615,15.5703115 85.625,15.3229181 85.625,15.03125 C85.625,14.5624977 85.8385395,14.2187511 86.265625,14 C86.8177111,13.6770817 87.2499984,13.3229186 87.5625,12.9375 C87.8750016,12.5520814 88.0520831,12.0520864 88.09375,11.4375 Z',
+      fill: '#DBE2EF'
+    }), _jsx("path", {
+      d: 'M119.09375,11.4375 L118.859375,11.4375 C118.276039,11.4375 117.747398,11.2005232 117.273438,10.7265625 C116.799477,10.2526018 116.5625,9.69271156 116.5625,9.046875 C116.5625,8.380205 116.799477,7.82291891 117.273438,7.375 C117.747398,6.92708109 118.33333,6.703125 119.03125,6.703125 C119.510419,6.703125 119.958331,6.84114445 120.375,7.1171875 C120.791669,7.39323055 121.114582,7.7942682 121.34375,8.3203125 C121.572918,8.8463568 121.6875,9.48957953 121.6875,10.25 C121.6875,11.2812552 121.468752,12.2473913 121.03125,13.1484375 C120.593748,14.0494837 120.059899,14.7630182 119.429688,15.2890625 C118.799476,15.8151068 118.229169,16.078125 117.71875,16.078125 C117.395832,16.078125 117.132814,15.9765635 116.929688,15.7734375 C116.726561,15.5703115 116.625,15.3229181 116.625,15.03125 C116.625,14.5624977 116.83854,14.2187511 117.265625,14 C117.817711,13.6770817 118.249998,13.3229186 118.5625,12.9375 C118.875002,12.5520814 119.052083,12.0520864 119.09375,11.4375 Z',
+      fill: '#DBE2EF'
+    }), _jsx("path", {
+      d: 'M23.390625,22.03125 L23.390625,27.703125 C23.390625,28.5989628 23.187502,29.2708311 22.78125,29.71875 C22.374998,30.1666689 21.838545,30.390625 21.171875,30.390625 C20.5260384,30.390625 20.0026062,30.1666689 19.6015625,29.71875 C19.2005188,29.2708311 19,28.5989628 19,27.703125 L19,20.90625 C19,19.833328 18.963542,19.000003 18.890625,18.40625 C18.817708,17.812497 18.6197933,17.3255227 18.296875,16.9453125 C17.9739567,16.5651023 17.4635452,16.375 16.765625,16.375 C15.3697847,16.375 14.450523,16.8541619 14.0078125,17.8125 C13.565102,18.7708381 13.34375,20.1458244 13.34375,21.9375 L13.34375,27.703125 C13.34375,28.5885461 13.1432312,29.2578102 12.7421875,29.7109375 C12.3411438,30.1640648 11.8125033,30.390625 11.15625,30.390625 C10.5104134,30.390625 9.98177289,30.1640648 9.5703125,29.7109375 C9.15885211,29.2578102 8.953125,28.5885461 8.953125,27.703125 L8.953125,15.5 C8.953125,14.6979127 9.13801898,14.0885437 9.5078125,13.671875 C9.87760602,13.2552063 10.3645803,13.046875 10.96875,13.046875 C11.5520863,13.046875 12.0390605,13.2421855 12.4296875,13.6328125 C12.8203145,14.0234395 13.015625,14.5624966 13.015625,15.25 L13.015625,15.65625 C13.755212,14.7708289 14.5468708,14.1197937 15.390625,13.703125 C16.2343792,13.2864563 17.1718698,13.078125 18.203125,13.078125 C19.276047,13.078125 20.1979128,13.2916645 20.96875,13.71875 C21.7395872,14.1458355 22.3749975,14.7916623 22.875,15.65625 C23.5937536,14.7812456 24.3645792,14.1328146 25.1875,13.7109375 C26.0104208,13.2890604 26.92187,13.078125 27.921875,13.078125 C29.0885475,13.078125 30.0937458,13.3072894 30.9375,13.765625 C31.7812542,14.2239606 32.4114563,14.8802041 32.828125,15.734375 C33.1927102,16.5052122 33.375,17.7187417 33.375,19.375 L33.375,27.703125 C33.375,28.5989628 33.171877,29.2708311 32.765625,29.71875 C32.359373,30.1666689 31.82292,30.390625 31.15625,30.390625 C30.5104134,30.390625 29.9817729,30.1640648 29.5703125,29.7109375 C29.1588521,29.2578102 28.953125,28.5885461 28.953125,27.703125 L28.953125,20.53125 C28.953125,19.6145787 28.9140629,18.8802111 28.8359375,18.328125 C28.7578121,17.7760389 28.5468767,17.3125019 28.203125,16.9375 C27.8593733,16.5624981 27.3385452,16.375 26.640625,16.375 C26.0781222,16.375 25.5442734,16.541665 25.0390625,16.875 C24.5338516,17.208335 24.1406264,17.6562472 23.859375,18.21875 C23.5468734,18.9375036 23.390625,20.2083242 23.390625,22.03125 Z M49.421875,22.765625 L41.078125,22.765625 C41.0885417,23.7343798 41.2838523,24.588538 41.6640625,25.328125 C42.0442727,26.067712 42.549476,26.6249981 43.1796875,27 C43.809899,27.3750019 44.5052045,27.5625 45.265625,27.5625 C45.7760442,27.5625 46.2421854,27.5026048 46.6640625,27.3828125 C47.0859396,27.2630202 47.4947897,27.0755221 47.890625,26.8203125 C48.2864603,26.5651029 48.65104,26.2916681 48.984375,26 C49.31771,25.7083319 49.7499973,25.3125025 50.28125,24.8125 C50.5000011,24.6249991 50.812498,24.53125 51.21875,24.53125 C51.6562522,24.53125 52.0104153,24.6510405 52.28125,24.890625 C52.5520847,25.1302095 52.6875,25.4687478 52.6875,25.90625 C52.6875,26.2916686 52.5364598,26.7421849 52.234375,27.2578125 C51.9322902,27.7734401 51.4765655,28.2682268 50.8671875,28.7421875 C50.2578095,29.2161482 49.4921921,29.6093734 48.5703125,29.921875 C47.6484329,30.2343766 46.5885477,30.390625 45.390625,30.390625 C42.651028,30.390625 40.5208409,29.6093828 39,28.046875 C37.4791591,26.4843672 36.71875,24.3645967 36.71875,21.6875 C36.71875,20.427077 36.9062481,19.2578179 37.28125,18.1796875 C37.6562519,17.1015571 38.2031214,16.1770872 38.921875,15.40625 C39.6406286,14.6354128 40.5260364,14.0442729 41.578125,13.6328125 C42.6302136,13.2213521 43.7968686,13.015625 45.078125,13.015625 C46.7448,13.015625 48.1744732,13.367184 49.3671875,14.0703125 C50.5599018,14.773441 51.453122,15.6822861 52.046875,16.796875 C52.640628,17.9114639 52.9375,19.0468692 52.9375,20.203125 C52.9375,21.276047 52.6302114,21.9713526 52.015625,22.2890625 C51.4010386,22.6067724 50.5364639,22.765625 49.421875,22.765625 Z M41.078125,20.34375 L48.8125,20.34375 C48.7083328,18.8854094 48.3151076,17.7942745 47.6328125,17.0703125 C46.9505174,16.3463505 46.0520889,15.984375 44.9375,15.984375 C43.8749947,15.984375 43.0026076,16.3515588 42.3203125,17.0859375 C41.6380174,17.8203162 41.2239591,18.9062428 41.078125,20.34375 Z M70.71875,22.03125 L70.71875,27.703125 C70.71875,28.5989628 70.515627,29.2708311 70.109375,29.71875 C69.703123,30.1666689 69.16667,30.390625 68.5,30.390625 C67.8541634,30.390625 67.3307312,30.1666689 66.9296875,29.71875 C66.5286438,29.2708311 66.328125,28.5989628 66.328125,27.703125 L66.328125,20.90625 C66.328125,19.833328 66.291667,19.000003 66.21875,18.40625 C66.145833,17.812497 65.9479183,17.3255227 65.625,16.9453125 C65.3020817,16.5651023 64.7916702,16.375 64.09375,16.375 C62.6979097,16.375 61.778648,16.8541619 61.3359375,17.8125 C60.893227,18.7708381 60.671875,20.1458244 60.671875,21.9375 L60.671875,27.703125 C60.671875,28.5885461 60.4713562,29.2578102 60.0703125,29.7109375 C59.6692688,30.1640648 59.1406283,30.390625 58.484375,30.390625 C57.8385384,30.390625 57.3098979,30.1640648 56.8984375,29.7109375 C56.4869771,29.2578102 56.28125,28.5885461 56.28125,27.703125 L56.28125,15.5 C56.28125,14.6979127 56.466144,14.0885437 56.8359375,13.671875 C57.205731,13.2552063 57.6927053,13.046875 58.296875,13.046875 C58.8802113,13.046875 59.3671855,13.2421855 59.7578125,13.6328125 C60.1484395,14.0234395 60.34375,14.5624966 60.34375,15.25 L60.34375,15.65625 C61.083337,14.7708289 61.8749958,14.1197937 62.71875,13.703125 C63.5625042,13.2864563 64.4999948,13.078125 65.53125,13.078125 C66.604172,13.078125 67.5260378,13.2916645 68.296875,13.71875 C69.0677122,14.1458355 69.7031225,14.7916623 70.203125,15.65625 C70.9218786,14.7812456 71.6927042,14.1328146 72.515625,13.7109375 C73.3385458,13.2890604 74.249995,13.078125 75.25,13.078125 C76.4166725,13.078125 77.4218708,13.3072894 78.265625,13.765625 C79.1093792,14.2239606 79.7395813,14.8802041 80.15625,15.734375 C80.5208352,16.5052122 80.703125,17.7187417 80.703125,19.375 L80.703125,27.703125 C80.703125,28.5989628 80.500002,29.2708311 80.09375,29.71875 C79.687498,30.1666689 79.151045,30.390625 78.484375,30.390625 C77.8385384,30.390625 77.3098979,30.1640648 76.8984375,29.7109375 C76.4869771,29.2578102 76.28125,28.5885461 76.28125,27.703125 L76.28125,20.53125 C76.28125,19.6145787 76.2421879,18.8802111 76.1640625,18.328125 C76.0859371,17.7760389 75.8750017,17.3125019 75.53125,16.9375 C75.1874983,16.5624981 74.6666702,16.375 73.96875,16.375 C73.4062472,16.375 72.8723984,16.541665 72.3671875,16.875 C71.8619766,17.208335 71.4687514,17.6562472 71.1875,18.21875 C70.8749984,18.9375036 70.71875,20.2083242 70.71875,22.03125 Z',
+      fill: '#3F72AF'
+    })]
+  });
+}

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

@@ -0,0 +1,2 @@
+import { type JSX } from 'react';
+export default function Shell(): JSX.Element;

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

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useContext } from 'react';
+import Logo from '../logo/index.js';
+import { ErrorBoundary } from 'react-error-boundary';
+import UserAvatar from '../user-avatar/index.js';
+import UserMenu from '../user-menu/index.js';
+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 ToplineContext from '../../context.js';
+import { globalRefs } from '../../../../modules/focus-marshal/index.js';
+import { initDb, getAllData } from '../../../../modules/local-db/index.js';
+import { logError } from '../../../../modules/logger/index.js';
+import { setGrantToken, setRefreshToken } from '../../../../modules/tokens/index.js';
+import { toplineService, innerToplineService, ToplineEventName, InnerToplineEventName } from '../../../../modules/topline-service/index.js';
+import refreshUser from '../../actions/refresh-user/index.js';
+import { openWebsocket, closeWebsocket } from '../../../../modules/websocket/index.js';
+import { performLogout } from '../../../logout/index.js';
+export default function Shell() {
+  const {
+    handleUserChange,
+    onReady,
+    onError
+  } = useContext(ToplineContext);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [modalWindowActive, setModalWindowOpen] = useState(null);
+  const handleRenderingError = useCallback(e => {
+    logError(e);
+    onError(e);
+  }, [onError]);
+  const handleClickOnUserAvatar = useCallback(isOpen => setIsUserMenuOpen(isOpen), []);
+  const closeUserMenu = useCallback(() => {
+    setIsUserMenuOpen(false);
+    if (globalRefs.modalFirstItem.current) {
+      globalRefs.modalFirstItem.current.focus();
+      return;
+    }
+    globalRefs.userAvatar.current?.focus();
+  }, []);
+  const handleUserMenuItemSelect = useCallback(actionName => {
+    switch (actionName) {
+      case 'login':
+        setModalWindowOpen('login');
+        break;
+      case 'signup':
+        setModalWindowOpen('signup');
+        break;
+      case 'profile':
+        console.log('Opening Profile form...');
+        break;
+      case 'logout':
+        handleUserChange(null);
+        void performLogout();
+        break;
+      default:
+        throw new Error('unknown menu action name');
+    }
+    setIsUserMenuOpen(false);
+  }, [handleUserChange]);
+  const handleModalWindowClose = useCallback(() => {
+    setModalWindowOpen(null);
+    globalRefs.userAvatar.current?.focus();
+  }, []);
+  const handleMoveToPasswordRecovery = useCallback(() => setModalWindowOpen('password_recovery'), []);
+  const handleMoveToSignUp = useCallback(() => setModalWindowOpen('signup'), []);
+  const handleMoveToLogin = useCallback(() => setModalWindowOpen('login'), []);
+  useEffect(() => {
+    async function initData() {
+      innerToplineService.on(ToplineEventName.UserChange, handleUserChange);
+      innerToplineService.on(ToplineEventName.Logout, () => handleUserChange(null));
+      try {
+        await initDb();
+      } catch (e) {
+        if (e instanceof Error) {
+          logError(e);
+        }
+        onReady(toplineService, null);
+        return;
+      }
+      const {
+        user,
+        grantToken,
+        refreshToken
+      } = await getAllData();
+      handleUserChange(user);
+      setGrantToken(grantToken);
+      setRefreshToken(refreshToken);
+      onReady(toplineService, user);
+      if (user) {
+        await refreshUser(user);
+        openWebsocket();
+      }
+    }
+    void initData();
+  }, [handleUserChange, onReady]);
+  useEffect(() => {
+    if (isUserMenuOpen) {
+      globalRefs.userMenuFirstItem.current?.focus();
+    }
+  }, [isUserMenuOpen]);
+  useEffect(() => {
+    function startLoggingIn() {
+      setModalWindowOpen('login');
+    }
+    function startCreatingAccount() {
+      setModalWindowOpen('signup');
+    }
+    innerToplineService.addInnerEventListener(InnerToplineEventName.LogIn, startLoggingIn);
+    innerToplineService.addInnerEventListener(InnerToplineEventName.CreateAccount, startCreatingAccount);
+    return () => {
+      innerToplineService.removeInnerEventListener(InnerToplineEventName.LogIn, startLoggingIn);
+      innerToplineService.removeInnerEventListener(InnerToplineEventName.CreateAccount, startCreatingAccount);
+    };
+  }, []);
+  useEffect(() => {
+    let websocketClosed = false;
+    let timer = null;
+    function handleVisibilityChange() {
+      if (timer) clearTimeout(timer);
+      if (document.visibilityState === 'visible') {
+        if (websocketClosed) {
+          websocketClosed = false;
+          openWebsocket();
+        }
+      } else {
+        timer = setTimeout(() => {
+          websocketClosed = true;
+          closeWebsocket();
+        }, 30000);
+      }
+    }
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+  let ModalWindow = null;
+  switch (modalWindowActive) {
+    case 'login':
+      ModalWindow = _jsx(Login, {
+        onClose: handleModalWindowClose,
+        onMoveToPasswordRecovery: handleMoveToPasswordRecovery,
+        onMoveToSignUp: handleMoveToSignUp
+      });
+      break;
+    case 'signup':
+      ModalWindow = _jsx(Signup, {
+        onClose: handleModalWindowClose,
+        onMoveToPasswordRecovery: handleMoveToPasswordRecovery,
+        onMoveToLogin: handleMoveToLogin
+      });
+      break;
+    case 'password_recovery':
+      ModalWindow = _jsx(PasswordRecovery, {
+        onClose: handleModalWindowClose
+      });
+  }
+  return _jsxs(_Fragment, {
+    children: [_jsxs("div", {
+      className: 'topline_shell_cont',
+      children: [_jsx(Logo, {}), _jsxs(ErrorBoundary, {
+        fallback: null,
+        onError: handleRenderingError,
+        children: [_jsx(UserAvatar, {
+          isUserMenuOpen: isUserMenuOpen,
+          onClick: handleClickOnUserAvatar
+        }), _jsx(Alternative, {
+          condition: () => Boolean(isUserMenuOpen),
+          true: _jsx(UserMenu, {
+            onSelect: handleUserMenuItemSelect,
+            onClose: closeUserMenu
+          }),
+          false: null
+        })]
+      })]
+    }), _jsx(ErrorBoundary, {
+      fallback: null,
+      onError: handleRenderingError,
+      children: _jsx(Alternative, {
+        condition: () => Boolean(ModalWindow),
+        true: ModalWindow,
+        false: null
+      })
+    })]
+  });
+}

package/dist/en/parts/shell/ui/user-avatar/index.d.ts

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

package/dist/en/parts/shell/ui/user-avatar/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useCallback, useState } from 'react';
+import md5 from 'md5';
+import Alternative from '../../../../shared/components/alternative/index.js';
+import ToplineContext from '../../context.js';
+import { globalRefs } from '../../../../modules/focus-marshal/index.js';
+export default function UserAvatar(props) {
+  const {
+    isUserMenuOpen,
+    onClick
+  } = props;
+  const {
+    ssrUser,
+    user
+  } = useContext(ToplineContext);
+  const [hasGravatarLoadingError, setHasGravatarLoadingError] = useState(false);
+  const userId = user?.id || ssrUser?.id;
+  const emailHash = userId ? md5(userId) : null;
+  const handleClick = useCallback(() => onClick(!isUserMenuOpen), [onClick, isUserMenuOpen]);
+  return _jsx("button", {
+    type: 'button',
+    ref: globalRefs.userAvatar,
+    className: 'topline_shell_userAvatar',
+    "aria-label": isUserMenuOpen ? "Close user menu." : "Open user menu.",
+    "aria-haspopup": 'menu',
+    "aria-expanded": isUserMenuOpen ? 'true' : undefined,
+    "aria-controls": 'topline-user-menu',
+    onClick: handleClick,
+    children: _jsx(Alternative, {
+      condition: () => Boolean(emailHash) && hasGravatarLoadingError === false,
+      true: _jsx("img", {
+        src: `https://www.gravatar.com/avatar/${emailHash || ''}?d=mp`,
+        alt: '',
+        role: 'presentation',
+        onError: () => setHasGravatarLoadingError(true)
+      }),
+      false: _jsx("svg", {
+        width: '32',
+        height: '32',
+        viewBox: '0 0 32 32',
+        role: 'presentation',
+        children: _jsx("path", {
+          d: 'M16 18.688c3.563 0 10.688 1.75 10.688 5.313v2.688h-21.375v-2.688c0-3.563\n              7.125-5.313 10.688-5.313zM16 16c-2.938 0-5.313-2.375-5.313-5.313s2.375-5.375\n              5.313-5.375 5.313 2.438 5.313 5.375-2.375 5.313-5.313 5.313z'
+        })
+      })
+    })
+  });
+}

package/dist/en/parts/shell/ui/user-menu/index.d.ts

@@ -0,0 +1,8 @@
+import { type JSX } from 'react';
+import type { ToplineAction } from '../../../../types/app.js';
+type Props = {
+    onSelect: (actionName: ToplineAction) => unknown;
+    onClose: () => unknown;
+};
+export default function UserMenu(props: Props): JSX.Element;
+export {};

package/dist/en/parts/shell/ui/user-menu/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
+import Alternative from '../../../../shared/components/alternative/index.js';
+import LoggedOutUserMenu from '../logged-out-user-menu/index.js';
+import LoggegInUserMenu from '../loggeg-in-user-menu/index.js';
+import ToplineContext from '../../context.js';
+export default function UserMenu(props) {
+  const {
+    onSelect,
+    onClose
+  } = props;
+  const {
+    ssrUser,
+    user
+  } = useContext(ToplineContext);
+  useEffect(() => {
+    setTimeout(() => document.addEventListener('click', onClose, false), 0);
+    return () => document.removeEventListener('click', onClose);
+  }, [onClose]);
+  return _jsx("div", {
+    className: 'topline_shell_userMenu',
+    id: 'topline-user-menu',
+    role: 'menu',
+    "aria-label": "User menu.",
+    children: _jsx(Alternative, {
+      condition: () => Boolean(ssrUser || user),
+      true: _jsx(LoggegInUserMenu, {
+        onSelect: onSelect,
+        onClose: onClose
+      }),
+      false: _jsx(LoggedOutUserMenu, {
+        onSelect: onSelect,
+        onClose: onClose
+      })
+    })
+  });
+}

package/dist/en/parts/shell/ui/user-menu-item/index.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+type Props = {
+    label: string;
+    itemRef: React.RefObject<HTMLDivElement | null>;
+    tabIndex: number;
+    onKeyDown: (e: React.KeyboardEvent) => unknown;
+    onClick: () => unknown;
+};
+export default function UserMenuItem(props: Props): JSX.Element;
+export {};

package/dist/en/parts/shell/ui/user-menu-item/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function UserMenuItem(props) {
+  const {
+    label,
+    itemRef,
+    tabIndex,
+    onKeyDown,
+    onClick
+  } = props;
+  return _jsx("div", {
+    ref: itemRef,
+    className: 'topline_shell_userMenuItem',
+    role: 'menuitem',
+    tabIndex: tabIndex,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    children: label
+  });
+}

package/dist/en/parts/signup/actions/perform-signup/index.d.ts

@@ -0,0 +1,33 @@
+import stampit from 'stampit';
+import { getApiBaseUrl, getRequestCredentialsMode } from '../../../../modules/env/index.js';
+import request from '../../../../modules/request/index.js';
+import processSuccessfulResponse from '../../../../shared/procedures/process-successful-response/index.js';
+import type { ToplineUser } from '../../../../types/data.js';
+export type UserData = {
+    email: string;
+    password: string;
+    userName?: string;
+    uiLang?: string;
+};
+export type ReturnValue = {
+    user: ToplineUser | null;
+    error: 'network' | 'user-exists' | null;
+};
+/**
+ * Perform signing-up
+ *
+ * Returns `null` if sign-up succeeds; otherwise:
+ *   - on network error or if backend responds with 5xx - "network";
+ *   - on 409 Conflict response - "user-exists".
+ */
+declare function performSignup(this: This, userData: UserData): Promise<ReturnValue>;
+export type This = {
+    getApiBaseUrl: typeof getApiBaseUrl;
+    getRequestCredentialsMode: typeof getRequestCredentialsMode;
+    request: typeof request;
+    processSuccessfulResponse: typeof processSuccessfulResponse;
+    performSignup: typeof performSignup;
+};
+export declare const PerformSignup: stampit.Stamp<This>;
+declare const _default: (userData: UserData) => Promise<ReturnValue>;
+export default _default;

package/dist/en/parts/signup/actions/perform-signup/index.js

@@ -0,0 +1,58 @@
+import stampit from 'stampit';
+import { getApiBaseUrl, getRequestCredentialsMode } from '../../../../modules/env/index.js';
+import request from '../../../../modules/request/index.js';
+import processSuccessfulResponse from '../../../../shared/procedures/process-successful-response/index.js';
+/**
+ * Perform signing-up
+ *
+ * Returns `null` if sign-up succeeds; otherwise:
+ *   - on network error or if backend responds with 5xx - "network";
+ *   - on 409 Conflict response - "user-exists".
+ */
+async function performSignup(userData) {
+  const url = `${this.getApiBaseUrl()}/public/signup`;
+  const options = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    body: JSON.stringify(userData),
+    credentials: this.getRequestCredentialsMode(),
+    cache: 'no-store',
+    redirect: 'error'
+  };
+  const response = await this.request(url, options, {
+    expectedStatusCodes: [200, 409],
+    maxRetries: 1
+  });
+  if (!response) {
+    return {
+      user: null,
+      error: 'network'
+    };
+  }
+  if (response.status === 200) {
+    return await this.processSuccessfulResponse(response, url);
+  }
+  if (response.status === 409) {
+    return {
+      user: null,
+      error: 'user-exists'
+    };
+  }
+  // This code is actually unreachable as `request` returns `null` in case of unexpected
+  // status code. The code is added to preserve formal function API.
+  return {
+    user: null,
+    error: 'network'
+  };
+}
+export const PerformSignup = stampit().props({
+  getApiBaseUrl,
+  getRequestCredentialsMode,
+  request,
+  processSuccessfulResponse
+}).methods({
+  performSignup
+});
+export default performSignup.bind(PerformSignup());

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { type JSX } from 'react';
+type Props = {
+    onClose: () => unknown;
+    onMoveToPasswordRecovery: () => unknown;
+    onMoveToLogin: () => unknown;
+};
+export default function Signup(props: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState, useCallback, useEffect, createRef } from 'react';
+import Modal from '../../../../shared/components/modal/index.js';
+import Alternative from '../../../../shared/components/alternative/index.js';
+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 { ToplineContext } from '../../../shell/index.js';
+import { globalRefs } from '../../../../modules/focus-marshal/index.js';
+import validateEmail from '../../../../modules/validators/email.js';
+import validatePassword from '../../../../modules/validators/password.js';
+import performSignup from '../../actions/perform-signup/index.js';
+export default function Signup(props) {
+  const {
+    onClose,
+    onMoveToPasswordRecovery,
+    onMoveToLogin
+  } = props;
+  const lastElementRef = createRef();
+  const [email, setEmail] = useState('');
+  const [isEmailValid, setIsEmailValid] = useState(true);
+  const [userName, setUserName] = useState('');
+  const [password, setPassword] = useState('');
+  const [isPasswordValid, setIsPasswordValid] = useState(true);
+  const [passwordConfirmation, setPasswordConfirmation] = useState('');
+  const [isPasswordConfirmationValid, setIsPasswordConfirmationValid] = useState(true);
+  const [isMakingRequest, setIsMakingRequest] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const {
+    handleUserChange
+  } = useContext(ToplineContext);
+  const handleEmailChange = useCallback(newValue => setEmail(newValue.trim()), []);
+  const handleUserNameChange = useCallback(newValue => setUserName(newValue.trim()), []);
+  const handlePasswordChange = useCallback(newValue => setPassword(newValue.trim()), []);
+  const handlePasswordConfirmationChange = useCallback(newValue => setPasswordConfirmation(newValue.trim()), []);
+  const handleEmailBlur = useCallback(() => setIsEmailValid(validateEmail(email)), [email]);
+  const handlePasswordBlur = useCallback(() => setIsPasswordValid(validatePassword(password)), [password]);
+  const handlePasswordConfirmationBlur = useCallback(() => setIsPasswordConfirmationValid(password === passwordConfirmation), [password, passwordConfirmation]);
+  const handleSignUpBtnClick = useCallback(async () => {
+    let hasFormValidationFailed = false;
+    if (!validateEmail(email)) {
+      setIsEmailValid(false);
+      hasFormValidationFailed = true;
+    }
+    if (!validatePassword(password)) {
+      setIsPasswordValid(false);
+      hasFormValidationFailed = true;
+    }
+    if (password !== passwordConfirmation) {
+      setIsPasswordConfirmationValid(false);
+      hasFormValidationFailed = true;
+    }
+    if (hasFormValidationFailed) return;
+    setIsMakingRequest(true);
+    const userData = {
+      email,
+      password,
+      ...(userName ? {
+        userName
+      } : {}),
+      uiLang: document.documentElement.lang
+    };
+    const {
+      user,
+      error
+    } = await performSignup(userData);
+    if (user && !error) {
+      onClose();
+      handleUserChange(user);
+      return;
+    }
+    setIsMakingRequest(false);
+    switch (error) {
+      case 'network':
+        setErrorMessage("Server is unavailable. Please, try later.");
+        break;
+      case 'user-exists':
+        setErrorMessage("User with such an email is already registered.");
+        break;
+      default:
+        throw new Error('Unknown error of a login request');
+    }
+  }, [email, password, passwordConfirmation, userName, onClose, handleUserChange]);
+  const handleTabOnLastElement = useCallback(() => globalRefs.modalFirstItem.current?.focus(), []);
+  const handleShiftTabOnFirstElement = useCallback(() => lastElementRef.current?.focus(), [lastElementRef]);
+  useEffect(() => globalRefs.modalFirstItem.current?.focus(), []);
+  return _jsxs(Modal, {
+    title: "Create an account",
+    onClose: onClose,
+    children: [_jsxs("form", {
+      children: [_jsx(InputField, {
+        ref: globalRefs.modalFirstItem,
+        type: 'email',
+        autocompleteAttribute: 'username',
+        label: "Email address. Required",
+        errorMessage: isEmailValid ? '' : "Please type in a correct email address",
+        value: email,
+        onChange: handleEmailChange,
+        onBlur: handleEmailBlur,
+        onShiftTab: handleShiftTabOnFirstElement
+      }), _jsx(InputField, {
+        type: 'text',
+        label: "Your name",
+        value: userName,
+        onChange: handleUserNameChange
+      }), _jsx(InputField, {
+        type: 'password',
+        autocompleteAttribute: 'new-password',
+        label: "Password. Required",
+        errorMessage: isPasswordValid ? '' : "Password cannot be empty",
+        value: password,
+        onChange: handlePasswordChange,
+        onBlur: handlePasswordBlur
+      }), _jsx(InputField, {
+        type: 'password',
+        autocompleteAttribute: 'new-password',
+        label: "Type in your password one more time. Required",
+        errorMessage: isPasswordConfirmationValid ? '' : "Passwords do not match",
+        value: passwordConfirmation,
+        onChange: handlePasswordConfirmationChange,
+        onBlur: handlePasswordConfirmationBlur
+      }), _jsx(Alternative, {
+        condition: () => Boolean(errorMessage),
+        true: _jsx(ErrorMessage, {
+          variant: 'standalone',
+          children: errorMessage
+        }),
+        false: null
+      }), _jsxs("div", {
+        className: 'topline_signup_btnsCont',
+        children: [_jsx(Button, {
+          label: "Create account",
+          stretched: true,
+          isInProgress: isMakingRequest,
+          onClick: handleSignUpBtnClick
+        }), _jsx(Button, {
+          label: "Cancel",
+          variant: 'secondary',
+          stretched: true,
+          onClick: onClose
+        })]
+      })]
+    }), _jsx("p", {
+      className: 'topline_signup_extraBlockPrompt',
+      children: "Already have an account?"
+    }), _jsxs("div", {
+      className: 'topline_signup_extraBlockBtnsCont',
+      children: [_jsx(Button, {
+        label: "Log In",
+        variant: 'secondary',
+        size: 'small',
+        onClick: onMoveToLogin
+      }), _jsx(Button, {
+        ref: lastElementRef,
+        label: "Restore your password",
+        variant: 'secondary',
+        size: 'small',
+        onClick: onMoveToPasswordRecovery,
+        onTab: handleTabOnLastElement
+      })]
+    })]
+  });
+}

package/dist/en/shared/components/alternative/index.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    condition: () => boolean;
+    true: React.ReactNode;
+    false: React.ReactNode;
+};
+export default function Alternative(props: Props): React.ReactNode;
+export {};

package/dist/en/shared/components/alternative/index.js

@@ -0,0 +1,3 @@
+export default function Alternative(props) {
+  return props.condition() ? props.true : props.false;
+}