Klaus
201 linhas
6.5 KiB
HTML
201 linhas
6.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<title>JSXC example application</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
|
|
|
|
<link href="css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- require:dependencies -->
|
|
<link href="../build/css/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
|
|
<link href="../dev/css/jsxc.css" media="all" rel="stylesheet" type="text/css" />
|
|
<link href="../dev/css/jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />
|
|
<!-- endrequire -->
|
|
|
|
<link href="css/example.css" media="all" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- require:dependencies -->
|
|
<script src="../dev/lib/jquery.min.js"></script>
|
|
<script src="../dev/lib/jquery.ui.min.js"></script>
|
|
<script src="../dev/lib/jquery.colorbox-min.js"></script>
|
|
<script src="../dev/lib/jquery.slimscroll.js"></script>
|
|
<script src="../dev/lib/jquery.fullscreen.js"></script>
|
|
<script src="../dev/lib/jsxc.dep.js"></script>
|
|
<!-- endrequire -->
|
|
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
|
<!-- jsxc library -->
|
|
<script src="../dev/jsxc.js"></script>
|
|
|
|
<!-- init script -->
|
|
<script src="js/dev.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="content" role="main">
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h1 class="page-header">JSXC <small>developer example</small></h1>
|
|
|
|
<p>This example demonstrates different types of login methods for <a href="https://www.jsxc.org/">JSXC</a>. You find further information in our <a href="https://github.com/jsxc/jsxc/wiki">wiki</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-xs-12 col-md-4">
|
|
<h3>Dual-Login</h3>
|
|
|
|
<p>You should use this method if you have already a login in your website.</p>
|
|
|
|
<form id="form" method="post" action="login.html" class="form form-horizontal">
|
|
<fieldset>
|
|
<div class="form-group">
|
|
<label for="username" class="col-xs-4 control-label">Username:</label>
|
|
<div class="col-xs-8">
|
|
<input type="text" id="username" name="username" class="form-control" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password" class="col-xs-4 control-label">Password:</label>
|
|
<div class="col-xs-8">
|
|
<input type="password" id="password" name="password" class="form-control" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-xs-offset-4 col-xs-8">
|
|
<button type="submit" class="submit btn btn-primary">Log in chat and submit</button>
|
|
<button class="logout btn btn-default" style="display:none;">Log out</button>
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
<pre><form id="form">
|
|
<input type="text" id="username" />
|
|
<input type="password" id="password" />
|
|
<input type="submit" value="Submit" />
|
|
</form>
|
|
|
|
<button id="logout">Logout</button></pre>
|
|
|
|
<pre>jsxc.init({
|
|
loginForm: {
|
|
form: '#form',
|
|
jid: '#username',
|
|
pass: '#password'
|
|
},
|
|
logoutElement: $('#logout'),
|
|
loadSettings: function() {
|
|
return xmpp: {
|
|
url: '/http-bind/',
|
|
domain: 'localhost',
|
|
resource: 'example',
|
|
overwrite: true,
|
|
onlogin: true
|
|
};
|
|
},
|
|
root: '/jsxc/'
|
|
});</pre>
|
|
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-4">
|
|
<h3>AJAX Login</h3>
|
|
|
|
<p>Do you want to login directly within your script? Choose this type.
|
|
|
|
<form id="form2" class="form form-horizontal">
|
|
<fieldset>
|
|
<div class="alert alert-warning col-xs-12" role="alert">
|
|
<strong>Warning!</strong> Your username or password is wrong!
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="username2" class="col-xs-4 control-label">Username:</label>
|
|
<div class="col-xs-8">
|
|
<input type="text" id="username2" class="form-control" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password2" class="col-xs-4 control-label">Password:</label>
|
|
<div class="col-xs-8">
|
|
<input type="password" id="password2" class="form-control" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-xs-offset-4 col-xs-8">
|
|
<button type="submit" id="submit2" class="submit btn btn-primary" data-loading-text="Logging in...">Log in chat</button>
|
|
<button class="logout btn btn-default">Log out</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<pre><input type="text" id="username" />
|
|
<input type="password" id="password" />
|
|
<button id="submit">Log in</button></pre>
|
|
|
|
<pre>jsxc.init({
|
|
xmpp: {
|
|
url: '/http-bind/'
|
|
},
|
|
root: '/jsxc/'
|
|
});
|
|
|
|
$('#submit').click(function(){
|
|
var username = $('#username').val();
|
|
var password = $('#password').val();
|
|
|
|
var jid = username + '@localhost';
|
|
|
|
jsxc.xmpp.login(jid , password);
|
|
});
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-4">
|
|
<h3>Box Login</h3>
|
|
|
|
<p>Do you look for a discrete login method? Choose this.</p>
|
|
|
|
<div class="form" id="form3">
|
|
<button class="submit btn btn-primary">Open Box</button>
|
|
<button class="logout btn btn-default">Log out</button>
|
|
</div>
|
|
|
|
<pre><button id="button">Open Box</button></pre>
|
|
|
|
<pre>jsxc.init({
|
|
loadSettings: function() {
|
|
return xmpp: {
|
|
url: '/http-bind/',
|
|
domain: 'localhost',
|
|
resource: 'example',
|
|
overwrite: true,
|
|
onlogin: true
|
|
};
|
|
},
|
|
root: '/jsxc/'
|
|
});
|
|
|
|
$('#button').click(jsxc.gui.showLoginBox);</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|