Wizard design tweaks

web/messages/en/common.json

@@ -54,5 +54,7 @@
   "search_users": "Find users",
   "select_users_all": "All users",
   "sucessfull_enrollment_email": "Enrollment email sent successfully",
-  "failed_to_start_enrollment": "Failed to start enrollment"
+  "failed_to_start_enrollment": "Failed to start enrollment",
+  "misc_recommended": "Recommended",
+  "footer_copyright": "Copyright © {year} Defguard Sp. z o.o."
 }

web/src/pages/EdgeSetupPage/EdgeSetupPage.tsx

@@ -20,8 +20,8 @@ import { useEdgeWizardStore } from './useEdgeWizardStore';
 
 export const EdgeSetupPage = () => {
   const activeStep = useEdgeWizardStore((s) => s.activeStep);
-  const showWelcome = useEdgeWizardStore((s) => s.showWelcome);
-  const setShowWelcome = useEdgeWizardStore((s) => s.setShowWelcome);
+  const isOnWelcomePage = useEdgeWizardStore((s) => s.isOnWelcomePage);
+  const setisOnWelcomePage = useEdgeWizardStore((s) => s.setisOnWelcomePage);
   const navigate = useNavigate();
 
   const stepsConfig = useMemo(
@@ -70,7 +70,7 @@ export const EdgeSetupPage = () => {
         <Controls>
           <Button
             text={m.edge_setup_controls_configure()}
-            onClick={() => setShowWelcome(false)}
+            onClick={() => setisOnWelcomePage(false)}
           />
         </Controls>
       </div>
@@ -91,14 +91,21 @@ export const EdgeSetupPage = () => {
       title={m.edge_setup_page_title()}
       steps={stepsConfig}
       id="setup-wizard"
-      showWelcome={showWelcome}
+      isOnWelcomePage={isOnWelcomePage}
       welcomePageConfig={{
         title: m.edge_setup_welcome_title(),
         subtitle: m.edge_setup_welcome_subtitle(),
         content: <WelcomePageContent />,
         docsLink: 'https://docs.defguard.net/edge-component/deployment',
         docsText: m.edge_setup_welcome_docs_text(),
         media: <img src={welcomeImage} alt={m.edge_setup_welcome_image_alt()} />,
+        onClose: () => {
+          navigate({ to: '/vpn-overview', replace: true }).then(() => {
+            setTimeout(() => {
+              useEdgeWizardStore.getState().reset();
+            }, 100);
+          });
+        },
       }}
     >
       {stepsComponents[activeStep]}

web/src/pages/EdgeSetupPage/useEdgeWizardStore.tsx

@@ -5,7 +5,7 @@ import { type EdgeAdoptionState, EdgeSetupStep, type EdgeSetupStepValue } from '
 
 type StoreValues = {
   activeStep: EdgeSetupStepValue;
-  showWelcome: boolean;
+  isOnWelcomePage: boolean;
   common_name: string;
   ip_or_domain: string;
   grpc_port: number;
@@ -16,7 +16,7 @@ type StoreMethods = {
   reset: () => void;
   start: (values?: Partial<StoreValues>) => void;
   setActiveStep: (step: EdgeSetupStepValue) => void;
-  setShowWelcome: (show: boolean) => void;
+  setisOnWelcomePage: (show: boolean) => void;
   resetEdgeAdoptionState: () => void;
   setEdgeAdoptionState: (state: EdgeAdoptionState) => void;
 };
@@ -32,7 +32,7 @@ const edgeAdoptionStateDefaults: EdgeAdoptionState = {
 
 const defaults: StoreValues = {
   activeStep: EdgeSetupStep.EdgeComponent,
-  showWelcome: true,
+  isOnWelcomePage: true,
   common_name: '',
   ip_or_domain: '',
   grpc_port: 50051,
@@ -51,7 +51,7 @@ export const useEdgeWizardStore = create<StoreMethods & StoreValues>()(
         });
       },
       setActiveStep: (step) => set({ activeStep: step }),
-      setShowWelcome: (show) => set({ showWelcome: show }),
+      setisOnWelcomePage: (show) => set({ isOnWelcomePage: show }),
       resetEdgeAdoptionState: () =>
         set(() => ({
           edgeAdoptionState: { ...edgeAdoptionStateDefaults },
@@ -69,7 +69,7 @@ export const useEdgeWizardStore = create<StoreMethods & StoreValues>()(
           'reset',
           'start',
           'setActiveStep',
-          'setShowWelcome',
+          'setisOnWelcomePage',
           'resetEdgeAdoptionState',
           'setEdgeAdoptionState',
         ]),

web/src/pages/GatewaySetupPage/GatewaySetupPage.tsx

@@ -17,8 +17,8 @@ import { useGatewayWizardStore } from './useGatewayWizardStore';
 
 export const GatewaySetupPage = () => {
   const activeStep = useGatewayWizardStore((s) => s.activeStep);
-  const showWelcome = useGatewayWizardStore((s) => s.showWelcome);
-  const setShowWelcome = useGatewayWizardStore((s) => s.setShowWelcome);
+  const isOnWelcomePage = useGatewayWizardStore((s) => s.isOnWelcomePage);
+  const setisOnWelcomePage = useGatewayWizardStore((s) => s.setisOnWelcomePage);
   const navigate = useNavigate();
 
   const stepsConfig = useMemo(
@@ -61,7 +61,7 @@ export const GatewaySetupPage = () => {
         <Controls>
           <Button
             text={m.gateway_setup_controls_configure()}
-            onClick={() => setShowWelcome(false)}
+            onClick={() => setisOnWelcomePage(false)}
           />
         </Controls>
       </div>
@@ -82,14 +82,21 @@ export const GatewaySetupPage = () => {
       title={m.gateway_setup_page_title()}
       steps={stepsConfig}
       id="setup-wizard"
-      showWelcome={showWelcome}
+      isOnWelcomePage={isOnWelcomePage}
       welcomePageConfig={{
         title: m.gateway_setup_welcome_title(),
         subtitle: m.gateway_setup_welcome_subtitle(),
         content: <WelcomePageContent />,
         docsLink: 'https://docs.defguard.net/edge-component/deployment',
         docsText: m.gateway_setup_welcome_docs_text(),
         media: <img src={welcomeImage} alt={m.gateway_setup_welcome_image_alt()} />,
+        onClose: () => {
+          navigate({ to: '/locations', replace: true }).then(() => {
+            setTimeout(() => {
+              useGatewayWizardStore.getState().reset();
+            }, 100);
+          });
+        },
       }}
     >
       {stepsComponents[activeStep]}

web/src/pages/GatewaySetupPage/useGatewayWizardStore.tsx

@@ -15,7 +15,7 @@ type GatewayAdoptionState = {
 
 type StoreValues = {
   activeStep: GatewaySetupStepValue;
-  showWelcome: boolean;
+  isOnWelcomePage: boolean;
   common_name: string;
   ip_or_domain: string;
   grpc_port: number;
@@ -27,7 +27,7 @@ type StoreMethods = {
   reset: () => void;
   start: (values?: Partial<StoreValues>) => void;
   setActiveStep: (step: GatewaySetupStepValue) => void;
-  setShowWelcome: (show: boolean) => void;
+  setisOnWelcomePage: (show: boolean) => void;
   resetGatewayAdoptionState: () => void;
   setGatewayAdoptionState: (state: GatewayAdoptionState) => void;
 };
@@ -43,7 +43,7 @@ const gatewayAdoptionStateDefaults: GatewayAdoptionState = {
 
 const defaults: StoreValues = {
   activeStep: GatewaySetupStep.GatewayComponent,
-  showWelcome: true,
+  isOnWelcomePage: true,
   common_name: '',
   ip_or_domain: '',
   grpc_port: 50066,
@@ -63,7 +63,7 @@ export const useGatewayWizardStore = create<StoreMethods & StoreValues>()(
         });
       },
       setActiveStep: (step) => set({ activeStep: step }),
-      setShowWelcome: (show) => set({ showWelcome: show }),
+      setisOnWelcomePage: (show) => set({ isOnWelcomePage: show }),
       resetGatewayAdoptionState: () =>
         set(() => ({
           gatewayAdoptionState: { ...gatewayAdoptionStateDefaults },
@@ -81,7 +81,7 @@ export const useGatewayWizardStore = create<StoreMethods & StoreValues>()(
           'reset',
           'start',
           'setActiveStep',
-          'setShowWelcome',
+          'setisOnWelcomePage',
           'resetEdgeAdoptionState',
           'setEdgeAdoptionState',
         ]),

web/src/pages/SetupPage/SetupPage.tsx

@@ -117,7 +117,7 @@ export const SetupPage = () => {
       title={m.initial_setup_wizard_title()}
       steps={stepsConfig}
       id="setup-wizard"
-      showWelcome={isOnWelcomePage}
+      isOnWelcomePage={isOnWelcomePage}
       welcomePageConfig={{
         title: m.initial_setup_welcome_title(),
         subtitle: m.initial_setup_welcome_subtitle(),

web/src/pages/SetupPage/steps/SetupAdminUserStep.tsx

@@ -229,7 +229,7 @@ export const SetupAdminUserStep = () => {
       </form>
       <ModalControls
         submitProps={{
-          text: m.initial_setup_controls_next(),
+          text: m.controls_continue(),
           onClick: handleNext,
           loading: isPending,
         }}

web/src/pages/SetupPage/steps/SetupCertificateAuthorityStep.tsx

@@ -17,6 +17,7 @@ import { formChangeLogic } from '../../../shared/formLogic';
 import { CAOption, type CAOptionType, SetupPageStep } from '../types';
 import { useSetupWizardStore } from '../useSetupWizardStore';
 import './style.scss';
+import { BadgeVariant } from '../../../shared/defguard-ui/components/Badge/types';
 
 type ValidityValue = 1 | 2 | 3 | 5 | 10;
 
@@ -25,7 +26,11 @@ const validityOptions: SelectOption<ValidityValue>[] = [
   { key: 2, label: m.initial_setup_ca_validity_years({ years: 2 }), value: 2 },
   { key: 3, label: m.initial_setup_ca_validity_years({ years: 3 }), value: 3 },
   { key: 5, label: m.initial_setup_ca_validity_years({ years: 5 }), value: 5 },
-  { key: 10, label: m.initial_setup_ca_validity_years({ years: 10 }), value: 10 },
+  {
+    key: 10,
+    label: m.initial_setup_ca_validity_years({ years: 10 }),
+    value: 10,
+  },
 ];
 
 type CreateCAFormFields = CreateCAStoreValues;
@@ -250,9 +255,12 @@ export const SetupCertificateAuthorityStep = () => {
         value={caOption === CAOption.Create}
         onClick={() => setCAOption(CAOption.Create)}
         content={m.initial_setup_ca_option_create_description()}
+        badge={{
+          text: m.misc_recommended(),
+          variant: BadgeVariant.Success,
+        }}
       >
         <SizedBox height={ThemeSpacing.Xl2} />
-
         {caOption === CAOption.Create && <CreateCAForm />}
       </InteractiveBlock>
 
@@ -270,13 +278,13 @@ export const SetupCertificateAuthorityStep = () => {
 
       <ModalControls
         cancelProps={{
-          text: m.initial_setup_controls_back(),
+          text: m.controls_back(),
           onClick: handleBack,
           disabled: isPending,
           variant: 'outlined',
         }}
         submitProps={{
-          text: m.initial_setup_controls_continue(),
+          text: m.controls_continue(),
           onClick: handleNext,
           loading: isPending,
           disabled: isPending || !isPresent(caOption),

web/src/pages/SetupPage/steps/SetupCertificateAuthoritySummaryStep.tsx

@@ -94,7 +94,6 @@ export const SetupCertificateAuthoritySummaryStep = () => {
               {m.initial_setup_ca_info_label_common_name()}
             </div>
             <div className="ca-info-value">{commonName}</div>
-
             <div className="ca-info-label">
               {m.initial_setup_ca_info_label_validity()}
             </div>
@@ -115,7 +114,10 @@ export const SetupCertificateAuthoritySummaryStep = () => {
           onClick: handleBack,
           variant: 'outlined',
         }}
-        submitProps={{ text: m.initial_setup_controls_next(), onClick: handleNext }}
+        submitProps={{
+          text: m.initial_setup_controls_continue(),
+          onClick: handleNext,
+        }}
       />
     </WizardCard>
   );

web/src/pages/SetupPage/steps/SetupGeneralConfigStep.tsx

@@ -167,7 +167,7 @@ export const SetupGeneralConfigStep = () => {
       </form>
       <ModalControls
         submitProps={{
-          text: m.initial_setup_controls_next(),
+          text: m.initial_setup_controls_continue(),
           onClick: handleNext,
           loading: isPending,
         }}

web/src/shared/components/wizard/WizardPage/WizardPage.tsx

@@ -27,7 +27,7 @@ export const WizardPage = ({
   children,
   onClose,
   welcomePageConfig,
-  showWelcome = false,
+  isOnWelcomePage = false,
   ...containerProps
 }: Props) => {
   const activeStep = steps[activeStepId];
@@ -60,14 +60,14 @@ export const WizardPage = ({
 
   return (
     <div className={clsx('wizard-page', className)} {...containerProps}>
-      <WizardTop onClick={onClose} />
-      <div className="limiter">
-        <div className="content-tack">
-          <LayoutGrid variant="wizard">
-            {welcomePageConfig && showWelcome ? (
-              <WizardWelcomePage {...welcomePageConfig} />
-            ) : (
-              <>
+      {isPresent(welcomePageConfig) && isOnWelcomePage ? (
+        <WizardWelcomePage {...welcomePageConfig} />
+      ) : (
+        <>
+          <WizardTop onClick={onClose} />
+          <div className="limiter">
+            <div className="content-tack">
+              <LayoutGrid variant="wizard">
                 <div className="side">
                   <p className="title">{title}</p>
                   <SizedBox height={ThemeSpacing.Md} />
@@ -85,11 +85,11 @@ export const WizardPage = ({
                   <SizedBox height={ThemeSpacing.Xl2} />
                   {children}
                 </div>
-              </>
-            )}
-          </LayoutGrid>
-        </div>
-      </div>
+              </LayoutGrid>
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 };

web/src/shared/components/wizard/WizardTop/WizardTop.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export const WizardTop = ({ onClick }: Props) => {
   return (
-    <div className="wizard-top">
+    <div className={`wizard-top ${isPresent(onClick) ? 'closeable' : ''}`}>
       <div className="content-track">
         <NavLogo />
         {isPresent(onClick) && <IconButton icon="close" onClick={onClick} />}