shimapan/public/views/panel/keys.html

<div class="inner" ng-controller="KeyController" ng-init="init()">
    <div class="keys">
        <div class="key" ng-repeat="key in keys" ng-click="showKeyInfo(key)">
            <i class="fa fa-key"></i>
            <span>{{key.identifier}}</span>
        </div>
        <div class="key add-key" ng-hide="keys.length >= 5" ng-click="showNewKey()">
            <i class="fa fa-plus"></i>
            <span>Create</span>
        </div>
    </div>
    <div class="modal" ng-style="infoModalStyle">
        <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 Shrimpa.</p>
                <br/>
                <p>Download the <a href="" ng-click="downloadBash()">bash script</a> to upload files from the command line.</p>
                <br/>
                <p>Download the ShareX <a href="" ng-click="downloadSharex()">custom uploader</a> to upload files with hotkeys.</p>
                <br/>
                <p>Key Permissions:</p>
                <table>
                    <tr ng-repeat="(prefix, perms) in currKey.scope">
                        <th>{{prefix}}:</th>
                        <td ng-repeat="perm in perms">
                            <span ng-bind="perm.name"></span>
                        </td>
                    </tr>
                </table>
                <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" ng-style="newModalStyle">
        <div class="modal-sandbox" ng-click="hideNewKey()"></div>
        <div class="modal-box" id="createKey">
            <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>Identifier to describe the name or use of this key:</p>
                <input id="identifier" placeholder="Identifier" class="form-control" type="text" ng-model="newIdentifier"/>
                <br/>
                <p>Permissions granted to the key:</p>
                <table>
                    <tr ng-repeat="(prefix, perms) in scope">
                        <th>{{prefix}}:</th>
                        <td ng-repeat="perm in perms">
                            <input type="checkbox" title="{{perm.name}}" name="{{perm.name}}" ng-model="perm.isChecked" ng-change="updateNewScope(prefix, perm)"/>
                            <label for="{{perm.name}}" ng-bind="perm.name"></label>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button ng-click="createKey()">Create</button>
                <button ng-click="hideNewKey()">Cancel</button>
            </div>
        </div>
    </div>
</div>