feat: a whole lot of stuff
This commit is contained in:
Spectralitree
80
src/pages/Dash.svelte
Normal file
80
src/pages/Dash.svelte
Normal file
@@ -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>
|
||||
112
src/pages/Home.svelte
Normal file
112
src/pages/Home.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user