How to Add User Set 4 Digit Pin in Web Page || HTML, CSS, JS || Blogger

Hello Dosto aaj me aapke liye ek kamal ka souce code laya jisme aap apni website me lock Laga sakte hai isme users apna khud ka Pin Create karke set kar sakte hai or agar users pin change karna chahe to change bhi kar sakte hai or agar users apna pin bhool gaye to website ka clear data karna padega uske baad automatic New PIN Create ka Option Show hone lagega. uske baad users apna new pin create kar sakte hai. or agar koi problem aati hai to mujhe contact kar sakte form fill karke me reply jarur dunga.

Send File online and Receive File by 6 Digit Download Code => Click Here

Souce Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Access Page</title>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
     background: rgb(12,72,250);
background: linear-gradient(85deg, rgba(12,72,250,0.9359943806624212) 0%, rgba(45,253,58,0.9920167896260067) 100%);
color: white;
}

#pinForm, #createPinForm, #changePinForm, #confirmOldPinForm {
    text-align: center;
}

input[type="text"] {
    padding: 10px;
    margin-bottom: 10px;
    width: 200px;
    font-size: 16px;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background: rgb(12,72,250);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin: 5px;
}
</style>
</head>
<body>
<script>
// Check if the PIN has already been created on this device
var pinCreated = localStorage.getItem("pinCreated");
if (!pinCreated) {
    // Show the create PIN form if it hasn't been created
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("createPinForm").style.display = "block";
    });
} else {
    // Show the login PIN form if it has been created
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("pinForm").style.display = "block";
    });
}
</script>

<div id="createPinForm" style="display:none;">
<h2>Create Your 4-digit PIN:</h2>
<input type="text" id="newPinInput" placeholder="Enter 4 Digit Pin" maxlength="4" pattern="\d{4}" title="Please enter a 4-digit PIN" required>
<br>
<button onclick="createPin()">Create PIN</button>
</div>

<div id="pinForm" style="display:none;">
<h2>Enter Your 4-digit PIN to access the page:</h2>
<input type="text" id="pinInput" placeholder="Enter 4 Digit Pin" maxlength="4" pattern="\d{4}" title="Please enter a 4-digit PIN" required>
<br>
<button onclick="checkPIN()">Enter</button>
<br>
<button onclick="showChangePinForm()">Change PIN</button>
</div>

<div id="changePinForm" style="display:none;">
<h2>Enter old 4-digit PIN:</h2>
<input type="text" id="oldPinInput" placeholder="Enter 4 Digit Pin" maxlength="4" pattern="\d{4}" title="Please enter your old 4-digit PIN" required>
<br>
<button onclick="confirmOldPin()">Confirm</button>
</div>

<div id="confirmOldPinForm" style="display:none;">
<h2>Enter Your New 4-digit PIN:</h2>
<input type="text" id="newPinInput" maxlength="4" pattern="\d{4}" title="Please enter a new 4-digit PIN" required>
<br>
<button onclick="createPin()">Create PIN</button>
</div>

<script>
function createPin() {
    var newPin = document.getElementById("newPinInput").value;
    // Here you can save the new PIN to the server or use any other storage method
    alert("Your PIN has been created successfully!");
    // Hide the create PIN form and show the login PIN form
    document.getElementById("createPinForm").style.display = "none";
    document.getElementById("pinForm").style.display = "block";
    // Save the PIN to localStorage
    localStorage.setItem("pin", newPin);
    // Set flag indicating PIN has been created
    localStorage.setItem("pinCreated", true);
}

function checkPIN() {
    var pin = document.getElementById("pinInput").value;
    var storedPin = localStorage.getItem("pin");
    if (pin === storedPin) {
      // Redirect to the main page if PIN is correct
      window.location.href = "main.html";
    } else {
      alert("Incorrect PIN. Please try again.");
    }
}

function showChangePinForm() {
    document.getElementById("pinForm").style.display = "none";
    document.getElementById("changePinForm").style.display = "block";
}

function confirmOldPin() {
    var oldPin = document.getElementById("oldPinInput").value;
    var storedPin = localStorage.getItem("pin");
    if (oldPin === storedPin) {
      document.getElementById("changePinForm").style.display = "none";
      document.getElementById("confirmOldPinForm").style.display = "block";
    } else {
      alert("Incorrect old PIN. Please try again.");
    }
}

function createPin() {
    var newPin = document.getElementById("newPinInput").value;
    // Here you can save the new PIN to the server or use any other storage method
    alert("Your PIN has been created successfully!");
    // Hide the create PIN form and show the login PIN form
    document.getElementById("confirmOldPinForm").style.display = "none";
    document.getElementById("pinForm").style.display = "block";
    // Save the PIN to localStorage
    localStorage.setItem("pin", newPin);
}
</script>
</body>
</html>