Merge pull request #262 from ONLYOFFICE/feature/rewrite-recover-access-modal-dialog
feature/rewrite-recover-access-modal-dialog
This commit is contained in:
commit
846340d08d
@ -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";
|
||||
|
||||
|
@ -1 +0,0 @@
|
||||
export default from "./recover-access-modal-dialog.tsx";
|
@ -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";
|
||||
|
@ -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";
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
@ -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<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
|
||||
id={id}
|
||||
displayType={ModalDialogType.modal}
|
||||
>
|
||||
<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}
|
||||
id="recover-access-modal_email"
|
||||
name="e-mail"
|
||||
type="email"
|
||||
size="base"
|
||||
scale={true}
|
||||
tabIndex={1}
|
||||
isDisabled={loading}
|
||||
value={email}
|
||||
onBlur={onBlurEmail}
|
||||
onChange={onChangeEmail}
|
||||
onValidateInput={onValidateEmail}
|
||||
onBlur={onBlurEmail}
|
||||
autoComplete="username"
|
||||
/>
|
||||
</FieldContainer>
|
||||
<FieldContainer
|
||||
className="textarea"
|
||||
key="text-description"
|
||||
isVertical={true}
|
||||
isVertical
|
||||
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"
|
||||
className="recover-button-dialog"
|
||||
key="SendBtn-recover-close"
|
||||
label={t("Common:CancelButton")}
|
||||
size="normal"
|
||||
onClick={onRecoverModalClose}
|
||||
tabIndex={4}
|
||||
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>
|
@ -0,0 +1,7 @@
|
||||
export interface IRecoverAccessModalDialogProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
textBody: string;
|
||||
emailPlaceholderText: string;
|
||||
id?: string;
|
||||
}
|
Loading…
Reference in New Issue
Block a user