diff --git a/package.json b/package.json index 7725fc3..4ee540c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "buffer": "^6.0.3", - "luxon": "^3.1.0", + "luxon": "^3.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router5": "^8.0.1", @@ -19,16 +19,16 @@ "router5-plugin-browser": "^8.0.1" }, "devDependencies": { - "@playwright/test": "^1.27.0", - "@types/luxon": "^3.1.0", - "@types/react": "^18.0.21", - "@types/react-dom": "^18.0.6", - "@typescript-eslint/eslint-plugin": "^5.40.0", - "@typescript-eslint/parser": "^5.40.0", - "@vitejs/plugin-react": "^2.1.0", - "eslint": "^8.25.0", - "eslint-plugin-react": "^7.31.10", - "typescript": "^4.8.4", - "vite": "^3.1.8" + "@playwright/test": "^1.30.0", + "@types/luxon": "^3.2.0", + "@types/react": "^18.0.27", + "@types/react-dom": "^18.0.10", + "@typescript-eslint/eslint-plugin": "^5.49.0", + "@typescript-eslint/parser": "^5.49.0", + "@vitejs/plugin-react": "^3.0.1", + "eslint": "^8.33.0", + "eslint-plugin-react": "^7.32.2", + "typescript": "^4.9.4", + "vite": "^4.0.4" } } diff --git a/src/components/App.tsx b/src/components/App.tsx index 8d0d62f..dfb317f 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -5,6 +5,11 @@ import CasParents from './CasParents'; import CasRepository from './CasRepository'; import Loader from './Loader'; import Login from './Login'; +import TestBed from './TestBed'; +import TestBedDelCa from './TestBedDelCa'; +import TestBedAddPub from './TestBedAddPub'; +import TestBedDelPub from './TestBedDelPub'; +import Onboarding from './Onboarding'; export default function App() { const { route } = useRoute(); @@ -17,6 +22,10 @@ export default function App() { return ; } + if (route.name === 'onboarding') { + return ; + } + if (route.name.startsWith('cas.parents')) { return ; } @@ -29,6 +38,21 @@ export default function App() { return ; } + if (route.name == 'testbed.del_ca') { + return ; + } + + if (route.name == 'testbed.add_pub') { + return ; + } + + if (route.name == 'testbed.del_pub') { + return ; + } + + if (route.name.startsWith('testbed')) { + return ; + } + return null; } - diff --git a/src/components/CopyDownloadButton.tsx b/src/components/CopyDownloadButton.tsx new file mode 100644 index 0000000..13d21ff --- /dev/null +++ b/src/components/CopyDownloadButton.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import clipboard from '../img/clipboard.svg?url'; +import download from '../img/download.svg?url'; +import useTranslations from '../hooks/useTranslations'; +import {Notification, NotificationType} from '../core/types'; + +export interface CopyDownloadButtonProps { + xml: string, + name: string, + setNotification: (notification: Notification) => void, +} + +export default function CopyDownloadButton({xml, name, setNotification}: CopyDownloadButtonProps) { + const t = useTranslations(); + + const onCopy = () => { + navigator.clipboard.writeText(xml); + + setNotification({ + type: NotificationType.success, + message: t.common.copySuccess + }); + }; + + return ( + <> + + + {t.common.download}/ + + + ); +} \ No newline at end of file diff --git a/src/components/NotificationElem.tsx b/src/components/NotificationElem.tsx new file mode 100644 index 0000000..24523f8 --- /dev/null +++ b/src/components/NotificationElem.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Notification } from '../core/types'; +import useNavigation from '../hooks/useNavigation'; + +interface NotificationProps { + notification: Notification, +} + +export default function NotificationElem({ notification }: NotificationProps) { + const navigate = useNavigation(); + + return ( +
+ + + {notification.message} + +
+ ); +} + diff --git a/src/components/Onboarding.tsx b/src/components/Onboarding.tsx new file mode 100644 index 0000000..fb70943 --- /dev/null +++ b/src/components/Onboarding.tsx @@ -0,0 +1,43 @@ +import React, { FormEvent, useState } from 'react'; +import Layout from './Layout'; +import welcome from '../img/welcome.svg?url'; +import useTranslations from '../hooks/useTranslations'; +import useNavigation from '../hooks/useNavigation'; + +export default function Onboarding() { + const navigate = useNavigation(); + const [name, setName] = useState(''); + const t = useTranslations(); + + const submit = (e: FormEvent) => { + e.preventDefault(); + navigate({ name }); + }; + + return ( + +
+
+ {t.common.copy} +

{t.onboarding.welcome}

+
+
+
+ + setName(e.target.value)} + required + /> +
+
+ +
+ + + ); +} diff --git a/src/components/TestBed.tsx b/src/components/TestBed.tsx new file mode 100644 index 0000000..f52c940 --- /dev/null +++ b/src/components/TestBed.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import Layout from './Layout'; +import TestBedHeader from './TestBedHeader'; +import TestBedAddCaForm from './forms/TestBedAddCaForm'; + +export default function TestBed() { + return ( + +
+ + +
+ + ); +} diff --git a/src/components/TestBedAddPub.tsx b/src/components/TestBedAddPub.tsx new file mode 100644 index 0000000..5ccdea9 --- /dev/null +++ b/src/components/TestBedAddPub.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import Layout from './Layout'; +import TestBedHeader from './TestBedHeader'; +import TestBedAddPubForm from './forms/TestBedAddPubForm'; + +export default function TestBedAddPub() { + return ( + +
+ + +
+ + ); +} diff --git a/src/components/TestBedDelCa.tsx b/src/components/TestBedDelCa.tsx new file mode 100644 index 0000000..fe6b399 --- /dev/null +++ b/src/components/TestBedDelCa.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import Layout from './Layout'; +import TestBedHeader from './TestBedHeader'; +import TestBedDelCaForm from './forms/TestBedDelCaForm'; + +export default function TestBedDelCa() { + return ( + +
+ + +
+ + ); +} diff --git a/src/components/TestBedDelPub.tsx b/src/components/TestBedDelPub.tsx new file mode 100644 index 0000000..1e65741 --- /dev/null +++ b/src/components/TestBedDelPub.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import Layout from './Layout'; +import TestBedHeader from './TestBedHeader'; +import TestBedDelPubForm from './forms/TestBedDelPubForm'; + +export default function TestBedDelPub() { + return ( + +
+ + +
+ + ); +} diff --git a/src/components/TestBedHeader.tsx b/src/components/TestBedHeader.tsx new file mode 100644 index 0000000..3bd067f --- /dev/null +++ b/src/components/TestBedHeader.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import welcome from '../img/welcome.svg?url'; +import useTranslations from '../hooks/useTranslations'; +import { Link } from 'react-router5'; + +export default function TestBedHeader() { + const t = useTranslations(); + + return ( + <> +
+ {t.common.copy} +

{t.testbed.welcome}

+
+
+

{t.testbed.disclaimer.heading}

+

+

{t.testbed.rpconfighelp.heading}

+

+

{t.testbed.regunreg.heading}

+

+
+
+
    +
  • + + {t.testbed.addChild.heading} + +
    • +
  • + + {t.testbed.removeChild.heading} + +
    • +
  • + + {t.testbed.addPublisher.heading} + +
    • +
  • + + {t.testbed.removePublisher.heading} + +
    • +
+
+ + ); +} diff --git a/src/components/forms/ParentModal.tsx b/src/components/forms/ParentModal.tsx index 687d979..58e1c40 100644 --- a/src/components/forms/ParentModal.tsx +++ b/src/components/forms/ParentModal.tsx @@ -1,11 +1,10 @@ import React from 'react'; import useTranslations from '../../hooks/useTranslations'; import Modal from './Modal'; -import clipboard from '../../img/clipboard.svg?url'; -import download from '../../img/download.svg?url'; import upload from '../../img/upload.svg?url'; -import useParantActions from '../../hooks/useParentActions'; +import useParentActions from '../../hooks/useParentActions'; import NotificationPopup from '../NotificationPopup'; +import CopyDownloadButton from '../CopyDownloadButton'; export default function ParentModal() { const t = useTranslations(); @@ -15,15 +14,13 @@ export default function ParentModal() { name, setName, request, - dataUrl, setRequest, response, setResponse, onSubmit, onClose, - onCopy, handleUpload, - } = useParantActions(); + } = useParentActions(); return ( @@ -39,12 +36,7 @@ export default function ParentModal() {