Move Stripe donation form to main site (from Docs)

This was always a bit weird to have on the Docs site, and can be done
better here.

tildes/scss/modules/_form.scss

@@ -3,6 +3,10 @@
 
 .form-narrow {
   max-width: 20rem;
+
+  .input-group .form-select {
+    flex-shrink: 0;
+  }
 }
 
 select.form-select:not([multiple]) {

tildes/static/js/behaviors/stripe-donate-form.js

@@ -0,0 +1,28 @@
+// Copyright (c) 2019 Tildes contributors <code@tildes.net>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+$.onmount("[data-js-stripe-donate-form]", function() {
+    $(this).on("submit", function(event) {
+        var $amountInput = $(this).find("#amount");
+        var amount = $amountInput.val();
+
+        var $errorDiv = $(this).find(".text-status-message");
+
+        // remove dollar sign and/or comma, then parse into float
+        amount = amount.replace(/[$,]/g, "");
+        amount = parseFloat(amount);
+
+        if (isNaN(amount)) {
+            $errorDiv.text("Please enter a valid dollar amount.");
+            event.preventDefault();
+            return;
+        } else if (amount < 1.0) {
+            $errorDiv.text("Donation amount must be at least $1.");
+            event.preventDefault();
+            return;
+        }
+
+        // set the value in case any of the replacements happened
+        $amountInput.val(amount);
+    });
+});

tildes/tildes/routes.py

@@ -106,7 +106,7 @@ def includeme(config: Configurator) -> None:
     # Route to expose metrics to Prometheus
     config.add_route("metrics", "/metrics")
 
-    # Route for Stripe donation processing page (POSTed to from docs site)
+    # Routes for Stripe donations (linked from Docs site)
     config.add_route("donate_stripe", "/donate_stripe")
     config.add_route("donate_success", "/donate_success")
 

tildes/tildes/templates/donate_stripe.jinja2

@@ -1,18 +1,38 @@
-{# Copyright (c) 2018 Tildes contributors <code@tildes.net> #}
+{# Copyright (c) 2019 Tildes contributors <code@tildes.net> #}
 {# SPDX-License-Identifier: AGPL-3.0-or-later #}
 
 {% extends 'base_no_sidebar.jinja2' %}
 
-{% block title %}Stripe donation{% endblock %}
+{% block title %}Donate to Tildes{% endblock %}
+
+{% block main_heading %}Credit card donation (via Stripe){% endblock %}
 
 {% block content %}
-  <script src="https://js.stripe.com/v3/"></script>
+<p>After submitting this form, you will be redirected to the Stripe site to enter your payment info.</p>
+
+<p>Note that the donation is in Canadian Dollars (CAD) by default, but you can switch to USD if you prefer. At the moment, $10 CAD is about $7.50 USD.</p>
+
+<div class="divider"></div>
+
+<form class="form-narrow" method="post" data-js-stripe-donate-form>
+  <input type="hidden" name="csrf_token" value="{{ get_csrf_token() }}">
+
+  <div class="form-group">
+    <label class="form-label" for="amount">Donation amount (must be at least $1)</label>
 
-  <p>Redirecting to Stripe...</p>
+    <div class="input-group">
+      <span class="input-group-addon">$</span>
+      <input class="form-input" id="amount" name="amount" type="text" data-js-auto-focus>
+      <select class="form-select" id="currency" name="currency">
+        <option value="CAD" selected>CAD</option>
+        <option value="USD">USD</option>
+      </select>
+    </div>
+  </div>
 
-  {# This div will cause the page to redirect to the Stripe Checkout page #}
-  <div
-    data-js-stripe-checkout="{{ publishable_key }}"
-    data-js-stripe-checkout-session="{{ session_id }}"
-  ></div>
+  <div class="form-buttons">
+    <button class="btn btn-primary" type="submit">Donate</button>
+    <div class="text-status-message text-error"></div>
+  </div>
+</form>
 {% endblock %}

tildes/tildes/templates/donate_stripe_redirect.jinja2

@@ -0,0 +1,18 @@
+{# Copyright (c) 2018 Tildes contributors <code@tildes.net> #}
+{# SPDX-License-Identifier: AGPL-3.0-or-later #}
+
+{% extends 'base_no_sidebar.jinja2' %}
+
+{% block title %}Stripe donation{% endblock %}
+
+{% block content %}
+  <script src="https://js.stripe.com/v3/"></script>
+
+  <p>Redirecting to Stripe...</p>
+
+  {# This div will cause the page to redirect to the Stripe Checkout page #}
+  <div
+    data-js-stripe-checkout="{{ publishable_key }}"
+    data-js-stripe-checkout-session="{{ session_id }}"
+  ></div>
+{% endblock %}

tildes/tildes/views/donate.py

@@ -17,10 +17,21 @@ from tildes.metrics import incr_counter
 
 @view_config(
     route_name="donate_stripe",
-    request_method="POST",
+    request_method="GET",
     renderer="donate_stripe.jinja2",
     permission=NO_PERMISSION_REQUIRED,
-    require_csrf=False,
+)
+def get_donate_stripe(request: Request) -> dict:
+    """Display the form for donating with Stripe."""
+    # pylint: disable=unused-argument
+    return {}
+
+
+@view_config(
+    route_name="donate_stripe",
+    request_method="POST",
+    renderer="donate_stripe_redirect.jinja2",
+    permission=NO_PERMISSION_REQUIRED,
 )
 @use_kwargs(
     {
@@ -50,7 +61,7 @@ def post_donate_stripe(request: Request, amount: int, currency: str) -> dict:
         ],
         submit_type="donate",
         success_url="https://tildes.net/donate_success",
-        cancel_url="https://docs.tildes.net/donate-stripe",
+        cancel_url="https://docs.tildes.net/donate",
     )
 
     return {"publishable_key": publishable_key, "session_id": session.id}