i did things

7 files changed, 525 insertions, 0 deletions

diff --git a/public/js/api.js b/public/js/api.js
new file mode 100644
index 0000000..07769f6
--- /dev/null
+++ b/public/js/api.js
@@ -0,0 +1,63 @@
+const endpoint = '/api'
+
+const request = async (url, body, method) => {
+    if (method === undefined) method = 'POST'
+    const response =  await fetch(endpoint + url, {
+        method,
+        body: JSON.stringify(body),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (response.status == 401) {
+        location.href = 'login'
+    }
+    const contentType = response.headers.get("content-type");
+    if (contentType && contentType.indexOf("application/json") !== -1) {
+        const json = await response.json()
+        return { status: response.status, msg: json.msg, json }
+    } else {
+        const msg = await response.text();
+        return { status: response.status, msg }
+    }
+}
+
+const login = async (email, password) => {
+    return await request('/auth/login', {email, password})
+}
+
+const register = async (firstname, lastname, email, password, gender, day, month, year) => {
+    return await request('/auth/register', {firstname, lastname, email, password, gender, day, month, year})
+}
+
+const loadpostspage = async (page) => {
+    return await request('/posts/page', {page})
+}
+
+const loadusersposts = async (user_id) => {
+    return await request('/posts/user', {user_id})
+}
+
+const loadusers = async (ids) => {
+    return await request('/users/load', {ids})
+}
+
+const loaduserspage = async (page) => {
+    return await request('/users/page', {page})
+}
+
+const loadself = async () => {
+    return await request("/users/self", {})
+}
+
+const postcomment = async (post_id, content) => {
+    return await request('/posts/comment', {post_id, content}, 'PATCH')
+}
+
+const postlike = async (post_id, state) => {
+    return await request('/posts/like', {post_id, state}, 'PATCH')
+}
+
+const createpost = async (content) => {
+    return await request('/posts/create', {content})
+}
\ No newline at end of file
diff --git a/public/js/header.js b/public/js/header.js
new file mode 100644
index 0000000..8fe03e5
--- /dev/null
+++ b/public/js/header.js
@@ -0,0 +1,25 @@
+function header(home, people) {
+    const html = `
+    <div id="header">
+        <span class="logo"><a href="/">xssbook</a></span>
+        <div class="buttons">
+            <a id="home" ${home ? 'class="selected"' : ''} href="home">
+                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
+                    <path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29"></path>
+                </svg>
+            </a>
+            <a id="people" ${people ? 'class="selected"' : ''} href="people">
+                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
+                    <path d="M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"></path>
+                </svg>
+            </a>
+        </div>
+        <a class="pfp" id="profile" hreF="profile">
+            
+        </a>
+    </div>
+    <div class="spacer"></div>
+    `
+
+    add(html, 'header')
+}
\ No newline at end of file
diff --git a/public/js/home.js b/public/js/home.js
new file mode 100644
index 0000000..fd40ebf
--- /dev/null
+++ b/public/js/home.js
@@ -0,0 +1,233 @@
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function parseDate(date) {
+    return months[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear() + ' ' + date.toLocaleTimeString();
+}
+
+function parseComment(comment) {
+    const author = data.users[comment[0]]
+    if (author === undefined) {
+        author = {}
+    }
+    const html = `
+    <div class="comment">
+        <a class="pfp">
+        
+        </a>
+        <span>
+            <span class="bold mtext">${author.firstname + ' ' + author.lastname}</span>
+            <p class="mtext">${comment[1]}</p>
+        </span>
+    </div>
+    `
+    return html
+}
+
+function parsePost(post) {
+    console.log(post.likes)
+    const author = data.users[post.user_id]
+    if (author === undefined) {
+        author = {}
+    }
+    const html = `
+    <div class="post" postid=${post.post_id}>
+        <div class="postheader">
+            <a class="pfp">
+                
+            </a>
+            <div class="postname">
+                <span class="bold">${author.firstname + ' ' + author.lastname}</span>
+                <span class="gtext mtext">${parseDate(new Date(post.date))}</span>
+            </div>
+        </div>
+        <p class="mtext">
+            ${post.content.replace(/\n/g,'<br>')}
+        </p>
+        <span class="gtext mtext">
+                ${Object.keys(post.likes).map(k => post.likes[k]).filter(v => v !== false).length} Likes
+        </span>
+        <div class="fullline nb"></div>
+        <div class="postbuttons">
+            <span onclick="like(this)">
+                <i class="icons like ${post.likes.includes(data.user.user_id) ? 'blue' : ''}"></i>
+                <span class="bold ${post.likes.includes(data.user.user_id) ? 'blue' : ''}">Like</span>
+            </span>
+            <span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
+                <i class="icons comm"></i>
+                <span class="bold">Comment</span>
+            </span>
+        </div>
+        <div id="comments">
+            <div class="fullline" style="margin-top: 0"></div>
+            ${post.comments.map(parseComment).join('')}
+            <div class="comment">
+                <a class="pfp" href="profile">
+                
+                </a>
+                <form onsubmit="comment(event)">
+                    <input type="text" name="text" placeholder="Write a comment..." id="newcomment" class="newcomment">
+                </form>
+            </div>
+        </div>
+    </div>  
+    `
+
+    return html
+}
+
+function getPost(post_id) {
+    for (let i = 0; i < data.posts.length; i++) {
+        if (data.posts[i].post_id === post_id) {
+            return i
+        }
+    }
+    return -1
+}
+
+async function like(span) {
+    const id = parseInt(span.parentElement.parentElement.getAttribute('postid'))
+    const post = data.posts[getPost(id)]
+    const index = post.likes.indexOf(data.user.user_id)
+    const current = index !== -1
+    const response = await postlike(id, !current)
+    if (response.status != 200) return;
+    if (current) {
+        post.likes.splice(index, 1)
+    } else {
+        post.likes.push(data.user.user_id)
+    }
+    render()
+}
+
+async function comment(event) {
+    event.preventDefault();
+    const text = event.target.elements.text.value.trim();
+    if (text.length < 1) return;
+    const id = parseInt(event.target.parentElement.parentElement.parentElement.getAttribute('postid'))
+    var index = getPost(id);
+    if (index === -1) return;
+    const response = await postcomment(id, text)
+    if (response.status != 200) return;
+    event.target.elements.text.value = '';
+    data.posts[index].comments.push([data.user.user_id, text])
+    render()
+}
+
+async function post() {
+    const text = document.getElementById("text").value.trim()
+    const error = document.getElementsByClassName('error')[0]
+    if (text.length < 1) return;
+    const response = await createpost(text);
+    if (response.status != 201) {
+        error.innerHTML = response.msg
+        return;
+    }
+    error.innerHTML = '';
+    data.posts.unshift({
+        post_id: response.msg,
+        user_id: data.user.user_id,
+        date: Date.now(),
+        content: text,
+        likes: [],
+        comments: []
+    })
+    render()
+}
+
+function render() {
+    const html = `
+    <div id="posts">
+        <div class="create">
+            <a class="pfp" href="profile">
+                    
+            </a>
+            <button class="pfp">
+                <p class="gtext" onclick="document.getElementById('popup').classList.remove('hidden')">
+                    What's on your mind, ${data.user.firstname}?
+                </p>
+            </button>
+        </div>
+        ${data.posts.map(p => parsePost(p)).join('')}
+    </div>
+    `
+    
+    add(html, 'posts')
+
+    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">Create post</span>
+            <div class="fullline"></div>
+            <div class="postheader">
+                <a class="pfp" style="cursor: auto">
+                    
+                </a>
+                <div class="postname">
+                    <span class="bold">${data.user.firstname + ' ' + data.user.lastname}</span>
+                    <span class="gtext mtext">Now</span>
+                </div>
+            </div>
+            <textarea type="text" name="text" id="text" placeholder="What's on your mind, ${data.user.firstname}?"></textarea>
+            <span class="error ctext" style="padding-bottom: 15px; margin-top: -30px;"></span>
+            <button class="primary" onclick="post(this)">Post</button>
+        </div>
+    </div>
+    `
+
+    add(popup, 'popup')
+
+    const load = `
+    <div id="load">
+        <a class="bold gtext" onclick="load()">Load more posts</a>
+    </div>
+    `
+
+    if (page !== -1) {
+        add(load, 'load')
+    } else {
+        remove('load')
+    }
+}
+
+var page = 0
+const data = {
+    user: {},
+    users: {},
+    posts: []
+}
+
+async function load() {
+    const posts = (await loadpostspage(page)).json
+    if (posts.length === 0) {
+        page = -1
+    } else {
+        page++
+    }
+    data.posts.push(... posts)
+    const batch = []
+    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 = (await loadusers(batch)).json
+    for (const id in users) {
+        data.users[id] = users[id]
+    }
+    render()
+}
+
+
+async function init() {
+    header(true, false)
+    data.user = (await loadself()).json
+    data.users[data.user.user_id] = data.user
+    load()
+}
\ No newline at end of file
diff --git a/public/js/login.js b/public/js/login.js
new file mode 100644
index 0000000..f65808b
--- /dev/null
+++ b/public/js/login.js
@@ -0,0 +1,29 @@
+async function onlogin() {
+    const email = document.getElementById('email').value
+    const password = document.getElementById('pass').value
+    const response = await login(email, password)
+    if (response.status !== 200) {
+        const error = document.getElementsByClassName('error')[0]
+        error.innerHTML = response.msg
+    } else {
+        location.href = '/home'
+    }
+}
+
+async function onregister() {
+    const first = document.getElementById('firstname').value
+    const last = document.getElementById('lastname').value
+    const email = document.getElementById('newemail').value
+    const pass = document.getElementById('newpass').value
+    const month = document.getElementById('month').value
+    const day = document.getElementById('day').value
+    const year = document.getElementById('year').value
+    const gender = document.querySelector('input[name="gender"]:checked').value  
+    const response = await register(first, last, email, pass, gender, parseInt(day), parseInt(month), parseInt(year))
+    if (response.status !== 200) {
+        const error = document.getElementsByClassName('error')[1]
+        error.innerHTML = response.msg
+    } else {
+        location.href = '/home'
+    }
+}
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
new file mode 100644
index 0000000..0003c0d
--- /dev/null
+++ b/public/js/main.js
@@ -0,0 +1,22 @@
+var range;
+
+function add(html, id) {
+    const old = document.getElementById(id)
+    if (old !== null) {
+        old.remove()
+    }
+    if (range === undefined) {
+        var range = document.createRange()
+        range.setStart(document.body, 0)
+    }
+    document.body.appendChild(
+        range.createContextualFragment(html)
+    )
+}
+
+function remove(id) {
+    const old = document.getElementById(id)
+    if (old !== null) {
+        old.remove()
+    }
+}
\ No newline at end of file
diff --git a/public/js/people.js b/public/js/people.js
new file mode 100644
index 0000000..ddd1875
--- /dev/null
+++ b/public/js/people.js
@@ -0,0 +1,65 @@
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function parseDate(date) {
+    return months[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear() + ' ' + date.toLocaleTimeString();
+}
+
+function parseUser(user) {
+    const html = `
+        <a class="person" href="/profile?id=${user.id}">
+            <div class="profile">
+
+            </div>
+            <div class="info">
+                <span class="bold ltext">${user.firstname + ' ' + user.lastname}</span>
+                <span class="gtext">Joined ${parseDate(new Date(user.date))}</span>
+                <span class="gtext">Gender: ${user.gender}</span>
+                <span class="gtext">Birthday: ${months[user.month] + ' ' + user.day + ', ' + user.year}</span>
+                <span class="gtext" style="margin-bottom: -100px;">User ID: ${user.user_id}</span>
+            </div>
+        </a>
+    `
+    return html
+}
+
+function render() {
+    const html = `
+    <div id="users">
+        ${data.users.map(u => parseUser(u)).join('')}
+    </div>
+    `
+
+    add(html, 'users')
+
+    const load = `
+    <div id="load">
+        <a class="bold gtext" onclick="load()">Load more users</a>
+    </div>
+    `
+
+    if (page !== -1) {
+        add(load, 'load')
+    } else {
+        remove('load')
+    }
+}
+
+var page = 0
+var data = {
+    users: []
+}
+
+async function load() {
+    const users = (await loaduserspage(page)).json
+    if (users.length === 0) {
+        page = -1
+    } else {
+        page++
+    }
+    data.users.push(... users)
+    render()
+}
+
+header(false, true)
+load()
\ No newline at end of file
diff --git a/public/js/profile.js b/public/js/profile.js
new file mode 100644
index 0000000..79dbe2f
--- /dev/null
+++ b/public/js/profile.js
@@ -0,0 +1,88 @@
+function render() {
+    const html = `
+    <div id="top">
+        <div id="banner">
+            <div>
+                    
+            </div>
+        </div>
+        <div id="info">
+            <div class="face">
+                
+            </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;"></div>
+        <div class="profilebuttons">
+            <button class="${posts ? 'selected' : ''}" onclick="posts = true; render()">
+                Posts
+            </button>
+            <button class="${posts ? '' : 'selected'}" onclick="posts = false; render()">
+                About
+            </button>
+        </div>
+    </div>
+    `
+
+    add(html, 'top')
+
+    const postsh = `
+    <div id="posts" class="${posts ? '' : 'hidden'}">
+        ${data.posts.map(p => parsePost(p)).join('')}
+    </div>
+    `
+    
+    add(postsh, 'posts')
+
+    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: ${months[data.user.month] + ' ' + data.user.day + ', ' + data.user.year}</span>
+            <span class="gtext bold">User ID: ${data.user.user_id}</span>
+        </div>
+    </div>
+    `
+
+    add(about, 'about')
+}
+
+var posts = true
+
+async function load() {
+    header(false, false)
+
+    var params = {};
+    for (const [key, value] of new URLSearchParams(location.search)) {
+        params[key] = value
+    }
+
+    const id = params.id !== undefined && !isNaN(params.id) ? parseInt(params.id) : (await loadself()).json.user_id
+    const posts = (await loadusersposts(id)).json
+    data.posts.push(... posts)
+    const batch = [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 = (await loadusers(batch)).json
+    for (const user of users) {
+        data.users[user.user_id] = user
+    }
+    data.user = data.users[id]
+    render()
+}
+
+load()
\ No newline at end of file