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

@@ -34,11 +34,12 @@ Once installed there are a few required changes in Django settings:
 
 ```
 INSTALLED_APPS = [
-...,
-'sqrl',
-'django.contrib.auth',
-'django.contrib.sessions',
-'django.contrib.staticfiles',
+    ...,
+    'sqrl',
+    'django.contrib.auth',
+    'django.contrib.sessions',
+    'django.contrib.staticfiles',
+    ...
 ]
 ```
 
@@ -46,9 +47,10 @@ INSTALLED_APPS = [
 
 ```
 MIDDLEWARE_CLASSES = [
-...
-'django.contrib.sessions.middleware.SessionMiddleware',
-'django.contrib.auth.middleware.AuthenticationMiddleware',
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    ...
 ]
 ```
 
@@ -57,7 +59,7 @@ MIDDLEWARE_CLASSES = [
 
 ```
 AUTHENTICATION_BACKENDS = [
-'sqrl.backends.SQRLModelBackend',
+    'sqrl.backends.SQRLModelBackend',
 ]
 ```
 
@@ -69,10 +71,10 @@ overwrites some of them.
 
 ```
 INSTALLED_APPS = [
-...,
-'sqrl',
-'django.contrib.admin',
-...
+    ...,
+    'sqrl',
+    'django.contrib.admin',
+    ...
 ]
 ```
 
@@ -85,7 +87,7 @@ to explicitly extend from `django.contrib.admin` `base.html` template:
 import os
 import django
 TEMPLATE_DIRS = [
-os.path.dirname(django.__file__),
+    os.path.dirname(django.__file__),
 ]
 ```
 
@@ -97,9 +99,9 @@ All of SQRL functionality is enabled by adding its URLs to the root URL config:
 from django.urls import path, include
 
 urlpatterns = [
-...
-path('sqrl/', include('sqrl.urls', namespace="sqrl")),
-...
+    ...
+    path('sqrl/', include('sqrl.urls', namespace="sqrl")),
+    ...
 ]
 ```
 
@@ -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:
 
@@ -133,7 +164,7 @@ following essential tags:
 {% load sqrl %}
 {% sqrl as sqrl_session %}
 <a href="{{ sqrl_session.sqrl_url }}">
-<div id="sqrl-qr" data-sqrl="{{ sqrl_session.sqrl_url }}"></div>
+    <div id="sqrl-qr" data-sqrl="{{ sqrl_session.sqrl_url }}"></div>
 </a>
 <script>SQRL_NEXT="{{ your desired redirect }}"; SQRL_CHECK_URL="{% sqrl_status_url_script_tag sqrl_session %}"</script>
 <script type="application/javascript" src="{% static 'sqrl/sqrl.js' %}"></script>

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

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 }}">