Client side integration (1.2) Ui

qrcode.min.js and speakeasy.min.js scripts to use local files, Demonstration

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Login and Registration</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <form action="login.php" method="post" onsubmit="return validateLoginForm()">
            <!-- Login form fields -->

            <button class="login-button" type="submit">Login</button>
        </form>
    </div>

    <div class="container">
        <h2>Register</h2>
        <form action="register.php" method="post" onsubmit="return validateRegisterForm()">
            <!-- Registration form fields -->
            <label for="newUsername">New Username:</label>
            <input type="text" id="newUsername" name="newUsername" required><br>

            <label for="newPassword">New Password:</label>
            <input type="password" id="newPassword" name="newPassword" required><br>

            <label for="enable2FA">Enable Two-Factor Authentication:</label>
            <input type="checkbox" id="enable2FA" name="enable2FA" onchange="toggle2FASetup()"><br>

            <div id="2FA-setup" style="display: none;">
                <button id="generate2FA" type="button" onclick="generate2FA()">Generate 2FA QR Code</button><br>
                <div id="qrcode"></div><br>
                <label for="2FA-code">Enter 2FA Code:</label>
                <input type="text" id="2FA-code" name="2FA-code"><br>
                <input type="hidden" id="2FA-secret" name="2FA-secret">
            </div>

            <button class="register-button" type="submit">Register</button>
        </form>
    </div>

    <script src="qrcode.min.js"></script>
    <script src="speakeasy.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

function toggle2FASetup() {
    var enable2FA = document.getElementById("enable2FA").checked;
    var setupDiv = document.getElementById("2FA-setup");
    if (enable2FA) {
        setupDiv.style.display = "block";
    } else {
        setupDiv.style display = "none";
    }
}

function generate2FA() {
    const secret = speakeasy.generateSecret({ length: 20, name: "YourApp" });
    const qrcode = new QRCode(document.getElementById("qrcode"), {
        text: secret.otpauth_url,
        width: 128,
        height: 128
    });

    document.getElementById("2FA-secret").value = secret.base32;
}

function validateRegisterForm() {
    clearErrorMessages();

    var newUsername = document.getElementById("newUsername").value;
    var newPassword = document.getElementById("newPassword").value;
    var enable2FA = document.getElementById("enable2FA").checked;
    var twoFactorSecret = document.getElementById("2FA-secret").value;
    var twoFactorCode = document.getElementById("2FA-code").value;

    if (newUsername === "") {
        showError("newUsername", "Please enter a new username.");
        return false;
    }

    if (newPassword === "") {
        showError("newPassword", "Please enter a new password.");
        return false;
    }

    if (enable2FA && !twoFactorSecret) {
        showError("2FA-secret", "Please generate a 2FA secret key.");
        return false;
    }

    if (enable2FA && !twoFactorCode) {
        showError("2FA-code", "Please enter your 2FA code.");
        return false;
    }

    // Additional validation logic for the registration form can be added here.

    return true;
}

function showError(inputId, message) {
    var errorDiv = document.createElement("div");
    errorDiv.classList.add("error-message");
    errorDiv.textContent = message;
    var inputField = document.getElementById(inputId);
    inputField.parentNode.appendChild(errorDiv);
}

function clearErrorMessages(inputId) {
    var errorMessages = document.getElementsByClassName("error-message");
    for (var i = 0; i < errorMessages.length; i++) {
        if (!inputId || errorMessages[i].id === inputId) {
            errorMessages[i].remove();
        }
    }
}

CSS (styles.css)

.container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    margin-top: 20px;
    text-align: center;
}

.login-button, .register-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-button:hover, .register-button:hover {
    background-color: #e74c3c;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

qrcode.min.js and speakeasy.min.js scripts, When you integrate these scripts into your project, make sure to have these files in your project folder. This code provides a complete HTML form with JavaScript functionality for 2FA setup during registration. Users can enable 2FA, generate a QR code, and enter their 2FA code for registration.

Jamesabira / Open-CV

Client side integration (1.2) Ui #6