diff --git a/data/configs/default.json b/data/configs/default.json index 9f7552956..591cd3e1f 100644 --- a/data/configs/default.json +++ b/data/configs/default.json @@ -164,28 +164,30 @@ } } ], - "widgets": [{ - "id": "date", - "properties": { - "display24HourFormat": true - }, - "area": { - "type": "wrapper", + "widgets": [ + { + "id": "date", "properties": { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33e" - } - }, - "shape": { - "location": { - "x": 0, - "y": 3 + "display24HourFormat": true }, - "size": { - "width": 4, - "height": 2 + "area": { + "type": "wrapper", + "properties": { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33e" + } + }, + "shape": { + "location": { + "x": 0, + "y": 3 + }, + "size": { + "width": 4, + "height": 2 + } } } - }], + ], "settings": { "common": { "searchEngine": { @@ -214,4 +216,4 @@ "appOpacity": 100 } } -} +} \ No newline at end of file diff --git a/next.config.js b/next.config.js index b9989cfa8..6d3cf54a0 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,3 @@ -const { env } = require('process'); - const { i18n } = require('./next-i18next.config'); const withBundleAnalyzer = require('@next/bundle-analyzer')({ diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 944374b7c..1a99f9bd3 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -2,6 +2,8 @@ "actions": { "save": "Save", "cancel": "Cancel", + "close": "Close", + "delete": "Delete", "ok": "Okay", "edit": "Edit", "changePosition": "Change position", @@ -11,10 +13,15 @@ "settings": "Settings", "dangerZone": "Danger zone" }, + "secrets": { + "apiKey": "Api key", + "username": "Username", + "password": "Password" + }, "tip": "Tip: ", "time": { "seconds": "seconds", "minutes": "minutes", "hours": "hours" } -} +} \ No newline at end of file diff --git a/public/locales/en/layout/add-service-app-shelf.json b/public/locales/en/layout/add-service-app-shelf.json deleted file mode 100644 index ee5d2676e..000000000 --- a/public/locales/en/layout/add-service-app-shelf.json +++ /dev/null @@ -1,128 +0,0 @@ -{ - "actionIcon": { - "tooltip": "Add a service" - }, - "modal": { - "title": "Add service", - "form": { - "validation": { - "invalidUrl": "Please enter a valid URL", - "noStatusCodeSelected": "Please select a status code" - } - }, - "tabs": { - "options": { - "title": "Options", - "form": { - "serviceName": { - "label": "Service name", - "placeholder": "Plex" - }, - "iconUrl": { - "label": "Icon URL" - }, - "serviceUrl": { - "label": "Service URL" - }, - "onClickUrl": { - "label": "On Click URL" - }, - "serviceType": { - "label": "Service type", - "defaultValue": "Other", - "placeholder": "Pick one" - }, - "category": { - "label": "Category", - "placeholder": "Select a category or create a new one", - "nothingFound": "Nothing found", - "createLabel": "+ Create {{query}}" - }, - "integrations": { - "apiKey": { - "label": "API key", - "placeholder": "Your API key", - "validation": { - "noKey": "Invalid Key" - }, - "tip": { - "text": "Get your API key", - "link": "here." - } - }, - "qBittorrent": { - "username": { - "label": "Username", - "placeholder": "admin", - "validation": { - "invalidUsername": "Invalid username" - } - }, - "password": { - "label": "Password", - "placeholder": "adminadmin", - "validation": { - "invalidPassword": "Invalid password" - } - } - }, - "deluge": { - "password": { - "label": "Password", - "placeholder": "password", - "validation": { - "invalidPassword": "Invalid password" - } - } - }, - "transmission": { - "username": { - "label": "Username", - "placeholder": "admin", - "validation": { - "invalidUsername": "Invalid username" - } - }, - "password": { - "label": "Password", - "placeholder": "adminadmin", - "validation": { - "invalidPassword": "Invalid password" - } - } - }, - "nzbget": { - "username": { - "label": "Username", - "placeholder": "admin", - "validation": { - "invalidUsername": "Invalid username" - } - }, - "password": { - "label": "Password", - "placeholder": "password", - "validation": { - "invalidPassword": "Invalid password" - } - } - } - } - } - }, - "advancedOptions": { - "title": "Advanced options", - "form": { - "openServiceInNewTab": { - "label": "Open service in new tab" - }, - "buttons": { - "submit": { - "content": "Add service" - } - } - } - } - } - } -} \ No newline at end of file diff --git a/public/locales/en/layout/app-shelf-menu.json b/public/locales/en/layout/app-shelf-menu.json deleted file mode 100644 index 006e906c2..000000000 --- a/public/locales/en/layout/app-shelf-menu.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "modal": { - "title": "Modify a service", - "buttons": { - "save": "Save service" - } - }, - "menu": { - "labels": { - "settings": "Settings", - "dangerZone": "Danger zone" - }, - "actions": { - "edit": "Edit", - "delete": "Delete" - } - } -} \ No newline at end of file diff --git a/public/locales/en/layout/app-shelf.json b/public/locales/en/layout/app-shelf.json deleted file mode 100644 index 2074f4105..000000000 --- a/public/locales/en/layout/app-shelf.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "accordions": { - "downloads": { - "text": "Your downloads", - "torrents": "Your Torrent downloads", - "usenet": "Your Usenet downloads" - }, - "others": { - "text": "Others" - } - } -} \ No newline at end of file diff --git a/public/locales/en/layout/element-selector/selector.json b/public/locales/en/layout/element-selector/selector.json index fc0d1886a..96872f846 100644 --- a/public/locales/en/layout/element-selector/selector.json +++ b/public/locales/en/layout/element-selector/selector.json @@ -1,9 +1,9 @@ { "modal": { - "title": "Add a new tile to your Dashboard", - "text": "You can use tiles, to make Homarr's dashboard yours. You may choose your desired tiles from the collection below and drag them anywhere on the dashboard where you like." + "title": "Add a new tile omegalaul", + "text": "Tiles are the main element of homarr. They allow you to configure the dashboard and display the information you want." }, "actionIcon": { "tooltip": "Add a tile" } -} +} \ No newline at end of file diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json new file mode 100644 index 000000000..1f08dd639 --- /dev/null +++ b/public/locales/en/layout/modals/add-app.json @@ -0,0 +1,59 @@ +{ + "tabs": { + "general": "General", + "behaviour": "Behaviour", + "network": "Network", + "appearance": "Appearance", + "integration": "Integration" + }, + "general": { + "appname": { + "label": "App name", + "description": "Used for displaying the app on the dashboard" + }, + "internalAddress": { + "label": "Internal address", + "description": "Internal IP of the app" + }, + "externalAddress": { + "label": "External address", + "description": "Url that will be opened in the browser when clicking on the app" + } + }, + "behaviour": { + "isOpeningNewTab": { + "label": "Open in new tab", + "description": "Open the link in a new tab" + } + }, + "network": { + "statusChecker": { + "label": "Status checker", + "description": "Sends a simple HTTP / HTTPS request to check if your app is online" + }, + "statusCodes": { + "label": "HTTP status codes", + "description": "Determines what response codes are allowed for this app to be 'Online'" + } + }, + "appearance": { + "icon": { + "label": "App Icon", + "description": "Logo of your app displayed in your dashboard. (Must return a body content containg an image)" + } + }, + "integration": { + "type": { + "label": "Integration configuration", + "description": "Treats this app as the selected integration and provides you with per-app configuration", + "placeholder": "Select an integration" + }, + "secrets": { + "description": "To update a secret, enter a value and click the save button. To remove a secret, use the clear button.", + "warning": "Please note that Homarr removes secrets from the configuration for security reasons. Thus, you can only either define or unset any credentials. Your credentials act as the main access for your integrations and you should never share them with anybody else. Make sure to store and manage your secrets safely.", + "clear": "Clear secret", + "save": "Save secret", + "update": "Update secret" + } + } +} \ No newline at end of file diff --git a/public/locales/en/settings/common.json b/public/locales/en/settings/common.json index 4ff9b984e..e78cd2b41 100644 --- a/public/locales/en/settings/common.json +++ b/public/locales/en/settings/common.json @@ -11,5 +11,19 @@ "credits": { "madeWithLove": "Made with ❤️ by @" }, - "grow": "Grow grid (take all space)" + "grow": "Grow grid (take all space)", + "layout": { + "title": "Dashboard yayout", + "main": "Main", + "sidebar": "Sidebar", + "cannotturnoff": "Cannot be turned off", + "dashboardlayout": "Dashboard layout", + "enablersidebar": "Enable right sidebar", + "enablelsidebar": "Enable left sidebar", + "enablesearchbar": "Enable search bar", + "enabledocker": "Enable docker integration", + "enableping": "Enable pings", + "enablelsidebardescription": "Optional. Can be used for apps and integrations only", + "enablersidebardescription": "Optional. Can be used for apps and integrations only" + } } \ No newline at end of file diff --git a/src/components/About/AboutModal.tsx b/src/components/About/AboutModal.tsx index ea197383c..f7c9b0e08 100644 --- a/src/components/About/AboutModal.tsx +++ b/src/components/About/AboutModal.tsx @@ -1,9 +1,11 @@ import { ActionIcon, + Anchor, Badge, Button, createStyles, Group, + HoverCard, Modal, Table, Text, @@ -17,6 +19,7 @@ import { IconVocabulary, IconWorldWww, } from '@tabler/icons'; +import { motion } from 'framer-motion'; import { InitOptions } from 'i18next'; import { i18n } from 'next-i18next'; import Image from 'next/image'; @@ -27,12 +30,13 @@ import { usePrimaryGradient } from '../layout/useGradient'; interface AboutModalProps { opened: boolean; closeModal: () => void; + newVersionAvailable?: string; } -export const AboutModal = ({ opened, closeModal }: AboutModalProps) => { +export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutModalProps) => { const { classes } = useStyles(); const colorGradiant = usePrimaryGradient(); - const informations = useInformationTableItems(); + const informations = useInformationTableItems(newVersionAvailable); return ( { > Homarr is a simple and modern homepage for your server that helps you access all of your - apps in one place. It integrates with the apps you use to display useful information - or control them. It's easy to install and supports many different devices. + apps in one place. It integrates with the apps you use to display useful information or + control them. It's easy to install and supports many different devices. @@ -123,7 +127,8 @@ interface ExtendedInitOptions extends InitOptions { locales: string[]; } -const useInformationTableItems = (): InformationTableItem[] => { +const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => { + // TODO: Fix this to not request. Pass it as a prop. const colorGradiant = usePrimaryGradient(); let items: InformationTableItem[] = []; @@ -161,9 +166,41 @@ const useInformationTableItems = (): InformationTableItem[] => { icon: <IconVersions size={20} />, label: 'Homarr version', content: ( - <Badge variant="gradient" gradient={colorGradiant}> - {CURRENT_VERSION} - </Badge> + <Group position="right"> + <Badge variant="gradient" gradient={colorGradiant}> + {CURRENT_VERSION} + </Badge> + {newVersionAvailable && ( + <HoverCard shadow="md" position="top" withArrow> + <HoverCard.Target> + <motion.div + initial={{ scale: 1.2 }} + animate={{ + scale: [0.8, 1.10, 1], + rotate: [0, 10, 0], + }} + transition={{ duration: 0.8, ease: 'easeInOut' }} + > + <Badge color="green" variant="filled"> + new: {newVersionAvailable} + </Badge> + </motion.div> + </HoverCard.Target> + <HoverCard.Dropdown> + Version{' '} + <b> + <Anchor + target="_blank" + href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`} + > + {newVersionAvailable} + </Anchor> + </b>{' '} + is available ! Current version: {CURRENT_VERSION} + </HoverCard.Dropdown> + </HoverCard> + )} + </Group> ), }, ]; diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx index ffb30e986..798d81cf2 100644 --- a/src/components/AppShelf/AppShelf.tsx +++ b/src/components/AppShelf/AppShelf.tsx @@ -12,7 +12,6 @@ import { import { arrayMove, SortableContext } from '@dnd-kit/sortable'; import { useLocalStorage } from '@mantine/hooks'; -import { useTranslation } from 'next-i18next'; import * as Modules from '../../modules'; import { useConfig } from '../../tools/state'; @@ -38,8 +37,6 @@ const AppShelf = (props: any) => { const [activeId, setActiveId] = useState(null); const { colorScheme } = useMantineColorScheme(); - const { t } = useTranslation('layout/app-shelf'); - const sensors = useSensors( useSensor(TouchSensor, { activationConstraint: { diff --git a/src/components/Config/ConfigChanger.tsx b/src/components/Config/ConfigChanger.tsx index 9a0947d9b..9df1773f5 100644 --- a/src/components/Config/ConfigChanger.tsx +++ b/src/components/Config/ConfigChanger.tsx @@ -47,11 +47,9 @@ export default function ConfigChanger() { ); } -const useConfigsQuery = () => { - return useQuery({ +const useConfigsQuery = () => useQuery({ queryKey: ['config/get-all'], queryFn: fetchConfigs, }); -}; const fetchConfigs = async () => (await (await fetch('/api/configs')).json()) as string[]; diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index 7ec984c36..35acd4d39 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -3,8 +3,6 @@ import { DashboardDetailView } from './Views/DetailView'; import { DashboardEditView } from './Views/EditView'; import { useEditModeStore } from './Views/useEditModeStore'; -interface DashboardProps {} - export const Dashboard = () => { const isEditMode = useEditModeStore((x) => x.enabled); diff --git a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx b/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx index ccf8e8e7b..9a9002291 100644 --- a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx +++ b/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx @@ -10,8 +10,7 @@ interface MobileRibbonSidebarDrawerProps { export const MobileRibbonSidebarDrawer = ({ location, ...props -}: MobileRibbonSidebarDrawerProps) => { - return ( +}: MobileRibbonSidebarDrawerProps) => ( <Drawer position={location} title={<Title order={4}>{location} sidebar} @@ -24,4 +23,3 @@ export const MobileRibbonSidebarDrawer = ({ ); -}; diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx index 77a393305..e67fc84b1 100644 --- a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx +++ b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx @@ -1,5 +1,6 @@ import { Button, Flex, Grid, NumberInput, Select, SelectItem } from '@mantine/core'; import { useForm } from '@mantine/form'; +import { useTranslation } from 'next-i18next'; import { useConfigContext } from '../../../../config/provider'; interface ChangePositionModalProps { @@ -44,6 +45,8 @@ export const ChangePositionModal = ({ onSubmit(form.values.x, form.values.y, form.values.width, form.values.height); }; + const { t } = useTranslation('common'); + return (
@@ -94,9 +97,9 @@ export const ChangePositionModal = ({ - + ); diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx index 2e5325634..6e1d92f95 100644 --- a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx +++ b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx @@ -22,7 +22,7 @@ export const ChangeWidgetPositionModal = ({ updateConfig( configName, (prev) => { - let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId); + const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId); currentWidget!.shape = { location: { x, diff --git a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx index 1edcc2189..000b6e340 100644 --- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx @@ -1,4 +1,4 @@ -import { Alert, Button, createStyles, Group, Stack, Tabs, Text, ThemeIcon } from '@mantine/core'; +import { Alert, Button, Group, Stack, Tabs, Text, ThemeIcon } from '@mantine/core'; import { useForm } from '@mantine/form'; import { ContextModalProps } from '@mantine/modals'; import { @@ -30,7 +30,7 @@ export const EditAppModal = ({ id, innerProps, }: ContextModalProps<{ app: AppType; allowAppNamePropagation: boolean }>) => { - const { t } = useTranslation(); + const { t } = useTranslation(['layout/modals/add-app', 'common']); const { name: configName, config } = useConfigContext(); const updateConfig = useConfigStore((store) => store.updateConfig); const [allowAppNamePropagation, setAllowAppNamePropagation] = useState( @@ -137,68 +137,76 @@ export const EditAppModal = ({
- setActiveTab(tab as EditAppModalTab)} - defaultValue="general" + - - } - icon={} - value="general" - > - General - - } - icon={} - value="behaviour" - > - Behaviour - - } - icon={} - value="network" - > - Network - - } - icon={} - value="appearance" - > - Appearance - - } - icon={} - value="integration" - > - Integration - - + setActiveTab(tab as EditAppModalTab)} + defaultValue="general" + radius="md" + > + + } + icon={} + value="general" + > + {t('tabs.general')} + + } + icon={} + value="behaviour" + > + {t('tabs.behaviour')} + + } + icon={} + value="network" + > + {t('tabs.network')} + + } + icon={} + value="appearance" + > + {t('tabs.appearance')} + + } + icon={} + value="integration" + > + {t('tabs.integration')} + + - setActiveTab(targetTab)} /> - - - setAllowAppNamePropagation(false)} - allowAppNamePropagation={allowAppNamePropagation} - /> - - + setActiveTab(targetTab)} /> + + + setAllowAppNamePropagation(false)} + allowAppNamePropagation={allowAppNamePropagation} + /> + + - - - - + + + + +
); diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx index 501902479..da5dfd738 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx @@ -16,7 +16,7 @@ export const AppearanceTab = ({ disallowAppNameProgagation, allowAppNamePropagation, }: AppearanceTabProps) => { - const { t } = useTranslation(''); + const { t } = useTranslation('layout/modals/add-app'); const { classes } = useStyles(); return ( @@ -26,8 +26,8 @@ export const AppearanceTab = ({ defaultValue={form.values.appearance.iconUrl} className={classes.textInput} icon={} - label="App Icon" - description="Logo of your app displayed in your dashboard. Must return a body content containg an image" + label={t('appearance.icon.label')} + description={t('appearance.icon.description')} variant="default" withAsterisk required diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx index 7ecc48366..48250ebb6 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx @@ -29,11 +29,7 @@ interface IconSelectorProps { allowAppNamePropagation: boolean; } -export const IconSelector = ({ - onChange, - allowAppNamePropagation, - form, -}: IconSelectorProps) => { +export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSelectorProps) => { const { data, isLoading } = useRepositoryIconsQuery({ url: 'https://api.github.com/repos/walkxcode/Dashboard-Icons/contents/png', converter: (item) => ({ diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx index 384b5b345..2f942927c 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx @@ -1,6 +1,5 @@ -import { Tabs, TextInput, Switch, Text } from '@mantine/core'; +import { Tabs, Switch } from '@mantine/core'; import { UseFormReturnType } from '@mantine/form'; -import { IconClick } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; import { AppType } from '../../../../../../types/app'; @@ -9,21 +8,13 @@ interface BehaviourTabProps { } export const BehaviourTab = ({ form }: BehaviourTabProps) => { - const { t } = useTranslation(''); + const { t } = useTranslation('layout/modals/add-app'); + return ( - } - label="On click url" - description="Overrides the app URL when clicking on the app" - placeholder="URL that should be opened instead when clicking on the app" - variant="default" - mb="md" - {...form.getInputProps('behaviour.onClickUrl')} - /> - diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx index 4e4fcc108..4edaf3b37 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx @@ -1,6 +1,6 @@ -import { Tabs, Text, TextInput } from '@mantine/core'; +import { Tabs, TextInput } from '@mantine/core'; import { UseFormReturnType } from '@mantine/form'; -import { IconCursorText, IconLink } from '@tabler/icons'; +import { IconClick, IconCursorText, IconLink } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; import { AppType } from '../../../../../../types/app'; import { EditAppModalTab } from '../type'; @@ -11,43 +11,42 @@ interface GeneralTabProps { } export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { - const { t } = useTranslation(''); + const { t } = useTranslation('layout/modals/add-app'); return ( - + } - label="App name" - description="Used for displaying the app on the dashboard" + label={t('general.appname.label')} + description={t('general.appname.description')} placeholder="My example app" variant="default" mb="md" withAsterisk + required {...form.getInputProps('name')} /> } - label="App url" - description={ - - URL that will be opened when clicking on the app. Can be overwritten using - openTab('behaviour')} - variant="link" - span - style={{ - cursor: 'pointer', - }} - > - {' '} - on click URL{' '} - - when using external URLs to enhance security. - - } + label={t('general.internalAddress.label')} + description={t('general.internalAddress.description')} placeholder="https://google.com" variant="default" withAsterisk + required {...form.getInputProps('url')} + onChange={(e) => { + form.setFieldValue('behaviour.onClickUrl', e.target.value); + form.setFieldValue('url', e.target.value); + }} + /> + } + label={t('general.externalAddress.label')} + description={t('general.externalAddress.description')} + placeholder="https://homarr.mywebsite.com/" + variant="default" + mb="md" + {...form.getInputProps('behaviour.onClickUrl')} /> ); diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx index a87b96d8b..d768bda1b 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx @@ -11,6 +11,7 @@ import { Title, } from '@mantine/core'; import { TablerIcon } from '@tabler/icons'; +import { useTranslation } from 'next-i18next'; import { useState } from 'react'; interface GenericSecretInputProps { @@ -32,6 +33,7 @@ export const GenericSecretInput = ({ const Icon = setIcon; const [displayUpdateField, setDisplayUpdateField] = useState(false); + const { t } = useTranslation(['layout/modals/add-app', 'common']); return ( @@ -43,7 +45,7 @@ export const GenericSecretInput = ({ - {label} + {t(label)} @@ -51,13 +53,13 @@ export const GenericSecretInput = ({ {displayUpdateField === true ? ( ) : ( )} diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx index a9270ae41..29dd32b16 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx @@ -17,7 +17,7 @@ interface IntegrationSelectorProps { } export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => { - const { t } = useTranslation(''); + const { t } = useTranslation('layout/modals/add-app'); // TODO: read this out from integrations dynamically. const data: SelectItem[] = [ @@ -76,9 +76,9 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => { return (