deleteModal
This commit is contained in:
103
package-lock.json
generated
103
package-lock.json
generated
@ -10,14 +10,15 @@
|
||||
"dependencies": {
|
||||
"@craco/craco": "^7.0.0",
|
||||
"@dnd-kit/core": "^6.0.7",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@ionic/cli": "^6.20.8",
|
||||
"@ionic/react": "^6.5.4",
|
||||
"@mantine/core": "^5.10.3",
|
||||
"@mantine/dropzone": "^5.10.3",
|
||||
"@mantine/core": "^5.10.5",
|
||||
"@mantine/dropzone": "^5.10.5",
|
||||
"@mantine/form": "^5.10.3",
|
||||
"@mantine/hooks": "^5.10.3",
|
||||
"@mantine/notifications": "^5.10.3",
|
||||
"@mantine/hooks": "^5.10.5",
|
||||
"@mantine/modals": "^5.10.5",
|
||||
"@mantine/notifications": "^5.10.5",
|
||||
"@radix-ui/react-icons": "^1.1.1",
|
||||
"@tabler/icons": "^2.4.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
@ -2228,12 +2229,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin": {
|
||||
"version": "11.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
|
||||
"integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
|
||||
"version": "11.10.6",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
|
||||
"integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.16.7",
|
||||
"@babel/plugin-syntax-jsx": "^7.17.12",
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/hash": "^0.9.0",
|
||||
"@emotion/memoize": "^0.8.0",
|
||||
@ -2244,9 +2244,6 @@
|
||||
"find-root": "^1.1.0",
|
||||
"source-map": "^0.5.7",
|
||||
"stylis": "4.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
|
||||
@ -2291,12 +2288,12 @@
|
||||
"integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
|
||||
},
|
||||
"node_modules/@emotion/react": {
|
||||
"version": "11.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
|
||||
"integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
|
||||
"version": "11.10.6",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
|
||||
"integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.10.5",
|
||||
"@emotion/babel-plugin": "^11.10.6",
|
||||
"@emotion/cache": "^11.10.5",
|
||||
"@emotion/serialize": "^1.1.1",
|
||||
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
|
||||
@ -2305,13 +2302,9 @@
|
||||
"hoist-non-react-statics": "^3.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@babel/core": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
@ -3639,33 +3632,33 @@
|
||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
||||
},
|
||||
"node_modules/@mantine/core": {
|
||||
"version": "5.10.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.3.tgz",
|
||||
"integrity": "sha512-kBb8l085vg+MjAVxEDyI/koT/l2hXTBVdg6pkSJlFlMtUlhBGkp8fzqaaUiJ7C1oU//NnHAogPymHw0tjpPBgA==",
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.5.tgz",
|
||||
"integrity": "sha512-F4tqHSEVM9D6/iSqHfPda+Xl5XgSEPHAAkT01Zwzj4Jnbd10qGrlqr/SFUop2CIcuKYnmra9XltUahUPXBC2BQ==",
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.19.1",
|
||||
"@mantine/styles": "5.10.3",
|
||||
"@mantine/utils": "5.10.3",
|
||||
"@mantine/styles": "5.10.5",
|
||||
"@mantine/utils": "5.10.5",
|
||||
"@radix-ui/react-scroll-area": "1.0.2",
|
||||
"react-textarea-autosize": "8.3.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/hooks": "5.10.3",
|
||||
"@mantine/hooks": "5.10.5",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/dropzone": {
|
||||
"version": "5.10.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.10.3.tgz",
|
||||
"integrity": "sha512-XQKV6K/vkBqdMk9RYeyRu9UwdGmxSs0otxB+dpt8nAiWy0Ja4ORdXTPc38Xi7sq2gIJrIkwbS0XAvBiJflbrLQ==",
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.10.5.tgz",
|
||||
"integrity": "sha512-tBPBuQvlvesEApECTfmYFQXbS26sAQo8VaYIebTqBy9VIUoVAM9VCKHBLqa3KMKtq+/HjKCJpaa8+Cjn9riqqQ==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.10.3",
|
||||
"@mantine/utils": "5.10.5",
|
||||
"react-dropzone": "14.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.10.3",
|
||||
"@mantine/hooks": "5.10.3",
|
||||
"@mantine/core": "5.10.5",
|
||||
"@mantine/hooks": "5.10.5",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
@ -3683,32 +3676,46 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/hooks": {
|
||||
"version": "5.10.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.10.3.tgz",
|
||||
"integrity": "sha512-fFDXF0A596z10QKeWAGtTZJ4QotsMxhhbjfWWRHMogY/hXHQ2S+7+GFotpF2JbzefYztpawHEJevy3eYF8cQmQ==",
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.10.5.tgz",
|
||||
"integrity": "sha512-hFQp71QZDfivPzfIUOQZfMKLiOL/Cn2EnzacRlbUr55myteTfzYN8YMt+nzniE/6c4IRopFHEAdbKEtfyQc6kg==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/notifications": {
|
||||
"version": "5.10.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.10.3.tgz",
|
||||
"integrity": "sha512-Gi/7LVonBkaz7VW8HboFBSrvliuQOopMyocrucXwVEYTSyTpws/fderdw04hyGczrReb6IhJX5eOr6qHFaNlWA==",
|
||||
"node_modules/@mantine/modals": {
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.10.5.tgz",
|
||||
"integrity": "sha512-q3BCqAxulcIZCL48vUrwSaXDhxDng/2daVky8K1mTPYNlcm9iN1mqVTUC4uFWhn4b2UmPu4UdbNePEgLuhK4Mw==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.10.3",
|
||||
"@mantine/utils": "5.10.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.10.5",
|
||||
"@mantine/hooks": "5.10.5",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/notifications": {
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.10.5.tgz",
|
||||
"integrity": "sha512-IzTAXA7Zb9DcI94Mv5O2OinhLmI7fvs/VutDw9uCpp6OHtLuF/XN1d262jrsGhMZT0c4nuUsotSLFZF3GWZwXg==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.10.5",
|
||||
"react-transition-group": "4.4.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.10.3",
|
||||
"@mantine/hooks": "5.10.3",
|
||||
"@mantine/core": "5.10.5",
|
||||
"@mantine/hooks": "5.10.5",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/styles": {
|
||||
"version": "5.10.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.10.3.tgz",
|
||||
"integrity": "sha512-OpKY207BgkJd59wSNuNaZILAUbNh1b87iY5bZOVm9u49X5cOo/n4nrkaUMw2FCZIKi6psyobtW7XYCuoldrI4w==",
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.10.5.tgz",
|
||||
"integrity": "sha512-0NXk8c/XGzuTUkZc6KceF2NaTCMEu5mHR4ru0x+ttb9DGnLpHuGWduTHjSfr4hl6eAJgedD0zauO+VAhDzO9zA==",
|
||||
"dependencies": {
|
||||
"clsx": "1.1.1",
|
||||
"csstype": "3.0.9"
|
||||
@ -3725,9 +3732,9 @@
|
||||
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
|
||||
},
|
||||
"node_modules/@mantine/utils": {
|
||||
"version": "5.10.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.10.3.tgz",
|
||||
"integrity": "sha512-ZfR1wouA/rz3xTOb2wBnrQpIiyjLcCLLvbUo7rzaG3LhFy7UoGjZ6uqIW9qDrzs7SR4tETRfMxedYagjcoCiEg==",
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.10.5.tgz",
|
||||
"integrity": "sha512-FGMq4dGs5HhDAtI0z46uzxzKKPmZ3h5uKUyKg1ZHoFR1mBtcUMbB6FylFmHqKFRWlJ5IXqX9dwmiVrLYUOfTmA==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
|
||||
11
package.json
11
package.json
@ -5,14 +5,15 @@
|
||||
"dependencies": {
|
||||
"@craco/craco": "^7.0.0",
|
||||
"@dnd-kit/core": "^6.0.7",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@ionic/cli": "^6.20.8",
|
||||
"@ionic/react": "^6.5.4",
|
||||
"@mantine/core": "^5.10.3",
|
||||
"@mantine/dropzone": "^5.10.3",
|
||||
"@mantine/core": "^5.10.5",
|
||||
"@mantine/dropzone": "^5.10.5",
|
||||
"@mantine/form": "^5.10.3",
|
||||
"@mantine/hooks": "^5.10.3",
|
||||
"@mantine/notifications": "^5.10.3",
|
||||
"@mantine/hooks": "^5.10.5",
|
||||
"@mantine/modals": "^5.10.5",
|
||||
"@mantine/notifications": "^5.10.5",
|
||||
"@radix-ui/react-icons": "^1.1.1",
|
||||
"@tabler/icons": "^2.4.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
|
||||
@ -27,6 +27,7 @@ import
|
||||
Burger,
|
||||
Stack
|
||||
} from '@mantine/core';
|
||||
import { ModalsProvider } from '@mantine/modals';
|
||||
import { NotificationsProvider } from '@mantine/notifications';
|
||||
import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications';
|
||||
import DogNavbar from './components/DogNavbar';
|
||||
|
||||
4
src/components/DogNavbar.css
Normal file
4
src/components/DogNavbar.css
Normal file
@ -0,0 +1,4 @@
|
||||
button.mantine-8nr514
|
||||
{
|
||||
background-color: red;
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
import { Navbar, Text, Modal } from '@mantine/core'
|
||||
import { Navbar, Text } from '@mantine/core'
|
||||
import * as Icons from 'react-feather';
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import { ModalsProvider, openConfirmModal } from '@mantine/modals';
|
||||
import './DogNavbar.css';
|
||||
|
||||
const NaveBarIcon = ({ icon, href, text = 'tooltip 💡'}: {icon: JSX.Element, href: string, text: string}) =>
|
||||
(
|
||||
@ -19,20 +20,26 @@ const NaveBarIcon = ({ icon, href, text = 'tooltip 💡'}: {icon: JSX.Element, h
|
||||
|
||||
const Divider = () => <hr className="sidebar-hr" />;
|
||||
|
||||
const openDeleteModal = () =>
|
||||
openConfirmModal({
|
||||
title: 'Account löschen!',
|
||||
centered: true,
|
||||
children: (
|
||||
<Text size="sm">
|
||||
Are you sure you want to delete your profile? This action is destructive and you will have
|
||||
to contact support to restore your data.
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: 'Account löschen', cancel: "Behalten, nicht löschen" },
|
||||
onCancel: () => console.log('Cancel'),
|
||||
onConfirm: () => console.log('Confirmed')
|
||||
});
|
||||
|
||||
function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolean, onLogout: () => void})
|
||||
{
|
||||
const [opened, setOpened] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={() => setOpened(false)}
|
||||
title="Account löschen!"
|
||||
>
|
||||
<h4>wirklich löschen?</h4>
|
||||
{/* Modal content */}
|
||||
</Modal>
|
||||
<ModalsProvider labels={{ confirm: 'Submit', cancel: 'Cancel' }}>
|
||||
<Navbar className="fixed top-11 left-0 w-16 h-[90%] flex flex-col
|
||||
bg-orange-500"
|
||||
|
||||
@ -67,7 +74,7 @@ function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolea
|
||||
<Divider/>
|
||||
<Navbar.Section className='InputForm' >
|
||||
{hasUser &&
|
||||
<div onClick={() => setOpened(true)}>
|
||||
<div onClick={openDeleteModal}>
|
||||
<NaveBarIcon icon={<Icons.UserMinus size={32}/>} href={''} text={'Account löschen'}/>
|
||||
</div>
|
||||
}
|
||||
@ -75,6 +82,7 @@ function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolea
|
||||
<Divider/>
|
||||
<Navbar.Section><Text className='text-xs' component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>
|
||||
</Navbar>
|
||||
</ModalsProvider>
|
||||
</> )
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user