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

Add password validation

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-04-25 22:51:37 +07:00
commit 2e2fbdf800
51 changed files with 3526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 943 B

222
public/index.html Normal file
View File

@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Arimo', sans-serif;
--font-sans: 'Arimo';
}
</style>
<style>
body {
font-family: 'Libre Franklin', sans-serif;
--font-sans: 'Libre Franklin';
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Arimo', sans-serif;
--font-sans: 'Arimo';
}
</style>
<style>
body {
font-family: 'Libre Franklin', sans-serif;
--font-sans: 'Libre Franklin';
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="dark flex items-center min-h-screen p-4 sm:p-6 bg-gray-900">
<div class="mx-auto w-full max-w-md space-y-8">
<header class="text-center">
<div class="space-y-2">
<h1 class="text-3xl font-bold text-white">Forgot password</h1>
<p class="text-gray-500 dark:text-gray-400">Enter your email below to reset your password</p>
</div>
</header>
<form class="space-y-4" method="post" action="">
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white" for="password">Password</label>
<input type="password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white" id="password" name="password" required />
</div>
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white" for="confirmPassword">Confirm Password</label>
<input type="password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white" id="confirmPassword" required />
</div>
<div class="flex justify-start mt-3 ml-4 p-1">
<ul>
<li class="flex items-center py-1">
<div id="matchSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
<svg id="matchSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="matchGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
<path id="matchBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</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="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">
<path id="lengthGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
<path id="lengthBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<span id="lengthStatusText" class="font-medium text-sm ml-3 text-red-700"> Password length must be at least 8 characters</span>
</li>
<li class="flex items-center py-1">
<div id="requirementsSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
<svg id="requirementsSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="requirementsGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
<path id="requirementsBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<span id="requirementsStatusText" class="font-medium text-sm ml-3 text-red-700">The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers</span>
</li>
</ul>
</div>
<button class="bg-slate-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full" type="submit" id="submit" name="submit" disabled>
Submit
</button>
</form>
</div>
</div>
<script>
var isMatch = false
var isValid = false
var isSecure = false
function validatePasswords() {
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var matchGoodPath = document.getElementById('matchGoodPath');
var matchBadPath = document.getElementById('matchBadPath');
var lengthGoodPath = document.getElementById('lengthGoodPath');
var lengthBadPath = document.getElementById('lengthBadPath');
var requirementsGoodPath = document.getElementById('requirementsGoodPath');
var requirementsBadPath = document.getElementById('requirementsBadPath');
var matchSvgContainer = document.getElementById('matchSvgContainer');
var lengthSvgContainer = document.getElementById('lengthSvgContainer');
var requirementsSvgContainer = document.getElementById('requirementsSvgContainer');
var matchStatusText = document.getElementById('matchStatusText');
var lengthStatusText = document.getElementById('lengthStatusText');
var requirementsStatusText = document.getElementById('requirementsStatusText');
var symbolRegex = /[!@#$%^&*]/;
var uppercaseRegex = /[A-Z]/;
var numberRegex = /\d/g;
if (password === confirmPassword && password.length > 0 && confirmPassword.length > 0 && password.length === confirmPassword.length) {
matchSvgContainer.classList.remove('bg-red-200');
matchSvgContainer.classList.add('bg-green-200');
matchStatusText.classList.remove('text-red-700');
matchStatusText.classList.add('text-green-700');
matchGoodPath.style.display = 'inline';
matchBadPath.style.display = 'none';
matchStatusText.textContent = "Passwords match";
console.log("anjay")
isMatch = true
} else {
matchSvgContainer.classList.remove('bg-green-200');
matchSvgContainer.classList.add('bg-red-200');
matchStatusText.classList.remove('text-green-700');
matchStatusText.classList.add('text-red-700');
matchGoodPath.style.display = 'none';
matchBadPath.style.display = 'inline';
matchStatusText.textContent = "Passwords do not match";
isMatch = false
}
if (password.length >= 8) {
lengthSvgContainer.classList.remove('bg-red-200');
lengthSvgContainer.classList.add('bg-green-200');
lengthStatusText.classList.remove('text-red-700');
lengthStatusText.classList.add('text-green-700');
lengthGoodPath.style.display = 'inline';
lengthBadPath.style.display = 'none';
lengthStatusText.textContent = "Password length meets requirement";
isValid = true
} else {
lengthSvgContainer.classList.remove('bg-green-200');
lengthSvgContainer.classList.add('bg-red-200');
lengthStatusText.classList.remove('text-green-700');
lengthStatusText.classList.add('text-red-700');
lengthGoodPath.style.display = 'none';
lengthBadPath.style.display = 'inline';
lengthStatusText.textContent = "Password length must be at least 8 characters";
isValid = false
}
var symbolCheck = symbolRegex.test(password);
var uppercaseCheck = uppercaseRegex.test(password);
var numberCount = (password.match(numberRegex) || []).length;
if (symbolCheck && uppercaseCheck && numberCount >= 3) {
requirementsSvgContainer.classList.remove('bg-red-200');
requirementsSvgContainer.classList.add('bg-green-200');
requirementsStatusText.classList.remove('text-red-700');
requirementsStatusText.classList.add('text-green-700');
requirementsGoodPath.style.display = 'inline';
requirementsBadPath.style.display = 'none';
requirementsStatusText.textContent = "Password meets additional requirements";
isSecure = true
} else {
requirementsSvgContainer.classList.remove('bg-green-200');
requirementsSvgContainer.classList.add('bg-red-200');
requirementsStatusText.classList.remove('text-green-700');
requirementsStatusText.classList.add('text-red-700');
requirementsGoodPath.style.display = 'none';
requirementsBadPath.style.display = 'inline';
requirementsStatusText.textContent = "The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers";
isSecure = false
}
console.log(isSecure)
console.log(isValid)
console.log(isSecure)
if (isSecure && isValid && isSecure && password === confirmPassword) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
}
}
document.getElementById('password').addEventListener('input', validatePasswords);
document.getElementById('confirmPassword').addEventListener('input', validatePasswords);
</script>
</body>
</html>
</body>
</html>

3
public/input.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

1
public/robots.txt Normal file
View File

@ -0,0 +1 @@
User-agent: *

173
public/upload.js Normal file
View File

@ -0,0 +1,173 @@
document.addEventListener("dragover", function (event) {
event.preventDefault();
});
document.addEventListener("drop", async function (event) {
event.preventDefault();
const file = event.dataTransfer.files[0]
await handleFile(file)
});
document.getElementById('dropzone-file').addEventListener('change', async function(event) {
event.preventDefault();
const file = event.target.files[0]
await handleFile(file)
});
async function handleFile(file){
const chunkSize = 2 * 1024 * 1024;
const chunks = Math.ceil(file.size / chunkSize);
const data = JSON.stringify({
"name": file.name,
"size": file.size,
"chunk": chunks,
});
fetch('/upload/init', {
method: 'POST',
body: data,
}).then(async response => {
const responseData = await response.json()
console.log(responseData)
if (responseData.Done === false) {
addNewUploadElement(file)
const fileChunks = await splitFile(file, chunkSize);
await uploadChunks(file.name,file.size, fileChunks, responseData.Uploaded, responseData.FileID);
} else {
alert("file already uploaded")
}
}).catch(error => {
console.error('Error uploading file:', error);
});
}
function addNewUploadElement(file){
const newDiv = document.createElement('div');
newDiv.innerHTML = `
<div class="p-6 rounded-lg shadow bg-gray-800 border-gray-700">
<div class="mb-2 flex justify-between items-center">
<div class="flex items-center gap-x-3">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z"></path>
<path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z"></path>
</svg>
<div>
<p class="text-sm font-medium text-white">${ file.name }</p>
<p class="text-xs text-gray-500">${ convertFileSize(file.size) }</p>
</div>
</div>
<div class="inline-flex items-center gap-x-2">
<a class="text-gray-500 hover:text-gray-800" href="#">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<rect width="4" height="16" x="6" y="4" />
<rect width="4" height="16" x="14" y="4" />
</svg>
</a>
<a class="text-gray-500 hover:text-gray-800" href="#">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M3 6h18" />
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
<line x1="10" x2="10" y1="11" y2="17" />
<line x1="14" x2="14" y1="11" y2="17" />
</svg>
</a>
</div>
</div>
<div class="flex items-center gap-x-3 whitespace-nowrap">
<div id="progress-${ file.name }-1" class="flex w-full h-2 rounded-full overflow-hidden bg-gray-200"
role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div id="progress-${ file.name }-2"
class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500">
</div>
</div>
<span id="progress-${ file.name }-3" class="text-sm text-white ">Starting...</span>
</div>
<div id="progress-${ file.name }-4" class="text-sm text-gray-500">Uploading 0%</div>
</div>
`;
document.getElementById('container').appendChild(newDiv);
}
function convertFileSize(sizeInBytes) {
if (sizeInBytes < 1024) {
return sizeInBytes + ' B';
} else if (sizeInBytes < 1024 * 1024) {
return (sizeInBytes / 1024).toFixed(2) + ' KB';
} else if (sizeInBytes < 1024 * 1024 * 1024) {
return (sizeInBytes / (1024 * 1024)).toFixed(2) + ' MB';
} else {
return (sizeInBytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
}
}
async function splitFile(file, chunkSize) {
const fileSize = file.size;
const chunks = Math.ceil(fileSize / chunkSize);
const fileChunks = [];
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(fileSize, start + chunkSize);
const chunk = file.slice(start, end);
fileChunks.push(chunk);
}
return fileChunks;
}
async function uploadChunks(name, size, chunks, uploadedChunk= -1, FileID) {
let byteUploaded = 0
var progress1 = document.getElementById(`progress-${name}-1`);
var progress2 = document.getElementById(`progress-${name}-2`);
var progress3 = document.getElementById(`progress-${name}-3`);
var progress4 = document.getElementById(`progress-${name}-4`);
for (let index = 0; index < chunks.length; index++) {
const percentComplete = Math.round((index + 1) / chunks.length * 100);
const chunk = chunks[index];
if (!(index <= uploadedChunk)) {
const formData = new FormData();
formData.append('name', name);
formData.append('chunk', chunk);
formData.append('index', index);
formData.append('done', false);
progress1.setAttribute("aria-valuenow", percentComplete);
progress2.style.width = `${percentComplete}%`;
const startTime = performance.now();
await fetch(`/upload/${FileID}`, {
method: 'POST',
body: formData
});
const endTime = performance.now();
const totalTime = (endTime - startTime) / 1000;
const uploadSpeed = chunk.size / totalTime / 1024 / 1024;
byteUploaded += chunk.size
progress3.innerText = `${uploadSpeed.toFixed(2)} MB/s`;
progress4.innerText = `Uploading ${percentComplete}% - ${convertFileSize(byteUploaded)} of ${ convertFileSize(size)}`;
} else {
progress1.setAttribute("aria-valuenow", percentComplete);
progress2.style.width = `${percentComplete}%`;
byteUploaded += chunk.size
}
}
const formData = new FormData();
formData.append('name', name);
formData.append('done', true);
return fetch(`/upload/${FileID}`, {
method: 'POST',
body: formData
});
}

97
public/validatePassword.js Normal file
View File

@ -0,0 +1,97 @@
var isMatch = false
var isValid = false
var isSecure = false
function validatePasswords() {
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var matchGoodPath = document.getElementById('matchGoodPath');
var matchBadPath = document.getElementById('matchBadPath');
var lengthGoodPath = document.getElementById('lengthGoodPath');
var lengthBadPath = document.getElementById('lengthBadPath');
var requirementsGoodPath = document.getElementById('requirementsGoodPath');
var requirementsBadPath = document.getElementById('requirementsBadPath');
var matchSvgContainer = document.getElementById('matchSvgContainer');
var lengthSvgContainer = document.getElementById('lengthSvgContainer');
var requirementsSvgContainer = document.getElementById('requirementsSvgContainer');
var matchStatusText = document.getElementById('matchStatusText');
var lengthStatusText = document.getElementById('lengthStatusText');
var requirementsStatusText = document.getElementById('requirementsStatusText');
var symbolRegex = /[!@#$%^&*]/;
var uppercaseRegex = /[A-Z]/;
var numberRegex = /\d/g;
if (password === confirmPassword && password.length > 0 && confirmPassword.length > 0 && password.length === confirmPassword.length) {
matchSvgContainer.classList.remove('bg-red-200');
matchSvgContainer.classList.add('bg-green-200');
matchStatusText.classList.remove('text-red-700');
matchStatusText.classList.add('text-green-700');
matchGoodPath.style.display = 'inline';
matchBadPath.style.display = 'none';
matchStatusText.textContent = "Passwords match";
console.log("anjay")
isMatch = true
} else {
matchSvgContainer.classList.remove('bg-green-200');
matchSvgContainer.classList.add('bg-red-200');
matchStatusText.classList.remove('text-green-700');
matchStatusText.classList.add('text-red-700');
matchGoodPath.style.display = 'none';
matchBadPath.style.display = 'inline';
matchStatusText.textContent = "Passwords do not match";
isMatch = false
}
if (password.length >= 8) {
lengthSvgContainer.classList.remove('bg-red-200');
lengthSvgContainer.classList.add('bg-green-200');
lengthStatusText.classList.remove('text-red-700');
lengthStatusText.classList.add('text-green-700');
lengthGoodPath.style.display = 'inline';
lengthBadPath.style.display = 'none';
lengthStatusText.textContent = "Password length meets requirement";
isValid = true
} else {
lengthSvgContainer.classList.remove('bg-green-200');
lengthSvgContainer.classList.add('bg-red-200');
lengthStatusText.classList.remove('text-green-700');
lengthStatusText.classList.add('text-red-700');
lengthGoodPath.style.display = 'none';
lengthBadPath.style.display = 'inline';
lengthStatusText.textContent = "Password length must be at least 8 characters";
isValid = false
}
var symbolCheck = symbolRegex.test(password);
var uppercaseCheck = uppercaseRegex.test(password);
var numberCount = (password.match(numberRegex) || []).length;
if (symbolCheck && uppercaseCheck && numberCount >= 3) {
requirementsSvgContainer.classList.remove('bg-red-200');
requirementsSvgContainer.classList.add('bg-green-200');
requirementsStatusText.classList.remove('text-red-700');
requirementsStatusText.classList.add('text-green-700');
requirementsGoodPath.style.display = 'inline';
requirementsBadPath.style.display = 'none';
requirementsStatusText.textContent = "Password meets additional requirements";
isSecure = true
} else {
requirementsSvgContainer.classList.remove('bg-green-200');
requirementsSvgContainer.classList.add('bg-red-200');
requirementsStatusText.classList.remove('text-green-700');
requirementsStatusText.classList.add('text-red-700');
requirementsGoodPath.style.display = 'none';
requirementsBadPath.style.display = 'inline';
requirementsStatusText.textContent = "The password must contain at least one symbol (!@#$%^&*), one uppercase letter, and three numbers";
isSecure = false
}
if (isSecure && isValid && isSecure && password === confirmPassword) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
}
}
document.getElementById('password').addEventListener('input', validatePasswords);
document.getElementById('confirmPassword').addEventListener('input', validatePasswords);