redesigned hub managed form

Author: tobihagemann

assets/css/custom.css

@@ -155,9 +155,7 @@ ul.list-primary li::marker {
   @apply border-secondary;
 }
 
-input:focus:invalid,
 input.show-invalid:invalid,
-textarea:focus:invalid,
 textarea.show-invalid:invalid {
   @apply border-red-500 ring-0;
 }

assets/js/hubmanaged.js

@@ -1,7 +1,9 @@
 "use strict";
 
 // requires store.js
+// requires newsletter.js
 const REQUEST_HUB_MANAGED_URL = STORE_API_URL + '/hub/request-managed';
+const VALIDATE_HUB_MANAGED_REQUEST_URL = STORE_API_URL + '/hub/validate-managed-request';
 
 class HubManaged {
 
@@ -11,6 +13,84 @@ class HubManaged {
     this._submitData = submitData;
   }
 
+  validateEmail() {
+    if (!$(this._form)[0].checkValidity()) {
+      $(this._form).find(':input').addClass('show-invalid');
+      this._feedbackData.errorMessage = 'Please fill in all required fields.';
+      return;
+    }
+
+    this._feedbackData.inProgress = true;
+    this._feedbackData.errorMessage = '';
+    $.ajax({
+      url: VALIDATE_HUB_MANAGED_REQUEST_URL,
+      type: 'GET',
+      data: {
+        email: this._submitData.email
+      }
+    }).done(_ => {
+      this.onValidationSucceeded();
+    }).fail(xhr => {
+      this.onValidationFailed(xhr.responseJSON?.message || 'Validating email failed.');
+    });
+  }
+
+  validateSubdomainAndTeam() {
+    if (!$(this._form)[0].checkValidity()) {
+      $(this._form).find(':input').addClass('show-invalid');
+      this._feedbackData.errorMessage = 'Please fill in all required fields.';
+      return;
+    }
+
+    this._feedbackData.inProgress = true;
+    this._feedbackData.errorMessage = '';
+    $.ajax({
+      url: VALIDATE_HUB_MANAGED_REQUEST_URL,
+      type: 'GET',
+      data: {
+        subdomain: this._submitData.subdomain,
+        team: this._submitData.team
+      }
+    }).done(_ => {
+      this.onValidationSucceeded();
+    }).fail(xhr => {
+      this.onValidationFailed(xhr.responseJSON?.message || 'Validating subdomain and team failed.');
+    });
+  }
+
+  validateQuantity() {
+    if (!$(this._form)[0].checkValidity()) {
+      $(this._form).find(':input').addClass('show-invalid');
+      this._feedbackData.errorMessage = 'Please fill in all required fields.';
+      return;
+    }
+
+    this._feedbackData.inProgress = true;
+    this._feedbackData.errorMessage = '';
+    $.ajax({
+      url: VALIDATE_HUB_MANAGED_REQUEST_URL,
+      type: 'GET',
+      data: {
+        quantity: this._submitData.quantity
+      }
+    }).done(_ => {
+      this.onValidationSucceeded();
+    }).fail(xhr => {
+      this.onValidationFailed(xhr.responseJSON?.message || 'Validating quantity failed.');
+    });
+  }
+
+  onValidationFailed(error) {
+    this._feedbackData.inProgress = false;
+    this._feedbackData.errorMessage = error;
+  }
+
+  onValidationSucceeded() {
+    this._feedbackData.currentStep++;
+    this._feedbackData.inProgress = false;
+    this._feedbackData.errorMessage = '';
+  }
+
   request() {
     if (!$(this._form)[0].checkValidity()) {
       $(this._form).find(':input').addClass('show-invalid');
@@ -27,6 +107,9 @@ class HubManaged {
       data: this._submitData
     }).done(_ => {
       this.onRequestSucceeded();
+      if (this._submitData.acceptNewsletter) {
+        subscribeToNewsletter(this._submitData.email, 7);
+      }
     }).fail(xhr => {
       this.onRequestFailed(xhr.responseJSON?.message || 'Requesting Hub Managed failed.');
     });
@@ -46,3 +129,31 @@ class HubManaged {
   }
 
 }
+
+function teamToSubdomain(team) {
+  // Convert to lowercase
+  let subdomain = team.toLowerCase();
+  // Replace German specific characters
+  subdomain = subdomain.replace(/ß/g, "ss").replace(/ä/g, "ae").replace(/ö/g, "oe").replace(/ü/g, "ue");
+  // Normalize to decompose accented characters and remove diacritics
+  subdomain = subdomain.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+  // Replace any whitespace (including spaces, tabs, etc.) with a hyphen
+  subdomain = subdomain.replace(/\s+/g, "-");
+  // Remove any characters that are not letters, numbers, or hyphens
+  subdomain = subdomain.replace(/[^a-z0-9-]/g, "");
+  // Replace multiple hyphens with a single hyphen
+  subdomain = subdomain.replace(/-+/g, "-");
+  // Remove any leading or trailing hyphens
+  subdomain = subdomain.replace(/^-+/, "").replace(/-+$/, "");
+  // Cap the subdomain at 63 characters
+  if (subdomain.length > 63) {
+    subdomain = subdomain.slice(0, 63);
+    // Remove any trailing hyphen after truncation
+    subdomain = subdomain.replace(/-+$/, "");
+  }
+  return subdomain;
+}
+
+function subdomainToURL(subdomain) {
+  return `https://${subdomain}.cryptomator.cloud`;
+}

i18n/de.yaml

@@ -24,6 +24,8 @@
   translation: "Ich bin damit einverstanden, Neuigkeiten von Cryptomator zu erhalten, und akzeptiere die <a class=\"text-link\" href=\"/de/privacy/\">Datenschutzerklärung</a>."
 - id: accept_newsletter_optional
   translation: "Ich bin damit einverstanden, Neuigkeiten von Cryptomator per E-Mail zu erhalten (optional)."
+- id: accept_hub_newsletter_optional
+  translation: "Ich bin damit einverstanden, Neuigkeiten von Cryptomator Hub per E-Mail zu erhalten (optional)."
 - id: accept_privacy
   translation: "Ich akzeptiere die <a class=\"text-link\" href=\"/de/privacy/\">Datenschutzerklärung</a>."
 - id: accept_privacy_implicitly
@@ -610,41 +612,61 @@
 - id: hub_managed_description
   translation: "Beantrage Zugang zu einer Managed-Instanz von Cryptomator Hub und hol dein Team mit der clientseitigen Verschlüsselung für deinen Cloud-Speicher an Bord."
 
-- id: hub_managed_info_header_title
-  translation: "Information"
-- id: hub_managed_info_header_description
-  translation: "Auf der Grundlage deiner Eingaben wird eine neue Hub-Instanz für dich erstellt. Du wirst der erste Administrator dieser Instanz sein."
-- id: hub_managed_info_subdomain
-  translation: "Subdomain"
-- id: hub_managed_info_subdomain_description
-  translation: "Die URL deiner Hub-Instanz. Wenn du eine eigene Domain verwenden möchtest, teile uns dies bitte unten mit."
-- id: hub_managed_info_email
+- id: hub_managed_steps_title
+  translation: "Schritt <span x-text=\"feedbackData.currentStep + 1\"></span> von <span x-text=\"steps.length\"></span>"
+- id: hub_managed_steps_next
+  translation: "Weiter"
+
+- id: hub_managed_step_1_nav_title
   translation: "Arbeits-E-Mail"
-- id: hub_managed_info_email_description
-  translation: "Die E-Mail-Adresse der Person, die der erste Administrator deiner Hub-Instanz sein wird."
-- id: hub_managed_info_quantity
+- id: hub_managed_step_1_title
+  translation: "Wie lautet die E-Mail-Adresse für deine Arbeit?"
+- id: hub_managed_step_1_email_placeholder
+  translation: "E-Mail-Adresse für die Arbeit"
+
+- id: hub_managed_step_2_nav_title
+  translation: "Team-Name"
+- id: hub_managed_step_2_title
+  translation: "Wie heißt dein Team?"
+- id: hub_managed_step_2_team_placeholder
+  translation: "Name deines Teams, Unternehmens oder deiner Organisation"
+- id: hub_managed_step_2_subdomain_description
+  translation: "Dies ist die URL deiner Hub-Instanz."
+- id: hub_managed_step_2_subdomain_placeholder
+  translation: "Subdomain deiner Hub-Instanz"
+
+- id: hub_managed_step_3_nav_title
+  translation: "Erwartete Nutzer"
+- id: hub_managed_step_3_title
+  translation: "Wie viele Nutzer erwartest du?"
+- id: hub_managed_step_3_quantity_description
+  translation: "Dies kann nur eine Schätzung sein und später geändert werden."
+- id: hub_managed_step_3_quantity_placeholder
   translation: "Anzahl der erwarteten Nutzer"
-- id: hub_managed_info_quantity_description
-  translation: "Die Anzahl der Nutzer, die du voraussichtlich haben wirst. Diese kann später geändert werden."
-- id: hub_managed_info_message
-  translation: "Nachricht (optional)"
-- id: hub_managed_info_message_description
-  translation: "Wenn du Fragen oder besondere Wünsche hast, lass sie uns bitte wissen."
 
-- id: hub_managed_trial_info
-  translation: "Keine Kreditkarte erforderlich. Starte noch heute mit deiner kostenlosen 30-Tage-Testversion."
-- id: hub_managed_loadcaptcha
+- id: hub_managed_step_4_nav_title
+  translation: "Zusammenfassung"
+- id: hub_managed_step_4_title
+  translation: "Zusammenfassung"
+- id: hub_managed_step_4_email
+  translation: "E-Mail"
+- id: hub_managed_step_4_team
+  translation: "Team-Name"
+- id: hub_managed_step_4_url
+  translation: "URL"
+- id: hub_managed_step_4_quantity
+  translation: "Anzahl der erwarteten Nutzer"
+- id: hub_managed_step_4_loadcaptcha
   translation: "Weiter…"
-- id: hub_managed_submit
+- id: hub_managed_step_4_submit
   translation: "Zugang anfragen"
+
 - id: hub_managed_success_title
   translation: "Deine Anfrage wurde versendet!"
 - id: hub_managed_success_description
   translation: "Wir haben deine Anfrage erhalten und werden sie so schnell wie möglich prüfen."
 
-- id: hub_managed_pricing_title
-  translation: "Preise"
-- id: hub_managed_pricing_description
+- id: hub_managed_trial_info
   translation: "Keine Kreditkarte erforderlich. Starte noch heute mit deiner kostenlosen 30-Tage-Testversion."
 
 - id: hub_managed_contact_us_title
@@ -662,14 +684,8 @@
   translation: "Lade Cryptomator ohne Hub herunter, wenn du Tresore alleine nutzen möchtest."
 - id: hub_managed_low_quantity_description_2
   translation: "Lade Cryptomator ohne Hub herunter, wenn du Tresore mit jemandem teilen möchtest. Lies die <a class=\"text-link\" href=\"https://docs.cryptomator.org/security/best-practices/#sharing-of-vaults\" target=\"_blank\" rel=\"noopener\">Best Practices zum Teilen von Tresoren</a>."
-- id: hub_managed_low_quantity_description_3
-  translation: "Lade Cryptomator ohne Hub herunter, wenn du Tresore mit einem kleinen Team teilen möchtest. Lies die <a class=\"text-link\" href=\"https://docs.cryptomator.org/security/best-practices/#sharing-of-vaults\" target=\"_blank\" rel=\"noopener\">Best Practices zum Teilen von Tresoren</a>."
-- id: hub_managed_low_quantity_description_4
-  translation: "Ansonsten kannst du gerne Zugang zu einer Managed-Instanz von Cryptomator Hub anfragen."
-- id: hub_managed_low_quantity_submit_1
+- id: hub_managed_low_quantity_submit
   translation: "Zu Downloads"
-- id: hub_managed_low_quantity_submit_2
-  translation: "Anfrage bestätigen"
 
 # Hub Setup
 - id: hub_setup_description

i18n/en.yaml

@@ -24,6 +24,8 @@
   translation: "I agree to get updates from Cryptomator and accept the <a class=\"text-link\" href=\"/privacy/\">Privacy Policy</a>."
 - id: accept_newsletter_optional
   translation: "I agree to get updates from Cryptomator via email (optional)."
+- id: accept_hub_newsletter_optional
+  translation: "I agree to get updates from Cryptomator Hub via email (optional)."
 - id: accept_privacy
   translation: "I accept the <a class=\"text-link\" href=\"/privacy/\">Privacy Policy</a>."
 - id: accept_privacy_implicitly
@@ -610,41 +612,61 @@
 - id: hub_managed_description
   translation: "Request access to a managed instance of Cryptomator Hub and get your team on board with client-side encryption for your cloud storage."
 
-- id: hub_managed_info_header_title
-  translation: "Information"
-- id: hub_managed_info_header_description
-  translation: "Based on your input, a new Hub instance will be created for you. You will be the first admin of this instance."
-- id: hub_managed_info_subdomain
-  translation: "Subdomain"
-- id: hub_managed_info_subdomain_description
-  translation: "The URL of your Hub instance. If you'd like to use a custom domain, please let us know below."
-- id: hub_managed_info_email
-  translation: "Work Email"
-- id: hub_managed_info_email_description
-  translation: "The email address of the person who will be the first admin of your Hub instance."
-- id: hub_managed_info_quantity
-  translation: "Number of Expected Users"
-- id: hub_managed_info_quantity_description
-  translation: "The number of users you expect to have. This can be changed later."
-- id: hub_managed_info_message
-  translation: "Message (optional)"
-- id: hub_managed_info_message_description
-  translation: "If you have any questions or special requirements, please let us know."
+- id: hub_managed_steps_title
+  translation: "Step <span x-text=\"feedbackData.currentStep + 1\"></span> of <span x-text=\"steps.length\"></span>"
+- id: hub_managed_steps_next
+  translation: "Next"
 
-- id: hub_managed_trial_info
-  translation: "No credit card required. Get started today with your 30-day free trial."
-- id: hub_managed_loadcaptcha
+- id: hub_managed_step_1_nav_title
+  translation: "Work Email"
+- id: hub_managed_step_1_title
+  translation: "What's your email address for work?"
+- id: hub_managed_step_1_email_placeholder
+  translation: "Email address for work"
+
+- id: hub_managed_step_2_nav_title
+  translation: "Team Name"
+- id: hub_managed_step_2_title
+  translation: "What's your team's name?"
+- id: hub_managed_step_2_team_placeholder
+  translation: "Name of your team, company, or organization"
+- id: hub_managed_step_2_subdomain_description
+  translation: "This is the URL of your Hub instance."
+- id: hub_managed_step_2_subdomain_placeholder
+  translation: "Subdomain of your Hub instance"
+
+- id: hub_managed_step_3_nav_title
+  translation: "Expected Users"
+- id: hub_managed_step_3_title
+  translation: "How many users do you expect?"
+- id: hub_managed_step_3_quantity_description
+  translation: "This can be just an estimate and changed later."
+- id: hub_managed_step_3_quantity_placeholder
+  translation: "Number of expected users"
+
+- id: hub_managed_step_4_nav_title
+  translation: "Summary"
+- id: hub_managed_step_4_title
+  translation: "Summary"
+- id: hub_managed_step_4_email
+  translation: "Email"
+- id: hub_managed_step_4_team
+  translation: "Team Name"
+- id: hub_managed_step_4_url
+  translation: "URL"
+- id: hub_managed_step_4_quantity
+  translation: "Expected Users"
+- id: hub_managed_step_4_loadcaptcha
   translation: "Continue…"
-- id: hub_managed_submit
+- id: hub_managed_step_4_submit
   translation: "Request Access"
+
 - id: hub_managed_success_title
   translation: "Your request has been sent!"
 - id: hub_managed_success_description
   translation: "We have received your request and will evaluate it as soon as possible."
 
-- id: hub_managed_pricing_title
-  translation: "Pricing"
-- id: hub_managed_pricing_description
+- id: hub_managed_trial_info
   translation: "No credit card required. Get started today with your 30-day free trial."
 
 - id: hub_managed_contact_us_title
@@ -662,14 +684,8 @@
   translation: "Download Cryptomator without Hub if you intend to use vaults on your own."
 - id: hub_managed_low_quantity_description_2
   translation: "Download Cryptomator without Hub if you intend to share vaults with another person. Check out the <a class=\"text-link\" href=\"https://docs.cryptomator.org/security/best-practices/#sharing-of-vaults\" target=\"_blank\" rel=\"noopener\">best practices on how to share vaults</a>."
-- id: hub_managed_low_quantity_description_3
-  translation: "Download Cryptomator without Hub if you intend to share vaults with a small team. Check out the <a class=\"text-link\" href=\"https://docs.cryptomator.org/security/best-practices/#sharing-of-vaults\" target=\"_blank\" rel=\"noopener\">best practices on how to share vaults</a>."
-- id: hub_managed_low_quantity_description_4
-  translation: "Otherwise, feel free to request access to a managed instance of Cryptomator Hub."
-- id: hub_managed_low_quantity_submit_1
+- id: hub_managed_low_quantity_submit
   translation: "Go to Downloads"
-- id: hub_managed_low_quantity_submit_2
-  translation: "Confirm Request"
 
 # Hub Setup
 - id: hub_setup_description