scripted cli path for standalone device creation

Author: filipslezaklab

web/src/i18n/en/index.ts

@@ -54,6 +54,10 @@ const en: BaseTranslation = {
       },
     },
     addStandaloneDevice: {
+      toasts: {
+        deviceCreated: 'Device added',
+        creationFailed: 'Device could not be added.',
+      },
       infoBox: {
         setup:
           'Here you can add definitions or generate configurations for devices that can connect to your VPN. Only locations without Multi-Factor Authentication are available here, as MFA is only supported in Defguard Desktop Client for now.',

web/src/i18n/i18n-types.ts

@@ -176,6 +176,16 @@ type RootTranslation = {
 			}
 		}
 		addStandaloneDevice: {
+			toasts: {
+				/**
+				 * D​e​v​i​c​e​ ​a​d​d​e​d
+				 */
+				deviceCreated: string
+				/**
+				 * D​e​v​i​c​e​ ​c​o​u​l​d​ ​n​o​t​ ​b​e​ ​a​d​d​e​d​.
+				 */
+				creationFailed: string
+			}
 			infoBox: {
 				/**
 				 * H​e​r​e​ ​y​o​u​ ​c​a​n​ ​a​d​d​ ​d​e​f​i​n​i​t​i​o​n​s​ ​o​r​ ​g​e​n​e​r​a​t​e​ ​c​o​n​f​i​g​u​r​a​t​i​o​n​s​ ​f​o​r​ ​d​e​v​i​c​e​s​ ​t​h​a​t​ ​c​a​n​ ​c​o​n​n​e​c​t​ ​t​o​ ​y​o​u​r​ ​V​P​N​.​ ​O​n​l​y​ ​l​o​c​a​t​i​o​n​s​ ​w​i​t​h​o​u​t​ ​M​u​l​t​i​-​F​a​c​t​o​r​ ​A​u​t​h​e​n​t​i​c​a​t​i​o​n​ ​a​r​e​ ​a​v​a​i​l​a​b​l​e​ ​h​e​r​e​,​ ​a​s​ ​M​F​A​ ​i​s​ ​o​n​l​y​ ​s​u​p​p​o​r​t​e​d​ ​i​n​ ​D​e​f​g​u​a​r​d​ ​D​e​s​k​t​o​p​ ​C​l​i​e​n​t​ ​f​o​r​ ​n​o​w​.
@@ -4947,6 +4957,16 @@ export type TranslationFunctions = {
 			}
 		}
 		addStandaloneDevice: {
+			toasts: {
+				/**
+				 * Device added
+				 */
+				deviceCreated: () => LocalizedString
+				/**
+				 * Device could not be added.
+				 */
+				creationFailed: () => LocalizedString
+			}
 			infoBox: {
 				/**
 				 * Here you can add definitions or generate configurations for devices that can connect to your VPN. Only locations without Multi-Factor Authentication are available here, as MFA is only supported in Defguard Desktop Client for now.

web/src/pages/overview/modals/AddStandaloneDeviceModal/steps/FinishCliStep/FinishCliStep.tsx

@@ -1,5 +1,6 @@
 import './style.scss';
 
+import { useMemo } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../../../i18n/i18n-react';
@@ -13,12 +14,24 @@ import {
 import { ExpandableCard } from '../../../../../../shared/defguard-ui/components/Layout/ExpandableCard/ExpandableCard';
 import { MessageBox } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox';
 import { MessageBoxType } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/types';
+import { useClipboard } from '../../../../../../shared/hooks/useClipboard';
 import { useAddStandaloneDeviceModal } from '../../store';
 
 export const FinishCliStep = () => {
   const { LL } = useI18nContext();
   const localLL = LL.modals.addStandaloneDevice.steps.cli.finish;
   const [closeModal] = useAddStandaloneDeviceModal((s) => [s.close], shallow);
+  const enroll = useAddStandaloneDeviceModal((s) => s.enrollResponse);
+  const { writeToClipboard } = useClipboard();
+
+  const commandToCopy = useMemo(() => {
+    if (enroll) {
+      return `defguard -u ${enroll.enrollment_url} -t ${enroll.enrollment_token}`;
+    }
+    return '';
+  }, [enroll]);
+
+  if (!enroll) return null;
   return (
     <div className="finish-cli-step">
       <MessageBox
@@ -32,18 +45,25 @@ export const FinishCliStep = () => {
             text={localLL.downloadButton()}
             size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.PRIMARY}
+            onClick={() => {}}
           />
         </a>
       </div>
       <ExpandableCard
         title={localLL.commandCopy()}
         actions={[
-          <ActionButton variant={ActionButtonVariant.COPY} onClick={() => {}} key={0} />,
+          <ActionButton
+            variant={ActionButtonVariant.COPY}
+            onClick={() => {
+              writeToClipboard(commandToCopy);
+            }}
+            key={0}
+          />,
         ]}
         expanded={true}
         disableExpand={true}
       >
-        <p>{'defguard -u https://enrollment.defguard.net -t sdf$&9234&8dfsk345LSD3'}</p>
+        <p className="config">{commandToCopy}</p>
       </ExpandableCard>
       <div className="controls solo">
         <Button

web/src/pages/overview/modals/AddStandaloneDeviceModal/steps/FinishCliStep/style.scss

@@ -17,5 +17,11 @@
         height: 47px;
       }
     }
+
+    .expanded-content {
+      p {
+        @include typography(app-input);
+      }
+    }
   }
 }

web/src/pages/overview/modals/AddStandaloneDeviceModal/steps/SetupCliStep/SetupCliStep.tsx

@@ -11,52 +11,60 @@ import {
 import { MessageBox } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox';
 import { MessageBoxType } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/types';
 import useApi from '../../../../../../shared/hooks/useApi';
+import { useToaster } from '../../../../../../shared/hooks/useToaster';
 import { QueryKeys } from '../../../../../../shared/queries';
 import { StandaloneDeviceModalForm } from '../../components/StandaloneDeviceModalForm';
 import { useAddStandaloneDeviceModal } from '../../store';
 import {
   AddStandaloneDeviceFormFields,
   AddStandaloneDeviceModalChoice,
+  AddStandaloneDeviceModalStep,
 } from '../../types';
 
 export const SetupCliStep = () => {
   const { LL } = useI18nContext();
   const localLL = LL.modals.addStandaloneDevice.steps.cli.setup;
   const [formLoading, setFormLoading] = useState(false);
   const queryClient = useQueryClient();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [setState, close, next, submitSubject] = useAddStandaloneDeviceModal(
     (s) => [s.setStore, s.close, s.changeStep, s.submitSubject],
     shallow,
   );
 
+  const toast = useToaster();
+
   const {
-    standaloneDevice: { createDevice },
+    standaloneDevice: { createCliDevice },
   } = useApi();
 
   const { mutateAsync } = useMutation({
-    mutationFn: createDevice,
-    onSuccess: (resp) => {
-      console.table(resp);
+    mutationFn: createCliDevice,
+    onSuccess: () => {
+      toast.success(LL.modals.addStandaloneDevice.toasts.deviceCreated());
       queryClient.invalidateQueries({
         queryKey: [QueryKeys.FETCH_STANDALONE_DEVICE_LIST],
       });
-      // next(AddStandaloneDeviceModalStep.FINISH_CLI);
+    },
+    onError: (e) => {
+      toast.error(LL.modals.addStandaloneDevice.toasts.creationFailed());
+      console.error(e);
     },
   });
 
   const initIp = useAddStandaloneDeviceModal((s) => s.initAvailableIp);
 
   const handleSubmit = useCallback(
     async (values: AddStandaloneDeviceFormFields) => {
-      console.table(values);
-      await mutateAsync({
+      const response = await mutateAsync({
         assigned_ip: values.assigned_ip,
         location_id: values.location_id,
         name: values.name,
+        description: values.description,
       });
+      setState({ enrollResponse: response });
+      next(AddStandaloneDeviceModalStep.FINISH_CLI);
     },
-    [mutateAsync],
+    [mutateAsync, next, setState],
   );
 
   if (initIp === undefined) return null;
@@ -65,10 +73,7 @@ export const SetupCliStep = () => {
     <div className="setup-cli-step">
       <MessageBox
         type={MessageBoxType.INFO}
-        message={
-          // eslint-disable-next-line max-len
-          'Here you can add definitions or generate configurations for devices that can connect to your VPN. Only locations without Multi-Factor Authentication are available here, as MFA is only supported in Defguard Desktop Client for now.'
-        }
+        message={localLL.stepMessage()}
         dismissId="add-standalone-device-cli-setup-step-header"
       />
       <StandaloneDeviceModalForm

web/src/pages/overview/modals/AddStandaloneDeviceModal/steps/SetupManualStep/SetupManualStep.tsx

@@ -35,7 +35,7 @@ export const SetupManualStep = () => {
   const queryClient = useQueryClient();
 
   const {
-    standaloneDevice: { createDevice },
+    standaloneDevice: { createManualDevice: createDevice },
   } = useApi();
 
   const { mutateAsync } = useMutation({

web/src/pages/overview/modals/AddStandaloneDeviceModal/store.tsx

@@ -3,7 +3,11 @@ import { Subject } from 'rxjs';
 import { createWithEqualityFn } from 'zustand/traditional';
 
 import { SelectOption } from '../../../../shared/defguard-ui/components/Layout/Select/types';
-import { CreateStandaloneDeviceResponse, Network } from '../../../../shared/types';
+import {
+  CreateStandaloneDeviceResponse,
+  Network,
+  StartEnrollmentResponse,
+} from '../../../../shared/types';
 import {
   AddStandaloneDeviceModalChoice,
   AddStandaloneDeviceModalStep,
@@ -21,6 +25,7 @@ const defaultValues: StoreValues = {
   initAvailableIp: undefined,
   genKeys: undefined,
   manualResponse: undefined,
+  enrollResponse: undefined,
 };
 
 export const useAddStandaloneDeviceModal = createWithEqualityFn<Store>(
@@ -51,6 +56,7 @@ type StoreValues = {
     privateKey: string;
   };
   manualResponse?: CreateStandaloneDeviceResponse;
+  enrollResponse?: StartEnrollmentResponse;
 };
 
 type StoreMethods = {

web/src/shared/hooks/useApi.tsx

@@ -471,8 +471,9 @@ const useApi = (props?: HookProps): ApiHook => {
   const testDirsync: ApiHook['settings']['testDirsync'] = () =>
     client.get('/test_directory_sync').then(unpackRequest);
 
-  const createStandaloneDevice: ApiHook['standaloneDevice']['createDevice'] = (data) =>
-    client.post('/device/network', data).then(unpackRequest);
+  const createStandaloneDevice: ApiHook['standaloneDevice']['createManualDevice'] = (
+    data,
+  ) => client.post('/device/network', data).then(unpackRequest);
 
   const deleteStandaloneDevice: ApiHook['standaloneDevice']['deleteDevice'] = (
     deviceId,
@@ -494,6 +495,10 @@ const useApi = (props?: HookProps): ApiHook => {
   const getStandaloneDevicesList: ApiHook['standaloneDevice']['getDevicesList'] = () =>
     client.get('/device/network').then(unpackRequest);
 
+  const createStandaloneCliDevice: ApiHook['standaloneDevice']['createCliDevice'] = (
+    data,
+  ) => client.post('/device/network/start_cli', data).then(unpackRequest);
+
   useEffect(() => {
     client.interceptors.response.use(
       (res) => {
@@ -538,13 +543,14 @@ const useApi = (props?: HookProps): ApiHook => {
       addUsersToGroups,
     },
     standaloneDevice: {
-      createDevice: createStandaloneDevice,
+      createManualDevice: createStandaloneDevice,
       deleteDevice: deleteStandaloneDevice,
       editDevice: editStandaloneDevice,
       getDevice: getStandaloneDevice,
       getAvailableIp: getAvailableLocationIp,
       validateLocationIp: validateLocationIp,
       getDevicesList: getStandaloneDevicesList,
+      createCliDevice: createStandaloneCliDevice,
     },
     user: {
       getMe,

web/src/shared/types.ts

@@ -490,9 +490,12 @@ export interface ApiHook {
     deleteYubiKey: (data: { id: number; username: string }) => EmptyApiResponse;
   };
   standaloneDevice: {
-    createDevice: (
+    createManualDevice: (
       data: CreateStandaloneDeviceRequest,
     ) => Promise<CreateStandaloneDeviceResponse>;
+    createCliDevice: (
+      data: CreateStandaloneDeviceRequest,
+    ) => Promise<StartEnrollmentResponse>;
     getDevice: (deviceId: number | string) => Promise<StandaloneDevice>;
     deleteDevice: (deviceId: number | string) => Promise<void>;
     editDevice: (device: StandaloneDevice) => Promise<void>;