Merge branch 'main' of github.com:DefGuard/proxy into 279-e2e-test

web/src/i18n/en/index.ts

@@ -111,6 +111,7 @@ If you have any questions, please consult your assigned admin.All necessary info
           },
         },
         deviceSetup: {
+          optionalMessage: `* This step is OPTIONAL. You can skip it if you wish. This can be configured later in defguard.`,
           cards: {
             device: {
               title: 'Configure your device for VPN',
@@ -168,11 +169,11 @@ If you have any questions, please consult your assigned admin.All necessary info
                   button: 'Download WireGuard',
                 },
                 downloadConfig: 'Download provided configuration file to your device.',
-                addTunnel: `Open WireGuard and select "Add Tunnel" (Import tunnel(s) from file). Find your 
+                addTunnel: `Open WireGuard and select "Add Tunnel" (Import tunnel(s) from file). Find your
 Defguard configuration file and hit "OK". On phone use WireGuard app “+” icon and scan QR code.`,
                 activate: 'Select your tunnel from the list and press "activate".',
                 finish: `
-**Great work - your Defguard VPN is now active!**  
+**Great work - your Defguard VPN is now active!**
 
 If you want to disengage your VPN connection, simply press "deactivate".
 `,

web/src/i18n/i18n-types.ts

@@ -247,6 +247,10 @@ type RootTranslation = {
 					}
 				}
 				deviceSetup: {
+					/**
+					 * *​ ​T​h​i​s​ ​s​t​e​p​ ​i​s​ ​O​P​T​I​O​N​A​L​.​ ​Y​o​u​ ​c​a​n​ ​s​k​i​p​ ​i​t​ ​i​f​ ​y​o​u​ ​w​i​s​h​.​ ​T​h​i​s​ ​c​a​n​ ​b​e​ ​c​o​n​f​i​g​u​r​e​d​ ​l​a​t​e​r​ ​i​n​ ​d​e​f​g​u​a​r​d​.
+					 */
+					optionalMessage: string
 					cards: {
 						device: {
 							/**
@@ -357,7 +361,7 @@ type RootTranslation = {
 								 */
 								downloadConfig: string
 								/**
-								 * O​p​e​n​ ​W​i​r​e​G​u​a​r​d​ ​a​n​d​ ​s​e​l​e​c​t​ ​"​A​d​d​ ​T​u​n​n​e​l​"​ ​(​I​m​p​o​r​t​ ​t​u​n​n​e​l​(​s​)​ ​f​r​o​m​ ​f​i​l​e​)​.​ ​F​i​n​d​ ​y​o​u​r​ ​
+								 * O​p​e​n​ ​W​i​r​e​G​u​a​r​d​ ​a​n​d​ ​s​e​l​e​c​t​ ​"​A​d​d​ ​T​u​n​n​e​l​"​ ​(​I​m​p​o​r​t​ ​t​u​n​n​e​l​(​s​)​ ​f​r​o​m​ ​f​i​l​e​)​.​ ​F​i​n​d​ ​y​o​u​r​
 							​D​e​f​g​u​a​r​d​ ​c​o​n​f​i​g​u​r​a​t​i​o​n​ ​f​i​l​e​ ​a​n​d​ ​h​i​t​ ​"​O​K​"​.​ ​O​n​ ​p​h​o​n​e​ ​u​s​e​ ​W​i​r​e​G​u​a​r​d​ ​a​p​p​ ​“​+​”​ ​i​c​o​n​ ​a​n​d​ ​s​c​a​n​ ​Q​R​ ​c​o​d​e​.
 								 */
 								addTunnel: string
@@ -367,7 +371,7 @@ type RootTranslation = {
 								activate: string
 								/**
 								 * 
-							​*​*​G​r​e​a​t​ ​w​o​r​k​ ​-​ ​y​o​u​r​ ​D​e​f​g​u​a​r​d​ ​V​P​N​ ​i​s​ ​n​o​w​ ​a​c​t​i​v​e​!​*​*​ ​ ​
+							​*​*​G​r​e​a​t​ ​w​o​r​k​ ​-​ ​y​o​u​r​ ​D​e​f​g​u​a​r​d​ ​V​P​N​ ​i​s​ ​n​o​w​ ​a​c​t​i​v​e​!​*​*​
 							​
 							​I​f​ ​y​o​u​ ​w​a​n​t​ ​t​o​ ​d​i​s​e​n​g​a​g​e​ ​y​o​u​r​ ​V​P​N​ ​c​o​n​n​e​c​t​i​o​n​,​ ​s​i​m​p​l​y​ ​p​r​e​s​s​ ​"​d​e​a​c​t​i​v​a​t​e​"​.​
 						
@@ -801,6 +805,10 @@ export type TranslationFunctions = {
 					}
 				}
 				deviceSetup: {
+					/**
+					 * * This step is OPTIONAL. You can skip it if you wish. This can be configured later in defguard.
+					 */
+					optionalMessage: () => LocalizedString
 					cards: {
 						device: {
 							/**
@@ -910,7 +918,7 @@ export type TranslationFunctions = {
 								 */
 								downloadConfig: () => LocalizedString
 								/**
-								 * Open WireGuard and select "Add Tunnel" (Import tunnel(s) from file). Find your 
+								 * Open WireGuard and select "Add Tunnel" (Import tunnel(s) from file). Find your
 							Defguard configuration file and hit "OK". On phone use WireGuard app “+” icon and scan QR code.
 								 */
 								addTunnel: () => LocalizedString
@@ -920,7 +928,7 @@ export type TranslationFunctions = {
 								activate: () => LocalizedString
 								/**
 								 * 
-							**Great work - your Defguard VPN is now active!**  
+							**Great work - your Defguard VPN is now active!**
 						
 							If you want to disengage your VPN connection, simply press "deactivate".
 						

web/src/pages/enrollment/EnrollmentPage.tsx

@@ -37,6 +37,7 @@ export const EnrollmentPage = () => {
   const sessionEnd = useEnrollmentStore((state) => state.sessionEnd);
   const currentStep = useEnrollmentStore((state) => state.step);
   const stepsMax = useEnrollmentStore((state) => state.stepsMax);
+  const loading = useEnrollmentStore((state) => state.loading);
 
   const [setEnrollmentState, back, reset, nextSubject] = useEnrollmentStore(
     (state) => [state.setState, state.perviousStep, state.reset, state.nextSubject],
@@ -83,7 +84,7 @@ export const EnrollmentPage = () => {
             size={controlsSize}
             styleVariant={ButtonStyleVariant.STANDARD}
             onClick={() => back()}
-            disabled={steps[currentStep].backDisabled ?? false}
+            disabled={(steps[currentStep].backDisabled ?? false) || loading}
             icon={
               <ArrowSingle
                 size={ArrowSingleSize.SMALL}
@@ -93,6 +94,7 @@ export const EnrollmentPage = () => {
           />
           <Button
             data-testid="enrollment-next"
+            loading={loading}
             text={LL.common.controls.next()}
             size={controlsSize}
             styleVariant={ButtonStyleVariant.PRIMARY}
@@ -123,7 +125,6 @@ const steps: EnrollmentStep[] = [
   {
     key: 3,
     step: <DeviceStep key={3} />,
-    backDisabled: true,
   },
   {
     key: 4,

web/src/pages/enrollment/components/EnrollmentSideBar/style.scss

@@ -12,9 +12,13 @@
   border-right: 1px solid var(--border-primary);
   position: fixed;
   inset: 0;
-  display: flex;
+  display: none;
   flex-flow: column;
 
+  @include media-breakpoint-up(lg) {
+    display: flex;
+  }
+
   scrollbar-width: none;
 
   &::-webkit-scrollbar {

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

@@ -3,6 +3,7 @@ import './style.scss';
 import classNames from 'classnames';
 import { ReactNode } from 'react';
 
+import { AdminInfo } from '../AdminInfo/AdminInfo';
 import { TimeLeft } from '../TimeLeft/TimeLeft';
 
 type Props = {
@@ -17,7 +18,7 @@ export const EnrollmentStepControls = ({ children, className }: Props) => {
     <div className={cn}>
       <div className="actions">{children}</div>
       <div className="mobile-info">
-        <div className="admin">PLACEHOLDER</div>
+        <AdminInfo />
         <TimeLeft />
       </div>
     </div>

web/src/pages/enrollment/components/EnrollmentStepControls/style.scss

@@ -13,14 +13,31 @@
     row-gap: 10px;
     padding: 20px;
 
+    background-color: var(--surface-nav-bg);
+
+    @include media-breakpoint-down(lg) {
+      z-index: 1;
+    }
+
+    @include media-breakpoint-up(lg) {
+      background-color: transparent;
+    }
+
     & > .actions {
       width: 100%;
       display: grid;
       grid-template-rows: 60px;
       grid-template-columns: 1fr 1fr;
       column-gap: 32px;
 
+      @include media-breakpoint-down(lg) {
+        height: 44px;
+      }
+
       & > .btn {
+        @include media-breakpoint-down(lg) {
+          height: 44px;
+        }
         &.variant-standard {
           svg {
             g {
@@ -39,13 +56,32 @@
     }
 
     & > .mobile-info {
-      display: grid;
-      grid-template-rows: auto;
-      grid-template-columns: 1fr 120px;
-      row-gap: 10px;
+      display: flex;
+      flex-flow: row nowrap;
+      overflow: hidden;
+      .admin-info {
+        display: flex;
+        flex-flow: row wrap;
+        max-width: 200px;
+        column-gap: 5px;
+
+        .title {
+          color: var(--text-body-primary);
+          font-weight: 400;
+        }
 
+        p,
+        span {
+          @include typography(app-copyright);
+        }
+      }
       & > .time-left {
+        margin-left: auto;
         text-align: right;
+
+        p {
+          @include typography(app-copyright);
+        }
       }
     }
 

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

@@ -11,6 +11,7 @@ import {
 } from '../../../../shared/hooks/api/types';
 
 const defaultValues: StoreValues = {
+  loading: false,
   step: 0,
   stepsMax: 4,
   sessionEnd: undefined,
@@ -21,6 +22,7 @@ const defaultValues: StoreValues = {
 const persistKeys: Array<keyof StoreValues> = [
   'step',
   'userInfo',
+  'userPassword',
   'sessionEnd',
   'sessionStart',
   'adminInfo',
@@ -67,13 +69,16 @@ export const useEnrollmentStore = createWithEqualityFn<Store>()(
 type Store = StoreValues & StoreMethods;
 
 type StoreValues = {
+  // next and back are disabled
+  loading: boolean;
   step: number;
   stepsMax: number;
   nextSubject: Subject<void>;
   // Date
   sessionStart?: string;
   sessionEnd?: string;
   userInfo?: UserInfo;
+  userPassword?: string;
   adminInfo?: AdminInfo;
   vpnOptional?: boolean;
   // Markdown content for final step card

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

@@ -1,10 +1,9 @@
 import './style.scss';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { isUndefined } from 'lodash-es';
 import { useEffect, useMemo, useRef } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { z, ZodIssueCode } from 'zod';
+import { z } from 'zod';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
@@ -18,7 +17,7 @@ import { useEnrollmentStore } from '../../hooks/store/useEnrollmentStore';
 const phonePattern = /^\+?[0-9]+( [0-9]+)?$/;
 
 type FormFields = {
-  phone?: string;
+  phone: string;
 };
 
 export const DataVerificationStep = () => {
@@ -38,21 +37,13 @@ export const DataVerificationStep = () => {
 
   const schema = useMemo(
     () =>
-      z
-        .object({
-          phone: z.string().trim().optional(),
-        })
-        .superRefine((obj, ctx) => {
-          if (!isUndefined(obj?.phone) && obj.phone.length) {
-            if (!phonePattern.test(obj.phone)) {
-              ctx.addIssue({
-                code: ZodIssueCode.custom,
-                message: LL.form.errors.invalid(),
-                path: ['phone'],
-              });
-            }
-          }
-        }),
+      z.object({
+        phone: z
+          .string()
+          .trim()
+          .nonempty(LL.form.errors.required())
+          .regex(phonePattern, LL.form.errors.invalid()),
+      }),
     [LL.form.errors],
   );
 
@@ -66,11 +57,9 @@ export const DataVerificationStep = () => {
 
   const handleValidSubmit: SubmitHandler<FormFields> = (values) => {
     if (userInfo) {
-      if (userInfo.phone_number !== values.phone) {
-        setEnrollment({
-          userInfo: { ...userInfo, phone_number: values.phone },
-        });
-      }
+      setEnrollment({
+        userInfo: { ...userInfo, phone_number: values.phone },
+      });
       next();
     }
   };