mirror of
https://github.com/PluralKit/PluralKit.git
synced 2026-02-14 01:30:13 +00:00
Merge branch 'main' of github/Draconizations/pk-webs-svelte into feat/dashboard
This commit is contained in:
spiral
commit
8fa371bcc8
56 changed files with 6420 additions and 0 deletions
94
dashboard/src/lib/system/Body.svelte
Normal file
94
dashboard/src/lib/system/Body.svelte
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Modal, Image, Button } from 'sveltestrap';
|
||||
import moment from 'moment';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import twemoji from 'twemoji';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
|
||||
export let user: System;
|
||||
export let editMode: boolean;
|
||||
export let isPublic: boolean;
|
||||
|
||||
let htmlDescription: string;
|
||||
let htmlName: string;
|
||||
if (user.description) {
|
||||
htmlDescription = toHTML(user.description, {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
}
|
||||
|
||||
if (user.name) {
|
||||
htmlName = toHTML(user.name);
|
||||
}
|
||||
|
||||
let created = moment(user.created).format("MMM D, YYYY");
|
||||
|
||||
let bannerOpen = false;
|
||||
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let descriptionElement: any;
|
||||
let nameElement: any;
|
||||
let tagElement: any;
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (descriptionElement) twemoji.parse(descriptionElement);
|
||||
if (nameElement) twemoji.parse(nameElement);
|
||||
if (tagElement) twemoji.parse(tagElement);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
{#if user.id}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>ID:</b> {user.id}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span bind:this={nameElement}><b>Name:</b> {@html htmlName}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.tag}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span bind:this={tagElement}><b>Tag:</b> {user.tag}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.created && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Created:</b> {created}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.timezone && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Timezone:</b> {user.timezone}
|
||||
</Col>
|
||||
{/if}
|
||||
{#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="secondary" 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}
|
||||
</Row>
|
||||
<div class="my-2 description" bind:this={descriptionElement}>
|
||||
<b>Description:</b><br />
|
||||
{@html htmlDescription}
|
||||
</div>
|
||||
{#if (user.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
|
||||
<img src={user.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
|
||||
{/if}
|
||||
{#if !isPublic}
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
||||
{/if}
|
||||
99
dashboard/src/lib/system/Edit.svelte
Normal file
99
dashboard/src/lib/system/Edit.svelte
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
|
||||
import autosize from 'svelte-autosize';
|
||||
// import moment from 'moment-timezone';
|
||||
import { currentUser } from '../../stores';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
import { System } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let editMode: boolean;
|
||||
export let user: System;
|
||||
export let loading: boolean;
|
||||
|
||||
let err: string[] = [];
|
||||
|
||||
let input: System = {...user};
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = [];
|
||||
|
||||
if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
|
||||
err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
|
||||
} else if (data.color) {
|
||||
if (data.color.startsWith("#")) {
|
||||
data.color = input.color.slice(1, input.color.length);
|
||||
}
|
||||
}
|
||||
|
||||
/* if (data.timezone && !moment.tz.zone(data.timezone)) {
|
||||
err.push(`"${data.timezone}" is not a valid timezone, check out <a target="_blank" style="color: var(--bs-body-color);" href="https://xske.github.io/tz/">this site</a> to see your current timezone!`);
|
||||
} */
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().systems("@me").patch({data});
|
||||
user = res;
|
||||
currentUser.update(() => res);
|
||||
err = [];
|
||||
editMode = false;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each err as error}
|
||||
<Alert color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" placeholder={user.name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Tag:</Label>
|
||||
<Input bind:value={input.tag} maxlength={100} type="text" placeholder={user.tag} />
|
||||
</Col>
|
||||
<!-- <Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Timezone:</Label>
|
||||
<Input bind:value={input.timezone} type="text" placeholder={user.timezone} />
|
||||
</Col> -->
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={user.color}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Avatar url:</Label>
|
||||
<Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={user.avatar_url}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Banner url:</Label>
|
||||
<Input bind:value={input.banner} maxlength={256} type="url" placeholder={user.banner}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<div class="my-2">
|
||||
<b>Description:</b><br />
|
||||
{#if descriptions.length > 0 && descriptions[0].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}/>
|
||||
</div>
|
||||
<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false}>Back</Button>
|
||||
35
dashboard/src/lib/system/Main.svelte
Normal file
35
dashboard/src/lib/system/Main.svelte
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script lang="ts">
|
||||
import { Card, CardBody, CardHeader } from 'sveltestrap';
|
||||
import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
|
||||
import CardsHeader from '../CardsHeader.svelte';
|
||||
import Body from './Body.svelte';
|
||||
import Privacy from './Privacy.svelte';
|
||||
import Edit from './Edit.svelte';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
|
||||
export let user: System;
|
||||
export let isPublic = true;
|
||||
let loading = false;
|
||||
|
||||
let editMode = false;
|
||||
</script>
|
||||
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={user} bind:loading>
|
||||
<FaAddressCard slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody style="border-left: 4px solid #{user.color}">
|
||||
{#if !editMode}
|
||||
<Body bind:user bind:editMode bind:isPublic/>
|
||||
{:else}
|
||||
<Edit bind:user bind:editMode bind:loading />
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{#if !isPublic}
|
||||
<Privacy bind:user />
|
||||
{/if}
|
||||
49
dashboard/src/lib/system/Privacy.svelte
Normal file
49
dashboard/src/lib/system/Privacy.svelte
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<script lang="ts">
|
||||
import { Card, CardHeader, CardBody, CardTitle, Row, Col, Button, Spinner } from 'sveltestrap';
|
||||
import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
|
||||
import PrivacyEdit from './PrivacyEdit.svelte';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
|
||||
export let user: System;
|
||||
let editMode = false;
|
||||
|
||||
let loading: boolean;
|
||||
</script>
|
||||
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaUserLock />
|
||||
</div> System privacy
|
||||
{#if loading}<div class="d-inline-block mr-5" style="float: right;"><Spinner color="primary" /></div>{/if}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody style="border-left: 4px solid #{user.color}">
|
||||
{#if editMode}
|
||||
<PrivacyEdit bind:loading bind:user={user} bind:editMode/>
|
||||
{:else}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Description:</b> {user.privacy.description_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Member list:</b> {user.privacy.member_list_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Group list:</b> {user.privacy.group_list_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Current front:</b> {user.privacy.front_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Front history:</b> {user.privacy.front_history_privacy}
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => window.location.href = window.location.origin+"/dash/bulk-member-privacy"}>Bulk member privacy</Button>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => window.location.href = window.location.origin+"/dash/bulk-group-privacy"}>Bulk group privacy</Button>
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
96
dashboard/src/lib/system/PrivacyEdit.svelte
Normal file
96
dashboard/src/lib/system/PrivacyEdit.svelte
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<script lang="ts">
|
||||
import { Input, Row, Col, Button, Label, Alert } from 'sveltestrap';
|
||||
import { currentUser } from '../../stores';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let loading = false;
|
||||
export let user: System;
|
||||
export let editMode: boolean;
|
||||
|
||||
let err: string;
|
||||
|
||||
let input: System = {privacy: user.privacy};
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = null;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().systems("@me").patch({data});
|
||||
user = res;
|
||||
currentUser.update(() => res);
|
||||
editMode = false;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let allPrivacy: string;
|
||||
|
||||
$: { changePrivacy(allPrivacy)}
|
||||
|
||||
function changePrivacy(value: string) {
|
||||
if (value) {
|
||||
input.privacy.description_privacy = value;
|
||||
input.privacy.member_list_privacy = value;
|
||||
input.privacy.group_list_privacy = value;
|
||||
input.privacy.front_privacy = value;
|
||||
input.privacy.front_history_privacy = value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<Input type="select" bind:value={allPrivacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
<hr />
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option default={user.privacy.description_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.description_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Member list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.member_list_privacy}>
|
||||
<option default={user.privacy.member_list_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.member_list_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Group list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.group_list_privacy}>
|
||||
<option default={user.privacy.group_list_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.group_list_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Current front:</Label>
|
||||
<Input type="select" bind:value={input.privacy.front_privacy}>
|
||||
<option default={user.privacy.front_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.front_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Front history:</Label>
|
||||
<Input type="select" bind:value={input.privacy.front_history_privacy}>
|
||||
<option default={user.privacy.front_history_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.front_history_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
|
||||
Loading…
Add table
Add a link
Reference in a new issue