liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): rewrite system privacy and add pronouns

Browse Source
This commit is contained in:
Jake Fulmine 2022-08-22 10:19:39 +02:00
parent 267e85b891
commit 68d15b98f7
3 changed files with 79 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dashboard/src/api/types.ts
View File

@ -1,9 +1,10 @@
interface SystemPrivacy { export interface SystemPrivacy {
description_privacy?: string, description_privacy?: string,
member_list_privacy?: string, member_list_privacy?: string,
front_privacy?: string, front_privacy?: string,
front_history_privacy?: string, front_history_privacy?: string,
group_list_privacy?: string group_list_privacy?: string,
pronoun_privacy?: string,
} }
export interface System { export interface System {

34
dashboard/src/lib/system/Privacy.svelte
View File

@ -4,12 +4,22 @@
import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte'; import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
import PrivacyEdit from './PrivacyEdit.svelte'; import PrivacyEdit from './PrivacyEdit.svelte';
import { System } from '../../api/types'; import { System, SystemPrivacy } from '../../api/types';
export let user: System; export let user: System;
let editMode = false; let editMode = false;
let loading: boolean; let loading: boolean;
const privacyNames: { [P in keyof SystemPrivacy]-?: string; } = {
description_privacy: "Description",
member_list_privacy: "Member list",
front_privacy: "Front",
front_history_privacy: "Front history",
group_list_privacy: "Group list",
pronoun_privacy: "Pronouns"
};
</script> </script>
<Card class="mb-4"> <Card class="mb-4">
@ -23,24 +33,14 @@
</CardHeader> </CardHeader>
<CardBody style="border-left: 4px solid #{user.color}"> <CardBody style="border-left: 4px solid #{user.color}">
{#if editMode} {#if editMode}
<PrivacyEdit bind:loading bind:user={user} bind:editMode/> <PrivacyEdit bind:user={user} bind:editMode/>
{:else} {:else}
<Row> <Row>
<Col xs={12} lg={4} class="mb-3"> {#each Object.keys(user.privacy) as x}
<b>Description:</b> {user.privacy.description_privacy} <Col xs={12} lg={4} class="mb-3">
</Col> <b>{privacyNames[x]}:</b> {user.privacy[x]}
<Col xs={12} lg={4} class="mb-3"> </Col>
<b>Member list:</b> {user.privacy.member_list_privacy} {/each}
</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> </Row>
<Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system privacy">Edit</Button> <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system privacy">Edit</Button>
<Link to="/dash/bulk-member-privacy"><Button style="flex: 0" color="secondary" tabindex={-1}>Bulk member privacy</Button></Link> <Link to="/dash/bulk-member-privacy"><Button style="flex: 0" color="secondary" tabindex={-1}>Bulk member privacy</Button></Link>

136
dashboard/src/lib/system/PrivacyEdit.svelte
View File

@ -1,96 +1,76 @@
<script lang="ts"> <script lang="ts">
import { Input, Row, Col, Button, Label, Alert } from 'sveltestrap'; import { Input, Row, Col, Button, Label, Alert, Spinner } from 'sveltestrap';
import { currentUser } from '../../stores'; import { currentUser } from '../../stores';
import { System } from '../../api/types'; import { System, SystemPrivacy } from '../../api/types';
import api from '../../api'; import api from '../../api';
export let loading = false;
export let user: System; export let user: System;
export let editMode: boolean; export let editMode: boolean;
let err: string; let err: string;
let success = false;
let loading = false;
let input: System = {privacy: user.privacy}; function changeAll(e: Event) {
const target = e.target as HTMLInputElement;
Object.keys(privacy).forEach(x => privacy[x] = target.value);
}
let privacy = user.privacy;
const privacyNames: { [P in keyof SystemPrivacy]-?: string; } = {
description_privacy: "Description",
member_list_privacy: "Member list",
front_privacy: "Front",
front_history_privacy: "Front history",
group_list_privacy: "Group list",
pronoun_privacy: "Pronouns"
};
async function submit() { async function submit() {
let data = input; loading = true;
err = null; const data: System = {privacy: privacy};
try {
loading = true; let res = await api().systems(user.id).patch({data});
try {
let res = await api().systems("@me").patch({data});
user = res; user = res;
currentUser.update(() => res); currentUser.update(() => res);
editMode = false; success = true;
loading = false; } catch (error) {
} catch (error) { console.log(error);
console.log(error); err = error.message;
err = error.message; }
err = err; loading = false;
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> </script>
{#if err}
{#if err}
<Alert color="danger">{err}</Alert> <Alert color="danger">{err}</Alert>
{/if} {/if}
<Label><b>Set all to:</b></Label> {#if success}
<Input type="select" bind:value={allPrivacy} aria-label="set all to"> <Alert color="success">System privacy updated!</Alert>
<option>public</option> {/if}
<option>private</option> <Label><b>Set all to:</b></Label>
</Input> <select class="form-control" on:change={(e) => changeAll(e)} aria-label="set all to">
<hr /> <option>public</option>
<Row> <option>private</option>
<Col xs={12} lg={4} class="mb-3"> </select>
<Label>Description:</Label> <hr/>
<Input type="select" bind:value={input.privacy.description_privacy} aria-label="system description privacy"> <Row>
<option default={user.privacy.description_privacy === "public"}>public</option> {#each Object.keys(privacy) as x}
<option default={user.privacy.description_privacy === "private"}>private</option> <Col xs={12} lg={6} class="mb-3">
</Input> <Label>{privacyNames[x]}:</Label>
</Col> <Input type="select" bind:value={privacy[x]} aria-label={`group ${privacyNames[x]} privacy`}>
<Col xs={12} lg={4} class="mb-3"> <option default={privacy[x] === "public"}>public</option>
<Label>Member list:</Label> <option default={privacy[x] === "private"}>private</option>
<Input type="select" bind:value={input.privacy.member_list_privacy} aria-label="system member list privacy"> </Input>
<option default={user.privacy.member_list_privacy === "public"}>public</option> </Col>
<option default={user.privacy.member_list_privacy === "private"}>private</option> {/each}
</Input> </Row>
</Col>
<Col xs={12} lg={4} class="mb-3"> {#if loading}
<Label>Group list:</Label> <Button style="flex: 0" color="primary" aria-label="submit privacy edit"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" aria-label="cancel privacy edit"><Spinner size="sm"/></Button>
<Input type="select" bind:value={input.privacy.group_list_privacy} aria-label="system group list privacy"> {:else}
<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} aria-label="system 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} aria-label="system 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} aria-label="submit privacy edit">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel privacy edit">Back</Button> <Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edit">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel privacy edit">Back</Button>
{/if}