wip: refactor login flow

Instead of dealing with in JavaScript, let's do a more classic
HTTP flow.

The main flows work, but there is still at least one to deal with:
when editing a map without being logged in, the server may ask for
login, and in this case we should login THEN reissue the request,
so we need to interrupt the first request in some way,
otherwise the server will still answer with a 403, which is what
happens after this commit.

umap/decorators.py

@@ -60,17 +60,3 @@ def can_view_map(view_func):
         return view_func(request, *args, **kwargs)
 
     return wrapper
-
-
-def jsonize_view(view_func):
-    @wraps(view_func)
-    def wrapper(request, *args, **kwargs):
-        response = view_func(request, *args, **kwargs)
-        response_kwargs = {}
-        if hasattr(response, "rendered_content"):
-            response_kwargs["html"] = response.rendered_content
-        if response.has_header("location"):
-            response_kwargs["redirect"] = response["location"]
-        return simple_json_response(**response_kwargs)
-
-    return wrapper

umap/static/umap/content.css

@@ -37,6 +37,21 @@ input:-moz-placeholder, :-moz-placeholder {
 /* **************** */
 /*    Login icons   */
 /* **************** */
+body.login {
+    width:  320px;
+    margin: auto;
+    text-align: center;
+}
+body.login header {
+    display: flex;
+    justify-content: center;
+}
+.login-grid {
+    display: grid;
+    justify-content: space-between;
+    grid-gap: 5px;
+    grid-template-columns: repeat(auto-fill,92px);
+}
 .login-grid li,
 .login-grid a {
     display: inline-block;

umap/static/umap/js/modules/request.js

@@ -73,12 +73,12 @@ export const ServerRequest = Request.extend({
       headers['X-CSRFToken'] = token
     }
     const response = await Request.prototype.post.call(this, uri, headers, data)
-    return this._handle_json_response(response)
+    return await this._handle_json_response(response)
   },
 
   get: async function (uri, headers) {
     const response = await Request.prototype.get.call(this, uri, headers)
-    return this._handle_json_response(response)
+    return await this._handle_json_response(response)
   },
 
   _handle_json_response: async function (response) {
@@ -105,10 +105,15 @@ export const ServerRequest = Request.extend({
       this.ui.closePanel()
     } else if (data.error) {
       this.ui.alert({ content: data.error, level: 'error' })
-    } else if (data.html) {
-      const ui_options = { data }
-      let listen_options
-      this.ui.openPanel(ui_options)
+    } else if (data.login_required) {
+      // TODO: stop flow and run request again when user
+      // is logged in
+      const win = window.open(data.login_required)
+      window.umap_proceed = () => {
+        console.log('logged in')
+        this.fire('login')
+        win.close()
+      }
     }
   },
 

umap/templates/registration/login.html

@@ -1,6 +1,18 @@
-{% load i18n %}
-{% if ENABLE_ACCOUNT_LOGIN %}
-  <h5>{% trans "Please log in with your account" %}</h5>
+{% extends "base.html" %}
+{% load umap_tags i18n %}
+{% block extra_head %}
+  {% umap_css %}
+{% endblock extra_head %}
+{% block body_class %}
+  login
+{% endblock body_class %}
+{% block content %}
+<section>
+  <header class="umap-nav">
+    {% include "umap/branding.html" %}
+  </header>
+  {% if ENABLE_ACCOUNT_LOGIN %}
+    <h2>{% trans "Please log in with your account" %}</h2>
     <div>
       {% if form.non_field_errors %}
         <ul class="form-errors">
@@ -19,9 +31,9 @@
         <input type="submit" value="{% trans "Login" %}" />
       </form>
     </div>
-{% endif %}
-{% if backends.backends|length %}
-  <h5>{% trans "Please choose a provider" %}</h5>
+  {% endif %}
+  {% if backends.backends|length %}
+    <h2>{% trans "Please choose a provider" %}</h2>
     <div>
       <ul class="login-grid block-grid">
         {% for name in backends.backends %}
@@ -34,4 +46,6 @@
         {% endfor %}
       </ul>
     </div>
-{% endif %}
+  {% endif %}
+</section>
+{% endblock content %}

umap/templates/umap/branding.html

@@ -0,0 +1,3 @@
+<h1>
+  <a href="{% url "home" %}">{{ SITE_NAME }}</a>
+</h1>

umap/templates/umap/content.html

@@ -40,24 +40,6 @@
       
     !(function () {
       const ui = new L.U.UI(document.querySelector('header'))
-      const xhr = new L.U.Xhr(ui)
-      const login = document.querySelector('a.login')
-      if (login) {
-        L.DomEvent.on(login, 'click', function (e) {
-          L.DomEvent.stop(e)
-          xhr.login({
-            login_required: this.getAttribute('href'),
-            redirect: '/',
-          })
-        })
-      }
-      const logout = document.querySelector('a.logout')
-      if (logout) {
-        L.DomEvent.on(logout, 'click', function (e) {
-          L.DomEvent.stop(e)
-          xhr.logout(this.getAttribute('href'))
-        })
-      }
       const getMore = function (e) {
         L.DomEvent.stop(e)
         xhr._ajax({

umap/templates/umap/navigation.html

@@ -1,9 +1,7 @@
 {% load i18n %}
 <nav class="umap-nav">
   <section>
-    <h1>
-      <a href="{% url "home" %}">{{ title }}</a>
-    </h1>
+    {% include "umap/branding.html" %}
   </section>
   <section>
     <ul>

umap/urls.py

@@ -15,7 +15,6 @@ from . import views
 from .decorators import (
     can_edit_map,
     can_view_map,
-    jsonize_view,
     login_required_if_not_anonymous_allowed,
 )
 from .utils import decorated_patterns
@@ -50,7 +49,7 @@ urlpatterns = [
 ]
 
 i18n_urls = [
-    re_path(r"^login/$", jsonize_view(auth_views.LoginView.as_view()), name="login"),
+    re_path(r"^login/$", auth_views.LoginView.as_view(), name="login"),
     re_path(
         r"^login/popup/end/$", views.LoginPopupEnd.as_view(), name="login_popup_end"
     ),