Merge pull request #986 from simple-login/feature/add-extension-onboarding-pages

Add extension onboarding pages

app/email_utils.py

@@ -206,8 +206,16 @@ def send_test_email_alias(email, name):
     send_email(
         email,
         f"This email is sent to {email}",
-        render("transactional/test-email.txt", name=name, alias=email),
-        render("transactional/test-email.html", name=name, alias=email),
+        render(
+            "transactional/test-email.txt",
+            name=name,
+            alias=email,
+        ),
+        render(
+            "transactional/test-email.html",
+            name=name,
+            alias=email,
+        ),
     )
 
 

app/onboarding/__init__.py

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

app/onboarding/base.py

@@ -0,0 +1,8 @@
+from flask import Blueprint
+
+onboarding_bp = Blueprint(
+    name="onboarding",
+    import_name=__name__,
+    url_prefix="/onboarding",
+    template_folder="templates",
+)

app/onboarding/views/final.py

@@ -0,0 +1,26 @@
+from app.extensions import limiter
+from app.onboarding.base import onboarding_bp
+from app.email_utils import send_test_email_alias
+from flask import render_template, request, flash
+from flask_login import current_user, login_required
+from flask_wtf import FlaskForm
+from wtforms import StringField, validators
+
+
+class SendEmailForm(FlaskForm):
+    email = StringField("Email", validators=[validators.DataRequired()])
+
+
+@onboarding_bp.route("/final", methods=["GET", "POST"])
+@login_required
+@limiter.limit("10/minute")
+def final():
+    form = SendEmailForm(request.form)
+    if form.validate_on_submit():
+        send_test_email_alias(form.email.data, current_user.name)
+        flash("We have sent a test e-mail to your alias", "success")
+
+    return render_template(
+        "onboarding/final.html",
+        form=form,
+    )

app/onboarding/views/index.py

@@ -0,0 +1,9 @@
+from app.onboarding.base import onboarding_bp
+from flask import render_template
+
+
+@onboarding_bp.route("/", methods=["GET"])
+def index():
+    return render_template(
+        "onboarding/index.html",
+    )

server.py

@@ -95,6 +95,7 @@ from app.models import (
 )
 from app.monitor.base import monitor_bp
 from app.oauth.base import oauth_bp
+from app.onboarding.base import onboarding_bp
 from app.phone.base import phone_bp
 from app.utils import random_string
 
@@ -216,6 +217,7 @@ def register_blueprints(app: Flask):
 
     app.register_blueprint(oauth_bp, url_prefix="/oauth")
     app.register_blueprint(oauth_bp, url_prefix="/oauth2")
+    app.register_blueprint(onboarding_bp)
 
     app.register_blueprint(discover_bp)
     app.register_blueprint(api_bp)
@@ -732,11 +734,12 @@ def register_custom_commands(app):
 
     @app.cli.command("dummy-data")
     def dummy_data():
-        from init_app import add_sl_domains
+        from init_app import add_sl_domains, add_proton_partner
 
         LOG.w("reset db, add fake data")
         fake_data()
         add_sl_domains()
+        add_proton_partner()
 
 
 def setup_do_not_track(app):

templates/emails/transactional/test-email.html

@@ -3,6 +3,5 @@
 {% block content %}
   {{ render_text("Hi " + name) }}
   {{ render_text("This is a test to make sure that you receive emails sent to your alias <b>" + alias + "</b>.") }}
-  {{ render_text("If you have any questions, feel free to reply to this email.") }}
 {% endblock %}
 

templates/emails/transactional/test-email.txt

@@ -5,7 +5,5 @@ Hi {{name}}
 
 This is a test to make sure that you receive emails sent to your alias {{alias}}.
 
-If you have any questions, feel free to reply to this email.
-
 {% endblock %}
 

templates/onboarding/final.html

@@ -0,0 +1,49 @@
+{% 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">Quickly create an alias every time you need an email</h2>
+    </div>
+
+
+    <!-- Input + button container -->
+    <div class="mt-8" style="display:grid; place-items:center;width:1024px;margin:auto;position:relative;">
+      <img
+        src="/static/images/onboarding-click-icon.png"
+        style="width:400px;position:absolute;right:-90px;top:-44px;"
+      />
+
+      <img
+        src="/static/images/onboarding-right-click.png"
+        style="position:absolute;width:440px;right:-20px;top:25px;"
+      />
+
+      <div style="width: 25rem; display: block">
+        <form method="post">
+          {{ form.csrf_token }}
+          {{ form.email(class="p-3", type="email", autofocus="true", placeholder="email", style="border: 2px solid black; border-radius: 2px; width:100%") }}
+          {{ render_field_errors(form.email) }}
+          <button type="submit" class="p-4 mt-2 text-decoration-none" style="background:black;color:white; width:10rem">Send me an email</button>
+        </form>
+      </div>
+    </div>
+
+    <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>
+    </div>
+  </div>
+
+{% endblock %}

templates/onboarding/index.html

@@ -0,0 +1,29 @@
+{% 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-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>
+  </div>
+
+</div>
+
+{% endblock %}