xssbook/public/js/profile.js

function swap(value) {
    let postsb = document.getElementById("profilepostbutton");
    let aboutb = document.getElementById("profileaboutbutton");
    let posts = document.getElementById("posts");
    let about = document.getElementById("about");
    if (value) {
        postsb.classList.add("selected")
        aboutb.classList.remove("selected")
        about.classList.add("hidden")
        posts.classList.remove("hidden")
    } else {
        postsb.classList.remove("selected")
        aboutb.classList.add("selected")
        about.classList.remove("hidden")
        posts.classList.add("hidden")
    }
}

function changeimage(fn) {

    var input = document.createElement('input')
    input.type = 'file'
    input.accept= 'image/png'

    input.onchange = async (e) => { 

        var popup = document.getElementById("popup")
        var loader = popup.getElementsByClassName("loading")[0]
        var message = popup.getElementsByClassName("message")[0]

        loader.classList.add("hidden")
        message.innerHTML = '';
        popup.classList.remove("hidden")

        var file = e.target.files[0];
        if (file.type !== 'image/png') {
            message.innerHTML = 'Image must be a PNG';
            return
        }

        loader.classList.remove("hidden")

        let response = await fn(file);
        
        loader.classList.add("hidden")
        message.innerHTML = response.msg
    }

    input.click();
}

function render() {
    const html = `
    <div id="top">
        <div id="banner">
            <div class="bg">
                ${banner(data.user.user_id)}
            </div>
            ${ isself ? `<div class="changebanner" onclick="changeimage(updatebanner)"></div>` : '' }
        </div>
        <div id="info">
            <div class="face">
                ${pfp(data.user.user_id)}
                ${ isself ? `<div class="changeavatar" onclick="changeimage(updateavatar)"></div>` : '' }
            </div>
            <div class="infodata">
                <span class="bold ltext">${data.user.firstname + ' ' + data.user.lastname}</span>
                <span class="gtext">Joined ${parseDate(new Date(data.user.date))}</span>
            </div>
        </div>
        <div class="fullline" style="width: 80em; margin-bottom: 0; z-index: 0;"></div>
        <div class="profilebuttons">
            <button id="profilepostbutton" class="${posts ? 'selected' : ''}" onclick="swap(true)">
                Posts
            </button>
            <button id="profileaboutbutton" class="${posts ? '' : 'selected'}" onclick="swap(false)">
                About
            </button>
            <div style="flex: 20"></div>
            ${ isself ? `<button class="logout" onclick="logout_button()">Logout</button>` : ''}
        </div>
    </div>
    `

    append(html)

    const postsh = `
    <div id="posts" class="${posts ? '' : 'hidden'}">
        ${data.posts.map(p => parsePost(p)).join('')}
    </div>
    <div id="load">
        <a class="bold gtext" onclick="loadMore()">Load more posts</a>
    </div>
    `
    
    
    append(postsh)

    const about = `
    <div id="about" class="post ${posts ? 'hidden' : ''}">
        <span class="bold ltext">About</span>
        <div class="data">
            <span class="gtext bold">Name: ${data.user.firstname + ' ' + data.user.lastname}</span>
            <span class="gtext bold">Email: ${data.user.email}</span>
            <span class="gtext bold">Gender: ${data.user.gender}</span>
            <span class="gtext bold">Birthday: ${parseMonth(data.user.month) + ' ' + data.user.day + ', ' + data.user.year}</span>
            <span class="gtext bold">User ID: ${data.user.user_id}</span>
        </div>
    </div>
    `

    append(about)

    const popup = `
    <div id="popup" class="hidden">
        <div class="createpost">
            <div class="close" onclick="document.getElementById('popup').classList.add('hidden')"></div>
            <span class="ltext ctext bold">Uploading</span>
            <div class="fullline"></div>
            <div class="fullwidth"><div class="loading"><div></div><div></div><div></div><div></div></div></div>
            <span class="message ctext" style="padding-top: 10px"></span>
        </div>
    </div>
    `

    append(popup)

}

async function logout_button() {
    const response = await logout()
    if (response.status != 200) return;
    location.href = '/login'
}

async function loadMore() {
    const posts = await load()
    data.posts.push(... posts)
    const posts_block = document.getElementById("posts")
    for (p of posts) {
        append(parsePost(p), posts_block)
    }
}

var posts = true
var isself = false
var page = 0
var id

async function load() {
    const posts = (await loadusersposts(id, page)).json
    if (posts.length === 0) {
        page = -1
        remove('load')
    } else {
        page++
    }
    let batch = []
    if (!isself) {
        batch.push(id)
    }
    for (const post of posts) {
        for(const comment of post.comments) {
            if (data.users[comment[0]] !== undefined) continue
            if (batch.includes(comment[0])) continue
            batch.push(comment[0])
        }
        if (data.users[post.user_id] !== undefined) continue
        if (batch.includes(post.user_id)) continue
        batch.push(post.user_id)
    }
    const users = batch.length == 0 ? [] : (await loadusers(batch)).json
    for (const user of users) {
        data.users[user.user_id] = user
    }
    return posts
}

async function init() {

    let request = await loadself()
    if (request.status === 429) {
        header(false, false)
        throw new Error("Rate limited");
    }

    data.self = request.json;
    data.users[data.self.user_id] = data.self

    header(false, false, data.self.user_id)
    
    var params = {};
    for (const [key, value] of new URLSearchParams(location.search)) {
        params[key] = value
    }

    if (params.id !== undefined && !isNaN(params.id)) {
        id = parseInt(params.id);
    } else {
        id = data.self.user_id
    }

    isself = id === data.self.user_id

    const posts = await load()
    data.posts.push(... posts)
    data.user = data.users[id]
    render()
}

init()