Client side integration (1.0)

2FA We'll use qrcode and

speakeasy libraries for this purpose.

Include the necessary libraries in your HTML. You can add these within the <head> section:

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/speakeasy@2.0.0/dist/speakeasy.min.js"></script>

registration form:

<!DOCTYPE html>
<html>
<head>
    <title>Login and Registration</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <style>
        .error-message {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</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>

            <!-- 2FA setup step -->
            <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>
            </div>

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

    <script>
        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();
                }
            }
        }
    </script>
</body>
</html>

Users can enable 2FA by checking the "Enable Two-Factor Authentication" checkbox.
When enabled, users can generate a QR code by clicking the "Generate 2FA QR Code" button. This QR code contains the secret key for their 2FA setup.
We use the qrcode library to display the QR code for users to scan with their authenticator app.
The registration form validation checks if 2FA is enabled and ensures that the secret key and code are provided if 2FA is enabled.

This approach provides a more user-friendly and visually intuitive way to set up 2FA during the registration process. Users can use their authenticator app to scan the QR code, simplifying the setup.

Jamesabira / Open-CV

Client side integration (1.0) #2