From d0ad2b9b5eaef48cfb466421cb7333d2727cfdc5 Mon Sep 17 00:00:00 2001
From: binsky <timo@binsky.org>
Date: Fri, 21 Oct 2022 18:27:20 +0200
Subject: [PATCH] fix vaults overview style

Signed-off-by: binsky <timo@binsky.org>
---
 css/app.css                 |  2 +-
 js/templates.js             |  2 +-
 sass/vaults.scss            |  4 ++--
 templates/views/vaults.html | 29 +++++++++++------------------
 4 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/css/app.css b/css/app.css
index 6f5a9af8..fa9d7beb 100644
--- a/css/app.css
+++ b/css/app.css
@@ -417,7 +417,7 @@
 
 .vault_wrapper {
   margin: 0 auto auto auto;
-  max-width: 420px;
+  max-width: 450px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background-clip: padding-box;
diff --git a/js/templates.js b/js/templates.js
index 80806674..92d25a4e 100644
--- a/js/templates.js
+++ b/js/templates.js
@@ -144,5 +144,5 @@ angular.module('views/vault_req_deletion.html', []).run(['$templateCache', funct
 angular.module('views/vaults.html', []).run(['$templateCache', function($templateCache) {
   'use strict';
   $templateCache.put('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="template-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>');
+    '<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="template-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><input id="selectVaultAsDefault" class="checkbox" type="checkbox" ng-checked="default_vault" ng-click="toggleDefaultVault()"> <label for="selectVaultAsDefault">{{ \'vault.default\' | translate}}</label></div><div><input id="rememberVaultPassword" class="checkbox" type="checkbox" ng-checked="remember_vault_password" ng-click="toggleRememberPassword()"> <label for="rememberVaultPassword">{{ \'vault.auto.login\' | translate}}</label></div><div><input id="enableAutoLogoutTimer" class="checkbox" type="checkbox" ng-checked="auto_logout_timer" ng-click="toggleAutoLogout()"> <label for="enableAutoLogoutTimer">{{ \'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>');
 }]);
diff --git a/sass/vaults.scss b/sass/vaults.scss
index 25242c8a..1944f107 100644
--- a/sass/vaults.scss
+++ b/sass/vaults.scss
@@ -38,7 +38,7 @@
 .vault_wrapper{
   margin:0 auto auto auto;
 
-  max-width: 420px;
+  max-width: 450px;
   @include border-radius(5px);
   box-shadow: 0 1px 1px #777;
   background: #eee;
@@ -110,4 +110,4 @@
   .vault_wrapper{
     width: 90%;
   }
-}
\ No newline at end of file
+}
diff --git a/templates/views/vaults.html b/templates/views/vaults.html
index d1b0e5fb..a7c2221b 100644
--- a/templates/views/vaults.html
+++ b/templates/views/vaults.html
@@ -96,27 +96,20 @@
 			</div>
 			<div class="login_opts">
 				<div>
-					<label>
-						<input type="checkbox" ng-checked="default_vault"
-							   ng-click="toggleDefaultVault()">
-						{{ 'vault.default' | translate}}
-					</label>
+					<input id="selectVaultAsDefault" class="checkbox" type="checkbox"
+						   ng-checked="default_vault" ng-click="toggleDefaultVault()">
+					<label for="selectVaultAsDefault">{{ 'vault.default' | translate}}</label>
 				</div>
 				<div>
-					<label>
-						<input type="checkbox"
-							   ng-checked="remember_vault_password"
-							   ng-click="toggleRememberPassword()">
-						{{ 'vault.auto.login' | translate}}
-					</label>
+					<input id="rememberVaultPassword" class="checkbox" type="checkbox"
+						   ng-checked="remember_vault_password" ng-click="toggleRememberPassword()">
+					<label for="rememberVaultPassword">{{ 'vault.auto.login' | translate}}</label>
 				</div>
 				<div>
-					<label>
-						<input type="checkbox"
-							   ng-checked="auto_logout_timer"
-							   ng-click="toggleAutoLogout()">
-						{{ 'auto.logout' | translate}}
-					</label>
+					<input id="enableAutoLogoutTimer" class="checkbox" type="checkbox"
+						   ng-checked="auto_logout_timer" ng-click="toggleAutoLogout()">
+					<label for="enableAutoLogoutTimer">{{ '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>
@@ -141,4 +134,4 @@
 		</div>
 	</div>
 
-</div>
\ No newline at end of file
+</div>