wip port add instance modal to client page

.eslintrc.cjs

@@ -33,7 +33,7 @@ module.exports = {
         code: 90,
         comments: 140,
         tabWidth: 2,
-        ignorePattern: '^import .* |.*LL\\..*|.*d=.*',
+        ignorePattern: '^(import .* |.*LL\\..*|.*d=.*|.*from \')',
         ignoreComments: true,
         ignoreRegExpLiterals: true,
         ignoreTemplateLiterals: true,

src-tauri/src/commands.rs

@@ -144,13 +144,19 @@ pub struct CreateDeviceResponse {
     device: Device,
 }
 
+#[derive(Serialize, Deserialize, Debug)]
+pub struct SaveDeviceConfigResponse {
+    locations: Vec<Location>,
+    instance: Instance,
+}
+
 #[tauri::command(async)]
 pub async fn save_device_config(
     private_key: String,
     response: CreateDeviceResponse,
     app_state: State<'_, AppState>,
     handle: tauri::AppHandle,
-) -> Result<(), Error> {
+) -> Result<SaveDeviceConfigResponse, Error> {
     debug!("Received device configuration: {:#?}", response);
 
     let mut transaction = app_state.get_pool().begin().await?;
@@ -175,7 +181,11 @@ pub async fn save_device_config(
         Location::find_by_instance_id(&app_state.get_pool(), instance.id.unwrap()).await?;
     trace!("Created following locations: {:#?}", locations);
     handle.emit_all("instance-update", ())?;
-    Ok(())
+    let res: SaveDeviceConfigResponse = SaveDeviceConfigResponse {
+        locations,
+        instance,
+    };
+    Ok(res)
 }
 
 #[tauri::command(async)]

src/components/App/App.tsx

@@ -21,6 +21,8 @@ import TypesafeI18n from '../../i18n/i18n-react';
 import { detectLocale } from '../../i18n/i18n-util';
 import { loadLocaleAsync } from '../../i18n/i18n-util.async';
 import { ClientPage } from '../../pages/client/ClientPage';
+import { ClientAddInstancePage } from '../../pages/client/pages/ClientAddInstancePage/ClientAddInstnacePage';
+import { ClientInstancePage } from '../../pages/client/pages/ClientInstancePage/ClientInstancePage';
 import { EnrollmentPage } from '../../pages/enrollment/EnrollmentPage';
 import { SessionTimeoutPage } from '../../pages/sessionTimeout/SessionTimeoutPage';
 import { ToastManager } from '../../shared/defguard-ui/components/Layout/ToastManager/ToastManager';
@@ -39,23 +41,38 @@ const queryClient = new QueryClient();
 const router = createBrowserRouter([
   {
     index: true,
-    element: <Navigate to={routes.client} />,
+    element: <Navigate to={routes.client.base} />,
   },
   {
-    path: routes.timeout,
+    path: '/timeout',
     element: <SessionTimeoutPage />,
   },
   {
-    path: routes.enrollment,
+    path: '/enrollment',
     element: <EnrollmentPage />,
   },
   {
-    path: routes.client,
+    path: '/client',
     element: <ClientPage />,
+    children: [
+      {
+        path: '/client/',
+        index: true,
+        element: <ClientInstancePage />,
+      },
+      {
+        path: '/client/add-instance',
+        element: <ClientAddInstancePage />,
+      },
+      {
+        path: '/client/*',
+        element: <Navigate to={routes.client.base} />,
+      },
+    ],
   },
   {
     path: '/*',
-    element: <Navigate to={routes.client} replace />,
+    element: <Navigate to={routes.client.base} replace />,
   },
 ]);
 

src/i18n/en/index.ts

@@ -50,83 +50,103 @@ const en = {
   },
   pages: {
     client: {
-      title: 'Locations',
-      sideBar: {
-        instances: 'Instances',
-        addInstance: 'Enter token',
-        copyright: {
-          copyright: `Copyright © 2023`,
-          appVersion: 'Application version: {version:string}',
-        },
-      },
-      controls: {
-        connect: 'Connect',
-        disconnect: 'Disconnect',
-      },
-      header: {
-        title: 'Locations',
-        filters: {
-          views: {
-            grid: 'Grid View',
-            detail: 'Detail View',
+      pages: {
+        instancePage: {
+          title: 'Locations',
+          controls: {
+            connect: 'Connect',
+            disconnect: 'Disconnect',
           },
-        },
-      },
-      connectionLabels: {
-        lastConnectedFrom: 'Last connected from',
-        lastConnected: 'Last connected',
-        connectedFrom: 'Connected from',
-        assignedIp: 'Assigned IP',
-        active: 'Active',
-        neverConnected: 'Never connected',
-      },
-      locationNoData: {
-        title: 'Never Connected',
-        content:
-          'This device was never connected to this location, connect to view statistics and information about connection',
-      },
-      detailView: {
-        history: {
-          title: 'Connection history',
-          headers: {
-            date: 'Date',
-            duration: 'Duration',
+          header: {
+            title: 'Locations',
+            filters: {
+              views: {
+                grid: 'Grid View',
+                detail: 'Detail View',
+              },
+            },
+          },
+          connectionLabels: {
+            lastConnectedFrom: 'Last connected from',
+            lastConnected: 'Last connected',
             connectedFrom: 'Connected from',
-            upload: 'Upload',
-            download: 'Download',
+            assignedIp: 'Assigned IP',
+            active: 'Active',
+            neverConnected: 'Never connected',
           },
-        },
-      },
-      modals: {
-        addInstanceModal: {
-          titles: {
-            addInstance: 'Enter token',
-            addDevice: 'Add device',
+          locationNoData: {
+            title: 'Never Connected',
+            content:
+              'This device was never connected to this location, connect to view statistics and information about connection',
           },
-          messages: {
-            success: {
-              add: 'Instance added',
-              update: 'Instance information updated',
+          detailView: {
+            history: {
+              title: 'Connection history',
+              headers: {
+                date: 'Date',
+                duration: 'Duration',
+                connectedFrom: 'Connected from',
+                upload: 'Upload',
+                download: 'Download',
+              },
             },
-            error: 'Operation failed, check url and token.',
           },
-          form: {
-            submit: {
-              submitToken: 'Submit token',
-              addDevice: 'Add device',
-            },
-            fields: {
-              token: {
-                label: 'Token',
+        },
+        addInstancePage: {
+          title: 'Add Instance',
+          forms: {
+            initInstance: {
+              title: 'Please provide Instance URL and token',
+              labels: {
+                url: 'Instance URL',
+                token: 'Token',
               },
-              url: {
-                label: 'Proxy URL',
+              submit: 'Add Instance',
+            },
+            device: {
+              title: 'Name this device',
+              labels: {
+                name: 'Name',
               },
-              name: {
-                label: 'Name',
+              submit: 'Finish',
+              messages: {
+                addSuccess: 'Device added',
               },
             },
           },
+          guide: {
+            title: 'Adding Instances and connecting to VPN locations',
+            subTitle:
+              'In order to activate this device and access all VPN locations, you must provide the URL to your defguard instance and enter the activation token.',
+            card: {
+              title: 'You can obtain the token by',
+              content: `
+                <p>1. Invoking Remote Desktop activation process yourself</p>
+                <div>
+                <p>
+                If you have access to your defguard instance (either you are at home/office where defguard is accessible), go to defguard -> your profile -> "Add device" and choose: Activate Defguard Client. Then select if you wish to have the token sent to you by email or just copy it from defguard.
+                </p>
+                </div>
+                <p>2. Activating remotely by your administrator</p>
+                <div>
+                <p>
+                If you do not have access to defguard - please contact your administrator (in your onboarding message/email there were the admin contact details) and ask for Remote desktop activation - best to send you the activation email, from which you can copy the instance URL & token.
+                </p>
+                </div>
+                <p>
+                For more help, please visit defguard help (https://defguard.gitbook.io/)
+                </p>
+              `,
+            },
+          },
+        },
+      },
+      sideBar: {
+        instances: 'Instances',
+        addInstance: 'Add Instance',
+        copyright: {
+          copyright: `Copyright © 2023`,
+          appVersion: 'Application version: {version:string}',
         },
       },
     },