JSXC example application

# JSXC developer example

This example demonstrates different types of login methods for JSXC. You find further information in our wiki.

### Dual-Login

You should use this method if you have already a login in your website.

Username:
Password:

    <form id="form">
      <input type="text" id="username" />
      <input type="password" id="password" />
      <input type="submit" value="Submit" />
    </form>

    <button id="logout">Logout</button>

    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/'
    });

### AJAX Login

Do you want to login directly within your script? Choose this type.

Warning! Your username or password is wrong!
Username:
Password:

    <input type="text" id="username" />
    <input type="password" id="password" />
    <button id="submit">Log in</button>

    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);
    });

### Box Login

Do you look for a discrete login method? Choose this.

    <button id="button">Open Box</button>

    jsxc.init({
      loadSettings: function() {
        return xmpp: {
          url: '/http-bind/',
          domain: 'localhost',
          resource: 'example',
          overwrite: true,
          onlogin: true
        };
      },
      root: '/jsxc/'
    });

    $('#button').click(jsxc.gui.showLoginBox);