~dvko/wp-change-username

84cbaee6b2cb05dc173348208706703a5e0729a2 — Danny van Kooten 1 year, 4 months ago b121626
minor JS refactoring
2 files changed, 43 insertions(+), 36 deletions(-)

M assets/js/script.js
M assets/js/script.min.js
M assets/js/script.js => assets/js/script.js +42 -35
@@ 1,14 1,12 @@
(function() {
    'use strict';

    var opts = change_username;
    var timeout;
    var mount = document.querySelector('.user-user-login-wrap td .description');
    var currentUsernameInput = document.getElementById('user_login');
    var link = el('a', { href: '#', onclick: toggle }, 'Change' );
    var newUsernameInput = el('input', { type: "text", name: "new_user_login", value: currentUsernameInput.value, className: "regular-text" , style: { "min-height": "28px" }, autocomplete: "off" });
    var submitButton = el('input', { type: "button", value: "Change", className: "button", onclick: onSubmit });
    var form = el('form', {
    const opts = window.change_username;
    let timeout;
    const mount = document.querySelector('.user-user-login-wrap td .description');
    const currentUsernameInput = document.getElementById('user_login');
    const link = el('a', { href: '#', onclick: toggle }, 'Change' );
    const newUsernameInput = el('input', { type: "text", name: "new_user_login", value: currentUsernameInput.value, className: "regular-text" , style: { "min-height": "28px" }, autocomplete: "off" });
    const submitButton = el('input', { type: "button", value: "Change", className: "button", onclick: onSubmit });
    const form = el('form', {
        method: "POST",
        onsubmit: onSubmit,
        style: { display: "none" }


@@ 16,7 14,7 @@
        newUsernameInput,
        submitButton
    ]);
    var message = el('p', { style: {
    const message = el('p', { style: {
        display: 'none'
    }});



@@ 24,11 22,11 @@
    link.parentNode.appendChild(el('div', [ form, message ]));

    /**
     * @param object
     * @param attrs
     * @param {object} object
     * @param {object} attrs
     */
    function setAttributes(object, attrs) {
        for(var key in attrs) {
        for(const key in attrs) {
            if(typeof(attrs[key]) === "object") {
                setAttributes(object[key], attrs[key]);
            } else {


@@ 38,13 36,13 @@
    }
    /**
     *
     * @param name
     * @param attrs
     * @param children
     * @returns {Element}
     * @param {string} name
     * @param {object|HTMLElement[]} attrs
     * @param {HTMLElement[]} [children]
     * @returns {HTMLElement}
     */
    function el(name, attrs, children) {
        var e = document.createElement(name);
        const e = document.createElement(name);

        if( !children && ( Array.isArray(attrs) || typeof(attrs) === "string")) {
            children = attrs;


@@ 59,7 57,7 @@
            if(typeof(children) === "string") {
                e.textContent = children;
            } else {
               for(var i=0; i<children.length; i++) {
               for(let i=0; i < children.length; i++) {
                e.appendChild(children[i]);
               }
            }


@@ 68,11 66,11 @@
        return e;
    }

    function onSubmit(e) {
        e.preventDefault();
    function onSubmit(evt) {
        evt.preventDefault();

        var new_username = form.new_user_login.value;
        var current_username = currentUsernameInput.value;
        const new_username = form.new_user_login.value;
        const current_username = currentUsernameInput.value;

        // do nothing if username is very short or unchanged
        if( new_username.length < 2 || new_username === current_username ) {


@@ 81,17 79,17 @@

        submitButton.value = "Please wait..";
        submitButton.disabled = true;
        var data = 'current_username='+encodeURIComponent(current_username)+'&new_username='+encodeURIComponent(new_username)+'&_ajax_nonce='+encodeURIComponent(opts.nonce);
        var request = new XMLHttpRequest();
        const data = 'current_username='+encodeURIComponent(current_username)+'&new_username='+encodeURIComponent(new_username)+'&_ajax_nonce='+encodeURIComponent(opts.nonce);
        const request = new XMLHttpRequest();
        request.open('POST', opts.ajaxurl + "?action=change_username", true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        request.onload = function() {
            submitButton.value = "Change";
            submitButton.disabled = false;
            var errored = true;
            let errored = true;
            if (request.status >= 200 && request.status < 400 && request.responseText != -1 ) {
                try {
                    var data = JSON.parse(request.responseText);
                    const data = JSON.parse(request.responseText);

                    // we're good.
                    errored = false;


@@ 125,14 123,23 @@
        request.send(data);
    }

    function toggleOnEscape(e) {
         if(e.keyCode == 27 ) { toggle(); }
    /**
     * Toggles when ESC is pressed
     *
     * @param {KeyboardEvent} evt
     */
    function toggleOnEscape(evt) {
         if(evt.keyCode === 27 ) { toggle(); }
    }

    // toggle between link / form
    function toggle(e) {
        if(e) {
            e.preventDefault();
    /**
     * Toggle between link element and form element
     *
     * @param {MouseEvent=} evt
     */
    function toggle(evt) {
        if(evt) {
            evt.preventDefault();
        }

        if( form.style.display === 'none' ) {


@@ 148,4 155,4 @@
            document.removeEventListener('keydown', toggleOnEscape);
        }
    }
})();
\ No newline at end of file
})();

M assets/js/script.min.js => assets/js/script.min.js +1 -1
@@ 1,1 1,1 @@
!function(){"use strict";var e,n=change_username,t=document.querySelector(".user-user-login-wrap td .description"),o=document.getElementById("user_login"),s=c("a",{href:"#",onclick:y},"Change"),a=c("input",{type:"text",name:"new_user_login",value:o.value,className:"regular-text",style:{"min-height":"28px"},autocomplete:"off"}),l=c("input",{type:"button",value:"Change",className:"button",onclick:d}),r=c("form",{method:"POST",onsubmit:d,style:{display:"none"}},[a,l]),i=c("p",{style:{display:"none"}});function u(e,n){for(var t in n)"object"==typeof n[t]?u(e[t],n[t]):e[t]=n[t]}function c(e,n,t){var o=document.createElement(e);if(t||!Array.isArray(n)&&"string"!=typeof n||(t=n,n=null),n&&u(o,n),t)if("string"==typeof t)o.textContent=t;else for(var s=0;s<t.length;s++)o.appendChild(t[s]);return o}function d(t){t.preventDefault();var s=r.new_user_login.value,a=o.value;if(!(s.length<2||s===a)){l.value="Please wait..",l.disabled=!0;var u="current_username="+encodeURIComponent(a)+"&new_username="+encodeURIComponent(s)+"&_ajax_nonce="+encodeURIComponent(n.nonce),c=new XMLHttpRequest;c.open("POST",n.ajaxurl+"?action=change_username",!0),c.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),c.onload=function(){l.value="Change",l.disabled=!1;var t=!0;if(c.status>=200&&c.status<400&&-1!=c.responseText)try{var a=JSON.parse(c.responseText);t=!1,n.nonce=a.new_nonce,i.style.color=a.success?"green":"red",i.innerHTML=a.message,a.success&&(o.value=s,y())}catch(e){}t&&(i.style.color="red",i.textContent="Uh oh, something went wrong submitting the form."),e&&window.clearTimeout(e),i.style.display="",e=window.setTimeout((function(){i.style.display="none"}),6e3)},c.send(u)}}function p(e){27==e.keyCode&&y()}function y(e){e&&e.preventDefault(),"none"===r.style.display?(r.style.display="",s.style.display="none",o.style.display="none",a.focus(),document.addEventListener("keydown",p)):(r.style.display="none",s.style.display="inline",o.style.display="",document.removeEventListener("keydown",p))}t.parentNode.replaceChild(s,t),s.parentNode.appendChild(c("div",[r,i]))}();
\ No newline at end of file
!function(){const e=window.change_username;let n;const t=document.querySelector(".user-user-login-wrap td .description"),o=document.getElementById("user_login"),s=c("a",{href:"#",onclick:y},"Change"),l=c("input",{type:"text",name:"new_user_login",value:o.value,className:"regular-text",style:{"min-height":"28px"},autocomplete:"off"}),a=c("input",{type:"button",value:"Change",className:"button",onclick:d}),i=c("form",{method:"POST",onsubmit:d,style:{display:"none"}},[l,a]),r=c("p",{style:{display:"none"}});function u(e,n){for(const t in n)"object"==typeof n[t]?u(e[t],n[t]):e[t]=n[t]}function c(e,n,t){const o=document.createElement(e);if(t||!Array.isArray(n)&&"string"!=typeof n||(t=n,n=null),n&&u(o,n),t)if("string"==typeof t)o.textContent=t;else for(let e=0;e<t.length;e++)o.appendChild(t[e]);return o}function d(t){t.preventDefault();const s=i.new_user_login.value,l=o.value;if(s.length<2||s===l)return;a.value="Please wait..",a.disabled=!0;const u="current_username="+encodeURIComponent(l)+"&new_username="+encodeURIComponent(s)+"&_ajax_nonce="+encodeURIComponent(e.nonce),c=new XMLHttpRequest;c.open("POST",e.ajaxurl+"?action=change_username",!0),c.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),c.onload=function(){a.value="Change",a.disabled=!1;let t=!0;if(c.status>=200&&c.status<400&&-1!=c.responseText)try{const n=JSON.parse(c.responseText);t=!1,e.nonce=n.new_nonce,r.style.color=n.success?"green":"red",r.innerHTML=n.message,n.success&&(o.value=s,y())}catch(e){}t&&(r.style.color="red",r.textContent="Uh oh, something went wrong submitting the form."),n&&window.clearTimeout(n),r.style.display="",n=window.setTimeout((function(){r.style.display="none"}),6e3)},c.send(u)}function p(e){27===e.keyCode&&y()}function y(e){e&&e.preventDefault(),"none"===i.style.display?(i.style.display="",s.style.display="none",o.style.display="none",l.focus(),document.addEventListener("keydown",p)):(i.style.display="none",s.style.display="inline",o.style.display="",document.removeEventListener("keydown",p))}t.parentNode.replaceChild(s,t),s.parentNode.appendChild(c("div",[i,r]))}();
\ No newline at end of file