javier/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bg-card will be added to the class and password/username validation

Browse Source 
bg-card should not be an id, ids should be unique in their use.
This commit is contained in:
Ludy87
2024-05-19 12:44:54 +02:00
parent 7c0fd02126
commit f2eb5dd7d3
64 changed files with 140 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/main/resources/templates/account.html
View File

@@ -21,6 +21,7 @@
<span th:text="#{${messageType}}">Default message if not found</span>
</div>
</th:block>
<!-- At the top of the user settings -->
<h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
<th:block th:if="${error}">
@@ -28,13 +29,15 @@
<span th:text="${error}">Error Message</span>
</div>
</th:block>
<!-- Change Username Form -->
<th:block th:if="${!oAuth2Login}">
<h4 th:text="#{account.changeUsername}">Change Username?</h4>
<form id="bg-card" class="mt-4 mb-4" action="api/v1/user/change-username" method="post">
<form id="formsavechangeusername" class="bg-card mt-4 mb-4" action="api/v1/user/change-username" method="post">
<div class="mb-3">
<label for="newUsername" th:text="#{account.newUsername}">Change Username</label>
<input type="text" class="form-control" name="newUsername" id="newUsername" th:placeholder="#{account.newUsername}">
<span id="usernameError" style="display: none;" th:text="#{invalidUsernameMessage}">Invalid username!</span>
</div>
<div class="mb-3">
<label for="currentPassword" th:text="#{password}">Password</label>
@@ -49,10 +52,10 @@
<!-- Change Password Form -->
<th:block th:if="${!oAuth2Login}">
<h4 th:text="#{account.changePassword}">Change Password?</h4>
<form id="bg-card" class="mt-4 mb-4" action="api/v1/user/change-password" method="post">
<form id="formsavechangepassword" class="bg-card mt-4 mb-4" action="api/v1/user/change-password" method="post">
<div class="mb-3">
<label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
<input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword" th:placeholder="#{account.oldPassword}">
<input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{account.oldPassword}">
</div>
<div class="mb-3">
<label for="newPassword" th:text="#{account.newPassword}">New Password</label>
@@ -95,6 +98,76 @@
</div>
</div>
</div>
<script th:inline="javascript">
jQuery.validator.addMethod("usernamePattern", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9@._+-]*[a-zA-Z0-9]$|^(?=.{1,64}@)[A-Za-z0-9]+(\.[A-Za-z0-9_+.-]+)*@[^-][A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*(\.[A-Za-z]{2,})$/.test(value);
}, /*[[#{invalidUsernameMessage}]]*/ "Invalid username format");
$(document).ready(function() {
$('#formsavechangepassword').validate({
rules: {
currentPassword: {
required: true
},
newPassword: {
required: true
},
confirmNewPassword: {
required: true
}
}
});
$('#formsavechangeusername').validate({
rules: {
newUsername: {
required: true,
usernamePattern: true
},
currentPassword: {
required: true
}
},
messages: {
newUsername: {
usernamePattern: /*[[#{invalidUsernameMessage}]]*/ "Invalid username format"
},
},
errorPlacement: function(error, element) {
if (element.attr("name") === "newUsername") {
$("#usernameError").text(error.text()).show();
} else {
error.insertAfter(element);
}
},
success: function(label, element) {
if ($(element).attr("name") === "newUsername") {
$("#usernameError").hide();
}
}
});
$('#formsavechangepassword').on('submit', function(event) {
var newPassword = $('#newPassword').val();
var confirmNewPassword = $('#confirmNewPassword').val();
if (newPassword !== confirmNewPassword) {
alert('New Password and Confirm New Password must match.');
event.preventDefault();
}
});
$('#newUsername').on('input', function() {
var usernameInput = $(this);
var isValid = usernameInput[0].checkValidity();
var errorSpan = $('#usernameError');
if (isValid) {
usernameInput.removeClass('invalid').addClass('valid');
errorSpan.hide();
} else {
usernameInput.removeClass('valid').addClass('invalid');
errorSpan.show();
}
});
});
</script>
<script>
function copyToClipboard() {
@@ -180,7 +253,7 @@
</script>
<h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
<div id="bg-card" class="container mt-4">
<div class="bg-card container mt-4">
<h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
<table id="settingsTable" class="table table-bordered table-sm table-striped">
<thead>