Merge pull request #997 from simple-login/feature/adapt-extension-setup

Adapt extension setup

app/onboarding/__init__.py

@@ -1,4 +1,5 @@
 from .views import (
     index,
     final,
+    setup_done,
 )

app/onboarding/views/index.py

@@ -4,6 +4,4 @@ from flask import render_template
 
 @onboarding_bp.route("/", methods=["GET"])
 def index():
-    return render_template(
-        "onboarding/index.html",
-    )
+    return render_template("onboarding/index.html")

app/onboarding/views/setup_done.py

@@ -0,0 +1,24 @@
+import arrow
+from flask import make_response, render_template
+from flask_login import login_required
+
+from app.config import URL
+from app.onboarding.base import onboarding_bp
+
+
+@onboarding_bp.route("/setup_done", methods=["GET", "POST"])
+@login_required
+def setup_done():
+    response = make_response(render_template("onboarding/setup_done.html"))
+
+    # TODO: Remove when the extension is updated everywhere
+    response.set_cookie(
+        "setup_done",
+        value="true",
+        expires=arrow.now().shift(days=30).datetime,
+        secure=True if URL.startswith("https") else False,
+        httponly=True,
+        samesite="Lax",
+    )
+
+    return response

templates/onboarding/final.html

@@ -43,7 +43,27 @@
 
     <div class="text-center" style="margin-top:250px">
       <p style="font-size: 1rem">For advanced options please use our <a href="{{ url_for("dashboard.index") }}">web dashboard</a></p>
+      <p id="extension-version-text" class="" style="display:none;"></p>
     </div>
   </div>
 
+  <script type="text/javascript">
+    const extensionVersionTextElement = document.getElementById("extension-version-text");
+    window.addEventListener("message", (event) => {
+        if (!event.data) return;
+        if (!event.data.tag) return;
+        if (event.data.tag === "EXTENSION_INSTALLED_RESPONSE") {
+            const eventData = event.data.data;
+            if (!eventData) return;
+
+            extensionVersionTextElement.style.display = "block";
+            extensionVersionTextElement.textContent = `Extension version: ${eventData.version}`;
+        }
+    });
+    setTimeout(function() {
+        const data = { tag: "EXTENSION_INSTALLED_QUERY" };
+        window.postMessage(data, "/");
+    }, 300); // Give some time to the extension for registering the listener
+  </script>
+
 {% endblock %}

templates/onboarding/index.html

@@ -18,12 +18,30 @@
     <h2 class="text-dark" style="font-size:2rem">Let's take back control of your inbox!</h2>
   </div>
 
-  <!-- Button container -->
   <div class="mt-8 text-center">
-    <a class="mx-6 p-4 text-decoration-none" style="background:black;color:white;" href="{{ url_for('auth.register', next=url_for('onboarding.final')) }}">Create a new account</a>
-    <a class="mx-6 p-4 text-decoration-none" style="background:white;color:black;border-radius: 2px;border:1px solid black;" href="{{ url_for('auth.login', next=url_for('onboarding.final')) }}">I already have an account</a>
+  {% if current_user != None and current_user.is_authenticated %}
+    <h2 class="text-black-50" style="font-size:2rem">Performing the extension setup...</h2>
+  {% else %}
+    <a class="mx-6 p-4 text-decoration-none" style="background:black;color:white;" href="{{ url_for('auth.register', next=url_for('onboarding.setup_done')) }}">Create a new account</a>
+    <a class="mx-6 p-4 text-decoration-none" style="background:white;color:black;border-radius: 2px;border:1px solid black;" href="{{ url_for('auth.login', next=url_for('onboarding.setup_done')) }}">I already have an account</a>
+  {% endif %}
   </div>
-
 </div>
 
+  {% if current_user != None and current_user.is_authenticated %}
+    <script type="text/javascript">
+        let counterIterations = 5;
+        let extensionSetupIntervalId = setInterval(function() {
+            counterIterations--;
+            if (counterIterations === 0) {
+                clearInterval(extensionSetupIntervalId);
+                return;
+            }
+
+            const data = { tag: "PERFORM_EXTENSION_SETUP" };
+            window.postMessage(data, "/");
+        }, 300); // Send it many times, in case the extension had not registered the listener yet
+    </script>
+  {% endif %}
+
 {% endblock %}

templates/onboarding/setup_done.html

@@ -0,0 +1,36 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+  <div class="flex-fill align-items-center mt-8">
+    <!-- Image container -->
+    <div class="mt-4 mb-4 text-center" style="display:block;">
+      <a class="" href="{{ url_for('dashboard.index') }}">
+        <picture>
+          <source media="(max-width: 650px)" srcset="/static/logo.svg">
+          <img src="/static/logo.svg" style="width: 24rem" alt="logo">
+        </picture>
+      </a>
+    </div>
+
+    <!-- Text container -->
+    <div class="mt-8 mb-4 text-center">
+      <h2 class="text-black-50" style="font-size:2rem">Performing the extension setup...</h2>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+      let counterIterations = 5;
+      let extensionSetupIntervalId = setInterval(function() {
+          counterIterations--;
+          if (counterIterations === 0) {
+              clearInterval(extensionSetupIntervalId);
+              return;
+          }
+
+          const data = { tag: "PERFORM_EXTENSION_SETUP" };
+          window.postMessage(data, "/");
+      }, 300); // Send it many times, in case the extension had not registered the listener yet
+  </script>
+
+{% endblock %}