From 060bc3623971844ec68f4e3ce3c17986dcbb268c Mon Sep 17 00:00:00 2001 From: Aleksander <170264518+t-aleksander@users.noreply.github.com> Date: Mon, 16 Feb 2026 15:24:47 +0100 Subject: [PATCH 1/3] design fixes --- web/messages/en/common.json | 4 +- web/messages/en/initial_wizard.json | 202 +++++++++--------- web/src/pages/EdgeSetupPage/EdgeSetupPage.tsx | 15 +- .../EdgeSetupPage/useEdgeWizardStore.tsx | 10 +- .../GatewaySetupPage/GatewaySetupPage.tsx | 15 +- .../useGatewayWizardStore.tsx | 10 +- web/src/pages/SetupPage/SetupPage.tsx | 2 +- .../SetupPage/steps/SetupAdminUserStep.tsx | 2 +- .../steps/SetupCertificateAuthorityStep.tsx | 16 +- .../SetupCertificateAuthoritySummaryStep.tsx | 6 +- .../steps/SetupGeneralConfigStep.tsx | 2 +- .../wizard/WizardPage/WizardPage.tsx | 28 +-- .../components/wizard/WizardTop/WizardTop.tsx | 2 +- .../WizardWelcomePage/WizardWelcomePage.tsx | 55 +++-- .../wizard/WizardWelcomePage/style.scss | 145 ++++++++----- web/src/shared/components/wizard/types.ts | 3 +- 16 files changed, 300 insertions(+), 217 deletions(-) diff --git a/web/messages/en/common.json b/web/messages/en/common.json index 6c50778f35..2310dcb6fc 100644 --- a/web/messages/en/common.json +++ b/web/messages/en/common.json @@ -52,5 +52,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." } diff --git a/web/messages/en/initial_wizard.json b/web/messages/en/initial_wizard.json index 9a1e6ca6e3..10306548f9 100644 --- a/web/messages/en/initial_wizard.json +++ b/web/messages/en/initial_wizard.json @@ -1,109 +1,113 @@ { - "$schema": "https://inlang.com/schema/inlang-message-format", - "initial_setup_wizard_title": "Initial Setup Wizard", - "initial_setup_wizard_subtitle": "This wizard will guide you through the initial configuration of your Defguard instance.", - "initial_setup_welcome_title": "Welcome to Defguard initial configuration wizard.", - "initial_setup_welcome_subtitle": "This wizard walks you through the steps to configure your VPN connection with a simple and intuitive setup process.", - "initial_setup_welcome_button_configure": "Configure Defguard", + "$schema": "https://inlang.com/schema/inlang-message-format", + "initial_setup_wizard_title": "Initial Setup Wizard", + "initial_setup_wizard_subtitle": "This wizard will guide you through the initial configuration of your Defguard instance.", + "initial_setup_welcome_title": "Welcome to Defguard initial configuration wizard.", + "initial_setup_welcome_subtitle": "This wizard walks you through the steps to configure your VPN connection with a simple and intuitive setup process.", + "initial_setup_welcome_button_configure": "Configure Defguard", "initial_setup_login_subtitle": "Please enter your admin credentials to continue the setup wizard.", - "initial_setup_step_admin_user_label": "Create Admin User", - "initial_setup_step_admin_user_description": "Manage core details and connection parameters for your VPN location.", - "initial_setup_step_general_config_label": "General Configuration", - "initial_setup_step_general_config_description": "Manage core details and connection parameters for your VPN location.", - "initial_setup_step_certificate_authority_label": "Certificate Authority", - "initial_setup_step_certificate_authority_description": "Securing component communication", - "initial_setup_step_certificate_authority_summary_label": "Certificate Authority Summary", - "initial_setup_step_certificate_authority_summary_description": "Securing component communication", - "initial_setup_step_edge_component_label": "Edge Component", - "initial_setup_step_edge_component_description": "Set up your VPN proxy quickly and ensure secure, optimized traffic flow for your users.", - "initial_setup_step_edge_adoption_label": "Edge Component Adoption", - "initial_setup_step_edge_adoption_description": "Review the system’s checks and see if any issues need attention before deployment.", - "initial_setup_step_confirmation_label": "Confirmation", - "initial_setup_step_confirmation_description": "Your configuration was successful. You’re all set.", + "initial_setup_step_admin_user_label": "Create Admin User", + "initial_setup_step_admin_user_description": "Manage core details and connection parameters for your VPN location.", + "initial_setup_step_general_config_label": "General Configuration", + "initial_setup_step_general_config_description": "Manage core details and connection parameters for your VPN location.", + "initial_setup_step_certificate_authority_label": "Certificate Authority", + "initial_setup_step_certificate_authority_description": "Securing component communication", + "initial_setup_step_certificate_authority_summary_label": "Certificate Authority Summary", + "initial_setup_step_certificate_authority_summary_description": "Securing component communication", + "initial_setup_step_edge_component_label": "Edge Component", + "initial_setup_step_edge_component_description": "Set up your VPN proxy quickly and ensure secure, optimized traffic flow for your users.", + "initial_setup_step_edge_adoption_label": "Edge Component Adoption", + "initial_setup_step_edge_adoption_description": "Review the system’s checks and see if any issues need attention before deployment.", + "initial_setup_step_confirmation_label": "Confirmation", + "initial_setup_step_confirmation_description": "Your configuration was successful. You’re all set.", - "initial_setup_admin_user_password_rule_required_label": "Field is required", - "initial_setup_admin_user_password_rule_required_message": "Password is required", - "initial_setup_admin_user_password_rule_min_label": "Minimum length of 8", - "initial_setup_admin_user_password_rule_min_message": "Password must be at least 8 characters", - "initial_setup_admin_user_password_rule_number_label": "At least one number required", - "initial_setup_admin_user_password_rule_number_message": "Password must contain at least one number", - "initial_setup_admin_user_password_rule_special_label": "At least one special character", - "initial_setup_admin_user_password_rule_special_message": "Password must contain at least one special character", - "initial_setup_admin_user_password_rule_lower_label": "At least one lowercase character", - "initial_setup_admin_user_password_rule_lower_message": "Password must contain at least one lowercase letter", - "initial_setup_admin_user_password_rule_upper_label": "At least one uppercase character", - "initial_setup_admin_user_password_rule_upper_message": "Password must contain at least one uppercase letter", - "initial_setup_admin_user_error_first_name_required": "First name is required", - "initial_setup_admin_user_error_last_name_required": "Last name is required", - "initial_setup_admin_user_error_username_min": "Username must be at least 3 characters", - "initial_setup_admin_user_error_email_invalid": "Invalid email address", - "initial_setup_admin_user_error_email_required": "Email is required", - "initial_setup_admin_user_label_first_name": "First Name", - "initial_setup_admin_user_label_last_name": "Last Name", - "initial_setup_admin_user_label_username": "Username", - "initial_setup_admin_user_label_email": "Email", - "initial_setup_admin_user_label_password": "Password", - "initial_setup_admin_user_error_create_failed": "Failed to create admin user. Please try again.", - "initial_setup_admin_user_password_checklist_title": "Your password must include:", + "initial_setup_admin_user_password_rule_required_label": "Field is required", + "initial_setup_admin_user_password_rule_required_message": "Password is required", + "initial_setup_admin_user_password_rule_min_label": "Minimum length of 8", + "initial_setup_admin_user_password_rule_min_message": "Password must be at least 8 characters", + "initial_setup_admin_user_password_rule_number_label": "At least one number required", + "initial_setup_admin_user_password_rule_number_message": "Password must contain at least one number", + "initial_setup_admin_user_password_rule_special_label": "At least one special character", + "initial_setup_admin_user_password_rule_special_message": "Password must contain at least one special character", + "initial_setup_admin_user_password_rule_lower_label": "At least one lowercase character", + "initial_setup_admin_user_password_rule_lower_message": "Password must contain at least one lowercase letter", + "initial_setup_admin_user_password_rule_upper_label": "At least one uppercase character", + "initial_setup_admin_user_password_rule_upper_message": "Password must contain at least one uppercase letter", + "initial_setup_admin_user_error_first_name_required": "First name is required", + "initial_setup_admin_user_error_last_name_required": "Last name is required", + "initial_setup_admin_user_error_username_min": "Username must be at least 3 characters", + "initial_setup_admin_user_error_email_invalid": "Invalid email address", + "initial_setup_admin_user_error_email_required": "Email is required", + "initial_setup_admin_user_label_first_name": "First Name", + "initial_setup_admin_user_label_last_name": "Last Name", + "initial_setup_admin_user_label_username": "Username", + "initial_setup_admin_user_label_email": "Email", + "initial_setup_admin_user_label_password": "Password", + "initial_setup_admin_user_error_create_failed": "Failed to create admin user. Please try again.", + "initial_setup_admin_user_password_checklist_title": "Your password must include:", - "initial_setup_general_config_error_invalid_url": "Invalid URL", - "initial_setup_general_config_error_defguard_url_required": "Defguard URL is required", - "initial_setup_general_config_error_admin_group_required": "Default admin group name is required", - "initial_setup_general_config_error_auth_period_min": "Authentication period must be at least 1 day", - "initial_setup_general_config_error_mfa_timeout_min": "MFA code timeout must be at least 60 seconds", - "initial_setup_general_config_label_defguard_url": "Defguard URL", - "initial_setup_general_config_label_admin_group": "Default Admin Group Name", - "initial_setup_general_config_label_auth_period": "Default Authentication Period (days)", - "initial_setup_general_config_label_mfa_timeout": "Default MFA Code Timeout (seconds)", - "initial_setup_general_config_label_public_proxy_url": "Public Edge component URL", - "initial_setup_general_config_error_save_failed": "Failed to create admin user. Please try again.", - "initial_setup_general_config_error_public_proxy_url_invalid": "Public Proxy URL must be a valid URL", - "initial_setup_general_config_error_public_proxy_url_required": "Public Proxy URL is required", + "initial_setup_general_config_error_invalid_url": "Invalid URL", + "initial_setup_general_config_error_defguard_url_required": "Defguard URL is required", + "initial_setup_general_config_error_admin_group_required": "Default admin group name is required", + "initial_setup_general_config_error_auth_period_min": "Authentication period must be at least 1 day", + "initial_setup_general_config_error_mfa_timeout_min": "MFA code timeout must be at least 60 seconds", + "initial_setup_general_config_label_defguard_url": "Defguard URL", + "initial_setup_general_config_label_admin_group": "Default Admin Group Name", + "initial_setup_general_config_label_auth_period": "Default Authentication Period (days)", + "initial_setup_general_config_label_mfa_timeout": "Default MFA Code Timeout (seconds)", + "initial_setup_general_config_label_public_proxy_url": "Public Edge component URL", + "initial_setup_general_config_error_save_failed": "Failed to create admin user. Please try again.", + "initial_setup_general_config_error_public_proxy_url_invalid": "Public Proxy URL must be a valid URL", + "initial_setup_general_config_error_public_proxy_url_required": "Public Proxy URL is required", - "initial_setup_ca_validity_one_year": "1 year", - "initial_setup_ca_validity_years": "{years} years", - "initial_setup_ca_error_common_name_required": "Common name is required", - "initial_setup_ca_error_email_invalid": "Invalid email address", - "initial_setup_ca_error_email_required": "Email is required", - "initial_setup_ca_error_validity_min": "Validity period must be at least 1 year", - "initial_setup_ca_error_cert_required": "Certificate file is required", - "initial_setup_ca_error_create_failed": "Failed to create CA. Please review the information and try again.", - "initial_setup_ca_error_upload_failed": "Failed to upload CA. Please ensure the certificate file is valid and try again.", - "initial_setup_ca_option_create_title": "Certificate Authority Setup", - "initial_setup_ca_option_create_description": "By choosing this option, Defguard will create its own certificate authority and automatically configure all components to use its certificates — no manual setup required.", - "initial_setup_ca_label_common_name": "Common Name", - "initial_setup_ca_placeholder_common_name": "Defguard Certificate Authority", - "initial_setup_ca_label_email": "Email", - "initial_setup_ca_placeholder_email": "email@example.com", - "initial_setup_ca_label_validity": "Validity Period", - "initial_setup_ca_option_use_own_title": "Use your own certificate authority", - "initial_setup_ca_option_use_own_description": "Upload your certificate authority certificate and Defguard will use it to issue and configure certificates for components.", + "initial_setup_ca_validity_one_year": "1 year", + "initial_setup_ca_validity_years": "{years} years", + "initial_setup_ca_error_common_name_required": "Common name is required", + "initial_setup_ca_error_email_invalid": "Invalid email address", + "initial_setup_ca_error_email_required": "Email is required", + "initial_setup_ca_error_validity_min": "Validity period must be at least 1 year", + "initial_setup_ca_error_cert_required": "Certificate file is required", + "initial_setup_ca_error_create_failed": "Failed to create CA. Please review the information and try again.", + "initial_setup_ca_error_upload_failed": "Failed to upload CA. Please ensure the certificate file is valid and try again.", + "initial_setup_ca_option_create_title": "Create a certificate authority & configure all Defguard components", + "initial_setup_ca_option_create_description": "By choosing this option, Defguard will create its own certificate authority and automatically configure all components to use its certificates — no manual setup required.", + "initial_setup_ca_label_common_name": "Common Name", + "initial_setup_ca_placeholder_common_name": "Defguard Certificate Authority", + "initial_setup_ca_label_email": "Email", + "initial_setup_ca_placeholder_email": "email@example.com", + "initial_setup_ca_label_validity": "Validity Period", + "initial_setup_ca_option_use_own_title": "Use your own certificate authority", + "initial_setup_ca_option_use_own_description": "Upload your certificate authority certificate and Defguard will use it to issue and configure certificates for components.", - "initial_setup_ca_generated_title": "Certificate Authority Generated", - "initial_setup_ca_generated_subtitle": "The system created all required certificate files, including the root certificate and private key. You can download these files and continue with the configuration.", - "initial_setup_ca_download_button": "Download CA certificate", - "initial_setup_ca_validated_title": "Certificate Authority Validated", - "initial_setup_ca_validated_subtitle": "Your uploaded Certificate Authority has been successfully validated. All required files were checked and confirmed as correct and ready for use. You can download the validated CA files if needed for your setup.", - "initial_setup_ca_info_title": "Information extracted from uploaded file", - "initial_setup_ca_info_label_common_name": "Common Name", - "initial_setup_ca_info_label_validity": "Validity", - "initial_setup_ca_validity_unknown": "—", - "initial_setup_ca_validity_less_than_year": "Less than a year", + "initial_setup_ca_generated_title": "Certificate Authority Generated", + "initial_setup_ca_generated_subtitle": "The system created all required certificate files, including the root certificate and private key. You can download these files and continue with the configuration.", + "initial_setup_ca_download_button": "Download CA certificate", + "initial_setup_ca_validated_title": "Certificate Authority Validated", + "initial_setup_ca_validated_subtitle": "Your uploaded Certificate Authority has been successfully validated. All required files were checked and confirmed as correct and ready for use. You can download the validated CA files if needed for your setup.", + "initial_setup_ca_info_title": "Information extracted from uploaded file", + "initial_setup_ca_info_label_common_name": "Common Name", + "initial_setup_ca_info_label_validity": "Validity", + "initial_setup_ca_validity_unknown": "—", + "initial_setup_ca_validity_less_than_year": "Less than a year", - "initial_setup_confirmation_error_finish_failed": "Failed to finish setup. Please try again.", - "initial_setup_confirmation_header": "General system settings are complete.", - "initial_setup_confirmation_lead": "You've completed the first stage of the setup. Defguard is almost ready to go.", - "initial_setup_confirmation_title": "In order to fully deploy Defguard you need:", - "initial_setup_confirmation_action_title": "Create first location.", - "initial_setup_confirmation_action_subtitle": "To organize users, manage access, track users activity and device monitoring.", - "initial_setup_confirmation_action_time": "Around 3 minutes", - "initial_setup_confirmation_footer": "Once you create your first location, the only step left will be to connect a gateway — and the system will be fully ready to use. This usually takes about n 10–15 minutes, depending on the complexity of your VPN configuration.", - "initial_setup_confirmation_cancel": "I'll do this later", - "initial_setup_confirmation_submit": "Create location now", + "initial_setup_confirmation_error_finish_failed": "Failed to finish setup. Please try again.", + "initial_setup_confirmation_header": "General system settings are complete.", + "initial_setup_confirmation_lead": "You've completed the first stage of the setup. Defguard is almost ready to go.", + "initial_setup_confirmation_title": "In order to fully deploy Defguard you need:", + "initial_setup_confirmation_action_title": "Create first location.", + "initial_setup_confirmation_action_subtitle": "To organize users, manage access, track users activity and device monitoring.", + "initial_setup_confirmation_action_time": "Around 3 minutes", + "initial_setup_confirmation_footer": "Once you create your first location, the only step left will be to connect a gateway — and the system will be fully ready to use. This usually takes about n 10–15 minutes, depending on the complexity of your VPN configuration.", + "initial_setup_confirmation_cancel": "I'll do this later", + "initial_setup_confirmation_submit": "Create location now", - "initial_setup_controls_back": "Back", - "initial_setup_controls_continue": "Continue", - "initial_setup_controls_next": "Next", - "initial_setup_controls_finish": "Finish" + "initial_setup_controls_back": "Back", + "initial_setup_controls_continue": "Continue", + "initial_setup_controls_finish": "Finish", + + "initial_setup_wizard_welcome_docs_description": "Before installation, we recommend reading our documentation to understand the system architecture and core components.", + "initial_setup_wizard_welcome_docs_alt": "Documentation", + "initial_setup_wizard_welcome_docs_link": "Read documentation", + "initial_setup_wizard_footer_support_text": "For help, contact our support team at" } diff --git a/web/src/pages/EdgeSetupPage/EdgeSetupPage.tsx b/web/src/pages/EdgeSetupPage/EdgeSetupPage.tsx index 4b76693f54..78e6b3c74d 100644 --- a/web/src/pages/EdgeSetupPage/EdgeSetupPage.tsx +++ b/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 = () => {