diff --git a/packages/client/src/pages/PortalUnavailable/index.js b/packages/client/src/pages/PortalUnavailable/index.js index 233431d9e5..b3c0bc0f26 100644 --- a/packages/client/src/pages/PortalUnavailable/index.js +++ b/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"; 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 6a00040268..148903fe79 100644 --- a/packages/common/components/index.js +++ b/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"; diff --git a/packages/login/src/client/components/Login.tsx b/packages/login/src/client/components/Login.tsx index 073c0bea0d..5df0bfe647 100644 --- a/packages/login/src/client/components/Login.tsx +++ b/packages/login/src/client/components/Login.tsx @@ -14,8 +14,8 @@ 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"; diff --git a/packages/shared/components/article/index.tsx b/packages/shared/components/article/index.tsx index e2aa4bb9aa..c74f8a37a8 100644 --- a/packages/shared/components/article/index.tsx +++ b/packages/shared/components/article/index.tsx @@ -32,6 +32,8 @@ ArticleMainButton.displayName = MAIN_BUTTON_NAME; const ArticleBody = ({ children }: { children: React.ReactNode }) => null; ArticleBody.displayName = BODY_NAME; +console.log(SubArticleBody); + const Article = ({ showText, setShowText, @@ -239,6 +241,8 @@ const Article = ({ !window.location.pathname.includes("management") && isAdmin; + console.log(withDevTools, hideAppsBlock, isLiveChatAvailable); + const articleComponent = ( <> {articleBodyContent ? articleBodyContent.props.children : null} - {!showArticleLoader && ( + {/* {!showArticleLoader && ( <> {!hideAlerts && ( )} - {!isMobile && isLiveChatAvailable && ( + {!isMobile && !isLiveChatAvailable && ( )} - )} + )} */} {!showArticleLoader && ( { return ( $currentColorScheme && css` - .version-mark-icon { - path { - fill: ${!$isVersion - ? theme.filesVersionHistory.badge.defaultFill - : theme.filesVersionHistory.badge.fill}; - - stroke: ${!$isVersion - ? theme.filesVersionHistory.badge.stroke - : theme.filesVersionHistory.badge.fill}; - } - } - .version_badge-text { color: ${$isVersion && $currentColorScheme.text?.accent}; } 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} = ({ } >