Merge pull request #625 from ente-io/message-dialog-redesign-v4
Message dialog redesign v4
This commit is contained in:
commit
857813db21
|
@ -1,9 +1,10 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import DialogBox from 'components/DialogBox';
|
|
||||||
import SingleInputForm, {
|
import SingleInputForm, {
|
||||||
SingleInputFormProps,
|
SingleInputFormProps,
|
||||||
} from 'components/SingleInputForm';
|
} from 'components/SingleInputForm';
|
||||||
|
import DialogBoxBase from 'components/DialogBox/base';
|
||||||
|
import { DialogContent, DialogTitle } from '@mui/material';
|
||||||
|
|
||||||
export interface CollectionNamerAttributes {
|
export interface CollectionNamerAttributes {
|
||||||
callback: (name: string) => void;
|
callback: (name: string) => void;
|
||||||
|
@ -39,19 +40,19 @@ export default function CollectionNamer({ attributes, ...props }: Props) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DialogBox
|
<DialogBoxBase open={props.show} onClose={props.onHide}>
|
||||||
open={props.show}
|
<DialogTitle>{attributes.title}</DialogTitle>
|
||||||
attributes={{ title: attributes.title }}
|
<DialogContent>
|
||||||
onClose={props.onHide}
|
<SingleInputForm
|
||||||
titleCloseButton
|
callback={onSubmit}
|
||||||
maxWidth="xs">
|
fieldType="text"
|
||||||
<SingleInputForm
|
buttonText={attributes.buttonText}
|
||||||
callback={onSubmit}
|
placeholder={constants.ENTER_ALBUM_NAME}
|
||||||
fieldType="text"
|
initialValue={attributes.autoFilledName}
|
||||||
buttonText={attributes.buttonText}
|
submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
|
||||||
placeholder={constants.ENTER_ALBUM_NAME}
|
secondaryButtonAction={props.onHide}
|
||||||
initialValue={attributes.autoFilledName}
|
/>
|
||||||
/>
|
</DialogContent>
|
||||||
</DialogBox>
|
</DialogBoxBase>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -113,7 +113,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
|
||||||
close: { variant: 'danger' },
|
close: { variant: 'danger' },
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
syncWithRemote();
|
syncWithRemote(false, true);
|
||||||
loader && finishLoading();
|
loader && finishLoading();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -8,7 +8,6 @@ import { handleSharingErrors } from 'utils/error';
|
||||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import { CollectionShareSharees } from './sharees';
|
import { CollectionShareSharees } from './sharees';
|
||||||
import CollectionShareSubmitButton from './submitButton';
|
|
||||||
export default function EmailShare({ collection }) {
|
export default function EmailShare({ collection }) {
|
||||||
const galleryContext = useContext(GalleryContext);
|
const galleryContext = useContext(GalleryContext);
|
||||||
|
|
||||||
|
@ -38,7 +37,10 @@ export default function EmailShare({ collection }) {
|
||||||
placeholder={constants.ENTER_EMAIL}
|
placeholder={constants.ENTER_EMAIL}
|
||||||
fieldType="email"
|
fieldType="email"
|
||||||
buttonText={constants.SHARE}
|
buttonText={constants.SHARE}
|
||||||
customSubmitButton={CollectionShareSubmitButton}
|
submitButtonProps={{
|
||||||
|
size: 'medium',
|
||||||
|
sx: { mt: 1, mb: 2 },
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<CollectionShareSharees collection={collection} />
|
<CollectionShareSharees collection={collection} />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -1,8 +1,19 @@
|
||||||
import DialogBox from 'components/DialogBox';
|
import { DialogContent, DialogTitle, styled } from '@mui/material';
|
||||||
|
import DialogBoxBase from 'components/DialogBox/base';
|
||||||
import SingleInputForm from 'components/SingleInputForm';
|
import SingleInputForm from 'components/SingleInputForm';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import CryptoWorker from 'utils/crypto';
|
import CryptoWorker from 'utils/crypto';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
|
|
||||||
|
const SetPublicLinkSetPasswordDialog = styled(DialogBoxBase)(({ theme }) => ({
|
||||||
|
'& .MuiDialog-container': {
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
'& .MuiDialog-paper': {
|
||||||
|
marginRight: theme.spacing(9),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export function PublicLinkSetPassword({
|
export function PublicLinkSetPassword({
|
||||||
open,
|
open,
|
||||||
onClose,
|
onClose,
|
||||||
|
@ -35,20 +46,18 @@ export function PublicLinkSetPassword({
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<DialogBox
|
<SetPublicLinkSetPasswordDialog open={open} onClose={onClose}>
|
||||||
open={open}
|
<DialogTitle>{constants.PASSWORD_LOCK}</DialogTitle>
|
||||||
onClose={onClose}
|
<DialogContent>
|
||||||
PaperProps={{ sx: { maxWidth: '350px' } }}
|
<SingleInputForm
|
||||||
titleCloseButton
|
callback={savePassword}
|
||||||
attributes={{
|
placeholder={constants.RETURN_PASSPHRASE_HINT}
|
||||||
title: constants.PASSWORD_LOCK,
|
buttonText={constants.LOCK}
|
||||||
}}>
|
fieldType="password"
|
||||||
<SingleInputForm
|
secondaryButtonAction={onClose}
|
||||||
callback={savePassword}
|
submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
|
||||||
placeholder={constants.RETURN_PASSPHRASE_HINT}
|
/>
|
||||||
buttonText={constants.LOCK}
|
</DialogContent>
|
||||||
fieldType="password"
|
</SetPublicLinkSetPasswordDialog>
|
||||||
/>
|
|
||||||
</DialogBox>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +0,0 @@
|
||||||
import { FlexWrapper } from 'components/Container';
|
|
||||||
import SubmitButton, { SubmitButtonProps } from 'components/SubmitButton';
|
|
||||||
import React from 'react';
|
|
||||||
export default function CollectionShareSubmitButton(props: SubmitButtonProps) {
|
|
||||||
return (
|
|
||||||
<FlexWrapper style={{ justifyContent: 'flex-end' }}>
|
|
||||||
<SubmitButton {...props} size="medium" inline sx={{ my: 2 }} />
|
|
||||||
</FlexWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -6,6 +6,7 @@ import SubmitButton from './SubmitButton';
|
||||||
import TextField from '@mui/material/TextField';
|
import TextField from '@mui/material/TextField';
|
||||||
import ShowHidePassword from './Form/ShowHidePassword';
|
import ShowHidePassword from './Form/ShowHidePassword';
|
||||||
import { FlexWrapper } from './Container';
|
import { FlexWrapper } from './Container';
|
||||||
|
import { Button } from '@mui/material';
|
||||||
|
|
||||||
interface formValues {
|
interface formValues {
|
||||||
inputValue: string;
|
inputValue: string;
|
||||||
|
@ -18,11 +19,15 @@ export interface SingleInputFormProps {
|
||||||
fieldType: 'text' | 'email' | 'password';
|
fieldType: 'text' | 'email' | 'password';
|
||||||
placeholder: string;
|
placeholder: string;
|
||||||
buttonText: string;
|
buttonText: string;
|
||||||
customSubmitButton?: any;
|
submitButtonProps?: any;
|
||||||
initialValue?: string;
|
initialValue?: string;
|
||||||
|
secondaryButtonAction?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function SingleInputForm(props: SingleInputFormProps) {
|
export default function SingleInputForm(props: SingleInputFormProps) {
|
||||||
|
const { submitButtonProps } = props;
|
||||||
|
const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};
|
||||||
|
|
||||||
const [loading, SetLoading] = useState(false);
|
const [loading, SetLoading] = useState(false);
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
|
||||||
|
@ -100,19 +105,24 @@ export default function SingleInputForm(props: SingleInputFormProps) {
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<FlexWrapper></FlexWrapper>
|
<FlexWrapper justifyContent={'flex-end'}>
|
||||||
{props.customSubmitButton ? (
|
{props.secondaryButtonAction && (
|
||||||
<props.customSubmitButton
|
<Button
|
||||||
buttonText={props.buttonText}
|
onClick={props.secondaryButtonAction}
|
||||||
loading={loading}
|
size="large"
|
||||||
/>
|
color="secondary"
|
||||||
) : (
|
sx={{ mt: 2, mb: 4, mr: 1, ...buttonSx }}
|
||||||
|
{...restSubmitButtonProps}>
|
||||||
|
{constants.CANCEL}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<SubmitButton
|
<SubmitButton
|
||||||
sx={{ mt: 2 }}
|
sx={{ mt: 2, ...buttonSx }}
|
||||||
buttonText={props.buttonText}
|
buttonText={props.buttonText}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
{...restSubmitButtonProps}
|
||||||
/>
|
/>
|
||||||
)}
|
</FlexWrapper>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
|
|
|
@ -4,13 +4,12 @@ import React, { FC } from 'react';
|
||||||
export interface SubmitButtonProps {
|
export interface SubmitButtonProps {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
buttonText: string;
|
buttonText: string;
|
||||||
inline?: any;
|
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
|
const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
|
||||||
loading,
|
loading,
|
||||||
buttonText,
|
buttonText,
|
||||||
inline,
|
|
||||||
disabled,
|
disabled,
|
||||||
sx,
|
sx,
|
||||||
...props
|
...props
|
||||||
|
@ -21,7 +20,6 @@ const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="accent"
|
color="accent"
|
||||||
type="submit"
|
type="submit"
|
||||||
fullWidth={!inline}
|
|
||||||
disabled={loading || disabled}
|
disabled={loading || disabled}
|
||||||
sx={{ my: 4, ...sx }}
|
sx={{ my: 4, ...sx }}
|
||||||
{...props}>
|
{...props}>
|
||||||
|
|
|
@ -71,12 +71,11 @@ export default function TwoFactorModalManageSection(props: Iprops) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Grid
|
<Grid
|
||||||
mb={2}
|
mb={1.5}
|
||||||
container
|
|
||||||
rowSpacing={1}
|
rowSpacing={1}
|
||||||
|
container
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center">
|
||||||
textAlign={'center'}>
|
|
||||||
<Grid item sm={9} xs={12}>
|
<Grid item sm={9} xs={12}>
|
||||||
{constants.UPDATE_TWO_FACTOR_LABEL}
|
{constants.UPDATE_TWO_FACTOR_LABEL}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
@ -84,17 +83,16 @@ export default function TwoFactorModalManageSection(props: Iprops) {
|
||||||
<Button
|
<Button
|
||||||
color={'accent'}
|
color={'accent'}
|
||||||
onClick={warnTwoFactorReconfigure}
|
onClick={warnTwoFactorReconfigure}
|
||||||
style={{ width: '100%' }}>
|
size="large">
|
||||||
{constants.RECONFIGURE}
|
{constants.RECONFIGURE}
|
||||||
</Button>
|
</Button>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid
|
<Grid
|
||||||
container
|
|
||||||
rowSpacing={1}
|
rowSpacing={1}
|
||||||
|
container
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center">
|
||||||
textAlign={'center'}>
|
|
||||||
<Grid item sm={9} xs={12}>
|
<Grid item sm={9} xs={12}>
|
||||||
{constants.DISABLE_TWO_FACTOR_LABEL}{' '}
|
{constants.DISABLE_TWO_FACTOR_LABEL}{' '}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
@ -103,7 +101,7 @@ export default function TwoFactorModalManageSection(props: Iprops) {
|
||||||
<Button
|
<Button
|
||||||
color={'danger'}
|
color={'danger'}
|
||||||
onClick={warnTwoFactorDisable}
|
onClick={warnTwoFactorDisable}
|
||||||
style={{ width: '100%' }}>
|
size="large">
|
||||||
{constants.DISABLE}
|
{constants.DISABLE}
|
||||||
</Button>
|
</Button>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
@ -3,10 +3,16 @@ import { getTwoFactorStatus } from 'services/userService';
|
||||||
import { SetLoading } from 'types/gallery';
|
import { SetLoading } from 'types/gallery';
|
||||||
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import DialogBox from '../../DialogBox';
|
|
||||||
import TwoFactorModalSetupSection from './Setup';
|
import TwoFactorModalSetupSection from './Setup';
|
||||||
import TwoFactorModalManageSection from './Manage';
|
import TwoFactorModalManageSection from './Manage';
|
||||||
|
import { Dialog, DialogContent, styled } from '@mui/material';
|
||||||
|
import DialogTitleWithCloseButton from 'components/DialogBox/TitleWithCloseButton';
|
||||||
|
|
||||||
|
const TwoFactorDialog = styled(Dialog)(({ theme }) => ({
|
||||||
|
'& .MuiDialogContent-root': {
|
||||||
|
padding: theme.spacing(2, 4),
|
||||||
|
},
|
||||||
|
}));
|
||||||
interface Props {
|
interface Props {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
onHide: () => void;
|
onHide: () => void;
|
||||||
|
@ -18,18 +24,21 @@ function TwoFactorModal(props: Props) {
|
||||||
const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
|
const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!props.show) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const isTwoFactorEnabled =
|
const isTwoFactorEnabled =
|
||||||
getData(LS_KEYS.USER).isTwoFactorEnabled ?? false;
|
getData(LS_KEYS.USER).isTwoFactorEnabled ?? false;
|
||||||
setTwoFactorStatus(isTwoFactorEnabled);
|
setTwoFactorStatus(isTwoFactorEnabled);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!props.show) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const main = async () => {
|
const main = async () => {
|
||||||
const isTwoFactorEnabled = await getTwoFactorStatus();
|
const isTwoFactorEnabled = await getTwoFactorStatus();
|
||||||
setTwoFactorStatus(isTwoFactorEnabled);
|
setTwoFactorStatus(isTwoFactorEnabled);
|
||||||
setData(LS_KEYS.USER, {
|
setData(LS_KEYS.USER, {
|
||||||
...getData(LS_KEYS.USER),
|
...getData(LS_KEYS.USER),
|
||||||
isTwoFactorEnabled: false,
|
isTwoFactorEnabled,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
main();
|
main();
|
||||||
|
@ -41,22 +50,18 @@ function TwoFactorModal(props: Props) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DialogBox
|
<TwoFactorDialog maxWidth="xs" open={props.show} onClose={props.onHide}>
|
||||||
size="xs"
|
<DialogTitleWithCloseButton onClose={props.onHide}>
|
||||||
fullWidth
|
{constants.TWO_FACTOR_AUTHENTICATION}
|
||||||
open={props.show}
|
</DialogTitleWithCloseButton>
|
||||||
onClose={props.onHide}
|
<DialogContent sx={{ px: 4 }}>
|
||||||
attributes={{
|
|
||||||
title: constants.TWO_FACTOR_AUTHENTICATION,
|
|
||||||
}}>
|
|
||||||
<>
|
|
||||||
{isTwoFactorEnabled ? (
|
{isTwoFactorEnabled ? (
|
||||||
<TwoFactorModalManageSection close={close} />
|
<TwoFactorModalManageSection close={close} />
|
||||||
) : (
|
) : (
|
||||||
<TwoFactorModalSetupSection close={close} />
|
<TwoFactorModalSetupSection close={close} />
|
||||||
)}
|
)}
|
||||||
</>
|
</DialogContent>
|
||||||
</DialogBox>
|
</TwoFactorDialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
export default TwoFactorModal;
|
export default TwoFactorModal;
|
||||||
|
|
|
@ -50,38 +50,43 @@ export default function VerifyTwoFactor(props: Props) {
|
||||||
validateOnBlur={false}
|
validateOnBlur={false}
|
||||||
onSubmit={submitForm}>
|
onSubmit={submitForm}>
|
||||||
{({ values, errors, handleChange, handleSubmit, submitForm }) => (
|
{({ values, errors, handleChange, handleSubmit, submitForm }) => (
|
||||||
<form
|
<VerticallyCentered>
|
||||||
noValidate
|
<form noValidate onSubmit={handleSubmit}>
|
||||||
onSubmit={handleSubmit}
|
<Typography
|
||||||
style={{ width: '100%' }}>
|
mb={2}
|
||||||
<Typography mb={2} variant="body2" color="text.secondary">
|
variant="body2"
|
||||||
{constants.ENTER_TWO_FACTOR_OTP}
|
color="text.secondary">
|
||||||
</Typography>
|
{constants.ENTER_TWO_FACTOR_OTP}
|
||||||
<Box my={2}>
|
</Typography>
|
||||||
<OtpInput
|
<Box my={2}>
|
||||||
ref={otpInputRef}
|
<OtpInput
|
||||||
shouldAutoFocus
|
ref={otpInputRef}
|
||||||
value={values.otp}
|
shouldAutoFocus
|
||||||
onChange={onChange(handleChange('otp'), submitForm)}
|
value={values.otp}
|
||||||
numInputs={6}
|
onChange={onChange(
|
||||||
separator={'-'}
|
handleChange('otp'),
|
||||||
isInputNum
|
submitForm
|
||||||
className={'otp-input'}
|
)}
|
||||||
|
numInputs={6}
|
||||||
|
separator={'-'}
|
||||||
|
isInputNum
|
||||||
|
className={'otp-input'}
|
||||||
|
/>
|
||||||
|
{errors.otp && (
|
||||||
|
<CenteredFlex sx={{ mt: 1 }}>
|
||||||
|
<InvalidInputMessage>
|
||||||
|
{constants.INCORRECT_CODE}
|
||||||
|
</InvalidInputMessage>
|
||||||
|
</CenteredFlex>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<SubmitButton
|
||||||
|
buttonText={props.buttonText}
|
||||||
|
loading={waiting}
|
||||||
|
disabled={values.otp.length < 6}
|
||||||
/>
|
/>
|
||||||
{errors.otp && (
|
</form>
|
||||||
<CenteredFlex sx={{ mt: 1 }}>
|
</VerticallyCentered>
|
||||||
<InvalidInputMessage>
|
|
||||||
{constants.INCORRECT_CODE}
|
|
||||||
</InvalidInputMessage>
|
|
||||||
</CenteredFlex>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<SubmitButton
|
|
||||||
buttonText={props.buttonText}
|
|
||||||
loading={waiting}
|
|
||||||
disabled={values.otp.length < 6}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,8 +3,9 @@ import constants from 'utils/strings/constants';
|
||||||
import { default as FileUploadIcon } from '@mui/icons-material/ImageOutlined';
|
import { default as FileUploadIcon } from '@mui/icons-material/ImageOutlined';
|
||||||
import { default as FolderUploadIcon } from '@mui/icons-material/PermMediaOutlined';
|
import { default as FolderUploadIcon } from '@mui/icons-material/PermMediaOutlined';
|
||||||
import GoogleIcon from '@mui/icons-material/Google';
|
import GoogleIcon from '@mui/icons-material/Google';
|
||||||
import DialogBox from 'components/DialogBox';
|
|
||||||
import { UploadTypeOption } from './option';
|
import { UploadTypeOption } from './option';
|
||||||
|
import DialogTitleWithCloseButton from 'components/DialogBox/TitleWithCloseButton';
|
||||||
|
import { Dialog, DialogContent } from '@mui/material';
|
||||||
|
|
||||||
export default function UploadTypeSelector({
|
export default function UploadTypeSelector({
|
||||||
onHide,
|
onHide,
|
||||||
|
@ -14,29 +15,27 @@ export default function UploadTypeSelector({
|
||||||
uploadGoogleTakeoutZips,
|
uploadGoogleTakeoutZips,
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<DialogBox
|
<Dialog open={show} maxWidth={'xs'} onClose={onHide}>
|
||||||
attributes={{
|
<DialogTitleWithCloseButton onClose={onHide}>
|
||||||
title: constants.UPLOAD,
|
{constants.UPLOAD}
|
||||||
}}
|
</DialogTitleWithCloseButton>
|
||||||
open={show}
|
<DialogContent sx={{ '&&&&': { pt: 0 } }}>
|
||||||
size={'xs'}
|
<UploadTypeOption
|
||||||
onClose={onHide}
|
uploadFunc={uploadFiles}
|
||||||
titleCloseButton>
|
Icon={FileUploadIcon}
|
||||||
<UploadTypeOption
|
uploadName={constants.UPLOAD_FILES}
|
||||||
uploadFunc={uploadFiles}
|
/>
|
||||||
Icon={FileUploadIcon}
|
<UploadTypeOption
|
||||||
uploadName={constants.UPLOAD_FILES}
|
uploadFunc={uploadFolders}
|
||||||
/>
|
Icon={FolderUploadIcon}
|
||||||
<UploadTypeOption
|
uploadName={constants.UPLOAD_DIRS}
|
||||||
uploadFunc={uploadFolders}
|
/>
|
||||||
Icon={FolderUploadIcon}
|
<UploadTypeOption
|
||||||
uploadName={constants.UPLOAD_DIRS}
|
uploadFunc={uploadGoogleTakeoutZips}
|
||||||
/>
|
Icon={GoogleIcon}
|
||||||
<UploadTypeOption
|
uploadName={constants.UPLOAD_GOOGLE_TAKEOUT}
|
||||||
uploadFunc={uploadGoogleTakeoutZips}
|
/>
|
||||||
Icon={GoogleIcon}
|
</DialogContent>
|
||||||
uploadName={constants.UPLOAD_GOOGLE_TAKEOUT}
|
</Dialog>
|
||||||
/>
|
|
||||||
</DialogBox>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,7 +55,7 @@ export default function Home() {
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<FormContainer>
|
<FormContainer>
|
||||||
<FormPaper sx={{ maxWidth: '400px' }}>
|
<FormPaper sx={{ maxWidth: '410px' }}>
|
||||||
<FormTitle>{constants.TWO_FACTOR}</FormTitle>
|
<FormTitle>{constants.TWO_FACTOR}</FormTitle>
|
||||||
<VerifyTwoFactor
|
<VerifyTwoFactor
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
|
|
Loading…
Reference in a new issue