prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clean up delete account button

Browse source
This commit is contained in:
Jackson Harper 2023-10-05 12:34:52 +08:00
parent e389856a44
commit 0a3700d853
2 changed files with 56 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/web/pages/settings/account.tsx
View file

@ -22,6 +22,7 @@ import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
const StyledLabel = styled('label', {
fontWeight: 600,
fontSize: '16px',
marginBottom: '5px',
})
export const FormInput = styled('input', {
@ -236,13 +237,13 @@ export default function Account(): JSX.Element {
distribution="start"
alignment="start"
>
<StyledLabel>Name</StyledLabel>
<form
onSubmit={(event) => {
handleUpdateName()
event.preventDefault()
}}
>
<StyledLabel>Name</StyledLabel>
<FormInput
type={'text'}
value={name}
@ -331,6 +332,7 @@ export default function Account(): JSX.Element {
borderRadius: '5px',
}}
>
<StyledLabel>Email</StyledLabel>
<form
onSubmit={(event) => {
// Show a confirmation dialog if switching from social login
@ -342,7 +344,6 @@ export default function Account(): JSX.Element {
event.preventDefault()
}}
>
<StyledLabel>Email</StyledLabel>
<FormInput
type={'text'}
placeholder={'Email'}

73
packages/web/pages/settings/delete-my-account.tsx
View file

@ -9,7 +9,7 @@ import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
import { Button } from '../../components/elements/Button'
import { HStack } from '../../components/elements/LayoutPrimitives'
import { HStack, VStack } from '../../components/elements/LayoutPrimitives'
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
import { Loader } from '../../components/templates/SavingRequest'
import { deleteAccountMutation } from '../../lib/networking/mutations/deleteAccountMutation'
@ -52,26 +52,59 @@ export default function DeleteMyAccount(): JSX.Element {
top: '5rem',
}}
/>
<VStack
css={{ width: '100%', height: '100%' }}
distribution="start"
alignment="center"
>
<VStack
css={{
padding: '24px',
width: '100%',
height: '100%',
gap: '25px',
minWidth: '300px',
maxWidth: '865px',
}}
>
{showConfirm ? (
<ConfirmationModal
message={
'Are you sure you want to delete your account? This can not be reversed and all your data (saved articles, highlights, and notes) will be deleted.'
}
onAccept={deleteAccount}
onOpenChange={() => setShowConfirm(false)}
/>
) : null}
{showConfirm ? (
<ConfirmationModal
message={
'Are you sure you want to delete your account? This can not be reversed and all your data (saved articles, highlights, and notes) will be deleted.'
}
onAccept={deleteAccount}
onOpenChange={() => setShowConfirm(false)}
/>
) : null}
<HStack css={{ padding: '24px', width: '100%', height: '100%' }}>
{viewer && router ? (
<Button style="ctaDarkYellow" onClick={() => setShowConfirm(true)}>
Delete my Account
</Button>
) : (
<Loader />
)}
</HStack>
<VStack
css={{
padding: '24px',
width: '100%',
height: '100%',
bg: '$grayBg',
gap: '20px',
borderRadius: '5px',
}}
distribution="start"
alignment="start"
>
Deleting your account will delete all your saved items, notes, and
highlights. This operation can not be undone.
{viewer && router ? (
<Button
style="ctaDarkYellow"
onClick={() => setShowConfirm(true)}
css={{ alignSelf: 'center' }}
>
Delete my Account
</Button>
) : (
<Loader />
)}
</VStack>
</VStack>
</VStack>
</SettingsLayout>
)
}