passman/templates/views/vaults.html

<div class="vault_wrapper">
	<div class="vaults"
		 ng-if="!list_selected_vault && !creating_vault">
		<div class="ui-select-container ui-select-bootstrap vaultlist">
			<ul>
				<li ng-click="newVault()">+ Create a new vault</li>
				<li ng-repeat="vault in vaults"
					ng-class="{'selected': vault == list_selected_vault }"
					ng-click="selectVault(vault)">
					<div>
						<span class="ui-select-choices-row-inner">
							<div class="ng-binding ng-scope">{{vault.name}} <span class="pull-right" style="color: #ce3702;" ng-show="vault.delete_request_pending">{{ 'delete.request.pending' | translate}}</span></div>
							<small class="ng-binding ng-scope">

								{{ 'created' | translate}}: {{vault.created * 1000 | date:'dd-MM-yyyy @ HH:mm:ss'}}
								|
								{{ 'last.access' | translate}}:
								<span ng-if="vault.last_access > 0">{{vault.last_access * 1000 | date:'dd-MM-yyyy @ HH:mm:ss'}}</span>
								<span ng-if="vault.last_access === 0">{{'never' | translate}}</span>
							</small>
						</span>
					</div>
				</li>
				<li ng-if="vaults.length === 0">{{ 'no.vaults' | translate}}
				</li>
			</ul>

		</div>
	</div>

	<div ng-if="creating_vault">
		<div class="login_form" ng-init="vault_name = ''; vault_key=''; ">
			{{'new.vault.name' | translate}}
			<div>
				<input type="text" ng-model="vault_name" required>
			</div>
			<div>
				{{ 'new.vault.pass' | translate}}
				<input type="password" ng-model="vault_key" required>
				<ng-password-meter password="vault_key" score="vault_key_score"></ng-password-meter>
			</div>
			<div>
				{{ 'new.vault.passr' | translate}}
				<input type="password" ng-model="vault_key2" required>
			</div>
			<div ng-show="error || vault_key_score.score < minimal_value_key_strength" class="error">
				<ul>
					<li ng-show="error">{{error}}</li>
					<li ng-show="vault_key_score.score < minimal_value_key_strength">{{'min.vault.key.strength' | translate:required_score}}</li>
				</ul>
			</div>
			<div>
				<small> {{'new.vault.sharing_key_notice' | translate}}
				</small>
			</div>
			<div class="button_wrapper">
				<button class="button button-geen" ng-if="!creating_keys" click-disable
					 ng-click="createVault(vault_name, vault_key, vault_key2)" ng-disabled="vault_key_score.score < minimal_value_key_strength || vault_key !== vault_key2 || vault_key === ''">
					{{ 'new.vault.create' | translate }}
				</button>
				<div class="button" ng-if="creating_keys" >
					<span>
						<i class="fa fa-spinner fa-spin"></i>
						{{creating_keys}}
					</span>
				</div>
				<div class="button button-red" ng-click="clearState()">
					{{ 'cancel' | translate}}
				</div>
				<div class="hidden">
					{{sharing_keys}}
				</div>
			</div>
		</div>
	</div>

	<div ng-if="list_selected_vault != false">
		<div class="vaultlist">
			<ul>
				<li ng-click="clearState()">{{ 'go.back.vaults' | translate }}</li>
			</ul>
		</div>
		<div class="login_form">
			<div ng-show="error" class="error">
				<ul>
					<li>{{error}}</li>
				</ul>
			</div>
			{{ 'input.vault.password' | translate}} {{list_selected_vault.name}}

			<div class="pw-input">
				<input type="password" ng-model="vault_key" ng-enter="loginToVault(list_selected_vault, vault_key)">
				<small class="last_access">{{'last.access' | translate}}:
					<span ng-if="list_selected_vault.last_access > 0">{{list_selected_vault.last_access * 1000 | date:'dd-MM-yyyy @ HH:mm:ss'}}</span>
					<span ng-if="list_selected_vault.last_access === 0">Never</span>
				</small>
			</div>
			<div class="login_opts">
				<div>
					<label>
						<input type="checkbox" ng-checked="default_vault"
							   ng-click="toggleDefaultVault()">
						{{ 'vault.default' | translate}}
					</label>
				</div>
				<div>
					<label>
						<input type="checkbox"
							   ng-checked="remember_vault_password"
							   ng-click="toggleRememberPassword()">
						{{ 'vault.auto.login' | translate}}
					</label>
				</div>
				<div>
					<label>
						<input type="checkbox"
							   ng-checked="auto_logout_timer"
							   ng-click="toggleAutoLogout()">
						{{ 'auto.logout' | translate}}
					</label>
					<select ng-model="logout_timer" ng-change="selectLogoutTimer(logout_timer)">
						<option value="0">Never</option>
						<option value="30">30 minutes</option>
						<option value="60">60 minutes</option>
						<option value="90">90 minutes</option>
						<option value="180">3 hour</option>
						<option value="480">8 hour</option>
					</select>
				</div>
			</div>

			<div class="alert alert-danger" ng-show="vault_tries[list_selected_vault.guid].timeout !== 0" translate="vault.locked" translate-value-tries="{{ vault_tries[list_selected_vault.guid].tries }}" translate-value-time="{{ vault_tries[list_selected_vault.guid].timeout  | toHHMMSS }}"></div>
			<button class="button button-geen"
				 ng-click="loginToVault(list_selected_vault, vault_key)" ng-disabled="vault_tries[list_selected_vault.guid].timeout !== 0">
				{{ 'vault.decrypt' | translate}}
			</button>
			<span ng-click="forgottenPassword = true;" style="margin-top: 10px; padding: 6px 12px;" class="link pull-right" ng-show="!forgottenPassword">Forgot password?</span>
			<button ng-show="forgottenPassword" class="pull-right button button-red" ng-click="requestDeletion(list_selected_vault)">
				<span ng-show="list_selected_vault.delete_request_pending">{{ 'cancel.request.deletion' | translate }}</span>
				<span ng-show="!list_selected_vault.delete_request_pending">{{ 'request.deletion' | translate }}</span>
			</button>
		</div>
	</div>

</div>