passman/templates/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-xs-6">
				Password score:
			</div>
			<div class="col-xs-6">
				{{score.score}}
			</div>
		</div>
		<div><b>Cracking times</b></div>
		<div class="row">
			<div class="col-xs-6">
				100 / hour<br/>
				<small> Throttled online attack</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.online_throttling_100_per_hour}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				10 / second<br/>
				<small>Unthrottled online attack</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.online_no_throttling_10_per_second}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				10k / second<br/>
				<small>Offline attack, slow hash, many cores</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.offline_slow_hashing_1e4_per_second}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				10B / second<br/>
				<small>offline attack, fast hash, many cores</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.offline_fast_hashing_1e10_per_second}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				Match sequence:
			</div>
			<div class="col-xs-6">
				<span class="link" ng-click="toggleMatchBreakdown()">See match sequence</span>
			</div>
		</div>
	</div>
</div>

<div class="match-sequence">
	<div class="sequence_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>