Validate-inputs.tsx

import { Data, animate, Override, Animatable } from "framer";

const data = Data({ opacity: Animatable(0.3), currentPage: 0 });

let inputsValidity = Data({
    login: false,
    pass: false
});

const btnAnimationTime = 0.2;

// Function for the keypress listener
const handleKeyPress = e => {
    if (e.target.id === "login-input") {
        inputsValidity.login = e.target.checkValidity();
    } else if (e.target.id === "pass-input") {
        inputsValidity.pass = e.target.checkValidity();
    }
};

export const PageComponent: Override = () => {
    return {
        currentPage: data.currentPage
    };
};
    
export const LoginButton: Override = () => {
    if (inputsValidity.pass && inputsValidity.login) {
        animate.linear(data.opacity, 1, {
            duration: btnAnimationTime
        });
    } else {
        animate.linear(data.opacity, 0.2, {
            duration: btnAnimationTime
        });
    }
    return {
        opacity: data.opacity,
        onTap() {
            if (inputsValidity.pass && inputsValidity.login) {
                data.currentPage = 1;
            }
        }
    };
};

export const GoBack: Override = () => {
    return {
        onTap() {
            data.currentPage = 0;
        }
    };
};

// Add listener for keypress
document.addEventListener("keyup", handleKeyPress);