big commit

src/routes/+layout.js

@@ -0,0 +1,7 @@
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, params }) {
+    const res = await fetch(`/api/session`);
+    const username = await res.text();
+    
+    return { username };
+}

src/routes/+layout.svelte

@@ -0,0 +1,91 @@
+<style>
+    :global(:root) {
+        --dark-1: #1a1b1d;
+        --dark-2: #22242b;
+
+        --light-1: #ffffff;
+        
+        --hyperlink: #97b9eb;
+
+        color: var(--light-1);
+        font-family: 'Open Sans';
+    }
+
+    :global(a) {
+        color: var(--hyperlink);
+        text-decoration: none;
+    }
+
+    :global(input, textarea) {
+        border: 0;
+        border-radius: 0.2rem;
+    }
+
+    #content {
+        background: var(--dark-2);
+
+        height: 100vh;
+        width: calc(100vw - 50px);
+        padding: 25px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        overflow-y: scroll;
+    }
+
+    #logo {
+        background: var(--dark-1);
+
+        padding: 10px;
+
+        border-radius: 50px;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    #logo a {
+        padding: 10px;
+    }
+
+    #logo img {
+        height: auto;
+        width: 125px;
+
+        display: block;
+    }
+</style>
+
+<script>
+    /** @type {import('./$types').PageData} */
+    export let data;
+</script>
+
+<div id='content'>
+    <div id='logo'>
+        <a href='/'>
+            <img src='/logo_sanifae.svg' alt='Sanifae Logo'>
+        </a>
+        {#if data.username}
+            <a href='/users/{data.username}'>
+                {data.username}
+            </a>
+            <a href='/logout'>
+                Log out
+            </a>
+            <a href='/new_post'>
+                Create
+            </a>
+        {:else}
+            <a href='/account'>
+                Log in / Register
+            </a>
+        {/if}
+    </div>
+    <slot></slot>
+</div>
+

src/routes/+page.svelte

@@ -1,2 +1,15 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+    import Area from '$lib/Area.svelte';
+</script>
+
+<Area>
+    <p slot="header">
+        Welcome to SvelteKit
+    </p>
+    <p slot="main">
+        Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
+    </p>
+    <p slot="footer">
+        
+    </p>
+</Area>

src/routes/account/+page.server.js

@@ -0,0 +1,59 @@
+import { checkLength, checkRegex } from '../../lib/util.js';
+import { registerBackend, loginBackend } from '../../lib/db.js';
+
+async function basicChecks(data) {
+  const pass = data.get('pass') + '';
+  const user = data.get('user') + '';
+
+  var lengthCheck = false;
+
+  lengthCheck = 
+    checkLength(pass,'Password',4,1024) ||
+    checkLength(user,'Username',1,64) ||
+    checkRegex(user,'Username',/[^A-Za-z0-9\-\_]/g);
+
+  return {
+    user,
+    pass,
+    lengthCheck
+  };
+}
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+  register: async ({ request }) => {
+    const data = await request.formData();
+
+    const pass2 = data.get('pass2') + '';
+
+    var {lengthCheck, user, pass} = await basicChecks(data);
+
+    if (lengthCheck)
+      return lengthCheck;
+
+    if (pass != pass2)
+      return { success: 'Failed to confirm password.' };
+    
+    return await registerBackend({ user, pass });
+  },
+
+  login: async ({ request, cookies }) => {
+    const data = await request.formData();
+
+    var {lengthCheck, user, pass} = await basicChecks(data);
+
+    if (lengthCheck)
+      return lengthCheck;
+    
+    var result = await loginBackend({ user, pass });
+
+    if (result.token) {
+      cookies.set('token',result.token, {
+        maxAge: 60 * 60 * 24 * 7,
+        path: '/'
+      });
+    }
+
+    return result;
+  }
+};

src/routes/account/+page.svelte

@@ -0,0 +1,37 @@
+<script>
+    import Area from '$lib/Area.svelte';
+
+    /** @type {import('./$types').PageData} */
+    export let data;
+    /** @type {import('./$types').ActionData} */
+    export let form;
+</script>
+
+<Area>
+    <p slot="header">
+        Log in / Register
+    </p>
+    <form slot="main" method='POST'>
+        <p>
+            Username: <input name='user'>
+        </p>
+        <p>
+            Password: <input type='password' name='pass'>
+        </p>
+        <p>
+            Confirm Password: <input type='password' name='pass2'>
+        </p>
+        <p>
+            <input formaction="?/login" type='submit' value='Log in'>
+        </p>
+        <p>
+            <input formaction="?/register" type='submit' value='Register'>
+        </p>
+    </form>
+    <p slot="footer">
+        {#if form?.success}
+            <p>{form?.success}</p>
+        {/if}
+        By using the Sanifae service, you agree to the <a href='https://insfa.net/rules'>Terms of Service</a>.
+    </p>
+</Area>

src/routes/api/post/+server.js

@@ -0,0 +1,10 @@
+import { postGetBackend } from '../../../lib/db.js';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url, cookies }) {
+    var id = url.searchParams.get('post');
+
+    var postData = await postGetBackend({ id });
+
+    return new Response(JSON.stringify(postData));
+};

src/routes/api/session/+server.js

@@ -0,0 +1,11 @@
+import { tokenBackend } from '../../../lib/db.js';
+
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url, cookies }) {
+    var token = cookies.get('token') || '';
+
+    var username = await tokenBackend({token});
+
+    return new Response(username + '');
+};

src/routes/new_post/+page.server.js

@@ -0,0 +1,27 @@
+import { tokenBackend, postCreateBackend } from '../../lib/db.js';
+import { checkLength, checkRegex } from '../../lib/util.js';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+    create: async ({ request, cookies }) => {
+        
+        var user = await tokenBackend({
+            token: cookies.get('token') 
+        });
+
+        if (!user)
+            return {'success': 'Not logged in.'}
+
+        const data = await request.formData();
+        const content = data.get('content') + '';
+
+        var lengthCheck = checkLength(content,'Post content',1,10240);
+
+        if (lengthCheck)
+            return lengthCheck;
+
+        await postCreateBackend({user, content});
+
+        return {'success': 'Successfully posted.'};
+    }
+};

src/routes/new_post/+page.svelte

@@ -0,0 +1,35 @@
+<script>
+    import Area from '$lib/Area.svelte';
+
+    /** @type {import('./$types').PageData} */
+    export let data;
+    /** @type {import('./$types').ActionData} */
+    export let form;
+</script>
+
+<style>
+    textarea {
+        width: 10rem;
+        height: 10rem;
+    }
+</style>
+
+<Area>
+    <p slot="header">
+        Create Post
+    </p>
+    <form slot="main" method='POST'>
+        <p>
+            <textarea name='content'></textarea>
+        </p>
+        <p>
+            <input formaction="?/create" type='submit' value='Post'>
+        </p>
+    </form>
+    <p slot="footer">
+        {#if form?.success}
+            <p>{form?.success}</p>
+        {/if}
+        Create a post for the world to see.
+    </p>
+</Area>

src/routes/post/[post]/+page.js

@@ -0,0 +1,12 @@
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, params, url }) {
+    var id = params.post;
+    const res = await fetch(`/api/post?post=${id}`);
+    const postJson = await res.json();
+
+    var search = url.searchParams;
+
+    var voteType = (search.get('upvote')) ? 1 : ((search.get('downvote')) ? 2 : 0);
+    
+    return { postJson };
+}

src/routes/post/[post]/+page.svelte

@@ -0,0 +1,65 @@
+<script>
+    import Area from '$lib/Area.svelte';
+
+    /** @type {import('./$types').PageData} */
+    export let data;
+    /** @type {import('./$types').ActionData} */
+    export let form;
+</script>
+
+<style>
+    .button {
+        width: auto;
+        height: 75px;
+    }
+    .votes {
+        font-weight: bold;
+        font-size: 1.5rem;
+    }
+    .vote-area {
+        margin-right: 30px;
+    }
+</style>
+
+{#if data.postJson.success}
+    <Area>
+        <p slot="header">
+            Error
+        </p>
+        <p slot="main">
+            {data.postJson.success}
+        </p>
+        <p slot="footer">
+            Failed to get post.
+        </p>
+    </Area>
+{:else}
+    <Area>
+        <p slot="header">
+            <a href='/users/{data.postJson.username}'>
+                {data.postJson.username}
+            </a>
+        </p>
+        <p slot="main">
+            {data.postJson.content}
+        </p>
+        <p slot="footer">
+            <span class='vote-area'>
+                <a href='?upvote'>
+                    <img src='/upvote.svg' class='button' alt='Upvote'>
+                </a>
+                <span class='votes'>
+                    {data.postJson.upvotes + 0}
+                </span>
+            </span>
+            <span class='vote-area'>
+                <a href='?downvote'>
+                    <img src='/downvote.svg' class='button' alt='Downvote'>
+                </a>
+                <span class='votes'>
+                    {data.postJson.downvotes + 0}
+                </span>
+            </span>
+        </p>
+    </Area>
+{/if}