mirror of
https://github.com/Foltik/Shimapan
synced 2025-04-15 13:45:07 -04:00
Finish keyInfo modal and API routes
This commit is contained in:
Jack
parent
daed89938e
commit
dc470fd131
GPG Key ID:
303F88F996E95541
@ -200,35 +200,140 @@ body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.modal {
|
||||
.key-name {
|
||||
color: #2a9fd6;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
line-height: 1.7em;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
border: 1px solid #666;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
background: #222;
|
||||
color: #2a9fd6;
|
||||
}
|
||||
|
||||
.modal,
|
||||
.modal-box {
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.modal-sandbox {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgb(0,0,0);
|
||||
background: rgba(0,0,0,.8);
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
margin: 100px auto;
|
||||
animation-name: modalbox;
|
||||
animation-duration: .3s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
border: 2px solid #2a9fd6;
|
||||
border-radius: 8px 8px 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 20px 40px;
|
||||
background: #000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
border: 2px solid #2a9fd6;
|
||||
border-top: none;
|
||||
background: #000;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border: 2px solid #2a9fd6;
|
||||
border-radius: 0 0 8px 8px;
|
||||
border-top: none;
|
||||
background: #000;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
text-align: right;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes modalbox {
|
||||
0% {
|
||||
top: -250px;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 20px;
|
||||
color: #d3d3d3;
|
||||
background: #000;
|
||||
border: 2px solid #2a9fd6;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: #fff;
|
||||
background-color: #2a9fd6;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-del {
|
||||
text-transform: uppercase;
|
||||
border: 2px solid #ff6666;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.btn-del:hover {
|
||||
background-color: #ff6666;
|
||||
}
|
||||
|
||||
em {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@ -7,4 +7,29 @@ angular.module('ApiCtrl', ['ApiSvc', 'AuthSvc']).controller('ApiController', ['$
|
||||
});
|
||||
console.log($scope.keys);
|
||||
};
|
||||
|
||||
$scope.hideNewKey = function() {
|
||||
$scope.nModalShow = false;
|
||||
};
|
||||
$scope.showNewKey = function() {
|
||||
$scope.nModalShow = true;
|
||||
};
|
||||
|
||||
$scope.hideKeyInfo = function() {
|
||||
$scope.kModalShow = false;
|
||||
};
|
||||
$scope.showKeyInfo = function(key) {
|
||||
$scope.kModalShow = true;
|
||||
$scope.currKey = key;
|
||||
};
|
||||
|
||||
$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 = {};
|
||||
});
|
||||
};
|
||||
}]);
|
||||
@ -19,4 +19,21 @@ angular.module('ApiSvc', []).service('ApiService', ['$http', '$window', function
|
||||
cb(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
this.deleteKey = function(key, cb) {
|
||||
$http({
|
||||
method: 'POST',
|
||||
url: '/api/keys/delete',
|
||||
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: key.key}
|
||||
}).then(function(res) {
|
||||
cb(res.data);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
@ -64,4 +64,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})
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
||||
@ -1,30 +1,59 @@
|
||||
<div class="inner" ng-controller="ApiController" ng-init="currKey={};showModal=false;getKeys()">
|
||||
<div class="inner" ng-controller="ApiController" ng-init="getKeys()">
|
||||
<div class="keys">
|
||||
<div class="key" ng-repeat="key in 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">
|
||||
<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" ng-show="showModal==true">
|
||||
<div class="modal-header">
|
||||
<button class="close" type="button"></button>
|
||||
<h4 class="modal-title">API Key</h4>
|
||||
<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: <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 class="modal-body modal-key">
|
||||
<p>API Key:</p>
|
||||
<pre class="code">{{currKey.code}}</pre>
|
||||
<p>Use this key with your preferred method of utilizing the Shimapan API.</p>
|
||||
<p>Example with cURL:</p>
|
||||
<pre class="code"></pre>
|
||||
<div id="qr"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-delete" type="button"></button>
|
||||
<button class="btn-back" type="button"></button>
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user