diff --git a/apps/client/src/features/app-settings/AppSettings.tsx b/apps/client/src/features/app-settings/AppSettings.tsx
index 36103aebf..12142da2f 100644
--- a/apps/client/src/features/app-settings/AppSettings.tsx
+++ b/apps/client/src/features/app-settings/AppSettings.tsx
@@ -7,6 +7,7 @@ import IntegrationsPanel from './panel/integrations-panel/IntegrationsPanel';
import LogPanel from './panel/log-panel/LogPanel';
import ProjectPanel from './panel/project-panel/ProjectPanel';
import ProjectSettingsPanel from './panel/project-settings-panel/ProjectSettingsPanel';
+import UrlAliasPanel from './panel/url-alias-panel/UrlAliasPanel';
import PanelContent from './panel-content/PanelContent';
import PanelList from './panel-list/PanelList';
import { useSettingsStore } from './settingsStore';
@@ -30,6 +31,7 @@ export default function AppSettings() {
{selectedPanel === 'project' && }
{selectedPanel === 'integrations' && }
{selectedPanel === 'project_settings' && }
+ {selectedPanel === 'url_alias' && }
{selectedPanel === 'about' && }
{selectedPanel === 'log' && }
diff --git a/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx
new file mode 100644
index 000000000..c6a1dc3c9
--- /dev/null
+++ b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasList.tsx
@@ -0,0 +1,32 @@
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
+
+import ModalLink from '../../../../features/modals/ModalLink';
+import * as Panel from '../PanelUtils';
+
+const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
+
+export default function UrlAliasList() {
+ return (
+ <>
+ URL Aliases
+
+
+
+
+
+
+
URL Aliases
+
+ Custom aliases allow providing a short name for any ontime URL.
+ It serves two primary purposes:
+ - Providing dynamic URLs for automation or unattended screens
- Simplifying complex URLs
+ For more information, see the docs
+
+
+
+
+
+
+ >
+ );
+}
diff --git a/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.module.scss b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx
new file mode 100644
index 000000000..85256c698
--- /dev/null
+++ b/apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.tsx
@@ -0,0 +1,34 @@
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
+
+import ModalLink from '../../../../features/modals/ModalLink';
+import * as Panel from '../PanelUtils';
+
+import style from './UrlAliasPanel.module.scss';
+
+const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
+
+export default function UrlAliasPanel() {
+ return (
+ <>
+ URL Aliases
+
+
+
+
+
+
+
URL Aliases
+
+ Custom aliases allow providing a short name for any ontime URL.
+ It serves two primary purposes:
+ - Providing dynamic URLs for automation or unattended screens
- Simplifying complex URLs
+ For more information, see the docs
+
+
+
+
+
+
+ >
+ );
+}
diff --git a/apps/client/src/features/app-settings/settingsStore.ts b/apps/client/src/features/app-settings/settingsStore.ts
index 1e6cfffbe..753d1f8f6 100644
--- a/apps/client/src/features/app-settings/settingsStore.ts
+++ b/apps/client/src/features/app-settings/settingsStore.ts
@@ -35,6 +35,7 @@ export const settingPanels: Readonly = [
],
},
{ id: 'log', label: 'Log', split: true },
+ { id: 'url_alias', label: 'URL Aliases' },
{
id: 'about',
label: 'About',
diff --git a/apps/client/src/features/modals/settings-modal/AliasesForm.tsx b/apps/client/src/features/modals/settings-modal/AliasesForm.tsx
index 7937e8b5e..ab5b92def 100644
--- a/apps/client/src/features/modals/settings-modal/AliasesForm.tsx
+++ b/apps/client/src/features/modals/settings-modal/AliasesForm.tsx
@@ -85,6 +85,8 @@ export default function AliasesForm() {
return ;
}
+ console.log({ fields });
+
return (