Authenticate with Moodle from a mobile app using jQuery

gistfile1.txt

My mobile app needs to log in to Moodle to get Json data from a webservice and display it using Angular.

In order to do that, I need to pass in a username and password and get a Moodle webservice token back, so my app doesn't need to log in again (at least until the token expires).

login.js

//Step 1. Check if a token already exists

jQuery(document).ready(function () {

/* when the user clicks log-out button, destroy the session */

    $('#btn_logout').on('click', function () {
        $('.pane').hide();  /* hide all screens */
        $('#menu').toggleClass('ui-panel-open ui-panel-closed');
        $.jStorage.deleteKey('session');
        makeUserLogin();
    });

        var session = $.jStorage.get('session', ''); // syntax: $.jStorage.get(keyname, "default value")


        if (session) { // if  there is already a session, redirect to landing pane

             showApp();

        } else {   // if there is no session *then* redirect to the login pane

           makeUserLogin();

        }

});

//Step 2. create functions to show app & redirect to login page

function showApp() {
    $('#home-pane').show(); /* show home screen */
    $('#system-message').hide();
    $('#login-pane').hide();  /* hide login screen*/
    $('#menu_btn').removeClass('hidden'); /* show menu button so user can see rest of app */
}

function makeUserLogin() {

    $('#btn_login').click(function () {
        console.log('click event for login_button');

        var username = $('#username').val();
        var password = $('#password').val();

        postCredentials(username, password, createSession);

    });

    $('#menu_btn').addClass('hidden');  /* hide menu button so user cannot see rest of app */
    $('#home-pane').hide();  /* hide home screen */
    $('#login-pane').show(); /* show login screen */
}

function postCredentials(username, password, callback) {
    if ((username.length && password.length) && (username !== '' && password !='')) {

        var url = 'https://moodle.yourcompany.com/local/login/token.php';
        $.post(url, {
             username: username,
             password: password,
             service: 'webservice_ws' // your webservice name
         }).done(function (data) {
             token = data.token;
             dataString = JSON.stringify(data);
             if (dataString.indexOf('error') > 0) {
               showErrorDialog('<p class="error">Invalid user credentials, please try again</p>');
             }
             else {
                  createSession(token); 
             }

         }).fail(function () {
             showErrorDialog('<p class="error">Login failed</p>');
         });

    } else {
        showErrorDialog('<p class="error">Please enter a username and password</p>');
    }
}

function createSession(token) {

// syntax:  $.jStorage.set('keyname', 'keyvalue', {TTL: milliseconds}); // {TTL... is optional time, in milliseconds, until key/value pair expires}
    $.jStorage.set('session', token, { TTL: 28800000 });
// redirect to whatever page you need after a successful login
    showApp();
}

function showErrorDialog(errorMsg) {
    $('#system-message').html(errorMsg);
    $('#system-message').fadeIn();
}