feat: add public probes checkbox

pages/settings.vue

@@ -7,7 +7,7 @@
 			<div class="max-sm:mb-4 sm:w-2/5">
 				<h5 class="text-lg font-bold">Account details</h5>
 			</div>
-			<div class="grow">
+			<div class="grow sm:w-3/5">
 				<label for="firstName" class="block font-bold">First Name</label>
 				<InputText id="firstName" v-model="firstName" class="mt-2 w-full"/>
 
@@ -60,11 +60,24 @@
 			</div>
 		</div>
 
+		<div class="mt-6 flex rounded-xl border bg-surface-0 p-6 max-sm:flex-col dark:bg-dark-800">
+			<div class="max-sm:mb-4 sm:w-2/5">
+				<h5 class="text-lg font-bold">Privacy</h5>
+			</div>
+			<div class="grow sm:w-3/5">
+				<p class="font-bold">Make my probes public</p>
+				<div class="mt-3 flex">
+					<Checkbox v-model="publicProbes" class="mr-2 mt-px" binary input-id="publicProbes"/>
+					<label for="publicProbes">If enabled, your probes will be automatically tagged by <Tag class="text-nowrap bg-surface-0 font-normal dark:bg-dark-800" severity="secondary" :value="`u-${user.github_username}`"/>, allowing you to select them in measurements.</label>
+				</div>
+			</div>
+		</div>
+
 		<div class="mt-6 flex rounded-xl border bg-surface-0 p-6 max-sm:flex-col dark:bg-dark-800">
 			<div class="max-sm:mb-4 sm:w-2/5">
 				<h5 class="text-lg font-bold">Interface</h5>
 			</div>
-			<div class="grow">
+			<div class="grow sm:w-3/5">
 				<p class="font-bold">Theme</p>
 				<SelectButton
 					v-model="appearance"
@@ -88,7 +101,7 @@
 			<div class="max-sm:mb-4 sm:w-2/5">
 				<h5 class="text-lg font-bold">Data removal</h5>
 			</div>
-			<div class="grow">
+			<div class="grow sm:w-3/5">
 				<p class="mb-2 font-bold max-sm:hidden">Delete account</p>
 				<Button severity="secondary" outlined label="Delete account" @click="deleteDialog = true"/>
 			</div>
@@ -134,6 +147,7 @@
 	const lastName = ref(user.last_name);
 	const appearance = ref(user.appearance);
 	const email = ref(user.email);
+	const publicProbes = ref(user.public_probes);
 
 	const themeOptions = [
 		{ name: 'Auto', value: null, icon: 'pi pi-cog' },
@@ -153,6 +167,7 @@
 				last_name: lastName.value,
 				appearance: appearance.value,
 				email: email.value,
+				public_probes: publicProbes.value,
 			}));
 
 			lastSavedAppearance = appearance.value;
@@ -184,6 +199,7 @@
 				last_name: lastName.value,
 				appearance: appearance.value,
 				email: email.value,
+				public_probes: publicProbes.value,
 			}));
 
 			const response = await $directus.request(customEndpoint<{

presets/aura/checkbox/index.js

@@ -33,8 +33,8 @@ export default {
 
 			// Colors
 			{
-				'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
-				'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+				'border-surface-300 dark:border-dark-600': !context.checked && !props.invalid,
+				'bg-surface-0 dark:bg-dark-950': !context.checked && !props.invalid && !props.disabled,
 				'border-primary bg-primary': context.checked,
 			},
 
@@ -45,7 +45,7 @@ export default {
 
 			// States
 			{
-				'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+				'peer-hover:border-surface-400 dark:peer-hover:border-dark-400': !props.disabled && !context.checked && !props.invalid,
 				'peer-hover:bg-primary-emphasis peer-hover:border-primary-emphasis': !props.disabled && context.checked,
 				'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
 				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled,

presets/aura/index.js

@@ -14,7 +14,7 @@ import buttongroup from './buttongroup';
 // import card from './card';
 // import carousel from './carousel';
 // import cascadeselect from './cascadeselect';
-// import checkbox from './checkbox';
+import checkbox from './checkbox';
 import chip from './chip';
 // import colorpicker from './colorpicker';
 // import confirmdialog from './confirmdialog';
@@ -117,7 +117,7 @@ export default {
 	inputtext,
 	datepicker,
 	calendar: datepicker,
-	// checkbox,
+	checkbox,
 	// radiobutton,
 	// toggleswitch,
 	// inputswitch: toggleswitch,

store/auth.ts

@@ -16,6 +16,7 @@ interface AuthState {
 		external_identifier: string | null,
 		appearance: 'light' | 'dark' | null,
 		user_type: 'member' | 'sponsor' | 'special',
+		public_probes: boolean,
 	}
 }
 
@@ -35,6 +36,7 @@ export const useAuth = defineStore('auth', {
 			external_identifier: '',
 			appearance: null,
 			user_type: 'member',
+			public_probes: false,
 		},
 	}),