diff --git a/web/ASC.Web.Components/src/components/input-block/index.js b/web/ASC.Web.Components/src/components/input-block/index.js
index 634e3ca9ee..79b9e146a1 100644
--- a/web/ASC.Web.Components/src/components/input-block/index.js
+++ b/web/ASC.Web.Components/src/components/input-block/index.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import TextInput from '../text-input';
-import { Icons } from '../icons';
-import IconButton from '../icon-button';
-import commonInputStyle from '../text-input/common-input-styles';
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import TextInput from "../text-input";
+import { Icons } from "../icons";
+import IconButton from "../icon-button";
+import commonInputStyle from "../text-input/common-input-styles";
 
 const iconNames = Object.keys(Icons);
 
@@ -17,7 +17,7 @@ const StyledIconBlock = styled.div`
   height: 100%;
   padding-right: 8px;
   padding-left: 1px;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 `;
 
 const StyledChildrenBlock = styled.div`
@@ -27,9 +27,14 @@ const StyledChildrenBlock = styled.div`
 `;
 
 // eslint-disable-next-line react/prop-types, no-unused-vars
-const CustomInputGroup = ({ isIconFill, hasError, hasWarning, isDisabled, scale, ...props }) => (
-  <div {...props}></div>
-);
+const CustomInputGroup = ({
+  isIconFill,
+  hasError,
+  hasWarning,
+  isDisabled,
+  scale,
+  ...props
+}) => <div {...props}></div>;
 const StyledInputGroup = styled(CustomInputGroup)`
   display: flex;
 
@@ -50,12 +55,13 @@ class InputBlock extends React.Component {
   constructor(props) {
     super(props);
   }
-  onIconClick = (e) => {
-    if (typeof this.props.onIconClick === "function" && !this.props.isDisabled) this.props.onIconClick(e);
-  }
-  onChange = (e) => {
+  onIconClick = e => {
+    if (typeof this.props.onIconClick === "function" && !this.props.isDisabled)
+      this.props.onIconClick(e);
+  };
+  onChange = e => {
     if (typeof this.props.onChange === "function") this.props.onChange(e);
-  }
+  };
 
   render() {
     let iconButtonSize = 0;
@@ -94,16 +100,16 @@ class InputBlock extends React.Component {
       iconButtonSize = iconSize;
     } else {
       switch (size) {
-        case 'base':
+        case "base":
           iconButtonSize = 15;
           break;
-        case 'middle':
+        case "middle":
           iconButtonSize = 18;
           break;
-        case 'big':
+        case "big":
           iconButtonSize = 21;
           break;
-        case 'huge':
+        case "huge":
           iconButtonSize = 24;
           break;
       }
@@ -120,9 +126,7 @@ class InputBlock extends React.Component {
         style={style}
       >
         <div className="prepend">
-          <StyledChildrenBlock>
-            {children}
-          </StyledChildrenBlock>
+          <StyledChildrenBlock>{children}</StyledChildrenBlock>
         </div>
         <TextInput
           id={id}
@@ -147,42 +151,41 @@ class InputBlock extends React.Component {
           mask={mask}
           keepCharPositions={keepCharPositions}
         />
-        {
-          iconNames.includes(iconName) && (
-            <div className="append">
-              <StyledIconBlock 
+        {iconNames.includes(iconName) && (
+          <div className="append">
+            <StyledIconBlock
+              isDisabled={isDisabled}
+              onClick={this.onIconClick}
+              isClickable={typeof onIconClick === "function"}
+            >
+              <IconButton
+                size={iconButtonSize}
+                color={iconColor}
+                hoverColor={hoverColor}
+                iconName={iconName}
+                isFill={isIconFill}
                 isDisabled={isDisabled}
-                onClick={this.onIconClick}
-                isClickable={typeof onIconClick === 'function'}>
-                <IconButton
-                  size={iconButtonSize}
-                  color={iconColor}
-                  hoverColor={hoverColor}
-                  iconName={iconName}
-                  isFill={isIconFill}
-                  isDisabled={isDisabled}
-                  isClickable={typeof onIconClick === 'function'}
-                />
-              </StyledIconBlock>
-            </div>
-          )}
+                isClickable={typeof onIconClick === "function"}
+              />
+            </StyledIconBlock>
+          </div>
+        )}
       </StyledInputGroup>
     );
   }
 }
 
 InputBlock.propTypes = {
-
   id: PropTypes.string,
   name: PropTypes.string,
-  type: PropTypes.oneOf(['text', 'password']),
+  type: PropTypes.oneOf(["text", "password"]),
   maxLength: PropTypes.number,
   placeholder: PropTypes.string,
   tabIndex: PropTypes.number,
   mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
   keepCharPositions: PropTypes.bool,
 
-  size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
+  size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
   scale: PropTypes.bool,
 
   onChange: PropTypes.func,
@@ -210,26 +213,25 @@ InputBlock.propTypes = {
 
   className: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
-}
+};
 
 InputBlock.defaultProps = {
-
-  type: 'text',
+  type: "text",
   maxLength: 255,
-  size: 'base',
+  size: "base",
   scale: false,
   tabIndex: -1,
   hasError: false,
   hasWarning: false,
-  autoComplete: 'off',
+  autoComplete: "off",
 
-  value: '',
+  value: "",
   iconName: "",
   iconColor: "#ffffff",
   hoverColor: "#ffffff",
   isIconFill: false,
   isDisabled: false,
   keepCharPositions: false
-}
+};
 
-export default InputBlock
\ No newline at end of file
+export default InputBlock;
diff --git a/web/ASC.Web.Components/src/components/password-input/index.js b/web/ASC.Web.Components/src/components/password-input/index.js
index 26c4cbc581..dfa70a011c 100644
--- a/web/ASC.Web.Components/src/components/password-input/index.js
+++ b/web/ASC.Web.Components/src/components/password-input/index.js
@@ -1,22 +1,24 @@
-import React from 'react'
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
 import isEqual from "lodash/isEqual";
 
-import { tablet } from '../../utils/device';
-import InputBlock from '../input-block'
-import { Icons } from '../icons'
-import Link from '../link'
-import Text from '../text'
+import { tablet } from "../../utils/device";
+import InputBlock from "../input-block";
+import { Icons } from "../icons";
+import Link from "../link";
+import Text from "../text";
 import Tooltip from "../tooltip";
 
 // eslint-disable-next-line no-unused-vars
-const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => <div {...props}></div>;
+const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
+  <div {...props}></div>
+);
 
 SimpleInput.propTypes = {
   onValidateInput: PropTypes.func,
   onCopyToClipboard: PropTypes.func
-}
+};
 
 const StyledInput = styled(SimpleInput)`
   display: flex;
@@ -27,7 +29,7 @@ const StyledInput = styled(SimpleInput)`
 
   @media ${tablet} {
     flex-wrap: wrap;
-  } 
+  }
 
   .append {
     padding-right: 8px;
@@ -35,7 +37,7 @@ const StyledInput = styled(SimpleInput)`
 `;
 
 const PasswordProgress = styled.div`
-  ${props => props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
+  ${props => (props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`)}
 
   .input-relative {
     position: relative;
@@ -55,7 +57,7 @@ const PasswordProgress = styled.div`
 
 const NewPasswordButton = styled.div`
   margin: 0 16px;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   svg {
     overflow: hidden;
@@ -80,14 +82,17 @@ const CopyLink = styled.div`
 
 const TooltipStyle = styled.div`
   .__react_component_tooltip {
-    
   }
 `;
 const Progress = styled.div`
-  border: 1.5px solid ${props => (!props.isDisabled && props.progressColor) ? props.progressColor : 'transparent'};
+  border: 1.5px solid
+    ${props =>
+      !props.isDisabled && props.progressColor
+        ? props.progressColor
+        : "transparent"};
   border-radius: 2px;
   margin-top: -1px;
-  width: ${props => props.progressWidth ? props.progressWidth + '%' : '0%'};
+  width: ${props => (props.progressWidth ? props.progressWidth + "%" : "0%")};
 `;
 
 const StyledTooltipContainer = styled(Text)`
@@ -97,11 +102,10 @@ const StyledTooltipContainer = styled(Text)`
 const StyledTooltipItem = styled(Text)`
   margin-left: 8px;
   height: 24px;
-  color: ${props => props.valid ? '#44bb00' : '#B40404'};
+  color: ${props => (props.valid ? "#44bb00" : "#B40404")};
 `;
 
 class PasswordInput extends React.Component {
-
   constructor(props) {
     super(props);
 
@@ -112,7 +116,7 @@ class PasswordInput extends React.Component {
 
     this.state = {
       type: inputType,
-      progressColor: 'transparent',
+      progressColor: "transparent",
       progressWidth: 0,
       inputValue: inputValue,
       copyLabel: clipActionResource,
@@ -122,41 +126,39 @@ class PasswordInput extends React.Component {
       validDigits: false,
       validCapital: false,
       validSpecial: false
-    }
+    };
   }
 
   onBlur = () => {
     this.refTooltip.current.hideTooltip();
-  }
+  };
 
   changeInputType = () => {
-      this.refTooltip.current.hideTooltip();
-      const newType = this.state.type === 'text' ? 'password' : 'text';
+    this.refTooltip.current.hideTooltip();
+    const newType = this.state.type === "text" ? "password" : "text";
 
-      this.setState({
-        type: newType
-      });
-  }
+    this.setState({
+      type: newType
+    });
+  };
 
   testStrength = value => {
     const { generatorSpecial, passwordSettings } = this.props;
-    const specSymbols = new RegExp('[' + generatorSpecial + ']');
+    const specSymbols = new RegExp("[" + generatorSpecial + "]");
 
     let capital;
     let digits;
     let special;
 
     passwordSettings.upperCase
-      ? capital = /[A-Z]/.test(value)
-      : capital = true;
+      ? (capital = /[A-Z]/.test(value))
+      : (capital = true);
 
-    passwordSettings.digits
-      ? digits = /\d/.test(value)
-      : digits = true;
+    passwordSettings.digits ? (digits = /\d/.test(value)) : (digits = true);
 
     passwordSettings.specSymbols
-      ? special = specSymbols.test(value)
-      : special = true;
+      ? (special = specSymbols.test(value))
+      : (special = true);
 
     return {
       digits: digits,
@@ -164,22 +166,24 @@ class PasswordInput extends React.Component {
       special: special,
       length: value.trim().length >= passwordSettings.minLength
     };
-  }
+  };
 
-  checkPassword = (value) => {
-    const greenColor = '#44bb00';
-    const redColor = '#B40404';
+  checkPassword = value => {
+    const greenColor = "#44bb00";
+    const redColor = "#B40404";
     const passwordValidation = this.testStrength(value);
-    const progressScore = passwordValidation.digits
-      && passwordValidation.capital
-      && passwordValidation.special
-      && passwordValidation.length;
-    const progressWidth = value.trim().length * 100 / this.props.passwordSettings.minLength;
+    const progressScore =
+      passwordValidation.digits &&
+      passwordValidation.capital &&
+      passwordValidation.special &&
+      passwordValidation.length;
+    const progressWidth =
+      (value.trim().length * 100) / this.props.passwordSettings.minLength;
     const progressColor = progressScore
       ? greenColor
-      : (value.length === 0)
-        ? 'transparent'
-        : redColor;
+      : value.length === 0
+      ? "transparent"
+      : redColor;
 
     this.props.onValidateInput && this.props.onValidateInput(progressScore);
 
@@ -192,49 +196,47 @@ class PasswordInput extends React.Component {
       validCapital: passwordValidation.capital,
       validSpecial: passwordValidation.special
     });
-  }
+  };
 
-  onChangeAction = (e) => {
+  onChangeAction = e => {
     this.props.onChange && this.props.onChange(e);
 
     if (this.props.simpleView) {
-      this.setState(
-        {
-          inputValue: e.target.value
-        }
-      );
+      this.setState({
+        inputValue: e.target.value
+      });
       return;
     }
 
     this.checkPassword(e.target.value);
-  }
+  };
 
-  onGeneratePassword = (e) => {
-    if (this.props.isDisabled)
-      return e.preventDefault();
+  onGeneratePassword = e => {
+    if (this.props.isDisabled) return e.preventDefault();
 
     const newPassword = this.getNewPassword();
 
-    if (this.state.type !== 'text') {
+    if (this.state.type !== "text") {
       this.setState({
-        type: 'text'
+        type: "text"
       });
     }
 
     this.checkPassword(newPassword);
-    this.props.onChange && this.props.onChange({ target: { value: newPassword } });
-  }
+    this.props.onChange &&
+      this.props.onChange({ target: { value: newPassword } });
+  };
 
   getNewPassword = () => {
     const { passwordSettings, generatorSpecial } = this.props;
 
     const length = passwordSettings.minLength;
-    const string = 'abcdefghijklmnopqrstuvwxyz';
-    const numeric = '0123456789';
+    const string = "abcdefghijklmnopqrstuvwxyz";
+    const numeric = "0123456789";
     const special = generatorSpecial;
 
-    let password = '';
-    let character = '';
+    let password = "";
+    let character = "";
 
     while (password.length < length) {
       const a = Math.ceil(string.length * Math.random() * Math.random());
@@ -244,9 +246,7 @@ class PasswordInput extends React.Component {
       let hold = string.charAt(a);
 
       if (passwordSettings.upperCase) {
-        hold = (password.length % 2 == 0)
-          ? (hold.toUpperCase())
-          : (hold);
+        hold = password.length % 2 == 0 ? hold.toUpperCase() : hold;
       }
 
       character += hold;
@@ -263,33 +263,44 @@ class PasswordInput extends React.Component {
     }
 
     password = password
-      .split('')
+      .split("")
       .sort(() => 0.5 - Math.random())
-      .join('');
+      .join("");
 
     return password.substr(0, length);
-  }
+  };
 
   copyToClipboard = emailInputName => {
-    const { clipEmailResource, clipPasswordResource, clipActionResource, clipCopiedResource, isDisabled, onCopyToClipboard } = this.props;
+    const {
+      clipEmailResource,
+      clipPasswordResource,
+      clipActionResource,
+      clipCopiedResource,
+      isDisabled,
+      onCopyToClipboard
+    } = this.props;
     const { disableCopyAction, inputValue } = this.state;
 
-    if (isDisabled || disableCopyAction)
-      return event.preventDefault();
+    if (isDisabled || disableCopyAction) return event.preventDefault();
 
     this.setState({
       disableCopyAction: true,
       copyLabel: clipCopiedResource
-    })
+    });
 
-    const textField = document.createElement('textarea');
+    const textField = document.createElement("textarea");
     const emailValue = document.getElementsByName(emailInputName)[0].value;
-    const formattedText = clipEmailResource + emailValue + ' | ' + clipPasswordResource + inputValue;
+    const formattedText =
+      clipEmailResource +
+      emailValue +
+      " | " +
+      clipPasswordResource +
+      inputValue;
 
     textField.innerText = formattedText;
     document.body.appendChild(textField);
     textField.select();
-    document.execCommand('copy');
+    document.execCommand("copy");
     textField.remove();
 
     onCopyToClipboard && onCopyToClipboard(formattedText);
@@ -298,9 +309,9 @@ class PasswordInput extends React.Component {
       this.setState({
         disableCopyAction: false,
         copyLabel: clipActionResource
-      })
+      });
     }, 2000);
-  }
+  };
 
   shouldComponentUpdate(nextProps, nextState) {
     return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
@@ -347,86 +358,113 @@ class PasswordInput extends React.Component {
       disableCopyAction
     } = this.state;
 
-    const iconsColor = isDisabled ? '#D0D5DA' : '#A3A9AE';
-    const iconName = type === 'password' ? 'EyeOffIcon' : 'EyeIcon';
+    const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
+    const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
 
     const tooltipContent = (
-      <StyledTooltipContainer forwardedAs='div' title={tooltipPasswordTitle}>
+      <StyledTooltipContainer forwardedAs="div" title={tooltipPasswordTitle}>
         {tooltipPasswordTitle}
-        <StyledTooltipItem forwardedAs='div' title={tooltipPasswordLength} valid={validLength} >
+        <StyledTooltipItem
+          forwardedAs="div"
+          title={tooltipPasswordLength}
+          valid={validLength}
+        >
           {tooltipPasswordLength}
         </StyledTooltipItem>
-        {passwordSettings.digits &&
-          <StyledTooltipItem forwardedAs='div' title={tooltipPasswordDigits} valid={validDigits} >
+        {passwordSettings.digits && (
+          <StyledTooltipItem
+            forwardedAs="div"
+            title={tooltipPasswordDigits}
+            valid={validDigits}
+          >
             {tooltipPasswordDigits}
           </StyledTooltipItem>
-        }
-        {passwordSettings.upperCase &&
-          <StyledTooltipItem forwardedAs='div' title={tooltipPasswordCapital} valid={validCapital} >
+        )}
+        {passwordSettings.upperCase && (
+          <StyledTooltipItem
+            forwardedAs="div"
+            title={tooltipPasswordCapital}
+            valid={validCapital}
+          >
             {tooltipPasswordCapital}
           </StyledTooltipItem>
-        }
-        {passwordSettings.specSymbols &&
-          <StyledTooltipItem forwardedAs='div' title={tooltipPasswordSpecial} valid={validSpecial} >
+        )}
+        {passwordSettings.specSymbols && (
+          <StyledTooltipItem
+            forwardedAs="div"
+            title={tooltipPasswordSpecial}
+            valid={validSpecial}
+          >
             {tooltipPasswordSpecial}
           </StyledTooltipItem>
-        }
+        )}
       </StyledTooltipContainer>
     );
 
-    const inputGroup = <>
-      <InputBlock
-        className="input-relative"
-        id={id}
-        name={inputName}
-        hasError={hasError}
-        isDisabled={isDisabled}
-        iconName={iconName}
-        value={inputValue}
-        onIconClick={this.changeInputType}
-        onChange={this.onChangeAction}
-        scale={scale}
-        size={size}
-        type={type}
-        iconColor={`${iconsColor} !important`}
-        iconSize={16}
-        hoverColor={"#A3A9AE"}
-        isIconFill={true}
-        onBlur={this.onBlur}
-        hasWarning={hasWarning}
-        placeholder={placeholder}
-        tabIndex={tabIndex}
-        maxLength={maxLength}
-        autoComplete={autoComplete}
-      >
-      </InputBlock>
-      <TooltipStyle>
-        <Tooltip
-          id="tooltipContent"
-          effect="solid"
-          place="top"
-          offsetLeft={tooltipOffsetLeft}
-          reference={this.refTooltip}
-        >
-          {tooltipContent}
-        </Tooltip>
-      </TooltipStyle>
-      <Progress progressColor={progressColor} progressWidth={progressWidth} isDisabled={isDisabled} />
-    </>
+    const inputGroup = (
+      <>
+        <InputBlock
+          className="input-relative"
+          id={id}
+          name={inputName}
+          hasError={hasError}
+          isDisabled={isDisabled}
+          iconName={iconName}
+          value={inputValue}
+          onIconClick={this.changeInputType}
+          onChange={this.onChangeAction}
+          scale={scale}
+          size={size}
+          type={type}
+          iconColor={`${iconsColor} !important`}
+          iconSize={16}
+          hoverColor={"#A3A9AE"}
+          isIconFill={true}
+          onBlur={this.onBlur}
+          hasWarning={hasWarning}
+          placeholder={placeholder}
+          tabIndex={tabIndex}
+          maxLength={maxLength}
+          autoComplete={autoComplete}
+        ></InputBlock>
+        <TooltipStyle>
+          <Tooltip
+            id="tooltipContent"
+            effect="solid"
+            place="top"
+            offsetLeft={tooltipOffsetLeft}
+            reference={this.refTooltip}
+          >
+            {tooltipContent}
+          </Tooltip>
+        </TooltipStyle>
+        <Progress
+          progressColor={progressColor}
+          progressWidth={progressWidth}
+          isDisabled={isDisabled}
+        />
+      </>
+    );
 
     return (
-      <StyledInput onValidateInput={onValidateInput} className={className} style={style}>
-        {simpleView
-          ? inputGroup
-          : <><PasswordProgress
-            inputWidth={inputWidth}
-            data-for="tooltipContent"
-            data-tip=""
-            data-event="click"
-            ref={this.ref}
-          >
-            {inputGroup}
-          </PasswordProgress>
+      <StyledInput
+        onValidateInput={onValidateInput}
+        className={className}
+        style={style}
+      >
+        {simpleView ? (
+          inputGroup
+        ) : (
+          <>
+            <PasswordProgress
+              inputWidth={inputWidth}
+              data-for="tooltipContent"
+              data-tip=""
+              data-event="click"
+              ref={this.ref}
+            >
+              {inputGroup}
+            </PasswordProgress>
             <NewPasswordButton>
               <Icons.RefreshIcon
                 size="medium"
@@ -439,7 +477,7 @@ class PasswordInput extends React.Component {
               <Link
                 type="action"
                 isHovered={true}
-                fontSize='13px'
+                fontSize="13px"
                 color={iconsColor}
                 isSemitransparent={disableCopyAction}
                 onClick={this.copyToClipboard.bind(this, emailInputName)}
@@ -448,7 +486,7 @@ class PasswordInput extends React.Component {
               </Link>
             </CopyLink>
           </>
-        }
+        )}
       </StyledInput>
     );
   }
@@ -457,7 +495,7 @@ class PasswordInput extends React.Component {
 PasswordInput.propTypes = {
   id: PropTypes.string,
   autoComplete: PropTypes.string,
-  inputType: PropTypes.oneOf(['text', 'password']),
+  inputType: PropTypes.oneOf(["text", "password"]),
   inputName: PropTypes.string,
   emailInputName: PropTypes.string.isRequired,
   inputValue: PropTypes.string,
@@ -472,7 +510,7 @@ PasswordInput.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
   isDisabled: PropTypes.bool,
-  size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
+  size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
   scale: PropTypes.bool,
 
   clipActionResource: PropTypes.string,
@@ -495,26 +533,26 @@ PasswordInput.propTypes = {
   tooltipOffsetLeft: PropTypes.number,
 
   simpleView: PropTypes.bool
-}
+};
 
 PasswordInput.defaultProps = {
-  inputType: 'password',
-  inputName: 'passwordInput',
-  autoComplete: 'new-password',
+  inputType: "password",
+  inputName: "passwordInput",
+  autoComplete: "new-password",
 
   isDisabled: false,
-  size: 'base',
+  size: "base",
   scale: true,
 
-  clipEmailResource: 'E-mail ',
-  clipPasswordResource: 'Password ',
-  clipCopiedResource: 'Copied',
+  clipEmailResource: "E-mail ",
+  clipPasswordResource: "Password ",
+  clipCopiedResource: "Copied",
 
-  generatorSpecial: '!@#$%^&*',
-  className: '',
+  generatorSpecial: "!@#$%^&*",
+  className: "",
   tooltipOffsetLeft: 110,
 
   simpleView: false
-}
+};
 
 export default PasswordInput;