Fix templating errors, js errors

CHANGELOG

@@ -1,3 +1,14 @@
+Sat, 14 Sep 2019 04:38:14 -0500
+Keaton <kii-chan@tutanota.com>
+Fix templating errors, js errors
+
+- Javascript `urlparams` didn't handle being null
+- Templates needed updating/cleaning
+- Moved SQRL dropin CSS to its own file
+- New example picture to show off changes to CSS/templates
+
+--------------------
+
 Sat, 14 Sep 2019 03:13:30 -0500
 Keaton <kii-chan@tutanota.com>
 Add `manage.py` for `tests`

README.md

@@ -39,6 +39,7 @@ INSTALLED_APPS = [
     'django.contrib.auth',
     'django.contrib.sessions',
     'django.contrib.staticfiles',
+    ...
 ]
 ```
 
@@ -49,6 +50,7 @@ MIDDLEWARE_CLASSES = [
     ...
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
+    ...
 ]
 ```
 
@@ -114,13 +116,42 @@ page with three simple template tags:
 ```
 {% load sqrl %}
 {% sqrl as sqrl_session %}
-{% sqrl_login_dropin sqrl_session [[a named redirect]] %}
+{% sqrl_login_dropin sqrl_session "named:redirect" %}
 ```
 
-The [[named redirect]] is the page that should be redirected to after logging
-in. Any name that can be resolved by django's `reverse` function will work (i.e.
-`path("scheme/", view, name="example")` in the app `app` with namespace "app"
-could be selected as `app:example`).
+The `"named:redirect"` is the page that should be redirected to after logging
+in. Any name that can be resolved by django's `reverse` function will work. For
+example, here are the necessary lines needed to resolve `"app:main"`:
+
+* Main project's `urls.py`:
+
+```
+urlpatterns = [
+    ...
+    path("", include('app.urls', namespace="app"))
+    ...
+]
+```
+
+* Your `app`'s `urls.py`:
+
+```
+urlpatterns = [
+    ...
+    path("", main_view, name="main")
+    ...
+]
+```
+
+* Your `main_view`'s template:
+
+```
+...
+{% load sqrl %}
+{% sqrl as sqrl_session %}
+{% sqrl_login_dropin sqrl_session "app:main" %}
+...
+```
 
 These three tags will add a simple element to your login page:
 

sqrl/static/sqrl/dropin.css

@@ -0,0 +1,19 @@
+.sqrl-parent {
+    padding: 15px;
+    background-color: #fff;
+    text-align: center;
+    max-width: 300px;
+    border-radius: 5%;
+}
+#sqrl-qr img {
+    margin: auto;
+    width: 100%;
+    padding-top: 3px;
+}
+.sqrl-wrap a {
+    font-size: 50%;
+}
+
+.sqrl-form input {
+    margin: auto;
+}

sqrl/static/sqrl/sqrl.js

@@ -2,9 +2,11 @@
   var get_next_url   = function() {
           // A Next defined in the URL has priority
           var urlparam = document.URL.match(/next=([^&#]+)/)
+          if (urlparam) {
             if (urlparam.length == 2) {
               return urlparam[1]
             }
+          }
           // Next highest priority is a defined SQRL_NEXT
           if (typeof SQRL_NEXT !== "undefined") {
             return SQRL_NEXT

sqrl/templates/sqrl/login.html

@@ -1,6 +1,5 @@
 {% extends "sqrl/sqrl_base.html" %}
 {% load sqrl %}
-{% load static %}
 
 {% block title %}Log in via SQRL{% endblock %}
 
@@ -12,7 +11,7 @@
     </p>
 
     {% sqrl as sqrl_session %}
-    {% sqrl_login_dropin sqrl_session "sqrl:login" %}
+    {% sqrl_login_dropin sqrl_session %}
 {% endblock %}
 
 {% comment %}

sqrl/templates/sqrl/manage.html

@@ -1,6 +1,5 @@
 {% extends "sqrl/sqrl_base.html" %}
 {% load sqrl %}
-{% load static %}
 
 {% block title %}Manage SQRL Identity{% endblock %}
 
@@ -33,11 +32,7 @@
     {% endif %}
 
     {% sqrl as sqrl_session %}
-    {% sqrl_login_dropin sqrl_session method="manage" %}
-{% endblock %}
-
-{% block scripts %}
-    <script src="{% static 'sqrl/sqrl.js' %}"></script>
+    {% sqrl_login_dropin sqrl_session %}
 {% endblock %}
 
 

sqrl/templates/sqrl/sqrl-dropin.html

@@ -1,24 +1,8 @@
 {% load static %}
 {% load sqrl %}
-<style>
-    .sqrl-wrap {
-        padding: 15px;
-        background-color: #fff;
-        text-align: center;
-        max-width: 300px;
-        border-radius: 5%;
-    }
-    #sqrl-qr img {
-        margin: auto;
-        width: 100%;
-        padding-top: 3px;
-    }
-    .sqrl-wrap a {
-        font-size: 50%;
-    }
-</style>
-<div>
-    <form method="get" action="{{ sqrl_session.sqrl_url }}">
+<link type="text/css" rel="stylesheet" href="{% static 'sqrl/dropin.css' %}"/>
+<div class="sqrl-parent">
+    <form class="sqrl-form" method="get" action="{{ sqrl_session.sqrl_url }}">
         <div class="sqrl-wrap">
             SQRL Login
             <a href="{{ sqrl_session.sqrl_url }}">