yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Confirmation dialog call to action should be on the right

Browse Source
This commit is contained in:
Tom Moor
2023-12-19 11:21:30 -05:00
parent 1c0e396cd1
commit 56e6b5211a
11 changed files with 180 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
app/scenes/DocumentDelete.tsx
View File

@@ -82,65 +82,65 @@ function DocumentDelete({ document, onSubmit }: Props) {
);
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : nestedDocumentsCount < 1 ? (
<Trans
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history</em>."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : (
<Trans
count={nestedDocumentsCount}
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and <em>{{ any }} nested document</em>."
values={{
documentTitle: document.titleWithDefault,
any: nestedDocumentsCount,
}}
components={{
em: <strong />,
}}
/>
)}
</Text>
{canArchive && (
<Text type="secondary">
<Trans>
If you’d like the option of referencing or restoring the{" "}
{{
noun: document.noun,
}}{" "}
in the future, consider archiving it instead.
</Trans>
</Text>
<form onSubmit={handleSubmit}>
<Text type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : nestedDocumentsCount < 1 ? (
<Trans
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history</em>."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : (
<Trans
count={nestedDocumentsCount}
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and <em>{{ any }} nested document</em>."
values={{
documentTitle: document.titleWithDefault,
any: nestedDocumentsCount,
}}
components={{
em: <strong />,
}}
/>
)}
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
&nbsp;&nbsp;
</Text>
{canArchive && (
<Text type="secondary">
<Trans>
If you’d like the option of referencing or restoring the{" "}
{{
noun: document.noun,
}}{" "}
in the future, consider archiving it instead.
</Trans>
</Text>
)}
<Flex justify="flex-end" gap={8}>
{canArchive && (
<Button type="button" onClick={handleArchive} neutral>
{isArchiving ? `${t("Archiving")}…` : t("Archive")}
</Button>
)}
</form>
</Flex>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</Flex>
</form>
);
}

64
app/scenes/DocumentPermanentDelete.tsx
View File

@@ -4,9 +4,8 @@ import { useTranslation, Trans } from "react-i18next";
import { useHistory } from "react-router-dom";
import { toast } from "sonner";
import Document from "~/models/Document";
import Button from "~/components/Button";
import ConfirmationDialog from "~/components/ConfirmationDialog";
import Flex from "~/components/Flex";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
type Props = {
@@ -15,50 +14,37 @@ type Props = {
};
function DocumentPermanentDelete({ document, onSubmit }: Props) {
const [isDeleting, setIsDeleting] = React.useState(false);
const { t } = useTranslation();
const { documents } = useStores();
const history = useHistory();
const handleSubmit = React.useCallback(
async (ev: React.SyntheticEvent) => {
ev.preventDefault();
try {
setIsDeleting(true);
await documents.delete(document, {
permanent: true,
});
toast.success(t("Document permanently deleted"));
onSubmit();
history.push("/trash");
} catch (err) {
toast.error(err.message);
} finally {
setIsDeleting(false);
}
},
[document, onSubmit, t, history, documents]
);
const handleSubmit = async () => {
await documents.delete(document, {
permanent: true,
});
toast.success(t("Document permanently deleted"));
onSubmit();
history.push("/trash");
};
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<Trans
defaults="Are you sure you want to permanently delete the <em>{{ documentTitle }}</em> document? This action is immediate and cannot be undone."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</form>
<ConfirmationDialog
submitText={t("I’m sure – Delete")}
savingText={`${t("Deleting")}…`}
onSubmit={handleSubmit}
danger
>
<Trans
defaults="Are you sure you want to permanently delete the <em>{{ documentTitle }}</em> document? This action is immediate and cannot be undone."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
</ConfirmationDialog>
</Flex>
);
}

57
app/scenes/GroupDelete.tsx
View File

@@ -2,11 +2,8 @@ import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import { useHistory } from "react-router-dom";
import { toast } from "sonner";
import Group from "~/models/Group";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import Text from "~/components/Text";
import ConfirmationDialog from "~/components/ConfirmationDialog";
import { settingsPath } from "~/utils/routeHelpers";
type Props = {
@@ -17,42 +14,30 @@ type Props = {
function GroupDelete({ group, onSubmit }: Props) {
const { t } = useTranslation();
const history = useHistory();
const [isDeleting, setIsDeleting] = React.useState(false);
const handleSubmit = async (ev: React.SyntheticEvent) => {
ev.preventDefault();
setIsDeleting(true);
try {
await group.delete();
history.push(settingsPath("groups"));
onSubmit();
} catch (err) {
toast.error(err.message);
} finally {
setIsDeleting(false);
}
const handleSubmit = async () => {
await group.delete();
history.push(settingsPath("groups"));
onSubmit();
};
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<Trans
defaults="Are you sure about that? Deleting the <em>{{groupName}}</em> group will cause its members to lose access to collections and documents that it is associated with."
values={{
groupName: group.name,
}}
components={{
em: <strong />,
}}
/>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</form>
</Flex>
<ConfirmationDialog
onSubmit={handleSubmit}
submitText={t("I’m sure – Delete")}
savingText={`${t("Deleting")}…`}
danger
>
<Trans
defaults="Are you sure about that? Deleting the <em>{{groupName}}</em> group will cause its members to lose access to collections and documents that it is associated with."
values={{
groupName: group.name,
}}
components={{
em: <strong />,
}}
/>
</ConfirmationDialog>
);
}

1
app/scenes/Settings/Security.tsx
View File

@@ -109,7 +109,6 @@ function Security() {
onSubmit={async () => {
await saveData(newData);
}}
submitText={t("I’m sure")}
savingText={`${t("Saving")}…`}
danger
>

1
app/scenes/Settings/components/FileOperationListItem.tsx
View File

@@ -81,7 +81,6 @@ const FileOperationListItem = ({ fileOperation }: Props) => {
content: (
<ConfirmationDialog
onSubmit={handleDelete}
submitText={t("I’m sure")}
savingText={`${t("Deleting")}…`}
danger
>

65
app/scenes/TeamDelete.tsx
View File

@@ -64,36 +64,37 @@ function TeamDelete({ onSubmit }: Props) {
const workspaceName = team.name;
return (
<Flex column>
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy this workspace.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<Text type="secondary">
<Trans>
Deleting the <strong>{{ workspaceName }}</strong> workspace will
destroy all collections, documents, users, and associated data.
You will be immediately logged out of {{ appName }}.
</Trans>
</Text>
</>
)}
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy this workspace.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<Text type="secondary">
<Trans>
Deleting the <strong>{{ workspaceName }}</strong> workspace will
destroy all collections, documents, users, and associated data.
You will be immediately logged out of {{ appName }}.
</Trans>
</Text>
</>
)}
<Flex justify="flex-end">
{env.EMAIL_ENABLED && !isWaitingCode ? (
<Button type="submit" onClick={handleRequestDelete} neutral>
{t("Continue")}…
@@ -109,8 +110,8 @@ function TeamDelete({ onSubmit }: Props) {
: t("Delete workspace")}
</Button>
)}
</form>
</Flex>
</Flex>
</form>
);
}

66
app/scenes/UserDelete.tsx
View File

@@ -56,37 +56,37 @@ function UserDelete() {
const appName = env.APP_NAME;
return (
<Flex column>
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy your account.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<Text type="secondary">
<Trans>
Are you sure? Deleting your account will destroy identifying
data associated with your user and cannot be undone. You will be
immediately logged out of {{ appName }} and all your API tokens
will be revoked.
</Trans>
</Text>
</>
)}
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy your account.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<Text type="secondary">
<Trans>
Are you sure? Deleting your account will destroy identifying data
associated with your user and cannot be undone. You will be
immediately logged out of {{ appName }} and all your API tokens
will be revoked.
</Trans>
</Text>
</>
)}
<Flex justify="flex-end">
{env.EMAIL_ENABLED && !isWaitingCode ? (
<Button type="submit" onClick={handleRequestDelete} neutral>
{t("Continue")}…
@@ -102,8 +102,8 @@ function UserDelete() {
: t("Delete my account")}
</Button>
)}
</form>
</Flex>
</Flex>
</form>
);
}