4 files changed, 153 insertions, 0 deletions

diff --git a/views/channel.html b/views/channel.html
new file mode 100644
index 0000000..a1c13b5
--- /dev/null
+++ b/views/channel.html
@@ -0,0 +1,28 @@
+<h2>Create a channel</h2>
+
+<h3>Channel created with given password</h3>
+
+<form>
+        <label for="channel">Channel ID</label>
+        <input type="text" value="{{channel}}" readonly id="channel">
+        <br>
+        <label for="url">URL</label>
+        <input type="text" value="{{url}}" readonly id="url">
+</form>
+
+<style type="text/css">
+        label {
+                display: inline-block;
+                width: 100px;
+        }
+</style>
+
+<script type="text/javascript">
+        channel.addEventListener("click", function(event) {
+                this.select();
+        });
+        
+        url.addEventListener("click", function(event) {
+                this.select();
+        });
+</script>
diff --git a/views/client.html b/views/client.html
new file mode 100644
index 0000000..c322042
--- /dev/null
+++ b/views/client.html
@@ -0,0 +1,83 @@
+<h2>Test client</h2>
+
+<form>
+        <label for="channelField">Channel</label>
+        <input type="text" id="channelField">
+        <label for="passwordField">Password (optional)</label>
+        <input type="password" id="passwordField">
+        <input type="submit" value="Connect" id="connectButton">
+</form>
+<br>
+<form>
+        <label for="messageField">Message</label>
+        <input type="text" disabled id="messageField">
+        <input type="submit" value="Send" disabled id="sendButton">
+</form>
+
+<hr>
+<span>Log</span>
+<pre id="console"></pre>
+
+ <script src="/socket.io/socket.io.js"></script>
+<script type="text/javascript">
+        var console = document.getElementById("console");
+
+        function println(str) {
+                console.innerHTML = str + "\n" + console.innerHTML;
+        }
+
+        function changeControlState(connected) {
+                socketConnected = connected;
+                channelField.disabled = connected;
+                passwordField.disabled = connected;
+                if (connected) {
+                        connectButton.value = "Disconnect";
+                } else {
+                        connectButton.value = "Connect";
+                }
+
+                messageField.disabled = !connected;
+                sendButton.disabled = !connected;
+        }
+
+        var socket;
+        var socketConnected = false;
+
+        function connectSocket(channel, password) {
+                socket = io.connect("/", {
+                        "query" : "channel=" + channel + "&password=" + password,
+                        "force new connection" : true
+                });
+
+                socket.on("connect", function() {
+                        changeControlState(true);
+                        println("connected");
+                });
+
+                socket.on("disconnect", function() {
+                        changeControlState(false);
+                        println("disconnected");
+                });
+
+                socket.on("message", function(message) {
+                        println(message);
+                });
+        }
+
+
+        connectButton.addEventListener("click", function(event) {
+                event.preventDefault();
+                if (socketConnected) {
+                        socket.disconnect();
+                } else {
+                        connectSocket(channelField.value, passwordField.value);
+                }
+        });
+
+        sendButton.addEventListener("click", function(event) {
+                event.preventDefault();
+                socket.emit("message", messageField.value);
+                messageField.value = "";
+        });
+
+</script>
\ No newline at end of file
diff --git a/views/home.html b/views/home.html
new file mode 100644
index 0000000..f6fef09
--- /dev/null
+++ b/views/home.html
@@ -0,0 +1,31 @@
+<h2>Create a channel</h2>
+
+<form method="post" action="/">
+        <label for="passwordField">Password (optional)</label>
+        <input type="password"  id="passwordField" name="password">
+        <input type="submit" id="randomButton" value="Generate random password">
+        <input type="submit" value="Create a new channel">
+</form>
+
+<br>
+<hr>
+
+<a href="/client">Test client</a> - <a href="https://github.com/Pacien/Webcastor">Sources</a>
+
+<script type="text/javascript">
+        randomButton.addEventListener("click", function(event) {
+                event.preventDefault();
+
+                var randomPassword = Math.random().toString(36).substr(2, 10);
+
+                passwordField.type = "text";
+                passwordField.value = randomPassword;
+        });
+
+        passwordField.addEventListener("input", function(event) {
+                if (passwordField.value.length <= 1) {
+                        passwordField.type = "password";
+                }
+        });
+
+</script>
diff --git a/views/layout.html b/views/layout.html
new file mode 100644
index 0000000..c929bc9
--- /dev/null
+++ b/views/layout.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+        <head>
+                <meta charset="UTF-8">
+                <title>Webcastor</title>
+        </head>
+        <body>
+                <h1>Webcastor</h1>
+                {{{ yield }}}
+        </body>
+</html>
\ No newline at end of file