From faf3990959e9d9f538ec9b4787bc130648f9bd21 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Wed, 14 Feb 2024 00:39:02 +0500 Subject: [PATCH 1/4] Shared:Components:RecoverAccessModalDialog Rewrite and moved to shared --- .../src/pages/PortalUnavailable/index.js | 2 +- .../RecoverAccessModalDialog/index.jsx | 1 - packages/common/components/index.js | 1 - .../login/src/client/components/Login.tsx | 7 +- .../email-input/EmailInput.types.ts | 8 +- .../RecoverAccessModalDialog.styled.ts | 27 ++++ .../RecoverAccessModalDialog.tsx} | 142 ++++++++---------- .../RecoverAccessModalDialog.types.ts | 7 + 8 files changed, 107 insertions(+), 88 deletions(-) delete mode 100644 packages/common/components/Dialogs/RecoverAccessModalDialog/index.jsx create mode 100644 packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.styled.ts rename packages/{common/components/Dialogs/RecoverAccessModalDialog/recover-access-modal-dialog.tsx => shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx} (78%) create mode 100644 packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.types.ts diff --git a/packages/client/src/pages/PortalUnavailable/index.js b/packages/client/src/pages/PortalUnavailable/index.js index d3078cac45..1816b361ca 100644 --- a/packages/client/src/pages/PortalUnavailable/index.js +++ b/packages/client/src/pages/PortalUnavailable/index.js @@ -6,7 +6,7 @@ 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/common/components/Dialogs/RecoverAccessModalDialog"; +import RecoverAccessModalDialog from "@docspace/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog"; import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme"; import { mobile } from "@docspace/shared/utils"; diff --git a/packages/common/components/Dialogs/RecoverAccessModalDialog/index.jsx b/packages/common/components/Dialogs/RecoverAccessModalDialog/index.jsx deleted file mode 100644 index 3826b1a753..0000000000 --- a/packages/common/components/Dialogs/RecoverAccessModalDialog/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export default from "./recover-access-modal-dialog.tsx"; diff --git a/packages/common/components/index.js b/packages/common/components/index.js index 7125874105..eff8eda052 100644 --- a/packages/common/components/index.js +++ b/packages/common/components/index.js @@ -9,4 +9,3 @@ export { default as ErrorBoundary } from "./ErrorBoundary"; 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"; diff --git a/packages/login/src/client/components/Login.tsx b/packages/login/src/client/components/Login.tsx index fbc0ea8eaf..dd2f0af04c 100644 --- a/packages/login/src/client/components/Login.tsx +++ b/packages/login/src/client/components/Login.tsx @@ -15,11 +15,10 @@ import { Link } from "@docspace/shared/components/link"; import { Toast } from "@docspace/shared/components/toast"; import LoginForm from "./sub-components/LoginForm"; import MoreLoginModal from "@docspace/common/components/MoreLoginModal"; -import RecoverAccessModalDialog from "@docspace/common/components/Dialogs/RecoverAccessModalDialog"; +import RecoverAccessModalDialog from "@docspace/shared/components/recover-access-modal-dialog/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"; @@ -216,8 +215,8 @@ const Login: React.FC = ({ const logoUrl = !logo ? undefined : !theme?.isBase - ? getLogoFromPath(logo.path.dark) - : getLogoFromPath(logo.path.light); + ? getLogoFromPath(logo.path.dark) + : getLogoFromPath(logo.path.light); if (!mounted) return <>; if (isRestoringPortal) return <>; diff --git a/packages/shared/components/email-input/EmailInput.types.ts b/packages/shared/components/email-input/EmailInput.types.ts index 6737345f95..c402214191 100644 --- a/packages/shared/components/email-input/EmailInput.types.ts +++ b/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; } diff --git a/packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.styled.ts b/packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.styled.ts new file mode 100644 index 0000000000..b7c5f2ec77 --- /dev/null +++ b/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; + } +`; diff --git a/packages/common/components/Dialogs/RecoverAccessModalDialog/recover-access-modal-dialog.tsx b/packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx similarity index 78% rename from packages/common/components/Dialogs/RecoverAccessModalDialog/recover-access-modal-dialog.tsx rename to packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx index 4a8d221e23..9093aa9663 100644 --- a/packages/common/components/Dialogs/RecoverAccessModalDialog/recover-access-modal-dialog.tsx +++ b/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 { - visible: boolean; - onClose: () => void; - textBody: string; - emailPlaceholderText: string; - id?: string; -} +import { Text } from "@docspace/shared/components/text"; +import { toastr } from "@docspace/shared/components/toast"; +import { Button, ButtonSize } from "@docspace/shared/components/button"; +import { Textarea } from "@docspace/shared/components/textarea"; +import { EmailInput } from "@docspace/shared/components/email-input"; +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)` - .modal-dialog-aside-footer { - @media ${tablet} { - width: 90%; - } - } +import { sendRecoverRequest } from "@docspace/shared/api/settings"; - .recover-button-dialog { - @media ${mobile} { - width: 100%; - } - } - - .text-body { - margin-bottom: 16px; - } - - .textarea { - margin-bottom: 0; - } -`; +import { ModalDialogContainer } from "./RecoverAccessModalDialog.styled"; +import type { IRecoverAccessModalDialogProps } from "./RecoverAccessModalDialog.types"; const RecoverAccessModalDialog: React.FC = ({ visible, @@ -67,7 +46,7 @@ const RecoverAccessModalDialog: React.FC = ({ setDescription(""); setDescErr(false); setIsShowError(false); - onClose && onClose(); + onClose?.(); }; const onChangeEmail = (e: React.ChangeEvent) => { @@ -76,16 +55,18 @@ const RecoverAccessModalDialog: React.FC = ({ 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) => { + const onChangeDescription = (e: React.ChangeEvent) => { setDescription(e.currentTarget.value); setDescErr(false); }; @@ -101,11 +82,11 @@ const RecoverAccessModalDialog: React.FC = ({ 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 = ({ return ( - + {t("Common:RecoverTitle")} @@ -135,8 +117,8 @@ const RecoverAccessModalDialog: React.FC = ({ {textBody} = ({ } >