Merge pull request #48 from wwWallet/update/login-creds

Fix Pre-Populated Username/Password
wwWallet · Jun 17, 2024 · d3e5d0c · d3e5d0c
2 parents b4e6807 + 2386fd3
commit d3e5d0c
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 2 deletions.
diff --git a/public/styles/login.css b/public/styles/login.css
@@ -49,4 +49,54 @@
 	border: none;
 	outline: none;
 	font-size: 20px;
+}
+
+.or-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 25px;
+  margin-bottom: 5px;
+}
+
+.or-container .line {
+  flex-grow: 1;
+  height: 1px;
+  background-color: #ccc;
+  margin: 0 10px;
+}
+
+.or-container span {
+  padding: 0 5px;
+  background: #fff;
+  position: relative;
+  z-index: 1;
+}
+
+.login-select-flex{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 10px;
+}
+
+.select2-container {
+	border-radius: 5px;
+	width: 150px !important;
+	text-align: left;
+	font-size: 14px;
+}
+
+button[disabled] {
+	background-color: #adadad;  
+	cursor: not-allowed;
+}
+
+.select2-container .select2-selection--single{
+	height: 35px!important;
+	padding: 3px 0px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+	height: 35px!important;
 }
diff --git a/views/issuer/login.pug b/views/issuer/login.pug
@@ -11,7 +11,7 @@ block layout-content
 						input#csrf-token(type="hidden" name="csrf-token" value="")
 
 						.input-wrap.item
-							input.input-field#username(type='text' name='username' value="user" placeholder='Username')
+							input.input-field#username(type='text' name='username' value="user1" placeholder='Username')
 						.input-wrap.item
 							input.input-field#password(type='password' name='password' value="secret" placeholder='Password')
 
@@ -24,6 +24,54 @@ block layout-content
 						.login-flex
 							button.Btn.Large
 								| #{locale.login.btnText}
+
+						.or-container
+							.line
+							span OR
+							.line
+
+						// Dropdown list of credentials
+						.login-flex
+							.login-select-flex
+								.select-container(style="flex-grow: 1;")
+									select#credential-list(style="width: 100%")
+										option(value="") Select credentials
+										option(value='{"username": "user1", "password": "secret"}') John Doe
+										option(value='{"username": "user2", "password": "secret"}') Jane Duffy
+								button.Btn.Small#use-credential(disabled style="flex-shrink: 0;")
+									span Login
+
 	link(rel="stylesheet" href="/styles/login.css")
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
 	script(src="/js/alert.js")
-	script(src="/js/login.js")
+	script(src="/js/login.js")
+	script.
+		$(document).ready(function() {
+			$('#credential-list').select2({
+				placeholder: "Select credentials",
+				allowClear: true,
+				minimumResultsForSearch: 0
+			}).on('change', function() {
+				var selected = $(this).val();
+				if (selected) {
+					$('#use-credential').prop('disabled', false);
+				} else {
+					$('#use-credential').prop('disabled', true);
+				}
+			});
+
+			$('#use-credential').prop('disabled', true);
+
+			document.getElementById('use-credential').addEventListener('click', function(event) {
+				event.preventDefault();
+				var selectedCredential = document.getElementById('credential-list').value;
+				if (selectedCredential) {
+					var credentials = JSON.parse(selectedCredential);
+					document.getElementById('username').value = credentials.username;
+					document.getElementById('password').value = credentials.password;
+					document.forms['login'].submit();
+				}
+			});
+		});