feat(pdf-monkey): add pdf-monkey integration

feat: Implement API endpoint to show saml auth provider

.devcontainer/devcontainer.json

@@ -8,7 +8,7 @@
       "version": "latest"
     },
     "ghcr.io/devcontainers/features/node:1": {
-      "version": 20
+      "version": 18
     },
     "ghcr.io/devcontainers/features/common-utils:1": {
       "username": "vscode",

packages/backend/src/apps/pdf-monkey/auth/index.js

@@ -0,0 +1,21 @@
+import verifyCredentials from './verify-credentials.js';
+import isStillVerified from './is-still-verified.js';
+
+export default {
+  fields: [
+    {
+      key: 'apiKey',
+      label: 'API Key',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'PDFMonkey API secret key of your account.',
+      clickToCopy: false,
+    },
+  ],
+
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/pdf-monkey/auth/is-still-verified.js

@@ -0,0 +1,8 @@
+import getCurrentUser from '../common/get-current-user.js';
+
+const isStillVerified = async ($) => {
+  const currentUser = await getCurrentUser($);
+  return !!currentUser.id;
+};
+
+export default isStillVerified;

packages/backend/src/apps/pdf-monkey/auth/verify-credentials.js

@@ -0,0 +1,15 @@
+import getCurrentUser from '../common/get-current-user.js';
+
+const verifyCredentials = async ($) => {
+  const currentUser = await getCurrentUser($);
+  const screenName = [currentUser.desired_name, currentUser.email]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    screenName,
+    apiKey: $.auth.data.apiKey,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/pdf-monkey/common/add-auth-header.js

@@ -0,0 +1,9 @@
+const addAuthHeader = ($, requestConfig) => {
+  if ($.auth.data?.apiKey) {
+    requestConfig.headers.Authorization = `Bearer ${$.auth.data.apiKey}`;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/pdf-monkey/common/get-current-user.js

@@ -0,0 +1,8 @@
+const getCurrentUser = async ($) => {
+  const response = await $.http.get('/v1/current_user');
+  const currentUser = response.data.current_user;
+
+  return currentUser;
+};
+
+export default getCurrentUser;

packages/backend/src/apps/pdf-monkey/index.js

@@ -0,0 +1,16 @@
+import defineApp from '../../helpers/define-app.js';
+import addAuthHeader from './common/add-auth-header.js';
+import auth from './auth/index.js';
+
+export default defineApp({
+  name: 'PDFMonkey',
+  key: 'pdf-monkey',
+  iconUrl: '{BASE_URL}/apps/pdf-monkey/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/pdf-monkey/connection',
+  supportsConnections: true,
+  baseUrl: 'https://pdfmonkey.io',
+  apiBaseUrl: 'https://api.pdfmonkey.io/api',
+  primaryColor: 'db2777',
+  beforeRequest: [addAuthHeader],
+  auth,
+});

packages/backend/src/controllers/api/v1/admin/saml-auth-providers/get-saml-auth-provider.ee.js

@@ -0,0 +1,10 @@
+import { renderObject } from '../../../../../helpers/renderer.js';
+import SamlAuthProvider from '../../../../../models/saml-auth-provider.ee.js';
+
+export default async (request, response) => {
+  const samlAuthProvider = await SamlAuthProvider.query()
+    .findById(request.params.samlAuthProviderId)
+    .throwIfNotFound();
+
+  renderObject(response, samlAuthProvider);
+};

packages/backend/src/controllers/api/v1/admin/saml-auth-providers/get-saml-auth-provider.ee.test.js

@@ -0,0 +1,34 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import app from '../../../../../app.js';
+import createAuthTokenByUserId from '../../../../../helpers/create-auth-token-by-user-id.js';
+import { createRole } from '../../../../../../test/factories/role.js';
+import { createUser } from '../../../../../../test/factories/user.js';
+import { createSamlAuthProvider } from '../../../../../../test/factories/saml-auth-provider.ee.js';
+import getSamlAuthProviderMock from '../../../../../../test/mocks/rest/api/v1/saml-auth-providers/get-saml-auth-provider.ee.js';
+import * as license from '../../../../../helpers/license.ee.js';
+
+describe('GET /api/v1/admin/saml-auth-provider/:samlAuthProviderId', () => {
+  let samlAuthProvider, currentUser, token;
+
+  beforeEach(async () => {
+    const role = await createRole({ key: 'admin' });
+    currentUser = await createUser({ roleId: role.id });
+    samlAuthProvider = await createSamlAuthProvider();
+
+    token = createAuthTokenByUserId(currentUser.id);
+  });
+
+  it('should return saml auth provider with specified id', async () => {
+    vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);
+
+    const response = await request(app)
+      .get(`/api/v1/admin/saml-auth-providers/${samlAuthProvider.id}`)
+      .set('Authorization', token)
+      .expect(200);
+
+    const expectedPayload = await getSamlAuthProviderMock(samlAuthProvider);
+
+    expect(response.body).toEqual(expectedPayload);
+  });
+});

packages/backend/src/controllers/api/v1/admin/saml-auth-providers/get-saml-auth-providers.ee.js

@@ -0,0 +1,11 @@
+import { renderObject } from '../../../../../helpers/renderer.js';
+import SamlAuthProvider from '../../../../../models/saml-auth-provider.ee.js';
+
+export default async (request, response) => {
+  const samlAuthProviders = await SamlAuthProvider.query().orderBy(
+    'created_at',
+    'desc'
+  );
+
+  renderObject(response, samlAuthProviders);
+};

packages/backend/src/controllers/api/v1/admin/saml-auth-providers/get-saml-auth-providers.ee.test.js

@@ -0,0 +1,39 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import app from '../../../../../app.js';
+import createAuthTokenByUserId from '../../../../../helpers/create-auth-token-by-user-id.js';
+import { createRole } from '../../../../../../test/factories/role.js';
+import { createUser } from '../../../../../../test/factories/user.js';
+import { createSamlAuthProvider } from '../../../../../../test/factories/saml-auth-provider.ee.js';
+import getSamlAuthProvidersMock from '../../../../../../test/mocks/rest/api/v1/saml-auth-providers/get-saml-auth-providers.ee.js';
+import * as license from '../../../../../helpers/license.ee.js';
+
+describe('GET /api/v1/admin/saml-auth-providers', () => {
+  let samlAuthProviderOne, samlAuthProviderTwo, currentUser, token;
+
+  beforeEach(async () => {
+    const role = await createRole({ key: 'admin' });
+    currentUser = await createUser({ roleId: role.id });
+
+    samlAuthProviderOne = await createSamlAuthProvider();
+    samlAuthProviderTwo = await createSamlAuthProvider();
+
+    token = createAuthTokenByUserId(currentUser.id);
+  });
+
+  it('should return saml auth providers', async () => {
+    vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);
+
+    const response = await request(app)
+      .get('/api/v1/admin/saml-auth-providers')
+      .set('Authorization', token)
+      .expect(200);
+
+    const expectedPayload = await getSamlAuthProvidersMock([
+      samlAuthProviderTwo,
+      samlAuthProviderOne,
+    ]);
+
+    expect(response.body).toEqual(expectedPayload);
+  });
+});

packages/backend/src/helpers/authorization.js

@@ -1,16 +1,17 @@
 const authorizationList = {
-  '/api/v1/users/:userId': {
+  'GET /api/v1/users/:userId': {
     action: 'read',
     subject: 'User',
   },
-  '/api/v1/users/': {
+  'GET /api/v1/users/': {
     action: 'read',
     subject: 'User',
   },
 };
 
 export const authorizeUser = async (request, response, next) => {
-  const currentRoute = request.baseUrl + request.route.path;
+  const currentRoute =
+    request.method + ' ' + request.baseUrl + request.route.path;
   const currentRouteRule = authorizationList[currentRoute];
 
   try {
@@ -20,3 +21,13 @@ export const authorizeUser = async (request, response, next) => {
     return response.status(403).end();
   }
 };
+
+export const authorizeAdmin = async (request, response, next) => {
+  const role = await request.currentUser.$relatedQuery('role');
+
+  if (role?.isAdmin) {
+    next();
+  } else {
+    return response.status(403).end();
+  }
+};

packages/backend/src/helpers/check-is-enterprise.js

@@ -0,0 +1,9 @@
+import { hasValidLicense } from './license.ee.js';
+
+export const checkIsEnterprise = async (request, response, next) => {
+  if (await hasValidLicense()) {
+    next();
+  } else {
+    return response.status(404).end();
+  }
+};

packages/backend/src/helpers/logger.js

@@ -4,8 +4,8 @@ import appConfig from '../config/app.js';
 const levels = {
   error: 0,
   warn: 1,
-  info: 2,
-  http: 3,
+  http: 2,
+  info: 3,
   debug: 4,
 };
 

packages/backend/src/helpers/renderer.js

@@ -15,6 +15,8 @@ const renderObject = (response, object) => {
   let data = isPaginated(object) ? object.records : object;
   const type = isPaginated(object)
     ? object.records[0].constructor.name
+    : Array.isArray(object)
+    ? object[0].constructor.name
     : object.constructor.name;
 
   const serializer = serializers[type];

packages/backend/src/routes/api/v1/saml-auth-providers.ee.js

@@ -0,0 +1,26 @@
+import { Router } from 'express';
+import { authenticateUser } from '../../../helpers/authentication.js';
+import { authorizeAdmin } from '../../../helpers/authorization.js';
+import { checkIsEnterprise } from '../../../helpers/check-is-enterprise.js';
+import getSamlAuthProvidersAction from '../../../controllers/api/v1/admin/saml-auth-providers/get-saml-auth-providers.ee.js';
+import getSamlAuthProviderAction from '../../../controllers/api/v1/admin/saml-auth-providers/get-saml-auth-provider.ee.js';
+
+const router = Router();
+
+router.get(
+  '/',
+  authenticateUser,
+  authorizeAdmin,
+  checkIsEnterprise,
+  getSamlAuthProvidersAction
+);
+
+router.get(
+  '/:samlAuthProviderId',
+  authenticateUser,
+  authorizeAdmin,
+  checkIsEnterprise,
+  getSamlAuthProviderAction
+);
+
+export default router;

packages/backend/src/routes/index.js

@@ -5,6 +5,7 @@ import paddleRouter from './paddle.ee.js';
 import healthcheckRouter from './healthcheck.js';
 import automatischRouter from './api/v1/automatisch.js';
 import usersRouter from './api/v1/users.js';
+import samlAuthProvidersRouter from './api/v1/saml-auth-providers.ee.js';
 
 const router = Router();
 
@@ -14,5 +15,6 @@ router.use('/paddle', paddleRouter);
 router.use('/healthcheck', healthcheckRouter);
 router.use('/api/v1/automatisch', automatischRouter);
 router.use('/api/v1/users', usersRouter);
+router.use('/api/v1/admin/saml-auth-providers', samlAuthProvidersRouter);
 
 export default router;

packages/backend/src/serializers/index.js

@@ -1,11 +1,13 @@
 import userSerializer from './user.js';
 import roleSerializer from './role.js';
 import permissionSerializer from './permission.js';
+import samlAuthProviderSerializer from './saml-auth-provider.ee.js';
 
 const serializers = {
   User: userSerializer,
   Role: roleSerializer,
   Permission: permissionSerializer,
+  SamlAuthProvider: samlAuthProviderSerializer,
 };
 
 export default serializers;

packages/backend/src/serializers/permission.test.js

@@ -0,0 +1,25 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createPermission } from '../../test/factories/permission';
+import permissionSerializer from './permission';
+
+describe('permissionSerializer', () => {
+  let permission;
+
+  beforeEach(async () => {
+    permission = await createPermission();
+  });
+
+  it('should return permission data', async () => {
+    const expectedPayload = {
+      id: permission.id,
+      roleId: permission.roleId,
+      action: permission.action,
+      subject: permission.subject,
+      conditions: permission.conditions,
+      createdAt: permission.createdAt,
+      updatedAt: permission.updatedAt,
+    };
+
+    expect(permissionSerializer(permission)).toEqual(expectedPayload);
+  });
+});

packages/backend/src/serializers/role.test.js

@@ -0,0 +1,25 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createRole } from '../../test/factories/role';
+import roleSerializer from './role';
+
+describe('roleSerializer', () => {
+  let role;
+
+  beforeEach(async () => {
+    role = await createRole();
+  });
+
+  it('should return role data', async () => {
+    const expectedPayload = {
+      id: role.id,
+      name: role.name,
+      key: role.key,
+      description: role.description,
+      createdAt: role.createdAt,
+      updatedAt: role.updatedAt,
+      isAdmin: role.isAdmin,
+    };
+
+    expect(roleSerializer(role)).toEqual(expectedPayload);
+  });
+});

packages/backend/src/serializers/saml-auth-provider.ee.js

@@ -0,0 +1,18 @@
+const samlAuthProviderSerializer = (samlAuthProvider) => {
+  return {
+    id: samlAuthProvider.id,
+    name: samlAuthProvider.name,
+    certificate: samlAuthProvider.certificate,
+    signatureAlgorithm: samlAuthProvider.signatureAlgorithm,
+    issuer: samlAuthProvider.issuer,
+    entryPoint: samlAuthProvider.entryPoint,
+    firstnameAttributeName: samlAuthProvider.firstnameAttributeName,
+    surnameAttributeName: samlAuthProvider.surnameAttributeName,
+    emailAttributeName: samlAuthProvider.emailAttributeName,
+    roleAttributeName: samlAuthProvider.roleAttributeName,
+    active: samlAuthProvider.active,
+    defaultRoleId: samlAuthProvider.defaultRoleId,
+  };
+};
+
+export default samlAuthProviderSerializer;

packages/backend/src/serializers/saml-auth-provider.ee.test.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createSamlAuthProvider } from '../../test/factories/saml-auth-provider.ee.js';
+import samlAuthProviderSerializer from './saml-auth-provider.ee.js';
+
+describe('samlAuthProviderSerializer', () => {
+  let samlAuthProvider;
+
+  beforeEach(async () => {
+    samlAuthProvider = await createSamlAuthProvider();
+  });
+
+  it('should return saml auth provider data', async () => {
+    const expectedPayload = {
+      id: samlAuthProvider.id,
+      name: samlAuthProvider.name,
+      certificate: samlAuthProvider.certificate,
+      signatureAlgorithm: samlAuthProvider.signatureAlgorithm,
+      issuer: samlAuthProvider.issuer,
+      entryPoint: samlAuthProvider.entryPoint,
+      firstnameAttributeName: samlAuthProvider.firstnameAttributeName,
+      surnameAttributeName: samlAuthProvider.surnameAttributeName,
+      emailAttributeName: samlAuthProvider.emailAttributeName,
+      roleAttributeName: samlAuthProvider.roleAttributeName,
+      active: samlAuthProvider.active,
+      defaultRoleId: samlAuthProvider.defaultRoleId,
+    };
+
+    expect(samlAuthProviderSerializer(samlAuthProvider)).toEqual(
+      expectedPayload
+    );
+  });
+});

packages/backend/src/serializers/user.test.js

@@ -0,0 +1,76 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { DateTime } from 'luxon';
+import appConfig from '../config/app';
+import { createUser } from '../../test/factories/user';
+import { createPermission } from '../../test/factories/permission';
+import userSerializer from './user';
+
+describe('userSerializer', () => {
+  let user, role, permissionOne, permissionTwo;
+
+  beforeEach(async () => {
+    user = await createUser();
+    role = await user.$relatedQuery('role');
+
+    permissionOne = await createPermission({
+      roleId: role.id,
+      action: 'read',
+      subject: 'User',
+    });
+
+    permissionTwo = await createPermission({
+      roleId: role.id,
+      action: 'read',
+      subject: 'Role',
+    });
+  });
+
+  it('should return user data', async () => {
+    vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(false);
+
+    const expectedPayload = {
+      createdAt: user.createdAt,
+      email: user.email,
+      fullName: user.fullName,
+      id: user.id,
+      roleId: user.roleId,
+      updatedAt: user.updatedAt,
+    };
+
+    expect(userSerializer(user)).toEqual(expectedPayload);
+  });
+
+  it('should return user data with the role', async () => {
+    user.role = role;
+
+    const expectedPayload = {
+      role,
+    };
+
+    expect(userSerializer(user)).toMatchObject(expectedPayload);
+  });
+
+  it('should return user data with the permissions', async () => {
+    user.permissions = [permissionOne, permissionTwo];
+
+    const expectedPayload = {
+      permissions: [permissionOne, permissionTwo],
+    };
+
+    expect(userSerializer(user)).toMatchObject(expectedPayload);
+  });
+
+  it('should return user data with trial expiry date', async () => {
+    vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(true);
+
+    await user.$query().patch({
+      trialExpiryDate: DateTime.now().plus({ days: 30 }).toISODate(),
+    });
+
+    const expectedPayload = {
+      trialExpiryDate: user.trialExpiryDate,
+    };
+
+    expect(userSerializer(user)).toMatchObject(expectedPayload);
+  });
+});

packages/backend/test/factories/saml-auth-provider.ee.js

@@ -0,0 +1,33 @@
+import { createRole } from './role';
+import SamlAuthProvider from '../../src/models/saml-auth-provider.ee.js';
+
+export const createSamlAuthProvider = async (params = {}) => {
+  params.name = params?.name || 'Keycloak SAML';
+  params.certificate = params?.certificate || 'certificate';
+  params.signatureAlgorithm = params?.signatureAlgorithm || 'sha512';
+
+  params.entryPoint =
+    params?.entryPoint ||
+    'https://example.com/auth/realms/automatisch/protocol/saml';
+
+  params.issuer = params?.issuer || 'automatisch-client';
+
+  params.firstnameAttributeName =
+    params?.firstnameAttributeName || 'urn:oid:2.1.1.42';
+
+  params.surnameAttributeName =
+    params?.surnameAttributeName || 'urn:oid:2.1.1.4';
+
+  params.emailAttributeName =
+    params?.emailAttributeName || 'urn:oid:1.1.2342.19200300.100.1.1';
+
+  params.roleAttributeName = params?.roleAttributeName || 'Role';
+  params.defaultRoleId = params?.defaultRoleId || (await createRole()).id;
+  params.active = params?.active || true;
+
+  const samlAuthProvider = await SamlAuthProvider.query()
+    .insert(params)
+    .returning('*');
+
+  return samlAuthProvider;
+};

packages/backend/test/mocks/rest/api/v1/saml-auth-providers/get-saml-auth-provider.ee.js

@@ -0,0 +1,29 @@
+const getSamlAuthProvidersMock = async (samlAuthProvider) => {
+  const data = {
+    active: samlAuthProvider.active,
+    certificate: samlAuthProvider.certificate,
+    defaultRoleId: samlAuthProvider.defaultRoleId,
+    emailAttributeName: samlAuthProvider.emailAttributeName,
+    entryPoint: samlAuthProvider.entryPoint,
+    firstnameAttributeName: samlAuthProvider.firstnameAttributeName,
+    id: samlAuthProvider.id,
+    issuer: samlAuthProvider.issuer,
+    name: samlAuthProvider.name,
+    roleAttributeName: samlAuthProvider.roleAttributeName,
+    signatureAlgorithm: samlAuthProvider.signatureAlgorithm,
+    surnameAttributeName: samlAuthProvider.surnameAttributeName,
+  };
+
+  return {
+    data: data,
+    meta: {
+      count: 1,
+      currentPage: null,
+      isArray: false,
+      totalPages: null,
+      type: 'SamlAuthProvider',
+    },
+  };
+};
+
+export default getSamlAuthProvidersMock;

packages/backend/test/mocks/rest/api/v1/saml-auth-providers/get-saml-auth-providers.ee.js

@@ -0,0 +1,31 @@
+const getSamlAuthProvidersMock = async (samlAuthProviders) => {
+  const data = samlAuthProviders.map((samlAuthProvider) => {
+    return {
+      active: samlAuthProvider.active,
+      certificate: samlAuthProvider.certificate,
+      defaultRoleId: samlAuthProvider.defaultRoleId,
+      emailAttributeName: samlAuthProvider.emailAttributeName,
+      entryPoint: samlAuthProvider.entryPoint,
+      firstnameAttributeName: samlAuthProvider.firstnameAttributeName,
+      id: samlAuthProvider.id,
+      issuer: samlAuthProvider.issuer,
+      name: samlAuthProvider.name,
+      roleAttributeName: samlAuthProvider.roleAttributeName,
+      signatureAlgorithm: samlAuthProvider.signatureAlgorithm,
+      surnameAttributeName: samlAuthProvider.surnameAttributeName,
+    };
+  });
+
+  return {
+    data: data,
+    meta: {
+      count: data.length,
+      currentPage: null,
+      isArray: true,
+      totalPages: null,
+      type: 'SamlAuthProvider',
+    },
+  };
+};
+
+export default getSamlAuthProvidersMock;

packages/docs/pages/.vitepress/config.js

@@ -252,6 +252,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/openai/connection' },
           ],
         },
+        {
+          text: 'PDFMonkey',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/pdf-monkey/connection' }],
+        },
         {
           text: 'Pipedrive',
           collapsible: true,
@@ -305,7 +311,7 @@ export default defineConfig({
           collapsed: true,
           items: [
             { text: 'Actions', link: '/apps/removebg/actions' },
-            { text: 'Connection', link: '/apps/removebg/connection' }
+            { text: 'Connection', link: '/apps/removebg/connection' },
           ],
         },
         {

packages/docs/pages/apps/pdf-monkey/connection.md

@@ -0,0 +1,11 @@
+# PDFMonkey
+
+:::info
+This page explains the steps you need to follow to set up the PDFMonkey
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Login to your PDFMonkey account: [https://dashboard.pdfmonkey.io/login](https://dashboard.pdfmonkey.io/login).
+2. Go to **My Account** section from your profile.
+3. Copy `API SECRET KEY` from the page to the `API Key` field on Automatisch.
+4. Now, you can start using the PDFMonkey connection with Automatisch.

packages/web/src/components/Layout/index.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import Stack from '@mui/material/Stack';
 import AppsIcon from '@mui/icons-material/Apps';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import HistoryIcon from '@mui/icons-material/History';
@@ -139,7 +140,7 @@ export default function PublicLayout({
         onDrawerClose={closeDrawer}
       />
 
-      <Box sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex', height: '100%' }}>
         <Drawer
           links={drawerLinks}
           bottomLinks={bottomLinks}
@@ -148,11 +149,10 @@ export default function PublicLayout({
           onClose={closeDrawer}
         />
 
-        <Box sx={{ flex: 1 }}>
+        <Stack flex={1}>
           <Toolbar />
-
           {children}
-        </Box>
+        </Stack>
       </Box>
     </>
   );

packages/web/src/components/NotFound/index.tsx

@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useAuthentication from 'hooks/useAuthentication';
+import Layout from 'components/Layout';
+import PublicLayout from 'components/PublicLayout';
+
+export default function NoResultFound(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const { isAuthenticated } = useAuthentication();
+
+  const pageContent = (
+    <Stack
+      justifyContent="center"
+      alignItems="center"
+      flex={1}
+      spacing={1}
+      p={2}
+      mb={11}
+    >
+      <Typography variant="h1" color="primary" textAlign="center">
+        404
+      </Typography>
+      <Typography variant="body1" textAlign="center">
+        {formatMessage('notFoundPage.title')}
+      </Typography>
+      <Link to={isAuthenticated ? URLS.FLOWS : URLS.LOGIN}>
+        <Button variant="contained" sx={{ mt: 3 }} component="div">
+          {formatMessage('notFoundPage.button')}
+        </Button>
+      </Link>
+    </Stack>
+  );
+
+  return isAuthenticated ? (
+    <Layout>{pageContent}</Layout>
+  ) : (
+    <PublicLayout>{pageContent}</PublicLayout>
+  );
+}

packages/web/src/locales/en.json

@@ -265,5 +265,7 @@
   "authClient.buttonSubmit": "Submit",
   "authClient.inputName": "Name",
   "authClient.inputActive": "Active",
-  "updateAuthClient.title": "Update auth client"
+  "updateAuthClient.title": "Update auth client",
+  "notFoundPage.title": "We can't seem to find a page you're looking for.",
+  "notFoundPage.button": "Back to home page"
 }

packages/web/src/routes.tsx

@@ -1,5 +1,6 @@
-import { Route, Routes, Navigate } from 'react-router-dom';
+import { Route, Routes as ReactRouterRoutes, Navigate } from 'react-router-dom';
 import Layout from 'components/Layout';
+import NoResultFound from 'components/NotFound';
 import PublicLayout from 'components/PublicLayout';
 import Applications from 'pages/Applications';
 import Application from 'pages/Application';
@@ -17,127 +18,134 @@ import * as URLS from 'config/urls';
 import settingsRoutes from './settingsRoutes';
 import adminSettingsRoutes from './adminSettingsRoutes';
 import Notifications from 'pages/Notifications';
+import useConfig from 'hooks/useConfig';
+import useAuthentication from 'hooks/useAuthentication';
 
-export default (
-  <Routes>
-    <Route
-      path={URLS.EXECUTIONS}
-      element={
-        <Layout>
-          <Executions />
-        </Layout>
-      }
-    />
+function Routes() {
+  const { config } = useConfig();
+  const { isAuthenticated } = useAuthentication();
 
-    <Route
-      path={URLS.EXECUTION_PATTERN}
-      element={
-        <Layout>
-          <Execution />
-        </Layout>
-      }
-    />
+  return (
+    <ReactRouterRoutes>
+      <Route
+        path={URLS.EXECUTIONS}
+        element={
+          <Layout>
+            <Executions />
+          </Layout>
+        }
+      />
 
-    <Route
-      path={URLS.FLOWS}
-      element={
-        <Layout>
-          <Flows />
-        </Layout>
-      }
-    />
+      <Route
+        path={URLS.EXECUTION_PATTERN}
+        element={
+          <Layout>
+            <Execution />
+          </Layout>
+        }
+      />
 
-    <Route
-      path={URLS.FLOW_PATTERN}
-      element={
-        <Layout>
-          <Flow />
-        </Layout>
-      }
-    />
+      <Route
+        path={URLS.FLOWS}
+        element={
+          <Layout>
+            <Flows />
+          </Layout>
+        }
+      />
 
-    <Route
-      path={`${URLS.APPS}/*`}
-      element={
-        <Layout>
-          <Applications />
-        </Layout>
-      }
-    />
+      <Route
+        path={URLS.FLOW_PATTERN}
+        element={
+          <Layout>
+            <Flow />
+          </Layout>
+        }
+      />
 
-    <Route
-      path={`${URLS.APP_PATTERN}/*`}
-      element={
-        <Layout>
-          <Application />
-        </Layout>
-      }
-    />
+      <Route
+        path={`${URLS.APPS}/*`}
+        element={
+          <Layout>
+            <Applications />
+          </Layout>
+        }
+      />
 
-    <Route path={`${URLS.EDITOR}/*`} element={<EditorRoutes />} />
+      <Route
+        path={`${URLS.APP_PATTERN}/*`}
+        element={
+          <Layout>
+            <Application />
+          </Layout>
+        }
+      />
 
-    <Route
-      path={URLS.LOGIN}
-      element={
-        <PublicLayout>
-          <Login />
-        </PublicLayout>
-      }
-    />
+      <Route path={`${URLS.EDITOR}/*`} element={<EditorRoutes />} />
 
-    <Route
-      path={URLS.LOGIN_CALLBACK}
-      element={<LoginCallback />}
-    />
+      <Route
+        path={URLS.LOGIN}
+        element={
+          <PublicLayout>
+            <Login />
+          </PublicLayout>
+        }
+      />
 
-    <Route
-      path={URLS.SIGNUP}
-      element={
-        <PublicLayout>
-          <SignUp />
-        </PublicLayout>
-      }
-    />
+      <Route path={URLS.LOGIN_CALLBACK} element={<LoginCallback />} />
 
-    <Route
-      path={URLS.FORGOT_PASSWORD}
-      element={
-        <PublicLayout>
-          <ForgotPassword />
-        </PublicLayout>
-      }
-    />
+      <Route
+        path={URLS.SIGNUP}
+        element={
+          <PublicLayout>
+            <SignUp />
+          </PublicLayout>
+        }
+      />
 
-    <Route
-      path={URLS.RESET_PASSWORD}
-      element={
-        <PublicLayout>
-          <ResetPassword />
-        </PublicLayout>
-      }
-    />
+      <Route
+        path={URLS.FORGOT_PASSWORD}
+        element={
+          <PublicLayout>
+            <ForgotPassword />
+          </PublicLayout>
+        }
+      />
 
-    <Route
-      path={URLS.UPDATES}
-      element={
-        <Layout>
-          <Notifications />
-        </Layout>
-      }
-    />
+      <Route
+        path={URLS.RESET_PASSWORD}
+        element={
+          <PublicLayout>
+            <ResetPassword />
+          </PublicLayout>
+        }
+      />
 
-    <Route path="/" element={<Navigate to={URLS.FLOWS} replace />} />
+      {!config?.disableNotificationsPage && (
+        <Route
+          path={URLS.UPDATES}
+          element={
+            <Layout>
+              <Notifications />
+            </Layout>
+          }
+        />
+      )}
 
-    <Route path={URLS.SETTINGS}>{settingsRoutes}</Route>
+      <Route
+        path="/"
+        element={
+          <Navigate to={isAuthenticated ? URLS.FLOWS : URLS.LOGIN} replace />
+        }
+      />
 
-    <Route path={URLS.ADMIN_SETTINGS}>{adminSettingsRoutes}</Route>
+      <Route path={URLS.SETTINGS}>{settingsRoutes}</Route>
 
-    <Route
-      element={
-        <Layout>
-          <div>404</div>
-        </Layout>
-      }
-    />
-  </Routes>
-);
+      <Route path={URLS.ADMIN_SETTINGS}>{adminSettingsRoutes}</Route>
+
+      <Route path="*" element={<NoResultFound />} />
+    </ReactRouterRoutes>
+  );
+}
+
+export default <Routes />;