Merge pull request #262 from ONLYOFFICE/feature/rewrite-recover-access-modal-dialog

feature/rewrite-recover-access-modal-dialog

packages/client/src/pages/PortalUnavailable/index.js

@@ -4,9 +4,10 @@ import { Text } from "@docspace/shared/components/text";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { ReactSVG } from "react-svg";
+
 import { Button } from "@docspace/shared/components/button";
+import RecoverAccessModalDialog from "@docspace/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog";
 import ErrorContainer from "@docspace/shared/components/error-container/ErrorContainer";
-import RecoverAccessModalDialog from "@docspace/common/components/Dialogs/RecoverAccessModalDialog";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 import { mobile } from "@docspace/shared/utils";
 

packages/common/components/Dialogs/RecoverAccessModalDialog/index.jsx

@@ -1 +0,0 @@
-export default from "./recover-access-modal-dialog.tsx";

packages/common/components/index.js

@@ -6,4 +6,3 @@ export { default as Section } from "./Section";
 export { default as FilterInput } from "./FilterInput";
 export { default as Loaders } from "./Loaders";
 export { default as SystemThemeDetector } from "./SystemThemeDetector";
-export { default as RecoverAccessModalDialog } from "./Dialogs/RecoverAccessModalDialog";

packages/login/src/client/components/Login.tsx

@@ -14,12 +14,11 @@ import { PROVIDERS_DATA } from "@docspace/shared/constants";
 import { Link } from "@docspace/shared/components/link";
 import { Toast } from "@docspace/shared/components/toast";
 import LoginForm from "./sub-components/LoginForm";
+import RecoverAccessModalDialog from "@docspace/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog";
 import MoreLoginModal from "@docspace/shared/components/more-login-modal";
-import RecoverAccessModalDialog from "@docspace/common/components/Dialogs/RecoverAccessModalDialog";
 import { FormWrapper } from "@docspace/shared/components/form-wrapper";
 import Register from "./sub-components/register-container";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
-import SSOIcon from "PUBLIC_DIR/images/sso.react.svg";
 import { Dark, Base } from "@docspace/shared/themes";
 import { useMounted } from "../helpers/useMounted";
 import { getBgPattern, frameCallCommand } from "@docspace/shared/utils/common";

packages/shared/components/email-input/EmailInput.types.ts

@@ -1,4 +1,4 @@
-import { InputSize } from "../text-input";
+import { InputSize, InputType } from "../text-input";
 import { EmailSettings } from "../../utils";
 
 export type TValidate = { value: string; isValid: boolean; errors?: string[] };
@@ -40,4 +40,10 @@ export interface EmailInputProps {
   placeholder?: string;
   /** Indicates that the input field has scale */
   scale?: boolean;
+  /** Focus the input field on initial render */
+  isAutoFocussed?: boolean;
+  /** Supported type of the input fields. */
+  type: InputType;
+  /** Used as HTML `tabindex` property */
+  tabIndex?: number;
 }

packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.styled.ts

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+import { mobile, tablet } from "@docspace/shared/utils";
+
+import { ModalDialog } from "@docspace/shared/components/modal-dialog";
+
+export const ModalDialogContainer = styled(ModalDialog)`
+  .modal-dialog-aside-footer {
+    @media ${tablet} {
+      width: 90%;
+    }
+  }
+
+  .recover-button-dialog {
+    @media ${mobile} {
+      width: 100%;
+    }
+  }
+
+  .text-body {
+    margin-bottom: 16px;
+  }
+
+  .textarea {
+    margin-bottom: 0;
+  }
+`;

packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx

@@ -1,45 +1,24 @@
+/* eslint-disable jsx-a11y/tabindex-no-positive */
 import React, { useState } from "react";
-import styled from "styled-components";
-import { Button } from "@docspace/shared/components/button";
-import { EmailInput } from "@docspace/shared/components/email-input";
-import { Text } from "@docspace/shared/components/text";
-import { ModalDialog } from "@docspace/shared/components/modal-dialog";
-import { Textarea } from "@docspace/shared/components/textarea";
-import { FieldContainer } from "@docspace/shared/components/field-container";
-import { mobile, tablet } from "@docspace/shared/utils";
-import { sendRecoverRequest } from "@docspace/shared/api/settings";
-import { toastr } from "@docspace/shared/components/toast";
 import { useTranslation } from "react-i18next";
 
-interface IRecoverAccessModalDialogProps {
+import { Text } from "@docspace/shared/components/text";
-  visible: boolean;
+import { toastr } from "@docspace/shared/components/toast";
-  onClose: () => void;
+import { Button, ButtonSize } from "@docspace/shared/components/button";
-  textBody: string;
+import { Textarea } from "@docspace/shared/components/textarea";
-  emailPlaceholderText: string;
+import { EmailInput } from "@docspace/shared/components/email-input";
-  id?: string;
+import { InputSize, InputType } from "@docspace/shared/components/text-input";
-}
+import {
+  ModalDialog,
+  ModalDialogType,
+} from "@docspace/shared/components/modal-dialog";
+import { FieldContainer } from "@docspace/shared/components/field-container";
+import { TValidate } from "@docspace/shared/components/email-input/EmailInput.types";
 
-const ModalDialogContainer = styled(ModalDialog)`
+import { sendRecoverRequest } from "@docspace/shared/api/settings";
-  .modal-dialog-aside-footer {
-    @media ${tablet} {
-      width: 90%;
-    }
-  }
 
-  .recover-button-dialog {
+import { ModalDialogContainer } from "./RecoverAccessModalDialog.styled";
-    @media ${mobile} {
+import type { IRecoverAccessModalDialogProps } from "./RecoverAccessModalDialog.types";
-      width: 100%;
-    }
-  }
-
-  .text-body {
-    margin-bottom: 16px;
-  }
-
-  .textarea {
-    margin-bottom: 0;
-  }
-`;
 
 const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
   visible,
@@ -67,7 +46,7 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
     setDescription("");
     setDescErr(false);
     setIsShowError(false);
-    onClose && onClose();
+    onClose?.();
   };
 
   const onChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -76,16 +55,18 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
     setIsShowError(false);
   };
 
-  const onValidateEmail = (res) => {
+  const onValidateEmail = (res: TValidate) => {
     setEmailErr(!res.isValid);
-    setEmailErrorMessage(res.errors[0]);
+    setEmailErrorMessage(res.errors?.[0] ?? "");
+
+    return undefined;
   };
 
   const onBlurEmail = () => {
     setIsShowError(true);
   };
 
-  const onChangeDescription = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChangeDescription = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setDescription(e.currentTarget.value);
     setDescErr(false);
   };
@@ -101,11 +82,11 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
 
     setLoading(true);
     sendRecoverRequest(email, description)
-      .then((res: string) => {
+      ?.then((res) => {
         setLoading(false);
-        toastr.success(res);
+        if (typeof res === "string") toastr.success(res);
       })
-      .catch((error) => {
+      ?.catch((error) => {
         setLoading(false);
         toastr.error(error);
       })
@@ -114,13 +95,14 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
 
   return (
     <ModalDialogContainer
+      id={id}
+      isLarge
       visible={visible}
       onClose={onRecoverModalClose}
-      isLarge
+      displayType={ModalDialogType.modal}
-      id={id}
     >
       <ModalDialog.Header>
-        <Text isBold={true} fontSize="21px">
+        <Text isBold fontSize="21px">
           {t("Common:RecoverTitle")}
         </Text>
       </ModalDialog.Header>
@@ -135,8 +117,8 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
           {textBody}
         </Text>
         <FieldContainer
+          isVertical
           key="e-mail"
-          isVertical={true}
           labelVisible={false}
           hasError={isShowError && emailErr}
           errorMessage={
@@ -146,67 +128,67 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
           }
         >
           <EmailInput
+            scale
+            tabIndex={1}
+            name="e-mail"
+            value={email}
+            isAutoFocussed
+            isDisabled={loading}
+            size={InputSize.base}
+            type={InputType.email}
+            autoComplete="username"
+            id="recover-access-modal_email"
             hasError={isShowError && emailErr}
             placeholder={emailPlaceholderText}
-            isAutoFocussed={true}
+            onBlur={onBlurEmail}
-            id="recover-access-modal_email"
-            name="e-mail"
-            type="email"
-            size="base"
-            scale={true}
-            tabIndex={1}
-            isDisabled={loading}
-            value={email}
             onChange={onChangeEmail}
             onValidateInput={onValidateEmail}
-            onBlur={onBlurEmail}
-            autoComplete="username"
           />
         </FieldContainer>
         <FieldContainer
-          className="textarea"
+          isVertical
-          key="text-description"
-          isVertical={true}
           hasError={descErr}
           labelVisible={false}
+          className="textarea"
+          key="text-description"
           errorMessage={t("Common:RequiredField")}
         >
           <Textarea
-            id="recover-access-modal_description"
-            heightScale={false}
-            hasError={descErr}
-            placeholder={t("Common:RecoverDescribeYourProblemPlaceholder")}
             tabIndex={2}
+            hasError={descErr}
+            heightScale={false}
             value={description}
-            onChange={onChangeDescription}
             isDisabled={loading}
             heightTextArea="70px"
+            id="recover-access-modal_description"
+            placeholder={t("Common:RecoverDescribeYourProblemPlaceholder")}
+            onChange={onChangeDescription}
           />
         </FieldContainer>
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <Button
+          primary
+          tabIndex={3}
+          isLoading={loading}
+          isDisabled={loading}
+          key="RecoverySendBtn"
+          size={ButtonSize.normal}
           id="recover-access-modal_send"
           className="recover-button-dialog"
-          key="RecoverySendBtn"
           label={loading ? t("Common:Sending") : t("Common:SendButton")}
-          size="normal"
-          primary={true}
           onClick={onSendRecoverRequest}
-          isLoading={loading}
-          isDisabled={loading}
-          tabIndex={3}
         />
         <Button
-          id="recover-access-modal_cancel"
+          tabIndex={4}
-          className="recover-button-dialog"
-          key="SendBtn-recover-close"
-          label={t("Common:CancelButton")}
-          size="normal"
-          onClick={onRecoverModalClose}
           isLoading={loading}
           isDisabled={loading}
-          tabIndex={4}
+          size={ButtonSize.normal}
+          key="SendBtn-recover-close"
+          id="recover-access-modal_cancel"
+          className="recover-button-dialog"
+          label={t("Common:CancelButton")}
+          onClick={onRecoverModalClose}
         />
       </ModalDialog.Footer>
     </ModalDialogContainer>

packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.types.ts

@@ -0,0 +1,7 @@
+export interface IRecoverAccessModalDialogProps {
+  visible: boolean;
+  onClose: () => void;
+  textBody: string;
+  emailPlaceholderText: string;
+  id?: string;
+}