From eba1a4543f6848e6e6c5ab8ca740c8c4f943341e Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Sat, 11 Dec 2021 12:01:36 +0100
Subject: [PATCH] feat: a whole lot of stuff

---
 src/App.svelte                     |   7 +-
 src/assets/default_avatar.png      | Bin 0 -> 3519 bytes
 src/functions.ts                   |  23 ++++++
 src/lib/CardsHeader.svelte         |  32 +++++++++
 src/lib/Navigation.svelte          |  79 +++++++++++---------
 src/lib/cards/PrivateSystem.svelte |  53 ++++++++++++++
 src/pages/Dash.svelte              |  80 +++++++++++++++++++++
 src/pages/Home.svelte              | 112 +++++++++++++++++++++++++++++
 src/stores.ts                      |  25 +++++++
 style.css                          |  53 ++++++++++++++
 10 files changed, 428 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/default_avatar.png
 create mode 100644 src/functions.ts
 create mode 100644 src/lib/CardsHeader.svelte
 create mode 100644 src/lib/cards/PrivateSystem.svelte
 create mode 100644 src/pages/Dash.svelte
 create mode 100644 src/pages/Home.svelte
 create mode 100644 src/stores.ts
 create mode 100644 style.css

diff --git a/src/App.svelte b/src/App.svelte
index 2ed49af3..220a6683 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { Router, Link, Route } from "svelte-navigator";
   import Navigation from "./lib/Navigation.svelte";
+  import Dash from "./pages/Dash.svelte";
+  import Home from "./pages/Home.svelte";
   
 
   // theme cdns (I might make some myself too)
@@ -40,7 +42,10 @@
   <Navigation bind:style={style}/>
   <div>
     <Route path="/">
-        <h2>Ooga booga</h2>
+        <Home />
+    </Route>
+    <Route path="/dash">
+      <Dash />
     </Route>
   </div>
 </Router>
\ No newline at end of file
diff --git a/src/assets/default_avatar.png b/src/assets/default_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..753346aa04ad162ef9ce416016276bc6d58d0047
GIT binary patch
literal 3519
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
I+74g;3ojmVW&i*H

literal 0
HcmV?d00001

diff --git a/src/functions.ts b/src/functions.ts
new file mode 100644
index 00000000..dd21fc51
--- /dev/null
+++ b/src/functions.ts
@@ -0,0 +1,23 @@
+import { currentUser, loggedIn } from "./stores";
+import PKAPI from "./api";
+import type Sys from './api/system';
+
+
+function blockQuote(text: string) {
+    let match = text.match(/(?<=\n|^)(> [^\n]*(?:\n>[^\n]*)*)/gim);
+    let parse: string[] = [];
+    for (let i = 0; i < match.length; i++) {
+        parse[i] = match[i].replace(/(?<=\n|^)> ?/gim, "");
+        text = text.replace(match[i], `<div class="bq">${parse[i]}</div>`);
+    }
+    return text;
+}
+
+export function parseMarkdown(text: string) {
+    text = blockQuote(text);
+    text = text.replace(/\*{3}(.*?)\*{3}/gim, '<b><i>$1</i></b>');
+    text = text.replace(/\*{2}(.*?)\*{2}/gim, '<b>$1</b>');
+    text = text.replace(/\*{1}(.*?)\*{1}/gim, '<i>$1</i>');
+    text = text.replace(/\n/gim, '<br />')
+    return text;
+}
\ No newline at end of file
diff --git a/src/lib/CardsHeader.svelte b/src/lib/CardsHeader.svelte
new file mode 100644
index 00000000..0dfdbcf0
--- /dev/null
+++ b/src/lib/CardsHeader.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { Modal, CardHeader, CardTitle, Image } from 'sveltestrap';
+    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
+    import default_avatar from '../assets/default_avatar.png';
+    import type Sys from '../api/system';
+
+    export let item: Sys;
+
+    let avatarOpen = false;
+    const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
+</script>
+
+<CardHeader>
+    <CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle">
+        <div>
+            <div class="icon d-inline-block">
+                <FaUserCircle />
+            </div>
+            <span style="vertical-align: middle;">{item.name} ({item.id})</span>
+        </div>
+        {#if item && item.avatar_url}
+        <img on:click={toggleAvatarModal} class="rounded-circle avatar" src={item.avatar_url} alt="Your system avatar" />
+        {:else}
+        <img class="rounded-circle avatar" src={default_avatar} alt="your system avatar (default)" />
+        {/if}
+        <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
+            <div slot="external" on:click={toggleAvatarModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                <Image style="display: block; margin: auto;" src={item.avatar_url} thumbnail alt="Your system avatar" />
+            </div>
+        </Modal>
+    </CardTitle>
+</CardHeader>
\ No newline at end of file
diff --git a/src/lib/Navigation.svelte b/src/lib/Navigation.svelte
index a9302958..c541dc34 100644
--- a/src/lib/Navigation.svelte
+++ b/src/lib/Navigation.svelte
@@ -1,42 +1,51 @@
 <script lang="ts">
     import {Navbar, NavbarBrand, Nav, NavItem, NavLink, Collapse, NavbarToggler, Dropdown, DropdownItem, DropdownMenu, DropdownToggle} from 'sveltestrap';
-    import { createEventDispatcher } from 'svelte';
+    import { loggedIn } from '../stores';
+    import { Link } from 'svelte-navigator';
 
-	const dispatch = createEventDispatcher();
-
-    function changeStyle(style: string) {
-        dispatch('styleChange', style.toLowerCase());
-    }
+    export let style: string;
 
     let isOpen = false;
-
     const toggle = () => (isOpen = !isOpen);
-</script>
 
-<Navbar color="transparent" light expand="lg">
-    <NavbarBrand>pk-webs</NavbarBrand>
-    <NavbarToggler on:click={toggle}></NavbarToggler>
-    <Collapse {isOpen} navbar expand="lg">
-        <Nav class="ms-auto" navbar>
-            <Dropdown nav inNavbar>
-                <DropdownToggle>Styles</DropdownToggle>
-                <DropdownMenu end>
-                    <DropdownItem on:click={() => changeStyle("light")}>Light</DropdownItem>
-                    <DropdownItem on:click={() => changeStyle("dark")}>Dark</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <NavItem>
-                <NavLink href="/dash">Dash</NavLink>
-            </NavItem>
-            <NavItem>
-                <NavLink href="/settings">Settings</NavLink>
-            </NavItem>
-            <NavItem>
-                <NavLink href="/templates">templates</NavLink>
-            </NavItem>
-            <NavItem>
-                <NavLink href="/public">Public</NavLink>
-            </NavItem>
-        </Nav>
-    </Collapse>
-</Navbar>
\ No newline at end of file
+    let loggedIn_value: boolean;
+
+    loggedIn.subscribe(value => {
+		loggedIn_value = value;
+	});
+</script>
+<div style="background-color: #292929">
+    <Navbar color="light" light expand="lg" class="mb-4">
+        <NavbarBrand>pk-webs</NavbarBrand>
+        <NavbarToggler on:click={toggle}></NavbarToggler>
+        <Collapse {isOpen} navbar expand="lg">
+            <Nav class="ms-auto" navbar>
+                <Dropdown nav inNavbar>
+                    <DropdownToggle color="transparent">Styles</DropdownToggle>
+                    <DropdownMenu end>
+                        <DropdownItem on:click={() => style = "light"}>Light</DropdownItem>
+                        <DropdownItem on:click={() => style = "dark"}>Dark</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+                {#if loggedIn_value || localStorage.getItem("pk-token")}
+                <Dropdown nav inNavbar>
+                    <DropdownToggle color="transparent">Dash</DropdownToggle>
+                    <DropdownMenu end>
+                        <Link to="/dash" state={{tab: "system"}}><DropdownItem>System</DropdownItem></Link>
+                        <Link to="/dash" state={{tab: "members"}}><DropdownItem>Members</DropdownItem></Link>
+                    </DropdownMenu>
+                </Dropdown>
+                {/if}
+                <NavItem>
+                    <NavLink href="/settings">Settings</NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/templates">Templates</NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/public">Public</NavLink>
+                </NavItem>
+            </Nav>
+        </Collapse>
+    </Navbar>
+</div>
\ No newline at end of file
diff --git a/src/lib/cards/PrivateSystem.svelte b/src/lib/cards/PrivateSystem.svelte
new file mode 100644
index 00000000..0586f9fe
--- /dev/null
+++ b/src/lib/cards/PrivateSystem.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { currentUser } from '../../stores';
+    import { Modal, Card, CardHeader, CardBody, CardTitle, Image, ModalHeader, Col, Row, Button } from 'sveltestrap';
+    import CardsHeader from '../CardsHeader.svelte';
+    import { parseMarkdown } from '../../functions';
+
+    export let user;
+    $: htmlDescription = parseMarkdown(user.description);
+
+    let bannerOpen = false;
+    const toggleBannerModal = () => (bannerOpen = !bannerOpen);
+</script>
+
+<Card>
+    <CardsHeader bind:item={user}/>
+    <CardBody style="border-left: 4px solid #{user.color}">
+        <Row>
+            <Col xs={12} lg={4} class="mb-2">
+                <b>ID:</b> {user.id}
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <b>Name:</b> {user.name}
+            </Col>
+            {#if user.tag}
+            <Col xs={12} lg={4} class="mb-2">
+                <b>Tag:</b> {user.tag}
+            </Col>
+            {/if}
+            <Col xs={12} lg={4} class="mb-2">
+                <b>Timezone:</b> {user.timezone}
+            </Col>
+            {#if user.color}
+            <Col xs={12} lg={4} class="mb-2">
+                <b>Color:</b> {user.color}
+            </Col>
+            {/if}
+            {#if user.banner}
+            <Col xs={12} lg={3} class="mb-2">
+                <b>Banner:</b> <Button size="sm" color="light" on:click={toggleBannerModal}>View</Button>
+                <Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
+                    <div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                        <Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="Your system banner" />
+                    </div>
+                </Modal>
+            </Col>
+            {/if}
+            <div class="mt-2">
+                <b>Description:</b><br />
+                {@html htmlDescription}
+            </div>
+        </Row>
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/pages/Dash.svelte b/src/pages/Dash.svelte
new file mode 100644
index 00000000..4bfd8245
--- /dev/null
+++ b/src/pages/Dash.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { Container, Col, Row, TabContent, TabPane, Card } from 'sveltestrap';
+    import { navigate, useLocation } from "svelte-navigator";
+    import { currentUser, loggedIn } from '../stores';
+    
+    import PrivateSystem from '../lib/cards/PrivateSystem.svelte';
+    import PKAPI from '../api';
+    import type Sys from '../api/system';
+
+    let location = useLocation();
+
+    let tabPane = $location.state && $location.state.tab;
+
+    if (tabPane === undefined) {
+        tabPane = "system";
+    }
+
+    let current;
+    currentUser.subscribe(value => {
+        current = value;
+    });
+
+    if (!current) {
+        login(localStorage.getItem("pk-token"));
+    }
+
+    let user = current !== null ? current : JSON.parse(localStorage.getItem("pk-user"));
+
+    if (!localStorage.getItem("pk-token") && !user) {
+        navigate("/");
+    }
+
+    async function login(token: string) {
+        const api = new PKAPI();
+        try {
+            if (!token) {
+                throw new Error("Token cannot be empty.")
+            }
+            const res: Sys = await api.getSystem({token: token});
+            localStorage.setItem("pk-token", token);
+            localStorage.setItem("pk-user", JSON.stringify(res));
+            loggedIn.update(() => true);
+            currentUser.update(() => res);
+            user = res;
+        } catch (error) {
+            console.log(error);
+            localStorage.removeItem("pk-token");
+            localStorage.removeItem("pk-user");
+            currentUser.update(() => null);
+            navigate("/");
+        }
+    }
+    
+</script>
+
+{#if user && user.banner}
+<div class="banner" style="background-image: url({user.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={9}>
+            <TabContent class="mt-3">
+                <TabPane tabId="system" tab="System" active={tabPane === "system"}>
+                    <Card style="border-radius: 0; border: none;">
+                        <PrivateSystem bind:user={user}/>
+                    </Card>
+                </TabPane>
+                <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
+                    <Card style="border-radius: 0; border: none;">
+                        alo
+                    </Card>
+                </TabPane> 
+            </TabContent>
+        </Col>
+    </Row>
+</Container>
+
+<svelte:head>
+    <title>pk-webs | dash</title>
+</svelte:head>
\ No newline at end of file
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
new file mode 100644
index 00000000..c390a366
--- /dev/null
+++ b/src/pages/Home.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { Container, Card, CardHeader, CardBody, CardTitle, Col, Row, Spinner, Input, Button, Label, Alert } from 'sveltestrap';
+    import FaLockOpen from 'svelte-icons/fa/FaLockOpen.svelte';
+    import { loggedIn, currentUser } from '../stores';
+    import { Link } from 'svelte-navigator';
+
+    import PKAPI from '../api/index';
+    import type Sys from '../api/system';
+
+    let loading = false;
+    let err: string;
+    let token: string;
+
+    let isLoggedIn: boolean;
+    let user;
+
+    loggedIn.subscribe(value => {
+		isLoggedIn = value;
+	});
+
+    currentUser.subscribe(value => {
+        user = value;
+    })
+
+    onMount(() => { 
+        if (localStorage.getItem("pk-token")) {
+            login(localStorage.getItem("pk-token"));
+        }
+    });
+
+    async function login(token: string) {
+        loading = true;
+        const api = new PKAPI();
+        try {
+            if (!token) {
+                throw new Error("Token cannot be empty.")
+            }
+            const res: Sys = await api.getSystem({token: token});
+            localStorage.setItem("pk-token", token);
+            localStorage.setItem("pk-user", JSON.stringify(res));
+            err = null;
+            loggedIn.update(() => true);
+            currentUser.update(() => res);
+        } catch (error) {
+            console.log(error);
+            localStorage.removeItem("pk-token");
+            localStorage.removeItem("pk-user");
+            currentUser.update(() => null);
+            err = error.message;
+        }
+        loading = false;
+    }
+
+
+    function logout() {
+        token = null;
+        localStorage.removeItem("pk-token");
+        localStorage.removeItem("pk-user");
+        loggedIn.update(() => false);
+        currentUser.update(() => null);
+    }
+
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={9}>
+            {#if err}
+                <Alert color="danger" >{err}</Alert>
+            {/if}
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaLockOpen />
+                        </div>Log in {#if loading} <div style="float: right"><Spinner color="primary" /></div> {/if}
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    {#if loading}
+                        verifying login...
+                    {:else if isLoggedIn}
+                        {#if user && user.name}
+                            <p>Welcome back, <b>{user.name}</b>!</p>
+                        {:else}
+                            <p>Welcome back!</p>
+                        {/if}
+                        <Link to="/dash"><Button style="float: left;" color='primary'>Go to dash</Button></Link><Button style="float: right;" color='danger' on:click={logout}>Log out</Button>
+                    {:else}
+                        <Row>
+                            <Label>Enter your token here. You can get this by using <b>pk;token</b></Label>
+                            <Col xs={12} md={10}>
+                                <Input class="mb-2" type="text" bind:value={token}/>
+                            </Col>
+                            <Col xs={12} md={2}>
+                                <Button style="width: 100%" color="primary" on:click={() => login(token)}>Submit</Button>
+                            </Col>
+                        </Row>
+                    {/if}
+                </CardBody>
+            </Card>
+            {#if isLoggedIn}
+            <Card>
+                <CardBody>
+                    Some cool stuff will go here.
+                </CardBody>
+            </Card>
+            {/if}
+        </Col>
+    </Row>
+</Container>
\ No newline at end of file
diff --git a/src/stores.ts b/src/stores.ts
new file mode 100644
index 00000000..7f8bf749
--- /dev/null
+++ b/src/stores.ts
@@ -0,0 +1,25 @@
+import { writable } from 'svelte/store';
+
+export const loggedIn = writable(false);
+
+/* export const user = writable({
+    id: null,
+    uuid: null,
+    name: null,
+    description: null,
+    tag: null,
+    avatar_url: null,
+    banner: null,
+    timezone: null,
+    created: null,
+    color: null,
+    privacy: {
+        description_privacy: null,
+        member_list_privacy: null,
+        front_privacy: null,
+        front_history_privacy: null,
+        group_list_privacy: null
+    }
+}); */
+
+export const currentUser = writable(null);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..59cbf1df
--- /dev/null
+++ b/style.css
@@ -0,0 +1,53 @@
+
+.icon {
+    height: 1.5em;
+    width: 1.5em;
+    margin-right: 0.5em;
+}
+
+.avatar {
+    height: 2.5em;
+    width: 2.5em;
+}
+
+.modal-content {
+    border: none !important;
+}
+
+.modal {
+    display: flex;
+}
+
+.banner {
+    z-index: -200;
+    width: 100vw;
+    height: 40vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-size: cover;
+}
+
+.bq {
+    padding-left: 0.5em;
+    margin: 0.25em 0 0.25em 0;
+    border-left: 4px solid rgba(128, 128, 128, 0.3);
+}
+
+.nav-link {
+    background-color: var(--bs-body-bg) !important;
+    border-color: rgba(128, 128, 128, 0.3) !important;
+    border-bottom-color: transparent !important;
+}
+
+.nav-tabs {
+    gap: 0.25em;
+}
+
+.nav-tabs {
+    border-bottom: none !important;
+}
+
+/* .nav-tabs {
+    justify-content: center !important;
+} */
\ No newline at end of file