Finish key creation/deletion

app/public/css/panel.css

@@ -249,12 +249,16 @@ pre {
     position: relative;
     width: 80%;
     max-width: 700px;
-    margin: 100px auto;
+    margin: 60px auto;
     animation-name: modalbox;
     animation-duration: .3s;
     animation-timing-function: ease;
 }
 
+#createKey {
+    max-width: 920px;
+}
+
 .modal-header {
     border: 2px solid #2a9fd6;
     border-radius: 8px 8px 0 0;
@@ -337,3 +341,32 @@ em {
     font-weight: bold;
 }
 
+#identifier {
+    font-size: 14px;
+    background: #222;
+    color: #d3d3d3;
+    border: 1px solid #666;
+    border-radius: 4px;
+    padding: 10px;
+    margin: 10px 0;
+}
+
+th {
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 10px;
+}
+
+td {
+    padding: 10px;
+}
+
+td input {
+    vertical-align: middle;
+}
+
+td label {
+    margin-bottom: 2px;
+    padding-left: 3px;
+}
+

app/public/panel/controllers/ApiCtrl.js

@@ -1,35 +1,78 @@
 var angular = require('angular');
 
-angular.module('ApiCtrl', ['ApiSvc', 'AuthSvc']).controller('ApiController', ['$scope', 'ApiService', 'AuthService', function($scope, ApiService, AuthService) {
-    $scope.getKeys = function() {
-        ApiService.getAll(function(keys) {
-            $scope.keys = keys;
-        });
-        console.log($scope.keys);
+angular.module('ApiCtrl', ['ApiSvc', 'AuthSvc']).controller('ApiController', ['$scope', 'ApiService', 'AuthService', function ($scope, ApiService, AuthService) {
+    function splitScope(scope) {
+        var res = {};
+        for (var i in scope) {
+            var perm = scope[i];
+            var prefix = perm.substr(0, perm.indexOf('.'));
+            var postfix = perm.substr(perm.indexOf('.') + 1);
+            if (!res[prefix]) res[prefix] = [];
+            res[prefix].push({name: postfix});
+        }
+        return res;
+    }
+
+    $scope.checkCkPerm = function(prefix, perm) {
+        var index = $scope.scopeObj[prefix].indexOf(perm);
+        if ($scope.scopeObj[prefix][index].isChecked) {
+            $scope.ckScope.push(prefix + '.' + perm.name);
+        } else {
+            var index = $scope.ckScope.indexOf(prefix + '.' + perm.name);
+            $scope.ckScope.splice(index, 1);
+        }
     };
 
-    $scope.hideNewKey = function() {
+    $scope.parseScope = function () {
+        AuthService.currentUser(function (res) {
+            $scope.scopeObj = splitScope(res.scope);
+            $scope.ckScope = [];
+        })
+    };
+
+    $scope.getKeys = function () {
+        ApiService.getAll(function (keys) {
+            $scope.keys = keys;
+        });
+    };
+
+    $scope.hideNewKey = function () {
         $scope.nModalShow = false;
     };
-    $scope.showNewKey = function() {
+    $scope.showNewKey = function () {
         $scope.nModalShow = true;
     };
 
-    $scope.hideKeyInfo = function() {
+    $scope.hideKeyInfo = function () {
         $scope.kModalShow = false;
     };
-    $scope.showKeyInfo = function(key) {
+    $scope.showKeyInfo = function (key) {
         $scope.kModalShow = true;
         $scope.currKey = key;
+        $scope.currKey.scopeObj = splitScope($scope.currKey.scope);
     };
 
-    $scope.deleteKey = function(key) {
-        ApiService.deleteKey(key, function() {
+    $scope.deleteKey = function (key) {
+        ApiService.deleteKey(key, function () {
             var index = $scope.keys.indexOf(key);
-            console.log('removing index' + index);
             $scope.keys.splice(index, 1);
             $scope.hideKeyInfo();
             $scope.currKey = {};
         });
     };
+
+    $scope.createKey = function () {
+        if ($scope.ckScope.length === 0 || !$scope.ckIdentifier)
+            return;
+
+        ApiService.createKey({
+            identifier: $scope.ckIdentifier,
+            scope: JSON.stringify($scope.ckScope)
+        }, function (res) {
+            if (res.key) {
+                $scope.hideNewKey();
+                $scope.getKeys();
+            }
+        });
+    }
 }]);

app/public/services/ApiSvc.js

@@ -20,20 +20,37 @@ angular.module('ApiSvc', []).service('ApiService', ['$http', '$window', function
         });
     };
 
-    this.deleteKey = function(key, cb) {
+    this.deleteKey = function (key, cb) {
         $http({
             method: 'POST',
             url: '/api/keys/delete',
             headers: {'Content-Type': 'application/x-www-form-urlencoded'},
-            transformRequest: function(obj) {
+            transformRequest: function (obj) {
                 var str = [];
                 for (var p in obj)
                     str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                 return str.join("&");
             },
             data: {key: key.key}
+        }).then(function (res) {
+            cb(res.data);
+        });
+    };
+
+    this.createKey = function (key, cb) {
+        $http({
+            method: 'POST',
+            url: '/api/keys/create',
+            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+            transformRequest: function (obj) {
+                var str = [];
+                for (var p in obj)
+                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+                return str.join("&");
+            },
+            data: key
         }).then(function(res) {
             cb(res.data);
         });
-    }
+    };
 }]);

app/routes/keys.js

@@ -65,9 +65,10 @@ router.get('/get', function (req, res, next) {
 });
 
 router.post('/delete', function(req, res, next) {
-    console.log('Tried to delete ' + req.body.key);
-    res.status(200).json({'message': 'Successfully deleted.'});
-    //Key.deleteOne({key: req.body.key})
+    Key.deleteOne({key: req.body.key}, function(err) {
+        if (err) next(err);
+        else res.status(200).json({'message': 'Successfully deleted.'});
+    });
 });
 
 module.exports = router;

public/views/panel/api.html

@@ -1,4 +1,4 @@
-<div class="inner" ng-controller="ApiController" ng-init="getKeys()">
+<div class="inner" ng-controller="ApiController" ng-init="getKeys();parseScope()">
     <div class="keys">
         <div class="key" ng-repeat="key in keys" ng-click="$parent.showKeyInfo(key)">
             <i class="fa fa-key"></i>
@@ -25,6 +25,16 @@
                 <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>Key Permissions:</p>
+                <table>
+                    <tr ng-repeat="(prefix, perms) in currKey.scopeObj">
+                        <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>
@@ -37,22 +47,29 @@
     </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-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>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>
+                <p>Identifier to describe the purpose/use of this key:</p>
+                <input id="identifier" placeholder="Identifier" class="form-control" type="text" ng-model="ckIdentifier"/>
                 <br/>
-                <button ng-click="hideNewKey()">Close!</button>
+                <p>Permissions the key should have:</p>
+                <table>
+                    <tr ng-repeat="(prefix, perms) in scopeObj">
+                        <th>{{prefix}}:</th>
+                        <td ng-repeat="perm in perms">
+                            <input type="checkbox" name="{{perm.name}}" ng-model="perm.isChecked" ng-change="checkCkPerm(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>