Move webclient to a python module so that it can be installed

4 files changed, 419 insertions, 0 deletions

diff --git a/syweb/webclient/login/login-controller.js b/syweb/webclient/login/login-controller.js
new file mode 100644
index 0000000000..5ef39a7122
--- /dev/null
+++ b/syweb/webclient/login/login-controller.js
@@ -0,0 +1,115 @@
+/*
+ Copyright 2014 OpenMarket Ltd
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+ 
+angular.module('LoginController', ['matrixService'])
+.controller('LoginController', ['$scope', '$rootScope', '$location', 'matrixService', 'eventStreamService',
+                                    function($scope, $rootScope, $location, matrixService, eventStreamService) {
+    'use strict';
+    
+    
+    // Assume that this is hosted on the home server, in which case the URL
+    // contains the home server.
+    var hs_url = $location.protocol() + "://" + $location.host();
+    if ($location.port() &&
+        !($location.protocol() === "http" && $location.port() === 80) &&
+        !($location.protocol() === "https" && $location.port() === 443))
+    {
+        hs_url += ":" + $location.port();
+    }
+    
+    $scope.account = {
+        homeserver: hs_url,
+        desired_user_name: "",
+        user_id: "",
+        password: "",
+        identityServer: "http://matrix.org:8090",
+        pwd1: "",
+        pwd2: "",
+    };
+    
+    $scope.login_types = [ "email", "mxid" ];
+    $scope.login_type_label = {
+        "email": "Email address",
+        "mxid": "Matrix ID (e.g. @bob:matrix.org or bob)",
+    };
+    $scope.login_type = 'mxid'; // TODO: remember the user's preferred login_type
+    
+    $scope.login = function() {
+        matrixService.setConfig({
+            homeserver: $scope.account.homeserver,
+            identityServer: $scope.account.identityServer,
+        });
+        switch ($scope.login_type) {
+            case 'mxid':
+                $scope.login_with_mxid($scope.account.user_id, $scope.account.password);
+                break;
+            case 'email':
+                matrixService.lookup3pid('email', $scope.account.user_id).then(
+                    function(response) {
+                        if (response.data['address'] == undefined) {
+                            $scope.login_error_msg = "Invalid email address / password";
+                        } else {
+                            console.log("Got address "+response.data['mxid']+" for email "+$scope.account.user_id);
+                            $scope.login_with_mxid(response.data['mxid'], $scope.account.password);
+                        }
+                    },
+                    function() {
+                        $scope.login_error_msg = "Couldn't look up email address. Is your identity server set correctly?";
+                    }
+                );
+        }
+    };
+
+    $scope.login_with_mxid = function(mxid, password) {
+        matrixService.setConfig({
+            homeserver: $scope.account.homeserver,
+            identityServer: $scope.account.identityServer,
+            user_id: $scope.account.user_id
+        });
+        // try to login
+        matrixService.login(mxid, password).then(
+            function(response) {
+                if ("access_token" in response.data) {
+                    $scope.feedback = "Login successful.";
+                    matrixService.setConfig({
+                        homeserver: $scope.account.homeserver,
+                        identityServer: $scope.account.identityServer,
+                        user_id: response.data.user_id,
+                        access_token: response.data.access_token
+                    });
+                    matrixService.saveConfig();
+                    $rootScope.updateHeader();
+                    eventStreamService.resume();
+                    $location.url("home");
+                }
+                else {
+                    $scope.feedback = "Failed to login: " + JSON.stringify(response.data);
+                }
+            },
+            function(error) {
+                if (error.data) {
+                    if (error.data.errcode === "M_FORBIDDEN") {
+                        $scope.login_error_msg = "Incorrect username or password.";
+                    }
+                }
+                else if (error.status === 0) {
+                    $scope.login_error_msg = "Unable to talk to the server.";
+                }
+            }
+        );
+    };
+}]);
+
diff --git a/syweb/webclient/login/login.html b/syweb/webclient/login/login.html
new file mode 100644
index 0000000000..6b321f8fc5
--- /dev/null
+++ b/syweb/webclient/login/login.html
@@ -0,0 +1,50 @@
+<div ng-controller="LoginController" class="login">    
+    <div id="wrapper" class="loginWrapper">
+        
+        <a href ng-click="goToPage('/')">
+        <img src="img/logo.png" width="240" height="102" alt="[matrix]" style="padding: 50px"/>
+        </a>
+    
+        <br/>
+
+        <form id="loginForm" novalidate>
+            <!-- Login with an registered user -->
+            <div>
+                Log in using:<br/>
+                
+                <div ng-repeat="type in login_types">
+                <input type="radio" ng-model="$parent.login_type" value="{{ type }}" id="radio_{{ type }}"/>
+                <label for="radio_{{ type }}">{{ login_type_label[type] }}</label>
+                </div>
+                    
+                <div style="text-align: center">
+                    <br/>
+                    <input id="user_id" size="32" type="text" ng-focus="true" ng-model="account.user_id" placeholder="{{ login_type_label[login_type] }}"/>
+                    <br/>
+                    <input id="password" size="32" type="password" ng-model="account.password" placeholder="Password"/>
+                    <br/><br/>
+                    <button id="login" ng-click="login()" ng-disabled="!account.user_id || !account.password || !account.homeserver">Login</button>
+                    <br/><br/>
+                </div>
+
+                <div class="feedback">{{ feedback }} {{ login_error_msg }}</div>
+                
+                <div id="serverConfig">
+                    <label for="homeserver">Home Server:</label> 
+                    <input id="homeserver" size="32" type="text" ng-model="account.homeserver" placeholder="URL (e.g. http://matrix.org:8080)"/>
+                    <div class="smallPrint">Your home server stores all your conversation and account data.</div>
+                    <label for="identityServer">Identity Server:</label>
+                    <input id="identityServer" size="32" type="text" ng-model="account.identityServer" placeholder="URL (e.g. http://matrix.org:8090)"/>
+                    <div class="smallPrint">Matrix provides identity servers to track which emails etc. belong to which Matrix IDs.<br/>
+                        Only http://matrix.org:8090 currently exists.</div>
+                    <br/>
+                    <br/>
+                    <a href="#/register" style="padding-right: 0em">Create account</a>
+                    <a href="#/reset_password" style="display: none; ">Forgotten password?</a>
+                </div>
+            </div>
+        </form>
+
+    </div>
+    </div>
+</div>
diff --git a/syweb/webclient/login/register-controller.js b/syweb/webclient/login/register-controller.js
new file mode 100644
index 0000000000..be970ce1c3
--- /dev/null
+++ b/syweb/webclient/login/register-controller.js
@@ -0,0 +1,196 @@
+/*
+ Copyright 2014 OpenMarket Ltd
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+ 
+angular.module('RegisterController', ['matrixService'])
+.controller('RegisterController', ['$scope', '$rootScope', '$location', 'matrixService', 'eventStreamService',
+                                    function($scope, $rootScope, $location, matrixService, eventStreamService) {
+    'use strict';
+    
+    var config = window.webClientConfig;
+    var useCaptcha = true;
+    if (config !== undefined) {
+        useCaptcha = config.useCaptcha;
+    }
+    
+    // FIXME: factor out duplication with login-controller.js
+    
+    // Assume that this is hosted on the home server, in which case the URL
+    // contains the home server.
+    var hs_url = $location.protocol() + "://" + $location.host();
+    if ($location.port() &&
+        !($location.protocol() === "http" && $location.port() === 80) &&
+        !($location.protocol() === "https" && $location.port() === 443))
+    {
+        hs_url += ":" + $location.port();
+    }
+
+    var generateClientSecret = function() {
+        var ret = "";
+        var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+        for (var i = 0; i < 32; i++) {
+            ret += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+
+        return ret;
+    };
+    
+    $scope.account = {
+        homeserver: hs_url,
+        desired_user_id: "",
+        desired_user_name: "",
+        password: "",
+        identityServer: "http://matrix.org:8090",
+        pwd1: "",
+        pwd2: "",
+        displayName : ""
+    };
+    
+    $scope.register = function() {
+        // Set the urls
+        matrixService.setConfig({
+            homeserver: $scope.account.homeserver,
+            identityServer: $scope.account.identityServer
+        });
+        
+        if ($scope.account.pwd1 !== $scope.account.pwd2) {
+            $scope.feedback = "Passwords don't match.";
+            return;
+        }
+        else if ($scope.account.pwd1.length < 6) {
+            $scope.feedback = "Password must be at least 6 characters.";
+            return;
+        }
+
+        if ($scope.account.email) {
+            $scope.clientSecret = generateClientSecret();
+            matrixService.linkEmail($scope.account.email, $scope.clientSecret, 1).then(
+                function(response) {
+                    $scope.wait_3pid_code = true;
+                    $scope.sid = response.data.sid;
+                    $scope.feedback = "";
+                },
+                function(response) {
+                    $scope.feedback = "Couldn't request verification email!";
+                }
+            );
+        } else {
+            $scope.registerWithMxidAndPassword($scope.account.desired_user_id, $scope.account.pwd1);
+        }
+    };
+
+    $scope.registerWithMxidAndPassword = function(mxid, password, threepidCreds) {
+        matrixService.register(mxid, password, threepidCreds, useCaptcha).then(
+            function(response) {
+                $scope.feedback = "Success";
+                if (useCaptcha) {
+                    Recaptcha.destroy();
+                }
+                // Update the current config 
+                var config = matrixService.config();
+                angular.extend(config, {
+                    access_token: response.data.access_token,
+                    user_id: response.data.user_id
+                });
+                matrixService.setConfig(config);
+
+                // And permanently save it
+                matrixService.saveConfig();
+                
+                // Update the global scoped used_id var (used in the app header)
+                $rootScope.updateHeader();
+                
+                eventStreamService.resume();
+                
+                if ($scope.account.displayName) {
+                    // FIXME: handle errors setting displayName
+                    matrixService.setDisplayName($scope.account.displayName);
+                }
+                
+                 // Go to the user's rooms list page
+                $location.url("home");
+            },
+            function(error) {
+                console.trace("Registration error: "+error);
+                if (useCaptcha) {
+                    Recaptcha.reload();
+                }
+                if (error.data) {
+                    if (error.data.errcode === "M_USER_IN_USE") {
+                        $scope.feedback = "Username already taken.";
+                        $scope.reenter_username = true;
+                    }
+                    else if (error.data.errcode == "M_CAPTCHA_INVALID") {
+                        $scope.feedback = "Failed captcha.";
+                    }
+                    else if (error.data.errcode == "M_CAPTCHA_NEEDED") {
+                        $scope.feedback = "Captcha is required on this home " +
+                                          "server.";
+                    }
+                    else if (error.data.error) {
+                        $scope.feedback = error.data.error;
+                    }
+                }
+                else if (error.status === 0) {
+                    $scope.feedback = "Unable to talk to the server.";
+                }
+            });
+    }
+
+    $scope.verifyToken = function() {
+        matrixService.authEmail($scope.clientSecret, $scope.sid, $scope.account.threepidtoken).then(
+            function(response) {
+                if (!response.data.success) {
+                    $scope.feedback = "Unable to verify code.";
+                } else {
+                    $scope.registerWithMxidAndPassword($scope.account.desired_user_id, $scope.account.pwd1, [{'sid':$scope.sid, 'clientSecret':$scope.clientSecret, 'idServer': $scope.account.identityServer.split('//')[1]}]);
+                }
+            },
+            function(error) {
+                $scope.feedback = "Unable to verify code.";
+            }
+        );
+    };
+	
+	var setupCaptcha = function() {
+	    console.log("Setting up ReCaptcha")
+        var config = window.webClientConfig;
+        var public_key = undefined;
+        if (config === undefined) {
+            console.error("Couldn't find webClientConfig. Cannot get public key for captcha.");
+        }
+        else {
+            public_key = webClientConfig.recaptcha_public_key;
+            if (public_key === undefined) {
+                console.error("No public key defined for captcha!")
+            }
+        }
+	    Recaptcha.create(public_key,
+	    "regcaptcha",
+	    {
+	      theme: "red",
+	      callback: Recaptcha.focus_response_field
+	    });
+	};
+
+	$scope.init = function() {
+        if (useCaptcha) {
+	        setupCaptcha();
+        }
+	};
+    
+}]);
+
diff --git a/syweb/webclient/login/register.html b/syweb/webclient/login/register.html
new file mode 100644
index 0000000000..a27f9ad4e8
--- /dev/null
+++ b/syweb/webclient/login/register.html
@@ -0,0 +1,58 @@
+<div ng-controller="RegisterController" class="register">
+    <div id="wrapper" class="loginWrapper">
+
+        <a href ng-click="goToPage('/')">
+            <img src="img/logo.png" width="240" height="102" alt="[matrix]" style="padding: 50px"/>
+        </a>
+        <br/>
+
+        <form id="loginForm" novalidate>
+            <div>
+                Create account:<br/>
+                
+                <div style="text-align: center">
+                    <br/>
+                    <input ng-show="!wait_3pid_code" id="email" size="32" type="text" ng-focus="true" ng-model="account.email" placeholder="Email address (optional)"/>
+                    <div ng-show="!wait_3pid_code" class="smallPrint">Specifying an email address lets other users find you on Matrix more easily,<br/>
+                        and will give you a way to reset your password in the future</div>
+                    <span ng-show="reenter_username">Choose another username:</span>
+                    <input ng-show="!wait_3pid_code || reenter_username" id="desired_user_id" size="32" type="text" ng-model="account.desired_user_id" placeholder="Matrix ID (e.g. bob)"/>
+                    <br ng-show="!wait_3pid_code" />
+                    <input ng-show="!wait_3pid_code" id="pwd1" size="32" type="password" ng-model="account.pwd1" placeholder="Type a password"/>
+                    <br ng-show="!wait_3pid_code" />
+                    <input ng-show="!wait_3pid_code" id="pwd2" size="32" type="password" ng-model="account.pwd2" placeholder="Confirm your password"/>
+                    <br ng-show="!wait_3pid_code" />
+                    <input ng-show="!wait_3pid_code" id="displayName" size="32" type="text" ng-model="account.displayName" placeholder="Display name (e.g. Bob Obson)"/>
+                    <br ng-show="!wait_3pid_code" />
+                    <br ng-show="!wait_3pid_code" />
+
+
+                    <div id="regcaptcha" ng-init="init()" />
+
+                    <button ng-show="!wait_3pid_code" ng-click="register()" ng-disabled="!account.desired_user_id || !account.homeserver || !account.pwd1 || !account.pwd2 || account.pwd1 !== account.pwd2">Sign up</button>
+
+                    <div ng-show="wait_3pid_code">
+                    <span>Please enter the verification code sent to {{ account.email }}</span><br />
+                    <input id="threepidtoken" size="32" type="text" ng-focus="true" ng-model="account.threepidtoken" placeholder="Verification Code"/><br />
+                    <button ng-click="verifyToken()" ng-disabled="!account.threepidtoken">Validate</button>
+                    </div>
+                    <br/><br/>
+                </div>
+
+                <div class="feedback">{{ feedback }} {{ login_error_msg }}</div>
+                
+                <div id="serverConfig" ng-show="!wait_3pid_code">
+                    <label for="homeserver">Home Server:</label> 
+                    <input id="homeserver" size="32" type="text" ng-model="account.homeserver" placeholder="URL (e.g. http://matrix.org:8080)"/>
+                    <div class="smallPrint">Your home server stores all your conversation and account data.</div>
+                    <label for="identityServer">Identity Server:</label>
+                    <input id="identityServer" size="32" type="text" ng-model="account.identityServer" placeholder="URL (e.g. http://matrix.org:8090)"/>
+                    <div class="smallPrint">Matrix provides identity servers to track which emails etc. belong to which Matrix IDs.<br/>
+                        Only http://matrix.org:8090 currently exists.</div>
+                </div>
+            </div>
+        </form>
+
+    </div>
+    </div>
+</div>