add link to documentation (#757)

* add link to documentation

web/src/i18n/en/index.ts

@@ -375,7 +375,8 @@ const en: BaseTranslation = {
             label: 'Phone',
           },
           enableEnrollment: {
-            label: 'Use enrollment process',
+            label: 'Use user self-enrollment process',
+            link: '[more information here](https://defguard.gitbook.io/defguard/help/enrollment)',
           },
         },
       },

web/src/i18n/i18n-types.ts

@@ -879,9 +879,13 @@ type RootTranslation = {
 					}
 					enableEnrollment: {
 						/**
-						 * U​s​e​ ​e​n​r​o​l​l​m​e​n​t​ ​p​r​o​c​e​s​s
+						 * U​s​e​ ​u​s​e​r​ ​s​e​l​f​-​e​n​r​o​l​l​m​e​n​t​ ​p​r​o​c​e​s​s
 						 */
 						label: string
+						/**
+						 * [​m​o​r​e​ ​i​n​f​o​r​m​a​t​i​o​n​ ​h​e​r​e​]​(​h​t​t​p​s​:​/​/​d​e​f​g​u​a​r​d​.​g​i​t​b​o​o​k​.​i​o​/​d​e​f​g​u​a​r​d​/​h​e​l​p​/​e​n​r​o​l​l​m​e​n​t​)
+						 */
+						link: string
 					}
 				}
 			}
@@ -5056,9 +5060,13 @@ export type TranslationFunctions = {
 					}
 					enableEnrollment: {
 						/**
-						 * Use enrollment process
+						 * Use user self-enrollment process
 						 */
 						label: () => LocalizedString
+						/**
+						 * [more information here](https://defguard.gitbook.io/defguard/help/enrollment)
+						 */
+						link: () => LocalizedString
 					}
 				}
 			}

web/src/i18n/pl/index.ts

@@ -378,6 +378,7 @@ const pl: Translation = {
           },
           enableEnrollment: {
             label: 'Użyj zdalnej rejestracji',
+            link: '[więcej informacji tutaj](https://defguard.gitbook.io/defguard/help/enrollment)',
           },
         },
       },

web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/AddUserForm.tsx

@@ -5,6 +5,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { omit } from 'lodash-es';
 import { useMemo, useRef, useState } from 'react';
 import { SubmitHandler, useController, useForm } from 'react-hook-form';
+import ReactMarkdown from 'react-markdown';
 import { z } from 'zod';
 import { shallow } from 'zustand/shallow';
 
@@ -188,11 +189,16 @@ export const AddUserForm = () => {
       data-testid="add-user-form"
       onSubmit={handleSubmit(onSubmit)}
     >
-      <FormCheckBox
-        labelPlacement="right"
-        label={LL.modals.addUser.form.fields.enableEnrollment.label()}
-        controller={{ control, name: 'enable_enrollment' }}
-      />
+      <div className="checkbox-space">
+        <FormCheckBox
+          labelPlacement="right"
+          label={LL.modals.addUser.form.fields.enableEnrollment.label()}
+          controller={{ control, name: 'enable_enrollment' }}
+        />
+        <ReactMarkdown>
+          {LL.modals.addUser.form.fields.enableEnrollment.link()}
+        </ReactMarkdown>
+      </div>
       <div className="row">
         <div className="item">
           <FormInput

web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/style.scss

@@ -11,9 +11,16 @@
     width: 1100px;
   }
 
-  & > .form-checkbox {
+  .checkbox-space {
+    display: flex;
     margin-bottom: 25px;
+    gap: 5px;
+
+    a {
+      @include typography(input-label);
+    }
   }
+
   & > .row {
     display: flex;
     flex-flow: column;