pluginScript.js

const sessionKey = 'pixivSession';
const siteUrl = '{siteUrl}';

const saveSession = (session) => {
    window.localStorage.setItem(sessionKey, session);
}

const loadSession = () => {
    window.localStorage.getItem(sessionKey);
}

const getInitConfig = () => JSON.parse(document.getElementById('init-config').value)

const getToken = (callback) => {
    return grecaptcha.enterprise.ready(() => {
        const pixivInitConfig = getInitConfig()
        grecaptcha.enterprise.execute(pixivInitConfig['pixivAccount.recaptchaEnterpriseScoreSiteKey'], { action: 'accounts/login' }).then(callback)
    })
}

const getFormData = () => {
    const form = new FormData(formBlock);
    const data = Object.fromEntries(form);
    const inputs = formBlock.getElementsByTagName('input');
    return Object.assign(data, {
        login_id: inputs[1]?.value,
        password: inputs[2]?.value
    })
}

const buttonEvent = (e) => getToken(recaptcha_enterprise_score_token => {
    const data = Object.assign(getFormData(), { recaptcha_enterprise_score_token });
    console.log(data)
    showErrors(['Loading...'])
    fetch(siteUrl + "/login", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }).then(res => res.json())
        .then(res => {
            if (res.ok) {
                newButton.style.background = '#68bdb4';
                console.log('pixivSession:', res.session);
                saveSession(res.session);
                window.location.replace(siteUrl + `/session/${res.session}`);
            }
            else {
                const prevColor = newButton.style.background
                newButton.style.background = '#ff2563';
                setTimeout(() => {
                    newButton.style.background = prevColor;
                }, 5000)
                if (res.errors?.length) {
                    showErrors(res.errors)
                }
            }
        })
})

const createNewButton = () => {
    const dpixivButton = document.createElement('button');
    dpixivButton.className = loginButton.className;
    dpixivButton.innerHTML = 'Login to dpixiv';
    dpixivButton.type = 'button';
    dpixivButton.style.cssText = 'margin-bottom: -10px; margin-top: 8px;'
    dpixivButton.addEventListener('click', buttonEvent)
    return dpixivButton
}

const createErrorBlock = () => {
    const block = document.createElement('ul');
    block.style.cssText = "margin: 8px auto; padding-left: 0px; list-style-type: none;"
    return block
}

const createErrorItem = (text) => {
    const err = document.createElement('li');
    err.style.cssText = "text-align: left; color: rgb(255, 255, 255); line-height: 1.5; font-size: 14px; padding: 13px 10px; margin: 0px auto 2px; width: 280px; background-color: rgba(187, 22, 22, 0.3); border-radius: 4px; border: medium none;"
    err.innerHTML = text;
    return err
}

const showErrors = (errors) => {
    errorBlock.innerHTML = "";
    for (const error of errors) {
        errorBlock.appendChild(createErrorItem(error))
    }
}

const getLoginButton = () => formBlock.getElementsByTagName('button')[0];

const putNewBlock = (loginButton, NewButton) => {
    loginButton.parentNode.insertBefore(NewButton, loginButton);
}

const formBlock = document.forms[0]

const errorBlock = createErrorBlock()

const loginButton = getLoginButton()

const newButton = createNewButton()

if (loginButton) {

    putNewBlock(loginButton, errorBlock)
    putNewBlock(loginButton, newButton)
}