Add per-location MFA settings pt2

e2e/package.json

@@ -5,7 +5,7 @@
   "type": "commonjs",
   "scripts": {
     "lint": "pnpm prettier --check './tests/**.ts' './utils/**/*.ts' && pnpm eslint './tests/**.ts' './utils/**/*.ts'",
-    "fix": "pnpm prettier -w ./tests/**/*.ts ./utils/**/*.ts && pnpm eslint --fix ./tests/**/*.ts ./utils/**/*.ts",
+    "fix": "pnpm prettier -w './tests/**.ts' './utils/**/*.ts' && pnpm eslint --fix ./tests/**/*.ts ./utils/**/*.ts",
     "test": "pnpm playwright test"
   },
   "keywords": [],
@@ -42,4 +42,4 @@
   "volta": {
     "node": "19.9.0"
   }
-}
+}

e2e/tests/externalopenid.spec.ts

@@ -54,7 +54,7 @@ test.describe('External OIDC.', () => {
     dockerDown();
   });
 
-  test.fixme('Login through external oidc.', async ({ page }) => {
+  test('Login through external oidc.', async ({ page }) => {
     expect(client.clientID).toBeDefined();
     expect(client.clientSecret).toBeDefined();
     await waitForBase(page);

e2e/tests/externalopenidmfa.spec.ts

@@ -52,7 +52,7 @@ test.describe('External OIDC.', () => {
     dockerDown();
   });
 
-  test.fixme('Complete client MFA through external OpenID', async ({ page, browser }) => {
+  test('Complete client MFA through external OpenID', async ({ page, browser }) => {
     await waitForBase(page);
     const mfaStartUrl = `${testsConfig.ENROLLMENT_URL}/api/v1/client-mfa/start`;
     await createDevice(browser, testUser, {

e2e/types.ts

@@ -69,7 +69,7 @@ export type NetworkForm = {
   port: string;
   allowed_ips?: string;
   dns?: string;
-  location_mfa_mode?:string;
+  location_mfa_mode?: string;
 };
 
 export type DeviceForm = {

e2e/utils/controllers/vpn/createNetwork.ts

@@ -15,11 +15,20 @@ export const createNetwork = async (browser: Browser, network: NetworkForm) => {
   const navNext = page.getByTestId('wizard-next');
   await page.getByTestId('setup-option-manual').click();
   await navNext.click();
-  for (const key of Object.keys(network)) {
+
+  // fill form
+  for (const key of Object.keys(network).filter((key) => key !== 'location_mfa_mode')) {
     const field = page.getByTestId(`field-${key}`);
     await field.clear();
     await field.type(network[key]);
   }
+  // select location MFA mode
+  if (network.location_mfa_mode) {
+    const mfaModeSelect = page.locator('div.location-mfa-mode-select');
+    const mfaMode = mfaModeSelect.locator(`div.${network.location_mfa_mode}`);
+    await mfaMode.click();
+  }
+
   const responseCreateNetworkPromise = page.waitForResponse('**/network');
   await navNext.click();
   const response = await responseCreateNetworkPromise;

web/src/i18n/en/index.ts

@@ -1991,6 +1991,11 @@ Licensing information: [https://docs.defguard.net/enterprise/license](https://do
           'By default, all users will be allowed to connect to this location. If you want to restrict access to this location to a specific group, please select it below.',
         aclFeatureDisabled:
           "ACL functionality is an enterprise feature and you've exceeded the user, device or network limits to use it. In order to use this feature, purchase an enterprise license or upgrade your existing one.",
+        locationMfaMode: {
+          description: 'Choose how MFA is enforced when connecting to this location:', 
+          internal: "Internal MFA - MFA is enforced using Defguard's built-in MFA (e.g. TOTP, WebAuthn) with internal identity",
+          external: 'External MFA - If configured (see [OpenID settings](settings)) this option uses external identity provider for MFA',
+        },
       },
       messages: {
         networkModified: 'Location modified.',
@@ -2031,6 +2036,9 @@ Licensing information: [https://docs.defguard.net/enterprise/license](https://do
         acl_default_allow: {
           label: 'Default ACL policy',
         },
+        location_mfa_mode: {
+          label: 'MFA requirement',
+        }
       },
       controls: {
         submit: 'Save changes',

web/src/i18n/i18n-types.ts

@@ -4788,6 +4788,20 @@ type RootTranslation = {
 				 * A​C​L​ ​f​u​n​c​t​i​o​n​a​l​i​t​y​ ​i​s​ ​a​n​ ​e​n​t​e​r​p​r​i​s​e​ ​f​e​a​t​u​r​e​ ​a​n​d​ ​y​o​u​'​v​e​ ​e​x​c​e​e​d​e​d​ ​t​h​e​ ​u​s​e​r​,​ ​d​e​v​i​c​e​ ​o​r​ ​n​e​t​w​o​r​k​ ​l​i​m​i​t​s​ ​t​o​ ​u​s​e​ ​i​t​.​ ​I​n​ ​o​r​d​e​r​ ​t​o​ ​u​s​e​ ​t​h​i​s​ ​f​e​a​t​u​r​e​,​ ​p​u​r​c​h​a​s​e​ ​a​n​ ​e​n​t​e​r​p​r​i​s​e​ ​l​i​c​e​n​s​e​ ​o​r​ ​u​p​g​r​a​d​e​ ​y​o​u​r​ ​e​x​i​s​t​i​n​g​ ​o​n​e​.
 				 */
 				aclFeatureDisabled: string
+				locationMfaMode: {
+					/**
+					 * C​h​o​o​s​e​ ​h​o​w​ ​M​F​A​ ​i​s​ ​e​n​f​o​r​c​e​d​ ​w​h​e​n​ ​c​o​n​n​e​c​t​i​n​g​ ​t​o​ ​t​h​i​s​ ​l​o​c​a​t​i​o​n​:
+					 */
+					description: string
+					/**
+					 * I​n​t​e​r​n​a​l​ ​M​F​A​ ​-​ ​M​F​A​ ​i​s​ ​e​n​f​o​r​c​e​d​ ​u​s​i​n​g​ ​D​e​f​g​u​a​r​d​'​s​ ​b​u​i​l​t​-​i​n​ ​M​F​A​ ​(​e​.​g​.​ ​T​O​T​P​,​ ​W​e​b​A​u​t​h​n​)​ ​w​i​t​h​ ​i​n​t​e​r​n​a​l​ ​i​d​e​n​t​i​t​y
+					 */
+					internal: string
+					/**
+					 * E​x​t​e​r​n​a​l​ ​M​F​A​ ​-​ ​I​f​ ​c​o​n​f​i​g​u​r​e​d​ ​(​s​e​e​ ​[​O​p​e​n​I​D​ ​s​e​t​t​i​n​g​s​]​(​s​e​t​t​i​n​g​s​)​)​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​u​s​e​s​ ​e​x​t​e​r​n​a​l​ ​i​d​e​n​t​i​t​y​ ​p​r​o​v​i​d​e​r​ ​f​o​r​ ​M​F​A
+					 */
+					external: string
+				}
 			}
 			messages: {
 				/**
@@ -4870,6 +4884,12 @@ type RootTranslation = {
 					 */
 					label: string
 				}
+				location_mfa_mode: {
+					/**
+					 * M​F​A​ ​r​e​q​u​i​r​e​m​e​n​t
+					 */
+					label: string
+				}
 			}
 			controls: {
 				/**
@@ -11339,6 +11359,20 @@ export type TranslationFunctions = {
 				 * ACL functionality is an enterprise feature and you've exceeded the user, device or network limits to use it. In order to use this feature, purchase an enterprise license or upgrade your existing one.
 				 */
 				aclFeatureDisabled: () => LocalizedString
+				locationMfaMode: {
+					/**
+					 * Choose how MFA is enforced when connecting to this location:
+					 */
+					description: () => LocalizedString
+					/**
+					 * Internal MFA - MFA is enforced using Defguard's built-in MFA (e.g. TOTP, WebAuthn) with internal identity
+					 */
+					internal: () => LocalizedString
+					/**
+					 * External MFA - If configured (see [OpenID settings](settings)) this option uses external identity provider for MFA
+					 */
+					external: () => LocalizedString
+				}
 			}
 			messages: {
 				/**
@@ -11421,6 +11455,12 @@ export type TranslationFunctions = {
 					 */
 					label: () => LocalizedString
 				}
+				location_mfa_mode: {
+					/**
+					 * MFA requirement
+					 */
+					label: () => LocalizedString
+				}
 			}
 			controls: {
 				/**

web/src/pages/network/NetworkEditForm/NetworkEditForm.tsx

@@ -12,6 +12,7 @@ import { shallow } from 'zustand/shallow';
 import { useI18nContext } from '../../../i18n/i18n-react';
 import { FormAclDefaultPolicy } from '../../../shared/components/Form/FormAclDefaultPolicySelect/FormAclDefaultPolicy.tsx';
 import { FormLocationMfaModeSelect } from '../../../shared/components/Form/FormLocationMfaModeSelect/FormLocationMfaModeSelect.tsx';
+import { RenderMarkdown } from '../../../shared/components/Layout/RenderMarkdown/RenderMarkdown.tsx';
 import { FormCheckBox } from '../../../shared/defguard-ui/components/Form/FormCheckBox/FormCheckBox.tsx';
 import { FormInput } from '../../../shared/defguard-ui/components/Form/FormInput/FormInput';
 import { FormSelect } from '../../../shared/defguard-ui/components/Form/FormSelect/FormSelect';
@@ -31,6 +32,7 @@ import {
   validateIpOrDomainList,
 } from '../../../shared/validators';
 import { useNetworkPageStore } from '../hooks/useNetworkPageStore';
+import { DividerHeader } from './components/DividerHeader.tsx';
 
 export const NetworkEditForm = () => {
   const toaster = useToaster();
@@ -341,6 +343,22 @@ export const NetworkEditForm = () => {
           label={LL.networkConfiguration.form.fields.peer_disconnect_threshold.label()}
           type="number"
         />
+        <DividerHeader
+          text={LL.networkConfiguration.form.fields.location_mfa_mode.label()}
+        />
+        <MessageBox id="location-mfa-mode-explain-message-box">
+          <p>{LL.networkConfiguration.form.helpers.locationMfaMode.description()}</p>
+          <ul>
+            <li>
+              <p>{LL.networkConfiguration.form.helpers.locationMfaMode.internal()}</p>
+            </li>
+            <li>
+              <RenderMarkdown
+                content={LL.networkConfiguration.form.helpers.locationMfaMode.external()}
+              />
+            </li>
+          </ul>
+        </MessageBox>
         <FormLocationMfaModeSelect controller={{ control, name: 'location_mfa_mode' }} />
         <button type="submit" className="hidden" ref={submitRef}></button>
       </form>

web/src/pages/network/NetworkEditForm/components/DividerHeader.tsx

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+
+type DividerHeaderProps = {
+  text: string;
+} & PropsWithChildren;
+
+export const DividerHeader = ({ text, children }: DividerHeaderProps) => {
+  return (
+    <div className="divider-header spacer">
+      <div className="inner">
+        <p className="header">{text}</p>
+        {children}
+      </div>
+    </div>
+  );
+};

web/src/pages/network/NetworkEditForm/style.scss

@@ -29,4 +29,33 @@
       }
     }
   }
+
+  #location-mfa-mode-explain-message-box {
+    ul {
+      list-style-position: inside;
+      margin-top: 8px;
+
+      li {
+        p {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  .divider-header {
+    padding-bottom: var(--spacing-s);
+
+    .inner {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      justify-content: flex-start;
+      border-bottom: 1px solid var(--border-primary);
+    }
+
+    .header {
+      @include typography(app-side-bar);
+    }
+  }
 }

web/src/shared/components/Form/FormLocationMfaModeSelect/FormLocationMfaModeSelect.tsx

@@ -1,21 +1,27 @@
+import './style.scss';
+import clsx from 'clsx';
 import { useMemo } from 'react';
-import type { FieldValues, UseControllerProps } from 'react-hook-form';
-
+import {
+  type FieldValues,
+  type UseControllerProps,
+  useController,
+} from 'react-hook-form';
 import { useI18nContext } from '../../../../i18n/i18n-react';
-import { FormSelect } from '../../../defguard-ui/components/Form/FormSelect/FormSelect';
+import { RadioButton } from '../../../defguard-ui/components/Layout/RadioButton/Radiobutton';
 import type { SelectOption } from '../../../defguard-ui/components/Layout/Select/types';
 import { LocationMfaMode } from '../../../types';
 
 type Props<T extends FieldValues> = {
   controller: UseControllerProps<T>;
-  disabled?: boolean;
 };
 
 export const FormLocationMfaModeSelect = <T extends FieldValues>({
   controller,
-  disabled = false,
 }: Props<T>) => {
   const { LL } = useI18nContext();
+  const {
+    field: { onChange, value: fieldValue },
+  } = useController(controller);
 
   const options = useMemo(
     (): SelectOption<LocationMfaMode>[] => [
@@ -37,12 +43,26 @@ export const FormLocationMfaModeSelect = <T extends FieldValues>({
     ],
     [LL.components.aclDefaultPolicySelect.options],
   );
+
   return (
-    <FormSelect
-      controller={controller}
-      options={options}
-      label={LL.components.locationMfaModeSelect.label()}
-      disabled={disabled}
-    />
+    <div className="location-mfa-mode-select">
+      {options.map(({ key, value, label }) => {
+        const active = fieldValue === value;
+        return (
+          <div
+            className={clsx(`location-mfa-mode ${value}`, {
+              active,
+            })}
+            key={key}
+            onClick={() => {
+              onChange(value);
+            }}
+          >
+            <p className="label">{label}</p>
+            <RadioButton active={active} />
+          </div>
+        );
+      })}
+    </div>
   );
 };

web/src/shared/components/Form/FormLocationMfaModeSelect/style.scss

@@ -0,0 +1,45 @@
+.location-mfa-mode-select {
+  display: flex;
+  flex-flow: column;
+  row-gap: var(--spacing-s);
+
+  .location-mfa-mode {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: var(--spacing-xs);
+    min-height: 30px;
+    border: 1px solid var(--border-primary);
+    padding: var(--spacing-xs) var(--spacing-s);
+    border-radius: 10px;
+    cursor: pointer;
+    user-select: none;
+    transition-property: border-color;
+
+    @include animate-standard;
+
+    &:not(.active) {
+      &:hover {
+        border-color: var(--border-separator);
+      }
+    }
+
+    &.active {
+      border-color: var(--surface-main-primary);
+    }
+
+    &.active,
+    &:hover {
+      .label {
+        color: var(--text-body-primary);
+      }
+    }
+
+    .label {
+      color: var(--text-body-secondary);
+      transition-property: color;
+      @include typography(app-modal-1);
+      @include animate-standard;
+    }
+  }
+}