Make redirect_uri verification optional because many IndieAuth clients don't implement it - show a stylish icon to convey whether the client was verified

lemonauth/static/lemonauth/css/indie.styl

@@ -2,3 +2,14 @@
 	img
 		height 2em
 		margin-right .5em
+.tippy-tooltip
+	&.success-theme
+		color $base0B
+		background-color $base03
+	&.warning-theme
+		color $base0A
+		background-color $base03
+.verified-success
+	color $base0B
+.verified-warning
+	color $base0A

lemonauth/templates/lemonauth/indie.html

@@ -1,5 +1,5 @@
 {% extends 'lemoncurry/layout.html' %}
-{% load static %}
+{% load markdown static %}
 
 {% block styles %}
 <link rel="stylesheet" type="text/stylus" href="{% static 'lemonauth/css/indie.styl' %}" />
@@ -13,6 +13,11 @@
 			sign in to
 			{% if app %}{{ app.name | first }}{% endif %}
 			{% if app %}({% endif %}<a class="u-url code{% if not app %} p-name{% endif %}" href="{{ params.client_id }}">{{ params.client_id }}</a>{% if app %}){% endif %}?
+			{% if verified %}
+			<i class="fa fa-check-circle verified-success" data-tooltip data-theme="success" data-html="#verified-success"></i>
+			{% else %}
+			<i class="fa fa-question-circle verified-warning" data-tooltip data-theme="warning" data-html="#verified-warning"></i>
+			{% endif %}
 		</h4>
 
 		<div class="card-body">
@@ -35,4 +40,16 @@
 		<input name="response_type" type="hidden" value="{{ params.response_type }}" />
 	</form>
 </div>
+
+<div id="verified-success" hidden>
+	this client has been <strong>verified</strong> using <code>{{ '<link rel="redirect_uri">' | force_escape }}</code> - they are who they claim to be!
+</div>
+<div id="verified-warning" hidden>
+	this client could <strong>not</strong> be verified using <code>{{ '<link rel="redirect_uri">' | force_escape }}</code> - check the redirect uri carefully yourself!
+</div>
+{% endblock %}
+{% block foot %}
+<script type="text/javascript">
+	tippy('[data-tooltip]', {arrow: true});
+</script>
 {% endblock %}

lemonauth/views/indie.py

@@ -58,18 +58,20 @@ class IndieView(TemplateView):
         rels = (client.to_dict()['rel-urls']
                 .get(params['redirect_uri'], {})
                 .get('rels', ()))
-        if 'redirect_uri' not in rels:
+        verified = 'redirect_uri' in rels
-            return HttpResponseBadRequest(
-                'your redirect_uri is not published on your client_id page',
-                content_type='text/plain'
-            )
 
         try:
             app = client.to_dict(filter_by_type='h-x-app')[0]['properties']
         except IndexError:
             app = None
 
-        return {'app': app, 'me': me, 'params': params, 'title': 'indieauth'}
+        return {
+            'app': app,
+            'me': me,
+            'verified': verified,
+            'params': params,
+            'title': 'indieauth',
+        }
 
     def post(self, request):
         post = request.POST.dict()

lemoncurry/static/lemoncurry/css/theme.js

@@ -11,8 +11,15 @@ module.exports = function() {
 	return function(style) {
 		for (let i = 0; i < 16; i++) {
 			const key = 'base0' + i.toString(16).toUpperCase();
+			const hex = theme[key];
+			const colour = new stylus.nodes.RGBA(
+				parseInt(hex.substr(0, 2), 16),
+				parseInt(hex.substr(2, 2), 16),
+				parseInt(hex.substr(4, 2), 16),
+				1
+			);
 
-			style.define('$' + key, new stylus.nodes.Literal('#' + theme[key]));
+			style.define('$' + key, colour);
 		}
 	};
 };

lemoncurry/static/tippy.js

@@ -0,0 +1 @@
+../../node_modules/tippy.js/dist

lemoncurry/templates/lemoncurry/layout.html

@@ -24,6 +24,7 @@
 					integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
 		{% compress css %}
 		<link rel="stylesheet" type="text/css" href={% static 'openwebicons/css/openwebicons.css' %} />
+		<link rel="stylesheet" type="text/css" href={% static 'tippy.js/tippy.css' %} />
 		<link rel="stylesheet" type="text/stylus" href="{% static 'lemoncurry/css/layout.styl' %}" />
 		{% block styles %}{% endblock %}
 		{% endcompress %}
@@ -64,5 +65,9 @@
 						integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"></script>
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"
 						integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"></script>
+		{% compress js %}
+		<script src="{% static 'tippy.js/tippy.standalone.js' %}"></script>
+		{% block foot %}{% endblock %}
+		{% endcompress %}
 	</body>
 </html>

package.json

@@ -8,6 +8,7 @@
 		"stylus": "^0.54.5"
 	},
 	"dependencies": {
-		"openwebicons": "^1.4.3"
+		"openwebicons": "^1.4.3",
+		"tippy.js": "^1.4.1"
 	}
 }

yarn.lock

@@ -108,6 +108,10 @@ path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 
+popper.js@^1.12.4:
+  version "1.12.6"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.6.tgz#91e12a97b07815258b76915d64044e8ac053d426"
+
 sax@0.5.x:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
@@ -133,6 +137,12 @@ stylus@^0.54.5:
     sax "0.5.x"
     source-map "0.1.x"
 
+tippy.js@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-1.4.1.tgz#a20831a53e40566825c0b3c6ad72afc30e97c6f5"
+  dependencies:
+    popper.js "^1.12.4"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"