abdurrahmanekr/strophe-tester.html

## strophe-tester.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/strophe.js/1.2.14/strophe.js'></script>
	<script>
		var config = {
			uri: 'http://atomic.detaysoft.com/http-bind/'
		};

		function status (text) {
			var a = document.getElementById('status');
			a.innerHTML = text;
		};

		function message (text) {
			var a = document.getElementById('message');
			a.textContent = a.textContent + text;
		}

		function clickP (type) {
			switch (type) {
				case 'login':
					var uri = document.getElementById('uri').value;
					var jid = document.getElementById('jid').value;
					var pass = document.getElementById('pass').value;
					window.client = new Strophe.Connection(uri || config.uri, {});

					window.client.connect(jid, pass, function(res) {
						for(var i in Strophe.Status)
							if (Strophe.Status[i] === res)
								status(i);
					});

					window.client.xmlInput = function (data) {
						var a = document.createTextNode(data.innerHTML);
						message(a.textContent);
					};

					window.client.xmlOutput = function (data) {
						var a = document.createTextNode(data.innerHTML)
						message(a.textContent);
					};
					break;
				case 'send':
					try {
						var xml = document.getElementById('xml').value;
						var div = document.createElement('div');
						div.innerHTML = xml;
						var elements = div.childNodes;
						var node = elements[0];
						client.send(node);
					} catch (e) {
						status(e);
					}

					break;
			}
		}

		window.onload = function() {
			document.getElementById('uri').value = config.uri;
		}
	</script>
	<style type='text/css'>
		input {
			min-width: 500px;
		}

		body {
			display: flex;
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    right: 0;
		    left: 0;
		}

		#dfg {
			float: left;
		}

		.asd {
			float: right
		}
	</style>
</head>
<body>
<div id="dfg">
	<form onsubmit="clickP('login'); return false">
		<p>
			<input type="text" id="uri" placeholder="uri" />
			<div id="status"></div>
		</p>
		<p>
			<input type="text" id="jid" placeholder="jid" required="" />
		</p>
		<p>
			<input type="text" id="pass" placeholder="password" required=""/>
		</p>
		<button>Giriş yap</button>
	</form>

	<form onsubmit="clickP('send'); return false">
		<p>
			<textarea type="text" id="xml" placeholder="xml"></textarea>
			<button>XML Gönder</button>
		</p>
		<p>
		</p>
	</form>
</div>

<div class="asd" id="message"></div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/strophe.js/1.2.14/strophe.js'></script>
	<script>
	var config = {
	uri: 'http://atomic.detaysoft.com/http-bind/'
	};

	function status (text) {
	var a = document.getElementById('status');
	a.innerHTML = text;
	};

	function message (text) {
	var a = document.getElementById('message');
	a.textContent = a.textContent + text;
	}

	function clickP (type) {
	switch (type) {
	case 'login':
	var uri = document.getElementById('uri').value;
	var jid = document.getElementById('jid').value;
	var pass = document.getElementById('pass').value;
	window.client = new Strophe.Connection(uri \|\| config.uri, {});

	window.client.connect(jid, pass, function(res) {
	for(var i in Strophe.Status)
	if (Strophe.Status[i] === res)
	status(i);
	});

	window.client.xmlInput = function (data) {
	var a = document.createTextNode(data.innerHTML);
	message(a.textContent);
	};

	window.client.xmlOutput = function (data) {
	var a = document.createTextNode(data.innerHTML)
	message(a.textContent);
	};
	break;
	case 'send':
	try {
	var xml = document.getElementById('xml').value;
	var div = document.createElement('div');
	div.innerHTML = xml;
	var elements = div.childNodes;
	var node = elements[0];
	client.send(node);
	} catch (e) {
	status(e);
	}

	break;
	}
	}

	window.onload = function() {
	document.getElementById('uri').value = config.uri;
	}
	</script>
	<style type='text/css'>
	input {
	min-width: 500px;
	}

	body {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	}

	#dfg {
	float: left;
	}

	.asd {
	float: right
	}
	</style>
	</head>
	<body>
	<div id="dfg">
	<form onsubmit="clickP('login'); return false">
	<p>
	<input type="text" id="uri" placeholder="uri" />
	<div id="status"></div>
	</p>
	<p>
	<input type="text" id="jid" placeholder="jid" required="" />
	</p>
	<p>
	<input type="text" id="pass" placeholder="password" required=""/>
	</p>
	<button>Giriş yap</button>
	</form>

	<form onsubmit="clickP('send'); return false">
	<p>
	<textarea type="text" id="xml" placeholder="xml"></textarea>
	<button>XML Gönder</button>
	</p>
	<p>
	</p>
	</form>
	</div>

	<div class="asd" id="message"></div>

	</body>
	</html>