added show password button, updated configurator, fixed login page width.

This commit is contained in:
DESKTOP-T0O5CDB\DESK-555BD
2024-10-31 09:41:05 -06:00
parent 986a8420f8
commit 22eb38709a
11 changed files with 91 additions and 19 deletions

View File

@@ -17,8 +17,13 @@
<input type="text" id="inputUsername" class="form-control" placeholder="@translator.Translate(userLanguage, "Account Username")" value="@Model.UserName">
<label for="inputEmail">@translator.Translate(userLanguage, "Email Address")</label>
<input type="text" id="inputEmail" class="form-control" placeholder="@translator.Translate(userLanguage, "Email Address")" value="@Model.EmailAddress">
<label for="inputPassword">@translator.Translate(userLanguage, "New Password")</label>
<input type="password" id="inputPassword" class="form-control" placeholder="@translator.Translate(userLanguage, "New Password")" value="">
<label for="inputPassword">@translator.Translate(userLanguage, "New Password")</label>
<div class="input-group">
<input type="password" id="inputPassword" class="form-control" placeholder="@translator.Translate(userLanguage, "New Password")" value="">
<div class="input-group-text">
<button type="button" class="btn btn-sm text-secondary password-visible-button" onclick="togglePasswordVisibility(this)"><i class="bi bi-eye"></i></button>
</div>
</div>
<label for="inputToken">@translator.Translate(userLanguage, "Token")</label>
<input type="text" id="inputToken" class="form-control" placeholder="@translator.Translate(userLanguage, "Token")" value="">
<div class="row">

View File

@@ -16,7 +16,12 @@
<label for="inputUsername">@translator.Translate(userLanguage, "Username")</label>
<input type="text" id="inputUsername" class="form-control" placeholder="@translator.Translate(userLanguage, "Account Username")" value="@Model.UserName">
<label for="inputPassword">@translator.Translate(userLanguage, "Password")</label>
<input type="password" id="inputPassword" class="form-control" placeholder="@translator.Translate(userLanguage, "Password")" value="">
<div class="input-group">
<input type="password" id="inputPassword" class="form-control" placeholder="@translator.Translate(userLanguage, "Password")" value="">
<div class="input-group-text">
<button type="button" class="btn btn-sm text-secondary password-visible-button" onclick="togglePasswordVisibility(this)"><i class="bi bi-eye"></i></button>
</div>
</div>
</div>
</form>
</div>

View File

@@ -12,8 +12,8 @@
<script src="~/js/login.js?v=@StaticHelper.VersionNumber"></script>
}
<div class="container d-flex align-items-center justify-content-center" style="height:100vh">
<div class="row">
<div class="col-12">
<div>
<div style="max-width:204px;">
<img src="@logoUrl" />
<div class="form-group">
<label for="inputUserName">@translator.Translate(userLanguage, "Username")</label>

View File

@@ -15,16 +15,21 @@
<script src="~/js/login.js?v=@StaticHelper.VersionNumber"></script>
}
<div class="container d-flex align-items-center justify-content-center" style="height:100vh">
<div class="row">
<div class="col-12">
<div>
<div style="max-width:204px;">
<img src="@logoUrl" />
<div class="form-group">
<label for="inputUserName">@translator.Translate(userLanguage, "Username")</label>
<input type="text" id="inputUserName" class="form-control">
</div>
<div class="form-group">
<label for="inputUserPassword">@translator.Translate(userLanguage, "Password")</label>
<input type="password" id="inputUserPassword" onkeyup="handlePasswordKeyPress(event)" class="form-control">
<label for="inputUserPassword">@translator.Translate(userLanguage, "Password")</label>
<div class="input-group">
<input type="password" id="inputUserPassword" onkeyup="handlePasswordKeyPress(event)" class="form-control">
<div class="input-group-text">
<button type="button" class="btn btn-sm text-secondary password-visible-button" onclick="togglePasswordVisibility(this)"><i class="bi bi-eye"></i></button>
</div>
</div>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="inputPersistent">

View File

@@ -13,8 +13,8 @@
<script src="~/js/login.js?v=@StaticHelper.VersionNumber"></script>
}
<div class="container d-flex align-items-center justify-content-center" style="height:100vh">
<div class="row">
<div class="col-12">
<div>
<div style="max-width:204px;">
<img src="@logoUrl" />
<div class="form-group">
<label for="inputToken">@translator.Translate(userLanguage, "Token")</label>

View File

@@ -12,8 +12,8 @@
<script src="~/js/login.js?v=@StaticHelper.VersionNumber"></script>
}
<div class="container d-flex align-items-center justify-content-center" style="height:100vh">
<div class="row">
<div class="col-12">
<div>
<div style="max-width:204px;">
<img src="@logoUrl" />
<div class="form-group">
<label for="inputToken">@translator.Translate(userLanguage, "Token")</label>
@@ -29,7 +29,12 @@
</div>
<div class="form-group">
<label for="inputUserPassword">@translator.Translate(userLanguage, "Password")</label>
<input type="password" id="inputUserPassword" class="form-control">
<div class="input-group">
<input type="password" id="inputUserPassword" class="form-control">
<div class="input-group-text">
<button type="button" class="btn btn-sm text-secondary password-visible-button" onclick="togglePasswordVisibility(this)"><i class="bi bi-eye"></i></button>
</div>
</div>
</div>
<div class="d-grid">
<button type="button" class="btn btn-warning mt-2" onclick="performRegistration()"><i class="bi bi-box-arrow-in-right me-2"></i>@translator.Translate(userLanguage, "Register")</button>

View File

@@ -12,8 +12,8 @@
<script src="~/js/login.js?v=@StaticHelper.VersionNumber"></script>
}
<div class="container d-flex align-items-center justify-content-center" style="height:100vh">
<div class="row">
<div class="col-12">
<div>
<div style="max-width:204px;">
<img src="@logoUrl" />
<div class="form-group">
<label for="inputToken">@translator.Translate(userLanguage, "Token")</label>
@@ -25,7 +25,12 @@
</div>
<div class="form-group">
<label for="inputUserPassword">@translator.Translate(userLanguage, "New Password")</label>
<input type="password" id="inputUserPassword" class="form-control">
<div class="input-group">
<input type="password" id="inputUserPassword" class="form-control">
<div class="input-group-text">
<button type="button" class="btn btn-sm text-secondary password-visible-button" onclick="togglePasswordVisibility(this)"><i class="bi bi-eye"></i></button>
</div>
</div>
</div>
<div class="d-grid">
<button type="button" class="btn btn-warning mt-2" onclick="performPasswordReset()"><i class="bi bi-box-arrow-in-right me-2"></i>@translator.Translate(userLanguage, "Reset Password")</button>

View File

@@ -11,6 +11,14 @@
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
crossorigin="anonymous"></script>
<style>
.password-visible-button {
padding: 0rem;
}
::-ms-reveal {
display: none;
}
</style>
</head>
<body>
<div class="container d-flex align-items-center justify-content-center" style="height:100vh">
@@ -76,7 +84,12 @@
</div>
<div class="form-group">
<label for="inputSmtpPassword">Password</label>
<input type="password" id="inputSmtpPassword" class="form-control">
<div class="input-group">
<input type="password" id="inputSmtpPassword" class="form-control">
<div class="input-group-text">
<button type="button" class="btn btn-sm text-secondary password-visible-button" onclick="togglePasswordVisibility(this)"><i class="bi bi-eye"></i></button>
</div>
</div>
<small class="text-body-secondary">Password for Authentication</small>
</div>
</div>
@@ -395,6 +408,19 @@ function copyToClipboard(){
$(".btn-copy").text("Copied");
setTimeout(() => {$(".btn-copy").text("Copy");}, 500)
}
function togglePasswordVisibility(elem) {
var passwordField = $(elem).parent().siblings("input");
var passwordButton = $(elem).find('.bi');
if (passwordField.attr("type") == "password") {
passwordField.attr("type", "text");
passwordButton.removeClass('bi-eye');
passwordButton.addClass('bi-eye-slash');
} else {
passwordField.attr("type", "password");
passwordButton.removeClass('bi-eye-slash');
passwordButton.addClass('bi-eye');
}
}
function setLocaleInput(){
var browserLocale = navigator.language;
$("#inputLocale").val(browserLocale.replace('-','_'));

View File

@@ -461,4 +461,12 @@ html[data-bs-theme="light"] .api-method:hover {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
.password-visible-button {
padding: 0rem;
}
::-ms-reveal {
display: none;
}

View File

@@ -1244,4 +1244,17 @@ function handleSwalEnter(e) {
if (e.which == 13) {
Swal.clickConfirm();
}
}
function togglePasswordVisibility(elem) {
var passwordField = $(elem).parent().siblings("input");
var passwordButton = $(elem).find('.bi');
if (passwordField.attr("type") == "password") {
passwordField.attr("type", "text");
passwordButton.removeClass('bi-eye');
passwordButton.addClass('bi-eye-slash');
} else {
passwordField.attr("type", "password");
passwordButton.removeClass('bi-eye-slash');
passwordButton.addClass('bi-eye');
}
}

View File

@@ -618,7 +618,7 @@ function getLastOdometerReadingAndIncrement(odometerFieldName) {
Swal.fire({
title: 'Increment Last Reported Odometer Reading',
html: `
<input type="text" id="inputOdometerIncrement" class="swal2-input" placeholder="Increment" onkeydown="handleSwalEnter(event)">
<input type="text" inputmode="decimal" id="inputOdometerIncrement" class="swal2-input" placeholder="Increment" onkeydown="handleSwalEnter(event)">
`,
confirmButtonText: 'Add',
focusConfirm: false,