Updates to personalization

src/pages/settings/components/Personalization/Personalization.tsx

@@ -1,9 +1,18 @@
-import { Card, Grid, GridCol, LoadingOverlay, Stack, TextInput } from '@mantine/core';
+import {
+	Card,
+	Grid,
+	GridCol,
+	LoadingOverlay,
+	Stack,
+	Switch,
+	Text,
+	TextInput,
+} from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, switchClasses, textClasses, textInputClasses } from 'styles';
 import type { PersonalData } from 'types';
 
 const PersonalizationSettings = () => {
@@ -40,7 +49,6 @@ const PersonalizationSettings = () => {
 			setPersonal(update);
 		}
 	}, [update]);
-
 	return (
 		<Stack>
 			<SettingsHeader
@@ -175,6 +183,66 @@ const PersonalizationSettings = () => {
 						</Card>
 					</GridCol>
 				</Grid>
+				<Card
+					w={'75%'}
+					className={cardClasses.settingsItem}
+					classNames={cardClasses}
+					style={{ overflow: 'visible' }}
+				>
+					<Stack w={'100%'} px={16}>
+						<Text top={-12} className={textClasses.currentTheme} classNames={textClasses}>
+							Extras
+						</Text>
+						<Switch
+							label={'Enable Wake on LAN'}
+							className={switchClasses.default}
+							classNames={switchClasses}
+							checked={personal?.enableWol === 1}
+							onChange={(event) => {
+								const updatedPersonal = {
+									...personal,
+									enableWol: event.target.checked ? 1 : 0,
+								};
+								setUpdate(updatedPersonal);
+							}}
+						/>
+						<Switch
+							label={'Enable Guacamole Clients'}
+							className={switchClasses.default}
+							classNames={switchClasses}
+							checked={personal?.enableGuacamole === 1}
+							onChange={(event) => {
+								const updatedPersonal = {
+									...personal,
+									enableGuacamole: event.target.checked ? 1 : 0,
+								};
+								setUpdate(updatedPersonal);
+							}}
+						/>
+						{personal?.enableGuacamole === 1 && (
+							<TextInput
+								label={'Guacamole Host'}
+								className={textInputClasses.settingsItem}
+								classNames={textInputClasses}
+								defaultValue={personal?.guacamoleHost}
+								onChange={(event) => {
+									const updatedPersonal = {
+										...personal,
+										guacamoleHost: event.currentTarget.value,
+									};
+									setUpdate(updatedPersonal);
+								}}
+								styles={
+									theme.textShadowsEnabled
+										? {
+												label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+											}
+										: undefined
+								}
+							/>
+						)}
+					</Stack>
+				</Card>
 			</Stack>
 		</Stack>
 	);