feat: bulk privacy pages

src/App.svelte

@@ -14,6 +14,8 @@
   import { Alert } from 'sveltestrap';
 import DiscordLogin from "./pages/DiscordLogin.svelte";
   import { onMount } from 'svelte';
+import BulkGroupPrivacy from "./pages/BulkGroupPrivacy.svelte";
+import BulkMemberPrivacy from "./pages/BulkMemberPrivacy.svelte";
   
   // theme cdns (I might make some myself too)
   let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
@@ -67,6 +69,8 @@ import DiscordLogin from "./pages/DiscordLogin.svelte";
     <Route path="dash"><Dash /></Route>
     <Route path="dash/m/:id"><Member isPublic={falseBool}/></Route>
     <Route path = "dash/g/:id"><Group isPublic={falseBool}/></Route>
+    <Route path="dash/bulk-member-privacy"><BulkMemberPrivacy/></Route>
+    <Route path="dash/bulk-group-privacy"><BulkGroupPrivacy/></Route>
     <Route path="settings"><Settings /></Route>
     <Route path="profile"><Public /></Route>
     <Route path = "profile/s/:id"><Main /></Route>

src/api/types.ts

@@ -31,7 +31,7 @@ export interface Config {
     description_templates: string[];
 }
 
-interface MemberPrivacy {
+export interface MemberPrivacy {
     visibility?: string,
     description_privacy?: string,
     name_privacy?: string,

src/lib/system/Privacy.svelte

@@ -42,6 +42,8 @@
             </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>

src/pages/BulkGroupPrivacy.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, FormCheck, Button, Spinner } from 'sveltestrap';
+    import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
+
+	import api from '../api';
+    import { GroupPrivacy, System } from '../api/types';
+	const user: System = JSON.parse(localStorage.getItem("pk-user"));
+
+	const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+
+	let loading = false;
+
+	// kinda hacked together from typescript's Required<T> type
+	const privacy: { [P in keyof GroupPrivacy]-?: boolean; } = {
+		name_privacy: false,
+		description_privacy: false,
+		icon_privacy: false,
+		list_privacy: false,
+		metadata_privacy: false,
+		visibility: false,
+	};
+	let setPrivate = true;
+
+	async function submit() {
+		loading = true;
+		const data = {};
+		Object.keys(privacy).filter(x => privacy[x]).forEach(key => data[key] = setPrivate ? "private" : "public");
+		await api().private.bulk_privacy.group.post({ data });
+		loading = false;
+	}	
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+			<Card class="mb-4">
+				<CardHeader>
+					<CardTitle style="margin-top: 8px; outline: none;">
+						<div class="icon d-inline-block">
+							<FaUserLock />
+						</div> Bulk group privacy
+					</CardTitle>
+				</CardHeader>
+				<CardBody style="border-left: 4px solid #{user.color}">
+					<b>Apply the selected privacy options</b> (<i>and leave the unselected options untouched</i>):
+					<br><br>
+
+					{#each Object.keys(privacy) as key}
+						<FormCheck bind:checked={privacy[key]} label={capitalize(key.split("_")[0])}/>
+					{/each}
+
+					<br>
+					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = true)}>Select all</Button>
+					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = false)}>Select none</Button>
+					<br><br>
+
+					<input type="checkbox" bind:checked={setPrivate} class="form-check-input" id="privacy">
+					<label for="privacy">&nbsp;Check this box to set all selected privacy settings as <b>private</b>.
+						Uncheck to set to <b>public</b>.</label>
+					<br><br>
+
+					<Button color="primary" on:click={submit} bind:disabled={loading}>
+						{#if loading}
+						<Spinner />
+						{:else}
+						Submit
+						{/if}
+					</Button>
+				</CardBody>
+			</Card>
+		</Col>
+	</Row>
+</Container>

src/pages/BulkMemberPrivacy.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, FormCheck, Button, Spinner } from 'sveltestrap';
+    import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
+
+	import api from '../api';
+    import { MemberPrivacy, System } from '../api/types';
+	const user: System = JSON.parse(localStorage.getItem("pk-user"));
+
+	const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+
+	let loading = false;
+
+	// kinda hacked together from typescript's Required<T> type
+	const privacy: { [P in keyof MemberPrivacy]-?: boolean; } = {
+		avatar_privacy: false,
+		birthday_privacy: false,
+		description_privacy: false,
+		metadata_privacy: false,
+		name_privacy: false,
+		pronoun_privacy: false,
+		visibility: false,
+	};
+	let setPrivate = true;
+
+	async function submit() {
+		loading = true;
+		const data = {};
+		Object.keys(privacy).filter(x => privacy[x]).forEach(key => data[key] = setPrivate ? "private" : "public");
+		await api().private.bulk_privacy.member.post({ data });
+		loading = false;
+	}	
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+			<Card class="mb-4">
+				<CardHeader>
+					<CardTitle style="margin-top: 8px; outline: none;">
+						<div class="icon d-inline-block">
+							<FaUserLock />
+						</div> Bulk member privacy
+					</CardTitle>
+				</CardHeader>
+				<CardBody style="border-left: 4px solid #{user.color}">
+					<b>Apply the selected privacy options</b> (<i>and leave the unselected options untouched</i>):
+					<br><br>
+
+					{#each Object.keys(privacy) as key}
+						<FormCheck bind:checked={privacy[key]} label={capitalize(key.split("_")[0])}/>
+					{/each}
+
+					<br>
+					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = true)}>Select all</Button>
+					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = false)}>Select none</Button>
+					<br><br>
+
+					<input type="checkbox" bind:checked={setPrivate} class="form-check-input" id="privacy">
+					<label for="privacy">&nbsp;Check this box to set all selected privacy settings as <b>private</b>.
+						Uncheck to set to <b>public</b>.</label>
+					<br><br>
+
+					<Button color="primary" on:click={submit} bind:disabled={loading}>
+						{#if loading}
+						<Spinner />
+						{:else}
+						Submit
+						{/if}
+					</Button>
+				</CardBody>
+			</Card>
+		</Col>
+	</Row>
+</Container>