mirror of
https://github.com/nextcloud/passman.git
synced 2024-11-10 17:27:40 +08:00
Style password meter, add last access time of vault
This commit is contained in:
parent
848e38672c
commit
926f09ec00
7 changed files with 121 additions and 38 deletions
|
@ -55,6 +55,7 @@ class VaultController extends ApiController {
|
|||
*/
|
||||
public function get($vault_id) {
|
||||
$credentials = $this->credentialService->getCredentialsByVaultId($vault_id, $this->userId);
|
||||
$this->vaultService->setLastAccess($vault_id);
|
||||
return new JSONResponse($credentials);
|
||||
}
|
||||
|
||||
|
|
|
@ -78,6 +78,16 @@
|
|||
}
|
||||
.match-sequence .sequence{
|
||||
float: left;
|
||||
width: 190px;
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.match-sequence .sequence table td:nth-child(2){
|
||||
padding-left: 4px;
|
||||
}
|
||||
.sequence .token{
|
||||
text-align: center;
|
||||
}
|
||||
.sequence code{
|
||||
border: 1px solid;
|
||||
padding: 3px;
|
||||
}
|
|
@ -3,7 +3,7 @@ angular.module('templates-main', ['views/partials/password-meter.html', 'views/s
|
|||
angular.module('views/partials/password-meter.html', []).run(['$templateCache', function($templateCache) {
|
||||
'use strict';
|
||||
$templateCache.put('views/partials/password-meter.html',
|
||||
'<div class="pass-meter {{masterClass}}" off-click="matchBreakdown = false;"><div class="{{colClass}} pass-meter-col {{first}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{second}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{third}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{fourth}}"><div class="indicator"></div></div><div class="details" ng-click="toggleScore()"><span ng-show="!scoreShown">Details</span> <span ng-show="scoreShown">Hide details</span></div><div class="pass-meter-message">{{message}}</div><div class="detail_box" ng-show="scoreShown"><div class="row"><div class="col">Password score:</div><div class="col">{{score.score}}</div></div><div><b>Cracking times</b></div><div class="row"><div class="col">100 / hour<br><small>Throttled online attack</small></div><div class="col">{{score.crack_times_display.online_throttling_100_per_hour}}</div></div><div class="row"><div class="col">10 / second<br><small>Unthrottled online attack</small></div><div class="col">{{score.crack_times_display.online_no_throttling_10_per_second}}</div></div><div class="row"><div class="col">10k / second<br><small>Offline attack, slow hash, many cores</small></div><div class="col">{{score.crack_times_display.offline_slow_hashing_1e4_per_second}}</div></div><div class="row"><div class="col">10B / second<br><small>offline attack, fast hash, many cores</small></div><div class="col">{{score.crack_times_display.offline_fast_hashing_1e10_per_second}}</div></div><div class="row"><div class="col">Match sequence:</div><div class="col"><span class="link" ng-click="toggleMatchBreakdown()">See match sequence</span></div></div></div></div><div class="match-sequence hidden"><div class="container" ng-style="{\'width\': score.sequence.length * 210 }"><div class="sequence" ng-repeat="sequence in score.sequence"><div><b>{{sequence.token}}</b></div><div>Pattern: {{sequence.pattern}}</div><div>Matched word: {{sequence.matched_word}}</div><div>Dictionary name: {{sequence.dictionary_name}}</div><div>Rank: {{sequence.rank}}</div><div>Reversed: {{sequence.reversed}}</div><div>Guesses: {{sequence.guesses}}</div><div>Base guesses: {{sequence.base_guesses}}</div><div>Uppercase variations: {{sequence.l33t_variations}}</div><div>l33t-variations: {{sequence.l33t_variations}}</div></div></div></div>');
|
||||
'<div class="pass-meter {{masterClass}}" off-click="matchBreakdown = false;"><div class="{{colClass}} pass-meter-col {{first}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{second}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{third}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{fourth}}"><div class="indicator"></div></div><div class="details" ng-click="toggleScore()"><span ng-show="!scoreShown">Details</span> <span ng-show="scoreShown">Hide details</span></div><div class="pass-meter-message">{{message}}</div><div class="detail_box" ng-show="scoreShown"><div class="row"><div class="col">Password score:</div><div class="col">{{score.score}}</div></div><div><b>Cracking times</b></div><div class="row"><div class="col">100 / hour<br><small>Throttled online attack</small></div><div class="col">{{score.crack_times_display.online_throttling_100_per_hour}}</div></div><div class="row"><div class="col">10 / second<br><small>Unthrottled online attack</small></div><div class="col">{{score.crack_times_display.online_no_throttling_10_per_second}}</div></div><div class="row"><div class="col">10k / second<br><small>Offline attack, slow hash, many cores</small></div><div class="col">{{score.crack_times_display.offline_slow_hashing_1e4_per_second}}</div></div><div class="row"><div class="col">10B / second<br><small>offline attack, fast hash, many cores</small></div><div class="col">{{score.crack_times_display.offline_fast_hashing_1e10_per_second}}</div></div><div class="row"><div class="col">Match sequence:</div><div class="col"><span class="link" ng-click="toggleMatchBreakdown()">See match sequence</span></div></div></div></div><div class="match-sequence hidden"><div class="container" ng-style="{\'width\': score.sequence.length * 210 }"><div class="sequence" ng-repeat="sequence in score.sequence"><table><tr><td colspan="2" class="token"><code>{{sequence.token}}</code></td></tr><tr ng-if="sequence.pattern"><td>Pattern</td><td>{{sequence.pattern}}</td></tr><tr ng-if="sequence.matched_word"><td>Matched word</td><td>{{sequence.matched_word}}</td></tr><tr ng-if="sequence.dictionary_name"><td>Dictionary name</td><td>{{sequence.dictionary_name}}</td></tr><tr ng-if="sequence.rank"><td>Rank</td><td>{{sequence.rank}}</td></tr><tr ng-if="sequence.reversed"><td>Reversed</td><td>{{sequence.reversed}}</td></tr><tr ng-if="sequence.guesses"><td>Guesses</td><td>{{sequence.guesses}}</td></tr><tr ng-if="sequence.base_guesses"><td>Base guesses</td><td>{{sequence.base_guesses}}</td></tr><tr ng-if="sequence.uppercase_variations"><td>Uppercase variations</td><td>{{sequence.uppercase_variations}}</td></tr><tr ng-if="sequence.l33t_variations"><td>l33t-variations</td><td>{{sequence.l33t_variations}}</td></tr></table></div></div></div>');
|
||||
}]);
|
||||
|
||||
angular.module('views/show_vault.html', []).run(['$templateCache', function($templateCache) {
|
||||
|
|
76
js/vendor/ng-password-meter/ng-password-meter.js
vendored
76
js/vendor/ng-password-meter/ng-password-meter.js
vendored
|
@ -1,4 +1,4 @@
|
|||
(function() {
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* global _ */
|
||||
|
@ -11,7 +11,7 @@
|
|||
* Password Manager
|
||||
*/
|
||||
angular.module('ngPasswordMeter', [])
|
||||
.directive('ngPasswordMeter', function() {
|
||||
.directive('ngPasswordMeter', ['$window', function ($window) {
|
||||
return {
|
||||
templateUrl: 'views/partials/password-meter.html',
|
||||
restrict: 'E',
|
||||
|
@ -20,40 +20,64 @@
|
|||
strength: '=?',
|
||||
score: '=?',
|
||||
},
|
||||
link: function(scope) {
|
||||
link: function (scope) {
|
||||
|
||||
scope.scoreShown = false;
|
||||
scope.matchBreakdown = false;
|
||||
scope.toggleScore = function(){
|
||||
scope.toggleScore = function () {
|
||||
scope.scoreShown = !scope.scoreShown;
|
||||
}
|
||||
scope.toggleMatchBreakdown = function(){
|
||||
//scope.matchBreakdown = !scope.matchBreakdown;
|
||||
var _dialog_width = ((180 * scope.score.sequence.length) < 720) ? 200 * scope.score.sequence.length : 720;
|
||||
jQuery('.match-sequence').dialog({
|
||||
width: _dialog_width,
|
||||
title: 'Password breakdown'
|
||||
scope.toggleMatchBreakdown = function () {
|
||||
var width = ($window.innerWidth > 420) ? $window.innerWidth * 0.85 : $window.innerWidth * 0.8;
|
||||
var ms_elem = jQuery('.match-sequence')
|
||||
ms_elem.dialog({
|
||||
title: 'Password breakdown',
|
||||
width: width,
|
||||
open: function () {
|
||||
var _totalWidth = 0;
|
||||
|
||||
jQuery('.match-sequence').find('.sequence').each(function (key, el) {
|
||||
_totalWidth += jQuery(el).width()+20;
|
||||
})
|
||||
console.log(_totalWidth, $window.innerWidth * 0.85)
|
||||
if (_totalWidth < $window.innerWidth * 0.85) {
|
||||
ms_elem.dialog("option", "width", _totalWidth);
|
||||
jQuery('.ui-dialog').position({
|
||||
my: "center",
|
||||
at: "center",
|
||||
of: window,
|
||||
collision: "fit",
|
||||
// Ensure the titlebar is always visible
|
||||
using: function (pos) {
|
||||
var topOffset = $(this).css(pos).offset().top;
|
||||
if (topOffset < 0) {
|
||||
$(this).css("top", pos.top - topOffset);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
jQuery('.match-sequence').find('.container').width(_totalWidth);
|
||||
}
|
||||
|
||||
})
|
||||
};
|
||||
|
||||
var measureStrength = function(p) {
|
||||
console.log();
|
||||
if(p){
|
||||
var measureStrength = function (p) {
|
||||
if (p) {
|
||||
var _score = zxcvbn(p)
|
||||
}
|
||||
console.log(_score.score);
|
||||
return _score;
|
||||
};
|
||||
|
||||
scope.colClass = '';
|
||||
scope.masterClass = '';
|
||||
|
||||
scope.$watch('password', function() {
|
||||
scope.first = '';
|
||||
scope.second = '';
|
||||
scope.third = '';
|
||||
scope.fourth = '';
|
||||
scope.message = '';
|
||||
scope.$watch('password', function () {
|
||||
scope.first = '';
|
||||
scope.second = '';
|
||||
scope.third = '';
|
||||
scope.fourth = '';
|
||||
scope.message = '';
|
||||
|
||||
if (!scope.password) {
|
||||
scope.masterClass = 'hidden';
|
||||
|
@ -66,30 +90,30 @@
|
|||
|
||||
if (scope.strength == 0) {
|
||||
scope.first = 'poor';
|
||||
scope.message = 'poor';
|
||||
scope.message = 'poor';
|
||||
} else if (scope.strength == 1) {
|
||||
scope.first = 'poor';
|
||||
scope.second = 'poor';
|
||||
scope.message = 'poor';
|
||||
scope.message = 'poor';
|
||||
} else if (scope.strength == 2) {
|
||||
scope.first = 'weak';
|
||||
scope.second = 'weak';
|
||||
scope.message = 'weak';
|
||||
scope.message = 'weak';
|
||||
} else if (scope.strength == 3) {
|
||||
scope.first = 'good';
|
||||
scope.second = 'good';
|
||||
scope.third = 'good';
|
||||
scope.message = 'good';
|
||||
scope.message = 'good';
|
||||
} else if (scope.strength == 4) {
|
||||
scope.first = 'strong';
|
||||
scope.second = 'strong';
|
||||
scope.third = 'strong';
|
||||
scope.fourth = 'strong';
|
||||
scope.message = 'strong';
|
||||
scope.message = 'strong';
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
};
|
||||
});
|
||||
}]);
|
||||
})();
|
|
@ -49,4 +49,10 @@ class VaultMapper extends Mapper {
|
|||
return parent::insert($vault);
|
||||
}
|
||||
|
||||
public function setLastAccess($vault_id){
|
||||
$vault = new Vault();
|
||||
$vault->setId($vault_id);
|
||||
$vault->setlastAccess(time());
|
||||
$this->update($vault);
|
||||
}
|
||||
}
|
|
@ -32,4 +32,8 @@ class VaultService {
|
|||
public function createVault($vault_name, $userId) {
|
||||
return $this->vaultMapper->create($vault_name, $userId);
|
||||
}
|
||||
|
||||
public function setLastAccess($vault_id){
|
||||
return $this->vaultMapper->setLastAccess($vault_id);
|
||||
}
|
||||
}
|
|
@ -76,16 +76,54 @@
|
|||
<div class="match-sequence hidden" >
|
||||
<div class="container" ng-style="{'width': score.sequence.length * 210 }">
|
||||
<div class="sequence" ng-repeat="sequence in score.sequence">
|
||||
<div><b>{{sequence.token}}</b></div>
|
||||
<div>Pattern: {{sequence.pattern}}</div>
|
||||
<div>Matched word: {{sequence.matched_word}}</div>
|
||||
<div>Dictionary name: {{sequence.dictionary_name}}</div>
|
||||
<div>Rank: {{sequence.rank}}</div>
|
||||
<div>Reversed: {{sequence.reversed}}</div>
|
||||
<div>Guesses: {{sequence.guesses}}</div>
|
||||
<div>Base guesses: {{sequence.base_guesses}}</div>
|
||||
<div>Uppercase variations: {{sequence.l33t_variations}}</div>
|
||||
<div>l33t-variations: {{sequence.l33t_variations}}</div>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2" class="token">
|
||||
<code>{{sequence.token}}</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.pattern">
|
||||
<td>Pattern</td>
|
||||
<td>{{sequence.pattern}}</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.matched_word">
|
||||
<td>Matched word</td>
|
||||
<td>{{sequence.matched_word}}</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.dictionary_name">
|
||||
<td>Dictionary name</td>
|
||||
<td>{{sequence.dictionary_name}}</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.rank">
|
||||
<td>Rank</td>
|
||||
<td>{{sequence.rank}}</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.reversed">
|
||||
<td>Reversed</td>
|
||||
<td>{{sequence.reversed}}</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.guesses">
|
||||
<td>Guesses</td>
|
||||
<td>{{sequence.guesses}}</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.base_guesses">
|
||||
<td>Base guesses</td>
|
||||
<td>{{sequence.base_guesses}}</td>
|
||||
</tr>
|
||||
<tr ng-if="sequence.uppercase_variations">
|
||||
<td>Uppercase variations</td>
|
||||
<td>{{sequence.uppercase_variations}}</td>
|
||||
</tr>
|
||||
|
||||
<tr ng-if="sequence.l33t_variations">
|
||||
<td>l33t-variations</td>
|
||||
<td>
|
||||
{{sequence.l33t_variations}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in a new issue