From ccfd5372dbc6ecf39e7f44a9999781497c86b71c Mon Sep 17 00:00:00 2001
From: Alexander Heimbuch <github@heimbu.ch>
Date: Sun, 18 Aug 2024 08:31:25 +0200
Subject: [PATCH] feat: add onboarding acknowledgement

---
 .../onboarding/settings/onboarding_page.php   | 67 +++++++++++++++++--
 1 file changed, 63 insertions(+), 4 deletions(-)

diff --git a/lib/modules/onboarding/settings/onboarding_page.php b/lib/modules/onboarding/settings/onboarding_page.php
index b4b463f3..0d29d388 100644
--- 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%;
         }