From b796d4b9d04981418082f4e71b98e7af1eb211ee Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 19 Aug 2014 16:39:30 +0100
Subject: [PATCH] Added registration/login jsfiddle, formatted so it can be
 loaded directly from jsfiddle. Requires jQuery 1.8.3

---
 docs/client-server/howto.rst       |  3 +-
 jsfiddles/register_login/demo.css  |  7 +++
 jsfiddles/register_login/demo.html | 20 +++++++++
 jsfiddles/register_login/demo.js   | 69 ++++++++++++++++++++++++++++++
 4 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 jsfiddles/register_login/demo.css
 create mode 100644 jsfiddles/register_login/demo.html
 create mode 100644 jsfiddles/register_login/demo.js

diff --git a/docs/client-server/howto.rst b/docs/client-server/howto.rst
index de096ab60c..57a2d2424c 100644
--- a/docs/client-server/howto.rst
+++ b/docs/client-server/howto.rst
@@ -2,7 +2,8 @@ TODO(kegan): Tweak joinalias API keys/path? Event stream historical > live needs
 a token (currently doesn't). im/sync responses include outdated event formats
 (room membership change messages). Room config (specifically: message history,
 public rooms). /register seems super simplistic compared to /login, maybe it
-would be better if /register used the same technique as /login?
+would be better if /register used the same technique as /login? /register should
+be "user" not "user_id".
 
 
 How to use the client-server API
diff --git a/jsfiddles/register_login/demo.css b/jsfiddles/register_login/demo.css
new file mode 100644
index 0000000000..11781c250f
--- /dev/null
+++ b/jsfiddles/register_login/demo.css
@@ -0,0 +1,7 @@
+.loggedin {
+    visibility: hidden;
+}
+
+p {
+    font-family: monospace;
+}
diff --git a/jsfiddles/register_login/demo.html b/jsfiddles/register_login/demo.html
new file mode 100644
index 0000000000..9cdb161306
--- /dev/null
+++ b/jsfiddles/register_login/demo.html
@@ -0,0 +1,20 @@
+<div>
+    <p>This registration/login demo requires a home server to be running on http://localhost:8080</p>
+</div>
+<form class="registrationForm">
+    <input type="text" id="user" placeholder="Username"></input>
+    <input type="password" id="password" placeholder="Password"></input>
+    <input type="button" class="register" value="Register"></input>
+</form>
+<form class="loginForm">
+    <input type="text" id="userLogin" placeholder="Username"></input>
+    <input type="password" id="passwordLogin" placeholder="Password"></input>
+    <input type="button" class="login" value="Login"></input>
+</form>
+<div class="loggedin">
+    <p id="welcomeText"></p>
+    <input type="button" class="testToken" value="Test token"></input>
+    <input type="button" class="logout" value="Logout"></input>
+    <p id="imSyncText"></p>
+</div>
+    
diff --git a/jsfiddles/register_login/demo.js b/jsfiddles/register_login/demo.js
new file mode 100644
index 0000000000..1644f76ac7
--- /dev/null
+++ b/jsfiddles/register_login/demo.js
@@ -0,0 +1,69 @@
+var accountInfo = {};
+
+var showLoggedIn = function(data) {
+    accountInfo = data;
+    $(".loggedin").css({visibility: "visible"});
+    $("#welcomeText").text("Welcome " + accountInfo.user_id+". Your access token is:  " +
+                           accountInfo.access_token);    
+};
+
+$('.register').live('click', function() {
+    var user = $("#user").val();
+    var password = $("#password").val();
+    $.ajax({
+        url: "http://localhost:8080/matrix/client/api/v1/register",
+        type: "POST",
+        contentType: "application/json; charset=utf-8",
+        data: JSON.stringify({ user_id: user, password: password }),
+        dataType: "json",
+        success: function(data) {
+            showLoggedIn(data);
+        },
+        error: function(err) {
+            alert(JSON.stringify($.parseJSON(err.responseText)));  
+        }
+    });
+});
+
+var login = function(user, password) {
+    $.ajax({
+        url: "http://localhost:8080/matrix/client/api/v1/login",
+        type: "POST",
+        contentType: "application/json; charset=utf-8",
+        data: JSON.stringify({ user: user, password: password, type: "m.login.password" }),
+        dataType: "json",
+        success: function(data) {
+            showLoggedIn(data);
+        },
+        error: function(err) {
+            alert(JSON.stringify($.parseJSON(err.responseText)));  
+        }
+    });  
+};
+
+$('.login').live('click', function() {
+    var user = $("#userLogin").val();
+    var password = $("#passwordLogin").val();
+    $.getJSON("http://localhost:8080/matrix/client/api/v1/login", function(data) {
+        if (data.type !== "m.login.password") {
+            alert("I don't know how to login with this type: " + data.type);
+            return;
+        }
+        login(user, password);
+    });
+});
+
+$('.logout').live('click', function() {
+    accountInfo = {};
+    $("#imSyncText").text("");
+    $(".loggedin").css({visibility: "hidden"});
+});
+
+$('.testToken').live('click', function() {
+    var url = "http://localhost:8080/matrix/client/api/v1/im/sync?access_token=" + accountInfo.access_token + "&from=END&to=START&limit=1";
+    $.getJSON(url, function(data) {
+         $("#imSyncText").text(JSON.stringify(data, undefined, 2));
+    }).fail(function(err) {
+        $("#imSyncText").text(JSON.stringify($.parseJSON(err.responseText)));
+    });
+});