Merge branch 'dev' into config-polling

Author: j-chmielewski

web/src/pages/enrollment/components/EnrollmentSideBar/EnrollmentSideBar.tsx

@@ -14,11 +14,14 @@ import { TimeLeft } from '../TimeLeft/TimeLeft';
 export const EnrollmentSideBar = () => {
   const { LL } = useI18nContext();
 
-  const vpnOptional = useEnrollmentStore((state) => state.vpnOptional);
+  const vpnOptional = useEnrollmentStore(
+    (state) => state.enrollmentSettings?.vpn_setup_optional,
+  );
   const [currentStep, stepsMax] = useEnrollmentStore((state) => [
     state.step,
     state.stepsMax,
   ]);
+  const enrollmentSettings = useEnrollmentStore((state) => state.enrollmentSettings);
 
   // fetch app version
   const { getAppInfo } = useApi();
@@ -37,16 +40,20 @@ export const EnrollmentSideBar = () => {
   }, []);
 
   const steps = useMemo((): LocalizedString[] => {
-    const steps = LL.pages.enrollment.sideBar.steps;
-    const vpnStep = vpnOptional ? `${steps.vpn()}*` : steps.vpn();
-    return [
-      steps.welcome(),
-      steps.verification(),
-      steps.password(),
-      vpnStep as LocalizedString,
-      steps.finish(),
+    const stepsLL = LL.pages.enrollment.sideBar.steps;
+    const vpnStep = (
+      vpnOptional ? `${stepsLL.vpn()}*` : stepsLL.vpn()
+    ) as LocalizedString;
+    const steps = [
+      stepsLL.welcome(),
+      stepsLL.verification(),
+      stepsLL.password(),
+      ...(!enrollmentSettings?.only_client_activation
+        ? [vpnStep, stepsLL.finish()]
+        : [stepsLL.finish()]),
     ];
-  }, [LL.pages.enrollment.sideBar.steps, vpnOptional]);
+    return steps;
+  }, [LL.pages.enrollment.sideBar.steps, vpnOptional, enrollmentSettings]);
 
   return (
     <div id="enrollment-side-bar">

web/src/pages/enrollment/hooks/store/useEnrollmentStore.tsx

@@ -7,6 +7,7 @@ import {
   AdminInfo,
   Device,
   DeviceConfig,
+  EnrollmentSettings,
   UserInfo,
 } from '../../../../shared/hooks/api/types';
 
@@ -30,7 +31,7 @@ const persistKeys: Array<keyof StoreValues> = [
   'adminInfo',
   'deviceState',
   'endContent',
-  'vpnOptional',
+  'enrollmentSettings',
 ];
 
 export const useEnrollmentStore = createWithEqualityFn<Store>()(
@@ -82,7 +83,7 @@ type StoreValues = {
   userInfo?: UserInfo;
   userPassword?: string;
   adminInfo?: AdminInfo;
-  vpnOptional?: boolean;
+  enrollmentSettings?: EnrollmentSettings;
   // Markdown content for final step card
   endContent?: string;
   deviceState?: {

web/src/pages/enrollment/steps/DeviceStep/DeviceStep.tsx

@@ -7,9 +7,11 @@ import { useEffect } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
+import { LoaderSpinner } from '../../../../shared/components/layout/LoaderSpinner/LoaderSpinner';
 import { MessageBox } from '../../../../shared/components/layout/MessageBox/MessageBox';
 import { MessageBoxType } from '../../../../shared/components/layout/MessageBox/types';
 import { useApi } from '../../../../shared/hooks/api/useApi';
+import useEffectOnce from '../../../../shared/hooks/api/utils';
 import { useEnrollmentStore } from '../../hooks/store/useEnrollmentStore';
 import { ConfigureDeviceCard } from './components/ConfigureDeviceCard/ConfigureDeviceCard';
 import { QuickGuideCard } from './components/QuickGuideCard/QuickGuideCard';
@@ -21,7 +23,7 @@ export const DeviceStep = () => {
   const { LL } = useI18nContext();
   const setStore = useEnrollmentStore((state) => state.setState);
   const deviceState = useEnrollmentStore((state) => state.deviceState);
-  const vpnOptional = useEnrollmentStore((state) => state.vpnOptional);
+  const settings = useEnrollmentStore((state) => state.enrollmentSettings);
   const [userPhone, userPassword] = useEnrollmentStore(
     (state) => [state.userInfo?.phone_number, state.userPassword],
     shallow,
@@ -32,8 +34,8 @@ export const DeviceStep = () => {
   );
 
   const cn = classNames({
-    required: !vpnOptional,
-    optional: vpnOptional,
+    required: !settings?.vpn_setup_optional,
+    optional: settings?.vpn_setup_optional,
   });
 
   const { mutate } = useMutation({
@@ -51,7 +53,11 @@ export const DeviceStep = () => {
   useEffect(() => {
     if (userPassword) {
       const sub = nextSubject.subscribe(() => {
-        if ((deviceState && deviceState.device && deviceState.configs) || vpnOptional) {
+        if (
+          (deviceState && deviceState.device && deviceState.configs) ||
+          settings?.vpn_setup_optional ||
+          settings?.only_client_activation
+        ) {
           setStore({
             loading: true,
           });
@@ -66,20 +72,44 @@ export const DeviceStep = () => {
         sub.unsubscribe();
       };
     }
-  }, [deviceState, nextSubject, vpnOptional, setStore, userPhone, userPassword, mutate]);
+  }, [
+    deviceState,
+    nextSubject,
+    settings?.vpn_setup_optional,
+    setStore,
+    userPhone,
+    userPassword,
+    mutate,
+    settings?.only_client_activation,
+  ]);
+
+  // If only client activation is enabled, skip manual wireguard setup
+  useEffectOnce(() => {
+    if (settings?.only_client_activation) {
+      nextSubject.next();
+    }
+  });
 
   return (
     <div id="enrollment-device-step" className={cn}>
-      {vpnOptional && (
-        <MessageBox
-          type={MessageBoxType.WARNING}
-          message={LL.pages.enrollment.steps.deviceSetup.optionalMessage()}
-        />
+      {!settings?.only_client_activation ? (
+        <>
+          {settings?.vpn_setup_optional && (
+            <MessageBox
+              type={MessageBoxType.WARNING}
+              message={LL.pages.enrollment.steps.deviceSetup.optionalMessage()}
+            />
+          )}
+          <div className="cards">
+            <ConfigureDeviceCard />
+            <QuickGuideCard />
+          </div>
+        </>
+      ) : (
+        <div id="loader">
+          <LoaderSpinner size={80} />
+        </div>
       )}
-      <div className="cards">
-        <ConfigureDeviceCard />
-        <QuickGuideCard />
-      </div>
     </div>
   );
 };

web/src/pages/enrollment/steps/DeviceStep/style.scss

@@ -45,4 +45,11 @@
       }
     }
   }
+
+  #loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 500px;
+  }
 }

web/src/pages/main/MainPage.tsx

@@ -40,8 +40,8 @@ export const MainPage = () => {
             adminInfo: res.admin,
             sessionStart,
             sessionEnd,
-            vpnOptional: res.vpn_setup_optional,
             endContent: res.final_page_content,
+            enrollmentSettings: res.settings,
           });
           navigate(routes.enrollment, { replace: true });
         })

web/src/pages/token/components/TokenCard.tsx

@@ -73,7 +73,7 @@ export const TokenCard = () => {
         adminInfo: res.admin,
         sessionStart,
         sessionEnd,
-        vpnOptional: res.vpn_setup_optional,
+        enrollmentSettings: res.settings,
         endContent: res.final_page_content,
       });
       navigate(routes.enrollment, { replace: true });

web/src/shared/hooks/api/types.ts

@@ -18,12 +18,17 @@ export type EnrollmentStartRequest = {
   token: string;
 };
 
+export type EnrollmentSettings = {
+  vpn_setup_optional: boolean;
+  only_client_activation: boolean;
+};
+
 export type EnrollmentStartResponse = {
   admin: AdminInfo;
   user: UserInfo;
   deadline_timestamp: number;
   final_page_content: string;
-  vpn_setup_optional: boolean;
+  settings: EnrollmentSettings;
 };
 
 export type ActivateUserRequest = {

web/src/shared/hooks/api/utils.ts

@@ -1,7 +1,27 @@
+import { useEffect, useRef } from 'react';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const removeNulls = (obj: any) => {
   return JSON.parse(JSON.stringify(obj), (_, value) => {
     if (value == null) return undefined;
     return value;
   });
 };
+
+/** 
+Under normal circumstances, useEffect should run only once when passed an empty dependency array.
+However, in dev mode with react strict mode enabled, everything is rendered twice for debugging purposes.
+This also causes useEffect to run twice, which is not always desirable.
+This custom hook ensures that the effect runs only once in dev mode as well.
+*/
+export default function useEffectOnce(fn: () => void) {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    if (isMounted.current) {
+      return;
+    }
+
+    fn();
+    isMounted.current = true;
+  }, [fn]);
+}

web/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import autoprefixer from 'autoprefixer';
 import * as path from 'path';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({