From e7185d277fe5d49d2ef22cdff1086c9e80f55d52 Mon Sep 17 00:00:00 2001
From: Tobias Hagemann <tobias.hagemann@skymatic.de>
Date: Thu, 7 Sep 2023 13:01:24 +0200
Subject: [PATCH] added modal when requesting hub managed with low quantity

---
 assets/css/custom.css                         |  2 +-
 i18n/de.yaml                                  | 21 +++++-
 i18n/en.yaml                                  | 21 +++++-
 layouts/hub-billing/single.html               |  4 +-
 layouts/hub-managed/single.html               |  8 ++-
 .../partials/hub-managed-low-quantity.html    | 68 +++++++++++++++++++
 6 files changed, 114 insertions(+), 10 deletions(-)
 create mode 100644 layouts/partials/hub-managed-low-quantity.html

diff --git a/assets/css/custom.css b/assets/css/custom.css
index c42daaab64..e993070ebc 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -12,7 +12,7 @@
 }
 
 .btn {
-  @apply inline-block border rounded no-underline px-4 py-2;
+  @apply inline-block border rounded no-underline text-center px-4 py-2;
 }
 
 .btn:hover,
diff --git a/i18n/de.yaml b/i18n/de.yaml
index f098e1c4cb..79f581b6dd 100644
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -28,6 +28,8 @@
   translation: "Ich akzeptiere die <a class=\"text-primary no-underline hover:underline\" href=\"/de/hub/managed/terms/\">AGB</a> sowie die <a class=\"text-primary no-underline hover:underline\" href=\"/de/privacy/\">Datenschutzerklärung</a>."
 - id: faq_title
   translation: "Häufig gestellte Fragen"
+- id: modal_cancel
+  translation: "Abbrechen"
 
 # Android
 - id: android_getkey_title
@@ -432,8 +434,6 @@
   translation: "Weiter"
 - id: hub_billing_manage_modal_confirm
   translation: "Bestätigen"
-- id: hub_billing_manage_modal_cancel
-  translation: "Abbrechen"
 
 - id: hub_billing_manage_restart_subscription_title
   translation: "Abonnement fortsetzen"
@@ -548,6 +548,23 @@
 - id: hub_managed_contact_us_button
   translation: "Kontaktiere uns"
 
+- id: hub_managed_low_quantity_title
+  translation: "Empfehlung"
+- id: hub_managed_low_quantity_description
+  translation: "Cryptomator Hub wurde für Teams und Organisationen entwickelt, die Tresore mit ihren eigenen Accounts entsperren möchten, anstatt mit einem gemeinsamen Passwort."
+- id: hub_managed_low_quantity_description_1
+  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-primary no-underline hover:underline\" href=\"https://docs.cryptomator.org/en/latest/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-primary no-underline hover:underline\" href=\"https://docs.cryptomator.org/en/latest/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 anfordern."
+- id: hub_managed_low_quantity_submit_1
+  translation: "Zu Downloads"
+- id: hub_managed_low_quantity_submit_2
+  translation: "Anfrage bestätigen"
+
 # Hub Setup
 - id: hub_setup_description
   translation: "Generiere die erforderlichen Konfigurationsvorlagen für deine Hub-Installation und hol dein Team mit der clientseitigen Verschlüsselung für deinen Cloud-Speicher an Bord."
diff --git a/i18n/en.yaml b/i18n/en.yaml
index c642d35e38..cafac64b91 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -28,6 +28,8 @@
   translation: "I accept the <a class=\"text-primary no-underline hover:underline\" href=\"/hub/managed/terms/\">Terms & Conditions</a> as well as the <a class=\"text-primary no-underline hover:underline\" href=\"/privacy/\">Privacy Policy</a>."
 - id: faq_title
   translation: "Frequently Asked Questions"
+- id: modal_cancel
+  translation: "Cancel"
 
 # Android
 - id: android_getkey_title
@@ -432,8 +434,6 @@
   translation: "Continue"
 - id: hub_billing_manage_modal_confirm
   translation: "Confirm"
-- id: hub_billing_manage_modal_cancel
-  translation: "Cancel"
 
 - id: hub_billing_manage_restart_subscription_title
   translation: "Resume Subscription"
@@ -548,6 +548,23 @@
 - id: hub_managed_contact_us_button
   translation: "Contact Us"
 
+- id: hub_managed_low_quantity_title
+  translation: "Recommendation"
+- id: hub_managed_low_quantity_description
+  translation: "Cryptomator Hub is designed for teams and organizations that want to unlock vaults using their own accounts instead of a shared password."
+- id: hub_managed_low_quantity_description_1
+  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-primary no-underline hover:underline\" href=\"https://docs.cryptomator.org/en/latest/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-primary no-underline hover:underline\" href=\"https://docs.cryptomator.org/en/latest/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
+  translation: "Go to Downloads"
+- id: hub_managed_low_quantity_submit_2
+  translation: "Confirm Request"
+
 # Hub Setup
 - id: hub_setup_description
   translation: "Generate the necessary configuration templates for your Hub deployment and get your team on board with client-side encryption for your cloud storage."
diff --git a/layouts/hub-billing/single.html b/layouts/hub-billing/single.html
index 7ce19d7f99..a5b35ca464 100644
--- a/layouts/hub-billing/single.html
+++ b/layouts/hub-billing/single.html
@@ -208,7 +208,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="restart-m
                       {{ i18n "hub_billing_manage_modal_confirm" . }}
                     </button>
                     <button :disabled="subscriptionData.inProgress" @click.prevent="subscriptionData.restartModal.open = false" type="button" class="btn btn-outline-gray-500 flex-shrink-0 w-full md:w-auto">
-                      {{ i18n "hub_billing_manage_modal_cancel" . }}
+                      {{ i18n "modal_cancel" . }}
                     </button>
                     <p x-show="subscriptionData.errorMessage" class="text-center text-sm text-red-600 mt-4 md:text-left md:mr-3 md:mt-0" x-text="subscriptionData.errorMessage"></p>
                   </div>
@@ -278,7 +278,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
                       {{ i18n "hub_billing_manage_modal_confirm" . }}
                     </button>
                     <button :disabled="subscriptionData.inProgress" @click.prevent="subscriptionData.changeSeatsModal.open = false" type="button" class="btn btn-outline-gray-500 flex-shrink-0 w-full md:w-auto">
-                      {{ i18n "hub_billing_manage_modal_cancel" . }}
+                      {{ i18n "modal_cancel" . }}
                     </button>
                     <p x-show="subscriptionData.errorMessage" class="text-center text-sm text-red-600 mt-4 md:text-left md:mr-3 md:mt-0" x-text="subscriptionData.errorMessage"></p>
                   </div>
diff --git a/layouts/hub-managed/single.html b/layouts/hub-managed/single.html
index 289d7a8069..7ef098ba0b 100644
--- a/layouts/hub-managed/single.html
+++ b/layouts/hub-managed/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, subdomain: '', email: '', quantity: null, message: ''}, acceptTerms: false}" class="container py-12">
+  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, subdomain: '', email: '', quantity: null, message: ''}, acceptTerms: false, lowQuantityModalIsOpen: false, hubManaged: null}" x-init="hubManaged = new HubManaged($refs.form, feedbackData, submitData)" class="container py-12">
     <header class="prose prose-sm md:prose max-w-none md:max-w-none mb-6">
       <h1>{{ .Title }}</h1>
       <p class="lead">{{ i18n "hub_managed_description" }}</p>
@@ -46,7 +46,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
               <label for="quantity" class="block text-sm font-medium text-gray-700">
                 {{ i18n "hub_managed_info_quantity" }}
               </label>
-              <input type="number" id="quantity" min="5" max="10000" step="1" class="mt-1 block w-full rounded border-gray-300 focus:ring-0 focus:border-secondary" placeholder="min. 5" x-model="submitData.quantity" @blur="$el.classList.add('show-invalid')" required>
+              <input type="number" id="quantity" min="1" max="10000" step="1" class="mt-1 block w-full rounded border-gray-300 focus:ring-0 focus:border-secondary" x-model="submitData.quantity" @blur="$el.classList.add('show-invalid')" required>
               <p class="mt-2 text-sm text-gray-500">
                 {{ i18n "hub_managed_info_quantity_description" }}
               </p>
@@ -84,7 +84,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
         <div x-show="!submitData.captcha" x-ref="captchaWrapper" class="flex justify-center">
           <button :disabled="!acceptTerms" @click.prevent="loadRecaptcha($refs.captchaWrapper, (token) => submitData.captcha = token)" class="btn btn-primary w-full md:w-64">{{ i18n "hub_managed_loadcaptcha" }}</button>
         </div>
-        <button x-show="submitData.captcha" :disabled="feedbackData.inProgress || !acceptTerms" @click.prevent="new HubManaged($refs.form, feedbackData, submitData).request()" type="submit" class="btn btn-primary w-full md:w-64" x-cloak>
+        <button x-show="submitData.captcha" :disabled="feedbackData.inProgress || !acceptTerms" @click.prevent="submitData.quantity > 0 && submitData.quantity < 5 ? lowQuantityModalIsOpen = true : hubManaged.request()" type="submit" class="btn btn-primary w-full md:w-64" x-cloak>
           <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fas fa-fw" aria-hidden="true"></i> {{ i18n "hub_managed_submit" }}
         </button>
         <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mt-2" x-text="feedbackData.errorMessage"></p>
@@ -99,6 +99,8 @@ <h3 class="font-headline text-lg md:text-xl leading-relaxed mb-4">
         </p>
       </div>
     </form>
+
+    {{ partial "hub-managed-low-quantity.html" (dict "context" . "Site" $.Site "isOpen" "lowQuantityModalIsOpen" "quantity" "submitData.quantity" "hubManaged" "hubManaged") }}
   </section>
 
   <section x-data="{data: {selfHostedMonthlyPrice: null, managedMonthlyPrice: null}}" x-init="new HubPricing(data).loadPrice()" class="container py-12">
diff --git a/layouts/partials/hub-managed-low-quantity.html b/layouts/partials/hub-managed-low-quantity.html
new file mode 100644
index 0000000000..2b74312a0c
--- /dev/null
+++ b/layouts/partials/hub-managed-low-quantity.html
@@ -0,0 +1,68 @@
+<div x-show="{{ .isOpen }}" class="relative z-10" aria-labelledby="quantity-one-modal-title" role="dialog" aria-modal="true" x-cloak>
+  <div x-show="{{ .isOpen }}" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+  <div class="fixed z-10 inset-0 overflow-y-auto">
+    <div class="flex items-end md:items-center justify-center min-h-full p-4 text-center md:p-0">
+      <div x-show="{{ .isOpen }}" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 md:translate-y-0 md:scale-95" x-transition:enter-end="opacity-100 translate-y-0 md:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 md:scale-100" x-transition:leave-end="opacity-0 translate-y-4 md:translate-y-0 md:scale-95" class="relative transform rounded shadow bg-white text-left overflow-hidden transition-all md:my-8 md:max-w-xl md:w-full">
+        <div class="p-4">
+          <div class="md:flex md:items-start">
+            <div class="flex-shrink-0 text-center">
+              <div class="fa-stack text-2xl text-primary-l2 md:text-xl">
+                <i class="fas fa-circle fa-stack-2x"></i>
+                <i class="fas fa-lightbulb-on fa-stack-1x text-primary"></i>
+              </div>
+            </div>
+            <div class="mt-3 text-center md:ml-4 md:mt-0 md:text-left">
+              <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="quantity-one-modal-title">
+                {{ i18n "hub_managed_low_quantity_title" }}
+              </h3>
+              <p class="text-sm md:text-base leading-relaxed text-gray-700 mb-4">
+                {{ i18n "hub_managed_low_quantity_description" }}
+              </p>
+              <template x-if="{{ .quantity }} == 1">
+                <p class="text-sm md:text-base leading-relaxed text-gray-700 mb-4">
+                  {{ i18n "hub_managed_low_quantity_description_1" }}
+                </p>
+              </template>
+              <template x-if="{{ .quantity }} == 2">
+                <p class="text-sm md:text-base leading-relaxed text-gray-700 mb-4">
+                  {{ i18n "hub_managed_low_quantity_description_2" | safeHTML }}
+                </p>
+              </template>
+              <template x-if="{{ .quantity }} >= 3">
+                <p class="text-sm md:text-base leading-relaxed text-gray-700 mb-4">
+                  {{ i18n "hub_managed_low_quantity_description_3" | safeHTML }}
+                </p>
+              </template>
+              <template x-if="{{ .quantity }} >= 3">
+                <p class="text-sm md:text-base leading-relaxed text-gray-700 mb-4">
+                  {{ i18n "hub_managed_low_quantity_description_4" | safeHTML }}
+                </p>
+              </template>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
+          <template x-if="{{ .quantity }} < 3">
+            <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary flex-shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+              {{ i18n "hub_managed_low_quantity_submit_1" }}
+            </a>
+          </template>
+          <template x-if="{{ .quantity }} >= 3">
+            <button type="submit" class="btn btn-primary flex-shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0" @click.prevent="{{ .hubManaged }}.request(); {{ .isOpen }} = false">
+              {{ i18n "hub_managed_low_quantity_submit_2" }}
+            </button>
+          </template>
+          <template x-if="{{ .quantity }} >= 3">
+            <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-outline-primary flex-shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+              {{ i18n "hub_managed_low_quantity_submit_1" }}
+            </a>
+          </template>
+          <button type="button" class="btn btn-outline-gray-500 flex-shrink-0 w-full md:w-auto" @click.prevent="{{ .isOpen }} = false">
+            {{ i18n "modal_cancel" }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>