cloud-list.html

<!--
Copyright (C) 2015 GRNET S.A.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

        <script type="text/javascript">

            load_data_from_file(CLOUDS_CONF_FILE, render_clouds);

            function show_delete_cloud_modal(cloud) {
                $("#del-cloud-modal-p").html("Are you sure you want to delete "
                    + cloud.name + '?');
                $("#delete-cloud-modal").foundation("reveal", "open");
                var i = 0;
                $("#delete-cloud-modal").on('close.fndtn.reveal', function(e) {
                    if(e.namespace !== "fndtn.reveal") return;
                    i++;
                    $(this).click(function(event) {
                        // event is fired more than once so have to check
                        if(event.target.id == "del-cloud-modal-accept" && i == 1) {
                            delete_cloud(cloud);
                        }
                    });
                });
            }

            function render_clouds(data) {
                $("#clouds_list").remove();
                // clouds is undefined the first time, when
                // reading data from file
                if(typeof clouds === 'undefined') {
                    if(data != "") {
                        clouds = JSON.parse(data);
                    } else {
                        clouds = new Object();
                    }
                }
                var ul = $("<ul></ul>")
                    .attr("id", "clouds_list")
                    .attr("class", "side-nav");
                $.each(clouds, function(i, cloud) {
                    var li = $("<li></li>")
                        .attr("class", "clearfix")
                        .attr("id", "li_" + cloud.name);
                    var a = $("<a>" + cloud.name + "</a>")
                        .attr("href", "#")
                        .attr("id", cloud.name)
                        .attr("class", "left")
                        .click(function() {
                            load_cloud(cloud);
                            activate_li("li_" + cloud.name);
                        });
                    li.append(a);

                    var a_del = $("<a><i class='fa fa-times-circle delete_icon'></i></a>")
                        .attr("href", "#")
                        .attr("class", "right")
                        .click(function() {
                            show_delete_cloud_modal(cloud);
                        });
                    li.append(a_del);

                    ul.append(li);
                    $("#sidebar").append(ul);
                });
            }

            function activate_li(id) {
                $("li").each(function(i, li) {
                    if($(this).is("#" + id)) {
                        $(this).addClass("active-li");
                    } else {
                        $(this).removeClass("active-li");
                    }
                });
            }

            var errors = {
                cloud_url_empty: 'Provide a Cloud Authentication URL',
                cloud_inaccessible: 'Cloud URL did not respond as expected',
                token_empty: 'Provide a user token',
                token_error: 'Failed to authenticate',
                token_cloudless: 'No cloud to try this token against',
                cloud_name_empty: 'Provide a Cloud Name',
                cloud_name_illegal: 'Invalid Entry. Allowed characters [A-Za-z0-9-_]'
            };

            function check_cloud_name() {
                var cloud_name = $('#cloud-name').val().replace(/^\s+|\s+$/gm,'');
                if(!cloud_name) {
                    $('#cloud-name-error small').text(errors.cloud_name_empty);
                    $('#cloud-name-error small').show();
                    return false;
                } else {
                    var pattern = /^[\w.\-]+$/;
                    if(!cloud_name.match(pattern)) {
                        $('#cloud-name-error small').text(errors.cloud_name_illegal);
                        $('#cloud-name-error small').show();
                        return false;
                    } else {
                        $('#cloud-name-error small').hide();
                    }
                }
                return true;
            }

            var url_error = null;
            var pithos_public = null;
            var account_ui = null;

            function check_cloud_url() {
                var url = $('#cloud-url').val().replace(/^\s+|\s+$/gm,'');
                if(!url) {
                    $('#cloud-error small').text(errors.cloud_url_empty);
                    $('#cloud-error small').show();
                    $("#login").hide();
                } else {
                    $.ajax({
                        type : 'POST',
                        url : url + '/tokens',
                    })
                    .done(function(data) {
                        $("#login").show();
                        var endpoints = data.access.serviceCatalog
                        $.each(endpoints, function(i, endpoint) {
                            switch(endpoint.type) {
                                case 'object-store': try {
                                    pithos_public = endpoint['endpoints'][0]['publicURL'];
                                    $('#cloud-error small').hide();
                                    url_error = null;
                                } catch(err) { console.log('Failed to get pithos_public ' + err); }
                                break;
                                case 'account': try {
                                    account_ui = endpoint['endpoints'][0]['SNF:uiURL'];
                                } catch(err) { console.log('Failed to get account_ui ' + err); }
                                break;
                            }
                        });
                    })
                    .fail ( function(xhr, status, msg) {
                        pithos_public = null;
                        url_error = xhr.status + ' ' + msg;
                        console.log(xhr.status + ' ' + xhr.responseText);
                        $('#cloud-error small').text(errors.cloud_inaccessible + ' [' + url_error  + ']');
                        $('#cloud-error small').show();
                        $("#login").hide();
                    });
                }
            }

            var auth_error = null;
            var uuid = null;

            function check_token() {
                var token = $('#token').val().replace(/^\s+|\s+$/gm,'');
                if (!token) {
                    $('#token-error small').text(errors.token_empty);
                    $('#token-error small').show();
                } else {
                    var url = $('#cloud-url').val().replace(/^\s+|\s+$/gm,'');
                    if (pithos_public && url) {
                        $.ajax({
                            type: 'POST', 
                            url: url + '/tokens',
                            beforeSend : function(req) {
                                req.setRequestHeader('X-Auth-Token', token);
                            },
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            data: JSON.stringify({auth: {token: {id: token}}})
                        })
                        .done(function(data) {
                            auth_error = null;
                            $('#token-error small').hide();
                            uuid = data.access.token.tenant.id;
                        })
                        .fail(function(xhr, status, msg) {
                            auth_error = xhr.status + ' ' + msg;
                            console.log(xhr.status + ' ' + xhr.responseText);
                            $('#token-error small').text(
                                errors.token_error + ' [' + auth_error + ']');
                            $('#token-error small').show();

                        });

                    } else {
                        $('#token-error small').text(errors.token_cloudless);
                        $('#token-error small').show();
                    }
                }
            }

            function check_fields() {
                check_cloud_url();
                check_token();
                if(auth_error || url_error || !pithos_public || !check_cloud_name())
                    return false;
                return true;
            }

            function load_cloud(cloud) {
                $('#cloud-name-error small').hide();
                $('#cloud-error small').hide();
                $('#token-error small').hide();

                if(cloud) {
                    $("#cloud-name").val(cloud.name);
                    $("#cloud-url").val(cloud.auth_url);
                    $("#token").val(cloud.token);
                } else {
                    $("#cloud-name").val('');
                    $("#cloud-url").val('');
                    $("#token").val('');
                    $("#login").hide();
                }

                $("#cloud_details").show();
            }

            function edit_add_cloud() {
                var cloud_name = $("#cloud-name").val().replace(/^\s+|\s+$/gm,'');
                var url = $("#cloud-url").val().replace(/^\s+|\s+$/gm,'');
                var token = $("#token").val().replace(/^\s+|\s+$/gm,'');

                var cloud = {};
                cloud.name = cloud_name;
                cloud.auth_url = url;
                cloud.token = token;
                cloud.pithos_public = pithos_public;
                cloud.uuid = uuid;

                clouds[cloud_name] = cloud;
                render_clouds("");
                activate_li("li_" + cloud.name);
                write_conf_file(CLOUDS_CONF_FILE, clouds);
                $("#save-alert").show();
                setTimeout( function() {$("#save-alert").fadeOut()}, 1000);
            }

            function delete_cloud(cloud) {
                delete clouds[cloud.name];
                render_clouds("");
                write_conf_file(CLOUDS_CONF_FILE, clouds);
                $("#cloud_details").hide();
            }

            function remove_cookies(win, url) {
                var removed_at_least_one = false
                win.cookies.getAll({url: url}, function(cookies) {
                    $.each(cookies, function(i, cookie) {
                        win.cookies.remove({url: url, name: cookie.name} );
                        removed_at_least_one = true;
                    });
                });
                return removed_at_least_one;
            }

            var cred_win = null;
            var logout_win = null;
            var got_cookie = false;

            function extract_credentials(cookie) {
                var credentials = cookie.value.split('%7C');
                var uuid = credentials[0];
                var token = credentials[1];
                $('#token').val(token);
                $('#token').trigger('change');
            }

            function get_credentials() {
                var cookie_name = '_pithos2_a';
                var lurl = account_ui + '/logout?next=' + pithos_public
                got_cookie = false;
                cred_win = gui.Window.open(lurl, {
                    focus: true, width: 820, height: 780, toolbar: false
                });
                cred_win.cookies.onChanged.addListener(function(info) {
                    if (info.cookie.name === cookie_name) {
                        console.log('Succesfully logged in');
                        extract_credentials(info.cookie);
                        got_cookie = true;
                    }
                });
                cred_win.on('loaded', function() {
                    if (got_cookie) cred_win.close();
                });
                cred_win.on('closed', function() {
                    logout_win = gui.Window.open(
                        account_ui + '/logout',
                        {focus: true, width:20, height: 20 });
                    logout_win.hide();
                    logout_win.on('loaded', function() {
                        while(remove_cookies(logout_win, pithos_public)) {}
                        logout_win.close();
                    });
                });
            }

            window.setInterval(function() {
                if($("#clouds_page").attr("id") &&
                    $("#cloud-url").val()) {
                    check_cloud_url();
                    check_token();
                }
            }, 500);
        </script>

        <div class="row" id="clouds_page">
            <div class="small-9 columns">
                <p>&nbsp;</p>
            </div>
        </div>
        <div class="row">
            <div class="small-3 columns vertical-border" id="sidebar">
                <a href="#" onclick="load_cloud();" class="button small radius">
                    <i class="fa fa-plus-circle">&nbsp;Add Cloud</i>
                </a>
            </div>
            <div class="small-9 columns">
                <div id="cloud_details" class="hide">
                    <div id="save-alert" class="hide">
                        <div data-alert class="alert-box success radius">
                            Successfully saved cloud configuration.
                            <a href="#" class="close">&times;</a>
                        </div>
                    </div>
                    <form>
                        <div class="clearfix">
                            <div class="small-3 columns">
                                <label id="cloud_name_label" for="cloud-name" class="right inline">Name</label>
                            </div>
                            <div class="small-9 columns error" id="cloud-name-error">
                                <input type="text" id="cloud-name"
                                placeholder="Cloud Name [A-Za-z0-9-_]" onchange="check_cloud_name();">
                                <small class="error"></small>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="small-3 columns">
                                <label id="url_label" for="cloud-url" class="right inline">Cloud URL</label>
                            </div>
                            <div class="small-9 columns error" id="cloud-error">
                                <input type="text" id="cloud-url" placeholder="Authentication URL"
                                onchange="check_cloud_url();">
                                <small class="error"></small>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="small-3 columns">
                                <label id="token_label" for="token" class="right inline">User token</label>
                            </div>
                            <div class="small-9 columns error" id="token-error">
                                <input type="text" id="token" placeholder="User token"
                                onchange="check_token();">
                                <small class="error"></small>
                            </div>
                            <div class="clearfix hide" id="login">
                                <div class="small-8 columns"></div>
                                <a id="get_creds"
                                    class="small-4 columns button right tiny login-button"
                                    onclick="get_credentials();">Auto-fill token with login</a>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="small-8 columns"></div>
                            <a id="save_button" class="button radius right small"
                                onclick="if(check_fields()) edit_add_cloud();">Save</a>
                        </div>
                </form>
            </div>
        </div>
        <div id="delete-cloud-modal" class="reveal-modal medium"
            data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
            <p id="del-cloud-modal-p"></p>
            <a id="del-cloud-modal-cancel" class="button radius small"
                onclick="$('#delete-cloud-modal').foundation('reveal', 'close');">
                Cancel
            </a>
            <a id="del-cloud-modal-accept" class="button radius small alert right"
                onclick="$('#delete-cloud-modal').foundation('reveal', 'close');">
                Delete
            </a>
            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>