enrollment qr in enroll by admin modal

crates/defguard_core/templates/macros.tera

@@ -53,6 +53,59 @@
 </div>
 {% endmacro text_section %}
 
+{% macro inline_image(src, height="100px", width="100px", alt="") %}
+<div style="margin: 0px auto; max-width: 600px">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%">
+        <tbody>
+            <tr>
+                <td style="direction: ltr; font-size: 0px; padding: 0; text-align: center">
+                    <div class="mj-column-per-100 mj-outlook-group-fix" style="
+              font-size: 0px;
+              text-align: left;
+              direction: ltr;
+              display: inline-block;
+              vertical-align: top;
+              width: 100%;
+            ">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                                <tr>
+                                    <td style="vertical-align: top; padding: 0">
+                                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style=""
+                                            width="100%">
+                                            <tbody>
+                                                <tr>
+                                                    <td align="left" width="{{ width }}" height={{ height }} style="
+                              font-size: 0px;
+                              padding: 5px 25px;
+                              word-break: break-word;
+                            ">
+                                                        <div style="
+                                font-family: Roboto, Arial;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 120%;
+                                text-align: left;
+                                color: #222222;
+                              ">
+                                                        <img src="{{ src }}" height="{{ height }}" width="{{ width }}" alt="{{ alt }}" style="border:0;display:block;outline:none;text-decoration:none;" />
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+{% endmacro inline_image %}
+
 {% macro paragraph(content="", color="#222", font_size="12px", align="left", line_height="120%", font_weight="400") %}
 <p style="
   font-family: Roboto, Arial;

web/package.json

@@ -140,7 +140,7 @@
     "standard-version": "^9.5.0",
     "type-fest": "^4.41.0",
     "typescript": "~5.9.2",
-    "vite": "^7.1.0",
+    "vite": "^7.1.1",
     "vite-plugin-package-version": "^1.1.0"
   }
 }

web/src/pages/addDevice/utils/enrollmentToToken.ts

@@ -5,33 +5,10 @@ export type EnrollmentData = {
   token: string;
 };
 
-const useLocalProxy = import.meta.env.DEV;
-
-const extractProxyPort = (input: string): string | undefined => {
-  try {
-    const url = new URL(input);
-    const port = url.port;
-    const parsed = port ? parseInt(port, 10) : undefined;
-    if (parsed && !Number.isNaN(parsed)) {
-      return `:${parsed}`;
-    }
-    return undefined;
-  } catch {
-    return undefined;
-  }
-};
-
 export const enrollmentToImportToken = (url: string, token: string): string => {
-  let proxyUrl: string;
-  if (useLocalProxy) {
-    const port = extractProxyPort(url);
-    proxyUrl = `http://10.0.2.2${port}`;
-  } else {
-    proxyUrl = url;
-  }
   const data: EnrollmentData = {
     token,
-    url: proxyUrl,
+    url,
   };
   const jsonString = JSON.stringify(data);
   const textEncoder = new TextEncoder();

web/src/pages/loader/style.scss

@@ -1,6 +1,6 @@
 #loader-page {
+  min-height: 100dvh;
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
   align-content: center;

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

@@ -1,18 +1,17 @@
 import './style.scss';
 
-import { isUndefined } from 'lodash-es';
-import { type ReactNode, useMemo } from 'react';
-
+import { useMemo } from 'react';
+import QRCode from 'react-qr-code';
 import { useI18nContext } from '../../../../../../../i18n/i18n-react';
-import { ActionButton } from '../../../../../../../shared/defguard-ui/components/Layout/ActionButton/ActionButton';
-import { ActionButtonVariant } from '../../../../../../../shared/defguard-ui/components/Layout/ActionButton/types';
 import { Button } from '../../../../../../../shared/defguard-ui/components/Layout/Button/Button';
 import {
   ButtonSize,
   ButtonStyleVariant,
 } from '../../../../../../../shared/defguard-ui/components/Layout/Button/types';
-import { ExpandableCard } from '../../../../../../../shared/defguard-ui/components/Layout/ExpandableCard/ExpandableCard';
+import { CopyField } from '../../../../../../../shared/defguard-ui/components/Layout/CopyField/CopyField';
+import { isPresent } from '../../../../../../../shared/defguard-ui/utils/isPresent';
 import { useClipboard } from '../../../../../../../shared/hooks/useClipboard';
+import { enrollmentToImportToken } from '../../../../../../addDevice/utils/enrollmentToToken';
 import { useAddUserModal } from '../../hooks/useAddUserModal';
 
 export const EnrollmentTokenCard = () => {
@@ -21,56 +20,34 @@ export const EnrollmentTokenCard = () => {
   const { writeToClipboard } = useClipboard();
   const closeModal = useAddUserModal((state) => state.close);
 
-  const tokenActions = useMemo(
-    (): ReactNode[] => [
-      <ActionButton
-        data-testid="copy-enrollment-token"
-        variant={ActionButtonVariant.COPY}
-        disabled={isUndefined(tokenResponse)}
-        onClick={() => {
-          if (tokenResponse) {
-            void writeToClipboard(tokenResponse.enrollment_token);
-          }
-        }}
-        key={0}
-      />,
-    ],
-    [tokenResponse, writeToClipboard],
-  );
+  const qrData = useMemo(() => {
+    if (tokenResponse) {
+      return enrollmentToImportToken(
+        tokenResponse.enrollment_url,
+        tokenResponse.enrollment_token,
+      );
+    }
+  }, [tokenResponse]);
 
-  const urlActions = useMemo(
-    (): ReactNode[] => [
-      <ActionButton
-        data-testid="copy-enrollment-url"
-        variant={ActionButtonVariant.COPY}
-        disabled={!tokenResponse}
-        onClick={() => {
-          if (tokenResponse) {
-            void writeToClipboard(tokenResponse.enrollment_url);
-          }
-        }}
-        key={0}
-      />,
-    ],
-    [tokenResponse, writeToClipboard],
-  );
+  if (!isPresent(tokenResponse)) return null;
 
   return (
     <div id="enrollment-token-step">
-      <ExpandableCard
-        title={LL.modals.startEnrollment.urlCard.title()}
-        actions={urlActions}
-        expanded
-      >
-        <p>{tokenResponse?.enrollment_url}</p>
-      </ExpandableCard>
-      <ExpandableCard
-        title={LL.modals.startEnrollment.tokenCard.title()}
-        actions={tokenActions}
-        expanded
-      >
-        <p>{tokenResponse?.enrollment_token}</p>
-      </ExpandableCard>
+      <CopyField
+        label={LL.modals.startEnrollment.urlCard.title()}
+        onCopy={writeToClipboard}
+        value={tokenResponse.enrollment_url}
+      />
+      <CopyField
+        label={LL.modals.startEnrollment.tokenCard.title()}
+        onCopy={writeToClipboard}
+        value={tokenResponse.enrollment_token}
+      />
+      {isPresent(qrData) && (
+        <div className="qr">
+          <QRCode value={qrData} />
+        </div>
+      )}
       <div className="controls">
         <Button
           type="button"

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

@@ -12,10 +12,6 @@
     width: 100%;
   }
 
-  @include media-breakpoint-up(lg) {
-    padding: 0 40px;
-  }
-
   .expanded-content {
     p,
     span,
@@ -27,6 +23,14 @@
     }
   }
 
+  .qr {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-m) 0;
+  }
+
   & > .controls {
     display: none;
 
@@ -36,7 +40,6 @@
 
     @include media-breakpoint-up(lg) {
       display: block;
-      margin-top: 40px;
     }
   }
 }

web/src/shared/scss/base/_base.scss

@@ -105,7 +105,8 @@ body {
   position: relative;
 }
 
-#app {
+#app,
+#root {
   position: relative;
   min-height: 100dvh;
   max-height: 100dvh;