phantasmobile/app/static/js/comments.js

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function getCSRF() {
    return document.querySelector('input[name="csrfmiddlewaretoken"]').value
}

function serializeData(fields) {
    var data = {};
    document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
        if (fields && !fields.includes(input.name)) {
            return
        }
        if (input.name != 'csrfmiddlewaretoken') {
            var value = input.value.trim()
            if (value) {
                data[input.name] = value
            }
        }
    })
    return data
}

async function api(url, data) {
    var csrf = getCSRF()
    return fetch(url, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrf
        },
        body: JSON.stringify(data)
    }).then(response => {
        return response.json()
    })
}
async function publish_comment(id) {
    return api("/comment/publish/", {
        "comment": id
    })
}

async function logout() {
    return api("/logout/", {}).then(response => {
        delete user.username
    })
}

async function login(data) {
    return api("/login/", data)
}

async function register(data) {
    return api("/register/", data)
}

function renderComments(cdiv, data) {
        cdiv.innerHTML = `
            <h3>
                <span class="icon">${icon.down}</span>
                Comments
            </h3>
            <div class="block">
                <div class="comments-content">
                </div>
            </div>
        `
        const content = cdiv.querySelector('.comments-content')
        comments.forEach(comment => {
            var extra = ''
            if (!comment.published) {
                if (user.is_moderator) {
                    extra += `<button class="publish-comment">${icon.publishComment}</button>`
                } else {
                    extra += '(under review)'
                }
            }
            var c = document.createElement('div')
            c.className = 'comment'
            c.innerHTML = `
                <div class="text">${comment.text}</div>
                <div class="meta">
                    by <span class="name">${comment.name}</span>
                    <span class="date">${comment.date}</span>
                    ${extra}
                </div>
            `
            c.querySelectorAll('button.publish-comment').forEach(button => {
                button.title = "click to publish"
                button.addEventListener("click", event => {
                    button.disabled = true
                    publish_comment(comment.id).then(response => {
                        button.remove()
                    })
                })
            })
            content.append(c)
        })
        var add = document.querySelector('.add-comment')
        add.style.display = 'block'
        cdiv.querySelector('.block').append(add)
        cdiv.querySelector('h3').addEventListener("click", event => {
            var img = cdiv.querySelector('h3 .icon')
            if (cdiv.classList.contains("collapsed")) {
                cdiv.classList.remove("collapsed")
                img.innerHTML = icon.down
            } else {
                cdiv.classList.add("collapsed")
                img.innerHTML = icon.right
            }
        })
}


function clearInvalid() {
    document.querySelectorAll('input.invalid, textarea.invalid').forEach(invalid => {
        invalid.classList.remove('invalid')
    })
}

document.querySelector('button#add-comment').addEventListener('click', event => {
    event.preventDefault()
    event.stopPropagation()
    var valid = true, fields = ['text', 'name', 'email']
    var element = document.querySelector('.add-comment .comment-fields')
    element.querySelectorAll('input:invalid, textarea:invalid').forEach(invalid => {
        if (fields.includes(invalid.name)) {
            invalid.classList.add('invalid')
            valid = false
            console.log('invalid', invalid)
        }
    })
    if (!valid) {
        return
    }
    var data = serializeData(fields);
    data.item = pandora.comment
    api("/comment/", data).then(response => {
        var comment = document.createElement('div')
        comment.classList.add('comment')
        comment.innerHTML = `
            <div class="text"></div>
            <div class="meta">
                by <span class="name"></span>
                on
                <span class="date"></span>
            </div>
        `
        comment.querySelector('.name').innerText = response.name
        comment.querySelector('.date').innerText = response.date
        comment.querySelector('.text').innerText = response.text
        document.querySelector('.comments .comments-content').append(comment)
        document.querySelector('.add-comment textarea').value = ''
        if (!user.username) {
            localStorage.name = data.name
            localStorage.email = data.email
        }
    })
})

function afterLogin() {
    document.querySelector('input[name="csrfmiddlewaretoken"]').value = getCookie('csrftoken')
    user.username = data.username
    document.querySelectorAll('.add-comment input[name="email"]').forEach(input => {
        input.required = false
    })
    document.querySelectorAll('.add-comment input[type="password"]').forEach(input => {
        input.value = ""
        input.required = false
    })
    document.querySelector('.add-comment .buttons.login').classList.remove('active')
    var buttons = document.querySelector('.add-comment .buttons.guest')
    buttons.querySelector('#add-comment').innerText = "Add comment"
    buttons.querySelector('#login').remove()
    buttons.classList.remove('guest')
    buttons.classList.add('active')
    var textarea = document.querySelector('.add-comment textarea')
    textarea.style.display = ""
    textarea.required = true
    document.querySelector('.add-comment .login .error').innerText = ''
    delete localStorage.name
    delete localStorage.email
}

var btnLogin = document.querySelector('.add-comment .buttons.guest button#login')
if (btnLogin) {
    btnLogin.addEventListener('click', event => {
        event.preventDefault()
        event.stopPropagation()
        clearInvalid()
        document.querySelector('.add-comment .buttons.guest').classList.remove('active')
        document.querySelector('.add-comment .user-info').style.display = "none"
        document.querySelector('.add-comment .buttons.login').classList.add('active')
        var textarea = document.querySelector('.add-comment textarea')
        textarea.style.display = "none"
        textarea.required = false

    })
    document.querySelector('.add-comment .buttons.login button#login').addEventListener("click", event => {
        event.preventDefault()
        event.stopPropagation()
        clearInvalid()
        if (!document.querySelectorAll('.add-comment .login input:invalid').length) {
            event.target.disabled = true
            var data = serializeData()
            login({
                "username": data.username,
                "password": data.password,
            }).then(response => {
                if (response.error) {
                    document.querySelector('.add-comment .login .error').innerText = response.error
                    event.target.disabled = false
                } else {
                    afterLogin()
                }
            })
        } else {
            document.querySelectorAll('.add-comment .login input:invalid').forEach(invalid => {
                invalid.classList.add('invalid')
            })
            document.querySelector('.add-comment .login .error').innerText = ''
        }
    })
    document.querySelector('.add-comment .buttons.login button#register').addEventListener("click", event => {
        event.preventDefault()
        event.stopPropagation()
        clearInvalid()
        var login = document.querySelector('.add-comment .buttons.login button#login')
        var email = document.querySelector('.add-comment .buttons.login input[name="email"]')
        if (login.style.display == "none") {
            if (!document.querySelectorAll('.add-comment .login input:invalid').length) {
                event.target.disabled = true
                var data = serializeData()
                register({
                    "username": data.username,
                    "password": data.password,
                    "email": data.email,
                }).then(response => {
                    if (response.error) {
                        document.querySelector('.add-comment .login .error').innerText = response.error
                        event.target.disabled = false
                    } else {
                        afterLogin()
                    }
                })

            } else {
                document.querySelectorAll('.add-comment .login input:invalid').forEach(invalid => {
                    invalid.classList.add('invalid')
                })
                document.querySelector('.add-comment .login .error').innerText = ''
            }
        } else {
            document.querySelector('.add-comment .login .error').innerText = ''
            login.style.display = "none"
            email.required = true
            email.style.display = "block"
        }
    })
}

if (!user.username) {
    if (localStorage.name) {
        document.querySelector('.add-comment .comment-fields input[name="name"]').value = localStorage.name
    }
    if (localStorage.email) {
        document.querySelector('.add-comment .comment-fields input[name="email"]').value = localStorage.email
    }
}