Synnefo

.api-access-view div.detail .title {

    float: left;

    font-size: 0.8em;

}

.api-access-view div.detail input {

    border: none;

    text-decoration: none;

    width: 80%;

    font-family: monospace;

    position: absolute;

    left: 20%;

    cursor: pointer;

}

.api-access-view div.detail {

    display: block;

    position: relative;

    margin: 2em 0;

    font-size: 1.3em; 

    padding-bottom: 0.2em;

}

.api-access-view div.detail.small {

    padding-bottom: 0.9em;

}

.api-access-view div.detail .expires {

    font-size: 9px;

    font-family: 'Open Sans', sans-serif;

    position: absolute;

    left: 20%;

    top: 25px;

    color:#b3b3b3;

}

.api-access-view p.sub {

    font-size: 0.7em;

    color:#b3b3b3;

    padding-top:6px;

}

.api-access-view .api-clients h3 {

    font-size: 1.2em;

}

.subsection {

    margin-bottom: 4em;

}

.token-view .actions {

    position: absolute;

    left:50%;

    font-size:13px;

}

.renew-token .confirm {

    color:#3582AC;

    margin:0 15px;

}

.renew-token .close {

    color:#F24E53;

}

.renew-token .sub,

.renew-token .confirm,

.renew-token .close {

    display: none

}

.token-view .actions 							{ left:0; position: relative; top:50px;}

.api-access-view div.detail .expires			{ }

  $('.renew-token a.do').click(function(e){

    e.preventDefault();

    var els = [$(".renew-token .sub"),$('.renew-token .confirm'), $('.renew-token .close')];

    _.each(els, function (el) { el.show();})

  })

  $('.renew-token a.close').click(function(e){

    e.preventDefault();

    var els = [$(".renew-token .sub"),$('.renew-token .confirm'), $('.renew-token .close')];

    _.each(els, function (el) { el.hide();})

  })

        <h2>API ACCESS</h2>

        <div class="two-cols dotted clearfix">

            <div class="rt">

                <p>

                If

                you want to learn more about the specification of the REST API itself,

                please take a look at the <a href="https://www.synnefo.org/docs" 

                alt="Synnefo documentation">Synnefo documentation</a>. 

                </p>

            </div>

            <div class="lt">

                <p>{{ BRANDING_SERVICE_NAME }} provides a complete REST API that allows you to access and

    line client or importing the corresponding library inside your own code.</p>

            </div>

        </div>

    <div class="subsection dotted">

        <h2>API details</h2>

        <p>

    find right below.<br /><br />

        </p>

        <div class="token-view">

            <div class="detail small clearfix">

                <span class="title">Authentication url</span>

                <input type="text" value="{{ token_url }}" disabled />

            </div>

            <div class="detail clearfix">

                <div class="facts">

                    <span class="title">API Token</span>

                    <input type="text" value="{{ request.user.auth_token }}" disabled />

                    <span class="expires">

                        <span class="date">

                            expires in {{ request.user.auth_token_expires|timeuntil }}

                            ({{ request.user.auth_token_expires|date }})

                        </span>

                    </span>

                </div>

                <div class="actions">

                    <div class="renew-token">

                        <a href="#" class="do">renew token</a>

                        <a href="#" class="confirm">confirm</a>

                        <a href="#" class="close">x</a>

                        <p class="sub">Make sure to set the new token in any client<br> you may be using each

                time you renew your token.</p>

                    </div>

                </div>

                <span class="extra-img" id="token-span">&nbsp;</span>

            </div>

        {% endblock %}

    <div class="two-cols dotted clearfix">

        <div class="rt">

            {% block page.body.api_advanced %}

            <h2>API Advanced Usage</h2>

            <p>

            Apart from using the kamaki command line client, you can also import the

            kamaki library inside your code and use it directly. More details on how

            to do that on the corresponding kamaki 

            <a href="{{ client_url }}">kamaki </a>page.</p> 

            <p>You can also implement the REST API calls by yourself, without

            using the official kamaki library if you feel confident with your

            programming skills. To do so, you first need to get a good grasp of the

            API itself; for more information take a look at the corresponding page

            inside the 

            <a href="https://synnefo.org/docs/">Synnefo documentation</a>.

            </p>

            {% endblock %}

        </div>

        <div class="lt">

            {% block page.body.clients %}

            <h2>Kamaki</h2>

            <p><a href="{{ client_url }}" alt="kamaki">Kamaki</a> is the official

    resources from the command line or use it inside your scripts.</p>

            <p>Kamaki allows you to execute all the operations you do from the Web UI. You can use kamaki to<br><br>

            - register images,<br>- spawn clusters of customized VMs,<br>- connect them to

    Private Virtual Networks,<br>- have them executing computations dynamically and

    many other neat things.</p>

            <p> Kamaki is available for most Linux distributions,

    at its <a href="http://www.synnefo.org/docs/kamaki/latest/index.html">corresponding page</a>

            </p>

             <p class="download">You can download kamaki 

        </div>

        {% endblock %}