diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json index afa4b7540..b9ecdd46b 100644 --- a/public/locales/en/layout/modals/add-app.json +++ b/public/locales/en/layout/modals/add-app.json @@ -13,7 +13,18 @@ }, "internalAddress": { "label": "Internal address", - "description": "Internal IP-address of the app." + "description": "Internal IP-address of the app.", + "troubleshoot": { + "label": "Common Troubleshooting", + "header": "This is a list of commonly made mistake and troubleshooting:", + "lines": { + "nothingAfterPort": "You should, in most if not all cases, not input anything after the port, even the '/admin' for pihole.", + "protocolCheck": "Always make sure that the URL is preceded by http or https, and to make sure you are using the right one.", + "iframe": "When it comes to iframes, those should always be using the same protocol (http/s) as Homarr.", + "clearCache": "Some informations are registered in cache, so an integration might not work unless you clear the cache in Homarr's general options." + }, + "footer": "For more troubleshooting, reach out on our {{discord}}." + } }, "externalAddress": { "label": "External address", diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx index 16d8f6194..979cfc1ae 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx @@ -1,9 +1,10 @@ -import { Stack, Tabs, Text, TextInput } from '@mantine/core'; +import { Anchor, Button, Card, Collapse, Group, Stack, Tabs, Text, TextInput } from '@mantine/core'; import { UseFormReturnType } from '@mantine/form'; -import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react'; +import { useDisclosure } from '@mantine/hooks'; +import { IconAlertCircle, IconClick, IconCursorText, IconLink } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; - import { AppType } from '~/types/app'; + import { EditAppModalTab } from '../type'; interface GeneralTabProps { @@ -13,6 +14,16 @@ interface GeneralTabProps { export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { const { t } = useTranslation('layout/modals/add-app'); + + const [opened, { toggle }] = useDisclosure(false); + + const commonMistakes = [ + t('general.internalAddress.troubleshoot.lines.nothingAfterPort'), + t('general.internalAddress.troubleshoot.lines.protocolCheck'), + t('general.internalAddress.troubleshoot.lines.iframe'), + t('general.internalAddress.troubleshoot.lines.clearCache'), + ]; + return ( @@ -46,12 +57,39 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { {...form.getInputProps('behaviour.externalUrl')} /> + + + + + + + {t('general.internalAddress.troubleshoot.header')} + {commonMistakes.map((value: string, key: number) => { + return ( + + + {value} + + ); + })} + + {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[0]} + + Discord + + {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[1]} + + + + {!form.values.behaviour.externalUrl.startsWith('https://') && !form.values.behaviour.externalUrl.startsWith('http://') && ( {t('behaviour.customProtocolWarning')} - )} + )} );