index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Authorized Applications</title>
    <link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="ext/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>
<body>
    <div class="container">
        <h1>Authorizated Applications</h1>
        <p class="lead">This page allows you to revoke permission for applications that have access to your data.</p>

        <div id="authorizationListTable">
        </div>

        <p class="text-info"><span class="label label-info">Info</span> <small>Removing permissions will require you to authorize the application again next time it wants to access your data.</small></p>
    </div> <!-- /container -->

    <script id="authorizationListTemplate" type="text/x-jsrender">
        <table class="table table-striped table-bordered">
            <thead>
                <tr><th>Application</th><th>Permissions</th><th>Actions</th></tr>
            </thead>
            <tbody>
            {{for authz}}
                <tr>
                    <td><span title="{{:description}}">{{:name}}</span></td>
                    <td>{{:scope}}</td>
                    <td><button class="btn btn-danger btn-small" data-client-name="{{:name}}" data-client-id="{{:id}}"><i class="icon-trash icon-white"></i> Delete</button></td>
                </tr>
            {{/for}}
            </tbody>
        </table>
    </script>

    <script src="ext/js/jquery.js"></script>
    <script src="ext/js/jsrender.js"></script>
    <script src="ext/js/jso.js"></script>
    <script src="config/config.js"></script>
    <script src="js/manage.js"></script>
</body>
</html>