Merge pull request #1492 from alexander-heimbuch/feat/onboarding-wiza…

…rd-acknowledgement feat: add onboarding acknowledgement
podlove · Aug 24, 2024 · d20cc80 · d20cc80
2 parents 14b6010 + ccfd537
commit d20cc80
Showing 1 changed file with 63 additions and 4 deletions.
diff --git a/lib/modules/onboarding/settings/onboarding_page.php b/lib/modules/onboarding/settings/onboarding_page.php
@@ -47,27 +47,86 @@ public function page()
     $userLang = explode("_", get_locale())[0];
 
     $iframeSrc = "$onboardingInclude?site_url=$site&user_login=$user&password=$password&lang=$userLang";
+    $acknowledgeHeadline = __('Onboarding Assistant 👋', 'podlove-podcasting-plugin-for-wordpress');
+    $acknowledgeDescription = __('To be able to offer you this service, we have to run the onboarding assistant on our external server. We have done everything in our power to make the service as privacy friendly as possible. We do not store any of your entered data, everything is saved in your browser 🤞. However, it is important to us that you are aware of this fact before you use the onboarding service.', 'podlove-podcasting-plugin-for-wordpress');
+    $acknowledgeButton = __('All right, I\'ve got it', 'podlove-podcasting-plugin-for-wordpress');
 
-    // this is needed because of this 18 years old bug: https://bugzilla.mozilla.org/show_bug.cgi?id=356558
     echo <<<EOD
-      <iframe id="publisher-iframe"></iframe>
+      <iframe id="onboarding-assistant" class="hidden"></iframe>
+      <div id="onboarding-acknowledge">
+        <h1 class="onboarding-headline">{$acknowledgeHeadline}</h1>
+        <p class="onboarding-description">{$acknowledgeDescription}</p>
+        <button id="acknowledge-button" class="onboarding-button">{$acknowledgeButton}</button>
+      </div>
 
       <script type="module">
-        document.getElementById("publisher-iframe").contentWindow.location.href = "{$iframeSrc}";
+        const acknowledgeHint = document.getElementById("onboarding-acknowledge");
+        const acknowledgeButton = document.getElementById("acknowledge-button");
+        const onboardingAssistant = document.getElementById("onboarding-assistant");
+        const onboardingAcknowledged = localStorage.getItem("podlove-pulbisher:onboarding-acknowledged");
+
+        function loadService() {
+          localStorage.setItem("podlove-pulbisher:onboarding-acknowledged", true);
+          onboardingAssistant.contentWindow.location.href = "{$iframeSrc}";
+          onboardingAssistant.classList.remove("hidden");
+          acknowledgeHint.classList.add("hidden");
+        }
+
+        if (onboardingAcknowledged) {
+          loadService();
+        }
+
+        acknowledgeButton.addEventListener("click", loadService);
       </script>
 
       <style>
-        #publisher-iframe {
+        #onboarding-assistant.hidden, #onboarding-acknowledge.hidden {
+          display: none;
+        }
+
+        #onboarding-assistant, #onboarding-acknowledge {
           width: 100%;
           height: 100vh;
           position: absolute;
           top: 0;
         }
 
+        #onboarding-acknowledge {
+          background: rgba(128, 128, 128, 0.3);
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+        }
+
         .update-message {
           display: none;
         }
 
+        .onboarding-headline {
+          margin-top: 80px;
+          margin-bottom: 25px;
+          padding: 0;
+        }
+
+        .onboarding-description {
+          width: 50%;
+          text-center;
+          margin-bottom: 25px;
+        }
+
+        .onboarding-button {
+          color: white;
+          font-size: 0.875em;
+          padding: 0.5rem 0.75rem;
+          line-height: 1rem;
+          font-weight: 500;
+          border-color: transparent;
+          background-color: rgb(79 70 229);
+          border-width: 1px;
+          border-radius: 0.375rem;
+          cursor: pointer;
+        }
+
         #wpbody {
           height: 100%;
         }