bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add indication on signup page for at least one uppercase letter requirement

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-08-18 13:46:01 +07:00
parent d64a4a587e
commit 2c4811eaac
3 changed files with 52 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/validatePassword.js
View File

@ -1,5 +1,7 @@
var isMatch = false
var isValid = false
var isMatch = false;
var isValid = false;
var hasUppercase = false;
function validatePasswords() {
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
@ -7,10 +9,14 @@ function validatePasswords() {
var matchBadPath = document.getElementById('matchBadPath');
var lengthGoodPath = document.getElementById('lengthGoodPath');
var lengthBadPath = document.getElementById('lengthBadPath');
var uppercaseGoodPath = document.getElementById('uppercaseGoodPath');
var uppercaseBadPath = document.getElementById('uppercaseBadPath');
var matchSvgContainer = document.getElementById('matchSvgContainer');
var lengthSvgContainer = document.getElementById('lengthSvgContainer');
var uppercaseSvgContainer = document.getElementById('uppercaseSvgContainer');
var matchStatusText = document.getElementById('matchStatusText');
var lengthStatusText = document.getElementById('lengthStatusText');
var uppercaseStatusText = document.getElementById('uppercaseStatusText');
if (password === confirmPassword && password.length > 0 && confirmPassword.length > 0 && password.length === confirmPassword.length) {
matchSvgContainer.classList.remove('bg-red-200');
@ -20,7 +26,7 @@ function validatePasswords() {
matchGoodPath.style.display = 'inline';
matchBadPath.style.display = 'none';
matchStatusText.textContent = "Passwords match";
isMatch = true
isMatch = true;
} else {
matchSvgContainer.classList.remove('bg-green-200');
matchSvgContainer.classList.add('bg-red-200');
@ -29,7 +35,7 @@ function validatePasswords() {
matchGoodPath.style.display = 'none';
matchBadPath.style.display = 'inline';
matchStatusText.textContent = "Passwords do not match";
isMatch = false
isMatch = false;
}
if (password.length >= 8) {
@ -40,7 +46,7 @@ function validatePasswords() {
lengthGoodPath.style.display = 'inline';
lengthBadPath.style.display = 'none';
lengthStatusText.textContent = "Password length meets requirement";
isValid = true
isValid = true;
} else {
lengthSvgContainer.classList.remove('bg-green-200');
lengthSvgContainer.classList.add('bg-red-200');
@ -49,10 +55,30 @@ function validatePasswords() {
lengthGoodPath.style.display = 'none';
lengthBadPath.style.display = 'inline';
lengthStatusText.textContent = "Password length must be at least 8 characters";
isValid = false
isValid = false;
}
if ( isValid && isMatch) {
if (/[A-Z]/.test(password)) {
uppercaseSvgContainer.classList.remove('bg-red-200');
uppercaseSvgContainer.classList.add('bg-green-200');
uppercaseStatusText.classList.remove('text-red-700');
uppercaseStatusText.classList.add('text-green-700');
uppercaseGoodPath.style.display = 'inline';
uppercaseBadPath.style.display = 'none';
uppercaseStatusText.textContent = "Password contains an uppercase letter";
hasUppercase = true;
} else {
uppercaseSvgContainer.classList.remove('bg-green-200');
uppercaseSvgContainer.classList.add('bg-red-200');
uppercaseStatusText.classList.remove('text-green-700');
uppercaseStatusText.classList.add('text-red-700');
uppercaseGoodPath.style.display = 'none';
uppercaseBadPath.style.display = 'inline';
uppercaseStatusText.textContent = "Password must contain at least one uppercase letter";
hasUppercase = false;
}
if (isValid && isMatch && hasUppercase) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
@ -60,4 +86,4 @@ function validatePasswords() {
}
document.getElementById('password').addEventListener('input', validatePasswords);
document.getElementById('confirmPassword').addEventListener('input', validatePasswords);
document.getElementById('confirmPassword').addEventListener('input', validatePasswords);

9
view/client/auth/auth.templ
View File

@ -49,6 +49,15 @@ templ form(err types.Message, title string) {
</div>
<span id="matchStatusText" class="font-medium text-sm ml-3 text-red-700"> Passwords do not match</span>
</li>
<li class="flex items-center py-1">
<div id="uppercaseSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
<svg id="uppercaseSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="uppercaseGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
<path id="uppercaseBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<span id="uppercaseStatusText" class="font-medium text-sm ml-3 text-red-700"> Password must contain at least one uppercase letter</span>
</li>
<li class="flex items-center py-1">
<div id="lengthSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
<svg id="lengthSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">

9
view/client/signup/signup.templ
View File

@ -55,6 +55,15 @@ templ form(err types.Message, title string) {
</div>
<span id="matchStatusText" class="font-medium text-sm ml-3 text-red-700"> Passwords do not match</span>
</li>
<li class="flex items-center py-1">
<div id="uppercaseSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
<svg id="uppercaseSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="uppercaseGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
<path id="uppercaseBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<span id="uppercaseStatusText" class="font-medium text-sm ml-3 text-red-700"> Password must contain at least one uppercase letter</span>
</li>
<li class="flex items-center py-1">
<div id="lengthSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
<svg id="lengthSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">