Style password meter, add last access time of vault

This commit is contained in:
brantje 2016-09-12 18:25:16 +02:00
parent 848e38672c
commit 926f09ec00
7 changed files with 121 additions and 38 deletions

View file

@ -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);
}

View file

@ -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;
}

View file

@ -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) {

View file

@ -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';
}
});
},
};
});
}]);
})();

View file

@ -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);
}
}

View file

@ -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);
}
}

View file

@ -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>