shimapan/public/views/panel/api.html

<div class="inner" ng-controller="ApiController" ng-init="getKeys()">
    <div class="keys">
        <div class="key" ng-repeat="key in keys" ng-click="$parent.showKeyInfo(key)">
            <i class="fa fa-key"></i>
            <span>{{key.identifier}}</span>
        </div>
        <div class="key add-key" ng-hide="keys.length >= 10" ng-click="showNewKey()">
            <i class="fa fa-plus"></i>
            <span>Create</span>
        </div>
    </div>
    <div class="modal" style="{{kModalShow?'display:block':'display:none'}}">
        <div class="modal-sandbox" ng-click="hideKeyInfo()"></div>
        <div class="modal-box">
            <div class="modal-header">
                <h1>Key Info:&emsp;<span class="key-name">{{currKey.identifier}}</span></h1>
                <div class="close-modal" ng-click="hideKeyInfo()"><i class="fa fa-times"></i></div>
            </div>
            <div class="modal-body">
                <p>API Key:</p>
                <pre>{{currKey.key}}</pre>
                <br/>
                <p>This key can be used with any 3rd party program or service to upload to and manage your account
                    with Shimapan.</p>
                <p>For example, it can be used in a bash script to upload from the command line:</p>
                <pre>APIKEY=[Your API Key Here]<br/>URL=$(curl -s -F "apikey=$APIKEY" -F "file=@$1" https://shimapan.rocks/api/upload | grep url | awk '{print $2}')<br/>echo $URL | tr -d '[\\\,"\n]'</pre>
                <br/>
                <p>If your key is compromised, it can be used to upload and modify your account without your knowledge.
                    If it is lost or compromised, you can delete the key below, but be warned that this <em>cannot</em>
                    be undone.</p>
            </div>
            <div class="modal-footer">
                <button class="btn-del" ng-click="deleteKey(currKey)">Delete Key</button>
                <button class="btn-close" ng-click="hideKeyInfo()">Close</button>
            </div>
        </div>
    </div>
    <div class="modal" style="{{nModalShow?'display:block':'display:none'}}">
        <div class="modal-sandbox" ng-click="hideNewKey()"></div>
        <div class="modal-box">
            <div class="modal-header">
                <h1>Create a Key</h1>
                <div class="close-modal" ng-click="hideNewKey()"><i class="fa fa-times"></i></div>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic soluta saepe, atque, iure quidem
                    maiores non dolores, fuga eaque voluptatibus corporis accusantium quas. Eligendi velit eum fugiat
                    eius? Distinctio reiciendis sint error, repellat ut soluta doloremque, accusamus vitae placeat?</p>
                <p>Laboriosam voluptas, iure rem provident laborum culpa atque fugit inventore sit. Corrupti dolore
                    architecto inventore officia, odit totam voluptatem laboriosam tempore reiciendis, et neque,
                    consequuntur. Non, tenetur? Tempore reprehenderit tenetur nemo asperiores alias commodi assumenda
                    architecto minima numquam repellendus debitis nulla, rerum officia itaque, sunt nihil sequi quod
                    perspiciatis, animi quas voluptates velit aperiam voluptatem.</p>
                <br/>
                <button ng-click="hideNewKey()">Close!</button>
            </div>
        </div>
    </div>
</div>