// ==UserScript==
// @name         2004Scape Login
// @namespace    http://tampermonkey.net/
// @version      2025-04-21
// @description  Connects the browser's secure password manager to RS2004 game login screen
// @author       LR2004
// @include      https://w*-2004.lostcity.rs/rs2.cgi*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lostcity.rs
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';
    // 1. check page, either provide hotlink to iframe page, or to provide login form
    const iframeTabOpened = window.top === window.self;
    const worldNum = location.href.match(/world=(\d+)/i)[1];

    if ( !iframeTabOpened ) { // 1a. hotlink to iframe page
        const controlBarEl = document.querySelector('#controls');
        controlBarEl.appendChild(document.createTextNode(" | "));
        const iframeUrlNewTabEl = document.createElement('a');
        iframeUrlNewTabEl.innerText = "Expose Client Mode";
        iframeUrlNewTabEl.href = "https://w"+worldNum+"-2004.lostcity.rs/rs2.cgi?plugin=0&world="+worldNum+"&lowmem=1";
        iframeUrlNewTabEl.target = '_blank';
        controlBarEl.appendChild(iframeUrlNewTabEl);
        return;
    }

    // 1b. provide login form...


    // 3. grab page HTML and customise it so that "c" will be defined as a the Client instance,
    //    and lastly create a message listener for login details, and set in window.c.
    const html = document.getElementsByTagName("html")[0].innerHTML;
    const clientNum = html.match(/new Client\((\d+)/)[1];//need to grab nums in constructor or else won't work for
    const customHTML = html.replace("new Client("+clientNum+", 1, true);", `
    window.c = new Client(${clientNum}, 1, true);
    addEventListener("message", e => {
        if (e.data.hasOwnProperty('username') && e.data.hasOwnProperty('password')) {
            c.login(e.data.username,e.data.password); // obsfucated but exists!
        }
    });
    `);


    // 4. create iframe and inject into current page
    const iframe = document.createElement('iframe');
    iframe.width = '100%';
    iframe.height = '1000px';
    document.body.appendChild(iframe);


    // 5. inject custom HTML into iframe
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(customHTML);
    iframe.contentWindow.document.close();


    // 6. hide the existing canvas (do not delete)
    document.getElementsByTagName('canvas')[0].style.display = 'none';

    // 7. create func to store & load creds
    function storeCreds(username, password) {
        let credz = new PasswordCredential({ id: username, name: username, password });
        navigator.credentials.store(credz).then(() => {
            console.log(username, 'Password store in browser');
        }, (err) => {
            console.error(username, 'Failed to store password', err)
        });
    };

    function loadCreds(username) { // browser will prompt you to sign in
        navigator.credentials.get({ password: true }).then((creds) => {
            console.log(username, 'Login found!');
            iframe.contentWindow.postMessage({ username: creds.id, password: creds.password }, '*');
        }, (err) => {
            console.error(username, 'Failed to find login', err)
        });
    }

    // 8. create HTML login form that can be stored against the browser
    const formEl = document.createElement('form');
    formEl.name = 'login';
    formEl.id = 'login';
    formEl.style.padding = ".25rem";
    formEl.style.textAlign = "center";
    formEl.onsubmit = function(event) {
        event.preventDefault();
        let data = new FormData(formEl);
        storeCreds( data.get('username'), data.get('password') );
        return false;
    };

    const usernameEl = document.createElement('input');
    usernameEl.type = 'text';
    usernameEl.name = 'username';
    usernameEl.id = 'username';
    usernameEl.placeholder ="Username";
    usernameEl.style.marginRight = ".25rem";
    formEl.appendChild(usernameEl);

    const passwordEl = document.createElement('input');
    passwordEl.type = 'password';
    passwordEl.name = 'password';
    passwordEl.placeholder = "Password";
    passwordEl.id = 'password';
    passwordEl.style.marginRight = ".25rem";
    formEl.appendChild(passwordEl);

    const submitBtnEl = document.createElement('input');
    submitBtnEl.type = 'submit';
    submitBtnEl.value = 'Save';
    submitBtnEl.style.marginRight = ".25rem";
    formEl.appendChild(submitBtnEl);

    const loadBtnEl = document.createElement('button');
    loadBtnEl.innerText = 'Login';
    loadBtnEl.onclick = () => loadCreds(usernameEl.value);
    formEl.appendChild(loadBtnEl);

    document.body.prepend(formEl);
})();