scripts

// AUTH ------------------------

let auth = (() => {
    // user/login
    function login(username, password) {
        let userData = {
            username,
            password
        };

        return requester.post('user', 'login', 'basic', userData);
    }


    // user/register
    function register(username, password, name) {
        let userData = {
            username,
            password,
            name
        };

        return requester.post('user', '', 'basic', userData);
    }

    // user/logout
    function logout() {
        let logoutData = {
            authtoken: sessionStorage.getItem('authtoken')
        };

        return requester.post('user', '_logout', 'kinvey', logoutData);
    }

    return {
        login,
        register,
        logout
    }
})();

//------------------------

// REQUESTER -------------------------------

let requester = (() => {
    const kinveyBaseUrl = "https://baas.kinvey.com/";
    const kinveyAppKey = "kid_HkfBJsUuZ"; // APP KEY HERE
    const kinveyAppSecret = "055ffbbdbfff40528d6c426bc80b6e23"; // APP SECRET HERE

    // Creates the authentication header
    function makeAuth(type) {
        return type === 'basic'
            ?  'Basic ' + btoa(kinveyAppKey + ':' + kinveyAppSecret)
            :  'Kinvey ' + sessionStorage.getItem('authtoken');
    }

    // Creates request object to kinvey
    function makeRequest(method, module, endpoint, auth) {
        return req = {
            method,
            url: kinveyBaseUrl + module + '/' + kinveyAppKey + '/' + endpoint,
            headers: {
                'Authorization': makeAuth(auth)
            }
        };
    }

    // Function to return GET promise
    function get (module, endpoint, auth) {
        return $.ajax(makeRequest('GET', module, endpoint, auth));
    }

    // Function to return POST promise
    function post (module, endpoint, auth, data) {
        let req = makeRequest('POST', module, endpoint, auth);
        req.data = data;
        return $.ajax(req);
    }

    // Function to return PUT promise
    function update (module, endpoint, auth, data) {
        let req = makeRequest('PUT', module, endpoint, auth);
        req.data = data;
        return $.ajax(req);
    }

    // Function to return DELETE promise
    function remove (module, endpoint, auth) {
        return $.ajax(makeRequest('DELETE', module, endpoint, auth));
    }

    return {
        get,
        post,
        update,
        remove
    }
})()

//--------------------------

// MESSAGESERVICE --------------------------------

let messagesService  = (() => {
    function loadMyMessages(username) {
        let endpoint = `messages?query={"recipient_username":"${username}"}`;

        return requester.get('appdata', endpoint, 'kinvey');
    }

    function loadArchiveMessages(username) {
        let endpoint = `messages?query={"sender_username":"${username}"}`;

        return requester.get('appdata', endpoint, 'kinvey');
    }

    function deleteMessage(messageId) {
        let endpoint = `messages/${messageId}`;

        return requester.remove('appdata', endpoint, 'kinvey');
    }

    function loadAllUsers() {
        return requester.get('user', '', 'kinvey');
    }

    function sendMessage(sender_username, sender_name, recipient_username, text) {
        let msgData = {
            sender_username,
            sender_name,
            recipient_username,
            text
        };

        return requester.post('appdata', 'messages', 'kinvey', msgData);
    }

    return {
        loadMyMessages,
        loadArchiveMessages,
        deleteMessage,
        loadAllUsers,
        sendMessage
    }
})()

// ------------------------------

// APP ==========--------------======

$(() => {
    showView('AppHome');

    // Attach event handlers
    (() => {
        $('header').find('a[data-target]').click(navigateTo);
        $('#formRegister').submit(registerUser);
        $('#formLogin').submit(loginUser);
        $('#linkMenuLogout').click(logoutUser);
        $('#formSendMessage').submit(sendMessage);
        $('#linkUserHomeMyMessages').click(() => {
            showView('MyMessages');
            loadReceivedMessages();
        });

        $('#linkUserHomeSendMessage').click(() => {
            showView('SendMessage');
            loadAllUsers();
        });

        $('#linkUserHomeArchiveSent').click(() => {
            showView('ArchiveSent');
            loadSentMessages();
        });

        $('#linkMenuMyMessages').click(loadReceivedMessages);
        $('#linkMenuArchiveSent').click(loadSentMessages);
        $('#linkMenuSendMessage').click(loadAllUsers);
        $('.notification').click(function() {
            $(this).hide();
        })
    })()

    if(sessionStorage.getItem('authtoken') === null){
        userLoggedOut();
    } else {
        userLoggedIn();
    }

    // SEND MESSAGE FORM
    function loadAllUsers() {
        messagesService.loadAllUsers()
            .then((allUsers) => {
                displayUsersInList(allUsers);
            })
    }

    function displayUsersInList(allUsers) {
        let usersContainer = $('#msgRecipientUsername');
        usersContainer.empty();
        for(let user of allUsers) {
            let username = user['username'];
            let fullName = formatSender(user['name'], username);
            if(username !== sessionStorage.getItem('username')){
                usersContainer.append($(`<option value="${username}">${fullName}</option>`))
            }
        }
    }

    function sendMessage(ev) {
        ev.preventDefault();
        let rUsernameInput = $('#msgRecipientUsername');
        let mTextInput = $('#msgText');
        let senderName = sessionStorage.getItem('name');
        let senderUsername = sessionStorage.getItem('username');
        let recipientUsername = rUsernameInput.val();
        let msgText = mTextInput.val();

        messagesService.sendMessage(senderUsername, senderName, recipientUsername, msgText)
            .then(() => {
                mTextInput.val('');
                showInfo('Messaged sent.');
                showView('ArchiveSent');
                loadSentMessages();
            }).catch(handleError);
    }


    // LOGIC TO LOAD SENT MESSAGES
    function loadSentMessages() {
        let username = sessionStorage.getItem('username');
        messagesService.loadArchiveMessages(username)
            .then((myMessages) => {
                displayArchivedMessages(myMessages);
            }).catch(handleError);
    }

    function displayArchivedMessages(myMessages) {
        let messagesContainer = $('#sentMessages');
        messagesContainer.empty();
        let messagesTable = $('<table>');
        messagesTable.append($('<thead>')
            .append($('<tr>')
                .append('<th>To</th>')
                .append('<th>Message</th>')
                .append('<th>Date Sent</th>')
                .append('<th>Actions</th>')));
        let tableBody = $('<tbody>');

        for(let msg of myMessages) {
            let tableRow = $('<tr>');
            let recipient = msg['recipient_username'];
            let msgText = msg['text'];
            let msgDate = formatDate(msg['_kmd']['lmt']);
            let deleteBtn = $(`<button value="${msg._id}">Delete</button>`)
                .click(deleteMsg);
            tableRow.append($('<td>').text(recipient));
            tableRow.append($('<td>').text(msgText));
            tableRow.append($('<td>').text(msgDate));
            tableRow.append($('<td>').append(deleteBtn));
            tableBody.append(tableRow);
        }

        messagesTable.append(tableBody);
        messagesContainer.append(messagesTable);
    }

    // DELETE A MESSAGE
    function deleteMsg() {
        let messageId = $(this).val();

        messagesService.deleteMessage(messageId)
            .then(() => {
                showInfo('Message deleted.');
                loadSentMessages();
            }).catch(handleError);
    }

    // LOGIC TO LOAD RECEIVED MESSAGES
    function loadReceivedMessages() {
        let username = sessionStorage.getItem('username');
        messagesService.loadMyMessages(username)
            .then((myMessages) => {
                displayAllMessages(myMessages);
            }).catch(handleError);
    }

    function displayAllMessages(myMessages) {
        let messagesContainer = $('#myMessages');
        messagesContainer.empty();
        let messagesTable = $('<table>');
        messagesTable.append($('<thead>')
            .append($('<tr>')
                .append('<th>From</th>')
                .append('<th>Message</th>')
                .append('<th>Date Received</th>')));
        let tableBody = $('<tbody>');

        for(let msg of myMessages) {
            let tableRow = $('<tr>');
            let sender = formatSender(msg['sender_name'], msg['sender_username']);
            let msgText = msg['text'];
            let msgDate = formatDate(msg['_kmd']['lmt']);
            tableRow.append($('<td>').text(sender));
            tableRow.append($('<td>').text(msgText));
            tableRow.append($('<td>').text(msgDate));
            tableBody.append(tableRow);
        }

        messagesTable.append(tableBody);
        messagesContainer.append(messagesTable);
    }

    // LOGIC TO LOGOUT USER
    function logoutUser() {
        auth.logout()
            .then(() => {
                sessionStorage.clear();
                showInfo('Logout successful.');
                userLoggedOut();
            }).catch(handleError);
    }

    // LOGIC TO LOGIN USER
    function loginUser(ev) {
        ev.preventDefault();
        let inputUsername = $('#loginUsername');
        let inputPassword = $('#loginPasswd');

        let usernameVal = inputUsername.val();
        let passwdVal = inputPassword.val();

        auth.login(usernameVal, passwdVal)
            .then((userInfo) => {
                saveSession(userInfo);
                inputUsername.val('');
                inputPassword.val('');
                showInfo('Login successful.');
            }).catch(handleError);
    }

    // LOGIC TO REGISTER USER
    function registerUser(ev) {
        ev.preventDefault();
        let registerUsername = $('#registerUsername');
        let registerName = $('#registerName');
        let registerPassword = $('#registerPasswd');

        let usernameVal = registerUsername.val();
        let nameVal = registerName.val();
        let passVal = registerPassword.val();

        auth.register(usernameVal, passVal, nameVal)
            .then((userInfo) => {
                saveSession(userInfo);
                registerUsername.val("");
                registerName.val("");
                registerPassword.val("");
                showInfo('User registration successful.');
            }).catch(handleError);
    }

    function navigateTo() {
        let viewName = $(this).attr('data-target');
        showView(viewName);
    }

    // Shows one view/section at a time
    function showView(viewName) {
        $('main > section').hide();
        $('#view' + viewName).show();
    }

    function userLoggedOut() {
        $('.anonymous').show();
        $('.useronly').hide();
        $('#spanMenuLoggedInUser').text('');
        showView('AppHome');
    }

    function userLoggedIn() {
        $('.anonymous').hide();
        $('.useronly').show();
        let username = sessionStorage.getItem('username');
        $('#spanMenuLoggedInUser').text(`Welcome, ${username}!`);
        $('#viewUserHomeHeading').text(`Welcome, ${username}!`);
        showView('UserHome');
    }

    function saveSession(userInfo) {
        let userAuth = userInfo._kmd.authtoken;
        sessionStorage.setItem('authtoken', userAuth);
        let userId = userInfo._id;
        sessionStorage.setItem('userId', userId);
        let username = userInfo.username;
        sessionStorage.setItem('username', username);
        sessionStorage.setItem('name', userInfo['name']);
        userLoggedIn();
    }

    function handleError(reason) {
        showError(reason.responseJSON.description);
    }

    function showInfo(message) {
        let infoBox = $('#infoBox');
        infoBox.text(message);
        infoBox.show();
        setTimeout(() => infoBox.fadeOut(), 3000);
    }

    function showError(message) {
        let errorBox = $('#errorBox');
        errorBox.text(message);
        errorBox.show();
        setTimeout(() => errorBox.fadeOut(), 3000);
    }

    function formatDate(dateISO8601) {
        let date = new Date(dateISO8601);
        if (Number.isNaN(date.getDate()))
            return '';
        return date.getDate() + '.' + padZeros(date.getMonth() + 1) +
            "." + date.getFullYear() + ' ' + date.getHours() + ':' +
            padZeros(date.getMinutes()) + ':' + padZeros(date.getSeconds());

        function padZeros(num) {
            return ('0' + num).slice(-2);
        }
    }

    function formatSender(name, username) {
        if (!name)
            return username;
        else
            return username + ' (' + name + ')';
    }


    // Handle notifications
    $(document).on({
        ajaxStart: () => $("#loadingBox").show(),
        ajaxStop: () => $('#loadingBox').fadeOut()
    });
})

// ==============================

// CSS - :
#menu {
    background: #DDD;
    text-align: center;
    padding: 8px 5px;
    line-height: 1.5;
    border-radius: 3px;
    overflow: auto;
}

#menu a {
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
}

#menu a:hover {
    background: #BBB;
}

#menu>#spanMenuLoggedInUser {
    float: right;
    margin-right: 10px;
}

#infoBox, #errorBox, #loadingBox {
    width: 80%;
    margin: 10px auto;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
}

#loadingBox {
    background: #7CB3E9;
}

#infoBox {
    background: #393;
}

#errorBox {
    background: #F50;
}

main > section {
    padding: 20px 5px;
}

section h1 {
    margin: 10px 0px;
    font-size: 1.3em;
}

table th {
    background: #DDD;
    padding: 10px;
}

table td {
    padding: 5px 10px;
    background: #EEE;
}

input:required:invalid, input:focus:invalid {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT1JREFUeNpi/P//PwMpgImBRMACY/x7/uDX39sXt/67cMoDyOVgMjBjYFbV/8kkqcCBrIER5KS/967s+rmkXxzI5wJiRSBm/v8P7NTfHHFFl5mVdIzhGv4+u///x+xmuAlcdXPB9KeqeLgYd3bDU2ZpRRmwH4DOeAI07QXIRKipYPD35184/nn17CO4p/+cOfjl76+/X4GYAYThGn7/g+Mfh/ZZwjUA/aABpJVhpv6+dQUjZP78Z0YEK7OezS2gwltg64GmfTu6i+HL+mUMP34wgvGvL78ZOEysf8M1sGgZvQIqfA1SDAL8iUUMPIFRQLf+AmMQ4DQ0vYYSrL9vXDz2sq9LFsiX4dLRA0t8OX0SHKzi5bXf2HUMBVA0gN356N7p7xdOS3w5fAgcfNxWtn+BJi9gVVBOQfYPQIABABvRq3BwGT3OAAAAAElFTkSuQmCC);
    background-position: right top;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
}

input:required:valid {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
    background-position: right top;
    background-repeat: no-repeat;
}

#viewUserHome a {
    display: inline-block;
    width: 60px;
    text-align: center;
    background: #BBB;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
    text-decoration: none;
}

#viewUserHome a:hover {
    color: white;
    background: #555;
}

footer {
    background: #DDD;
    padding: 5px 10px;
    font-size: 0.8em;
    text-align: center;
    border-radius: 3px;
}
 -------

// html : ------
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Messages</title>
    <link rel="stylesheet" type="text/css" href="messages.css" />
    <script src="scripts/jquery-3.1.1.min.js"></script>
    <script src="scripts/models/requester.js"></script>
    <script src="scripts/models/auth.js"></script>
    <script src="scripts/models/messagesService.js"></script>
    <script src="scripts/app.js"></script>
</head>

<body>
<div id="app">
    <header id="menu">
        <a href="#" class="anonymous" id="linkMenuAppHome" data-target="AppHome">Home</a>
        <a href="#" class="anonymous" id="linkMenuLogin" data-target="Login">Login</a>
        <a href="#" class="anonymous" id="linkMenuRegister" data-target="Register">Register</a>

        <a href="#" class="useronly" id="linkMenuUserHome" data-target="UserHome">Home</a>
        <a href="#" class="useronly" id="linkMenuMyMessages" data-target="MyMessages">My Messages</a>
        <a href="#" class="useronly" id="linkMenuArchiveSent" data-target="ArchiveSent">Archive (Sent)</a>
        <a href="#" class="useronly" id="linkMenuSendMessage" data-target="SendMessage">Send Message</a>
        <a href="#" class="useronly" id="linkMenuLogout">Logout</a>

        <span class="useronly" id="spanMenuLoggedInUser">Welcome, {user}!</span>
    </header>

    <main>
        <div id="loadingBox" style="display: none" class="notification">Loading ...</div>

        <div id="infoBox" style="display: none" class="notification">Info</div>

        <div id="errorBox" style="display: none" class="notification">Error</div>

        <section id="viewAppHome">
            <h1>Welcome</h1>
            Welcome to our messaging system.
        </section>

        <section id="viewLogin">
            <h1>Please login</h1>
            <form id="formLogin">
                <label>
                    <div>Username:</div>
                    <input type="text" name="username" id="loginUsername" required />
                </label>
                <label>
                    <div>Password:</div>
                    <input type="password" name="password" id="loginPasswd" required />
                </label>
                <div>
                    <input type="submit" value="Login" />
                </div>
            </form>
        </section>

        <section id="viewRegister">
            <h1>Please register here</h1>
            <form id="formRegister">
                <label>
                    <div>Username:</div>
                    <input type="text" name="username" id="registerUsername" required />
                </label>
                <label>
                    <div>Password:</div>
                    <input type="password" name="password" id="registerPasswd" required />
                </label>
                <label>
                    <div>Name:</div>
                    <input type="text" name="name" id="registerName" />
                </label>
                <div>
                    <input type="submit" value="Register" />
                </div>
            </form>
        </section>

        <section id="viewUserHome">
            <h1 id="viewUserHomeHeading">Welcome, {user}!</h1>
            <a href="#" id="linkUserHomeMyMessages">My Messages</a>
            <a href="#" id="linkUserHomeSendMessage">Send Message</a>
            <a href="#" id="linkUserHomeArchiveSent">Archive (Sent)</a>
        </section>

        <section id="viewMyMessages">
            <h1>My Messages</h1>
            <div class="messages" id="myMessages">

            </div>
        </section>

        <section id="viewArchiveSent">
            <h1>Archive (Sent Messages)</h1>
            <div class="messages" id="sentMessages">

            </div>
        </section>

        <section id="viewSendMessage">
            <h1>Send Message</h1>
            <form id="formSendMessage">
                <div>Recipient:</div>
                <div>
                    <select name="recipient" required id="msgRecipientUsername">

                    </select>
                </div>
                <div>Message Text:</div>
                <div><input type="text" name="text" required id="msgText" /></div>
                <div><input type="submit" value="Send" /></div>
            </form>
        </section>
    </main>

    <footer>Messaging System - Simple SPA Application</footer>
</div>

</body>

</html>


-------