dprint fmt

2 files changed, 88 insertions, 54 deletions

diff --git a/api/api.ts b/api/api.ts
index f8eda07..fbcd55b 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -8,7 +8,7 @@ export interface userInfo {
 	friends: number;
 	relation?: 'none' | 'friends' | 'incoming' | 'outgoing' | 'blocked';
 	rating: number;
-    email?: string;
+	email?: string;
 }
 
 export type ruleset = {
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 0574b8e..ffd6135 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -3,16 +3,16 @@ import reduce from 'image-blob-reduce';
 import { useContext, useEffect, useState } from 'react';
 import * as cookie from 'react-cookies';
 
+import { userInfo } from '../api/api';
 import { AccountAvatar } from '../components/account';
+import { DialogBox } from '../components/dialogBox';
 import { Footer } from '../components/footer';
 import { CurrentGameSettings } from '../components/gameSettings';
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import PreferencesContext from '../components/preferencesContext';
 import ThemePicker from '../components/themes';
-import { CheckBox, ColorPicker, IconLabelButton, Vierkant, Input, Button } from '../components/ui';
-import { userInfo } from '../api/api';
-import { DialogBox } from '../components/dialogBox';
+import { Button, CheckBox, ColorPicker, IconLabelButton, Input, Vierkant } from '../components/ui';
 
 import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import PublishOutlinedIcon from '@material-ui/icons/PublishOutlined';
@@ -44,42 +44,51 @@ async function uploadNewProfileImage() {
 }
 
 function EditImportantThingDialog(props: {
-	thing: "username" | "email";
+	thing: 'username' | 'email';
 	hidden?: boolean;
 	setHidden?: () => void;
 }) {
 	var lang = {
-		"username": {
-			name: "Gebruikersnaam",
-			new: "Nieuwe gebruikersnaam",
+		'username': {
+			name: 'Gebruikersnaam',
+			new: 'Nieuwe gebruikersnaam',
 		},
-		"email": {
-			name: "Email",
-			new: "Nieuw email-adres",
+		'email': {
+			name: 'Email',
+			new: 'Nieuw email-adres',
 		},
-	}[props.thing]
-	var title = lang.name + " aanpassen"
+	}[props.thing];
+	var title = lang.name + ' aanpassen';
 	return !props.hidden && <DialogBox title={title} onclick={props.setHidden}>
-		<Input className="bg-900 pad-m fullwidth round-t" label={lang.new} id="newThing" autocomplete="off"/>
-		<div className="pad-s"></div>
-		<Input className="bg-900 pad-m fullwidth round-t" label="Huidig wachtwoord" id="currentPassword" type="password" autocomplete="current-password"/>
-		<div className="pad-m"></div>
-		<Button text={title} onclick={() => {
-			var data = {
-				password: (document.getElementById("currentPassword") as HTMLInputElement).value
-			}
-			data[props.thing] = (document.getElementById("newThing") as HTMLInputElement).value
-			axios.request({
-				method: "post",
-				url: "/api/user/" + props.thing,
-				headers: { 'content-type': 'application/json' },
-				data
-			}).then(() => {
-				window.location.reload()
-			})
-			props.setHidden();
-		}}/>
-	</DialogBox>
+		<Input className='bg-900 pad-m fullwidth round-t' label={lang.new} id='newThing' autocomplete='off' />
+		<div className='pad-s'></div>
+		<Input
+			className='bg-900 pad-m fullwidth round-t'
+			label='Huidig wachtwoord'
+			id='currentPassword'
+			type='password'
+			autocomplete='current-password'
+		/>
+		<div className='pad-m'></div>
+		<Button
+			text={title}
+			onclick={() => {
+				var data = {
+					password: (document.getElementById('currentPassword') as HTMLInputElement).value,
+				};
+				data[props.thing] = (document.getElementById('newThing') as HTMLInputElement).value;
+				axios.request({
+					method: 'post',
+					url: '/api/user/' + props.thing,
+					headers: { 'content-type': 'application/json' },
+					data,
+				}).then(() => {
+					window.location.reload();
+				});
+				props.setHidden();
+			}}
+		/>
+	</DialogBox>;
 }
 
 export default function SettingsPage() {
@@ -90,20 +99,20 @@ export default function SettingsPage() {
 
 	var { preferences, updatePreference } = useContext(PreferencesContext);
 
-	var [ userInfo, setUserInfo ] = useState<userInfo>();
-	var [ emailVisible, setEmailVisible ] = useState(false);
+	var [userInfo, setUserInfo] = useState<userInfo>();
+	var [emailVisible, setEmailVisible] = useState(false);
 
-	var [ editUsernameDiagVisisble, setEditUsernameDiagVisisble ] = useState(false);
-	var [ editEmailDiagVisisble, setEditEmailDiagVisisble ] = useState(false);
+	var [editUsernameDiagVisisble, setEditUsernameDiagVisisble] = useState(false);
+	var [editEmailDiagVisisble, setEditEmailDiagVisisble] = useState(false);
 
 	useEffect(() => {
 		axios.request<userInfo>({
-			url: `/api/user/info`
+			url: `/api/user/info`,
 		}).then(req => {
 			setUserInfo(req.data);
 		}).catch(err => {
-			console.error(err)
-		})
+			console.error(err);
+		});
 	}, []);
 
 	return (
@@ -134,27 +143,52 @@ export default function SettingsPage() {
 						/>
 					</div>
 					<div className='subsection'>
-						<EditImportantThingDialog thing="username" hidden={!editUsernameDiagVisisble} setHidden={() => setEditUsernameDiagVisisble(false)}/>
-						<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} onclick={() => setEditUsernameDiagVisisble(true)} />
+						<EditImportantThingDialog
+							thing='username'
+							hidden={!editUsernameDiagVisisble}
+							setHidden={() => setEditUsernameDiagVisisble(false)}
+						/>
+						<IconLabelButton
+							text='Bewerken'
+							icon={<EditOutlinedIcon />}
+							onclick={() => setEditUsernameDiagVisisble(true)}
+						/>
 						<div className='dispbl'>
 							<h3>Gebruikersnaam</h3>
-							<p>{ userInfo?.username }</p>
+							<p>{userInfo?.username}</p>
 						</div>
 					</div>
 					<div className='subsection'>
-					<EditImportantThingDialog thing="email" hidden={!editEmailDiagVisisble} setHidden={() => setEditEmailDiagVisisble(false)}/>
-						<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} onclick={() => setEditEmailDiagVisisble(true)} />
-						{ emailVisible ?
-							<IconLabelButton text='Verbergen' icon={<VisibilityOutlinedIcon />} onclick={() => setEmailVisible(!emailVisible)} /> :
-							<IconLabelButton text='Onthullen' icon={<VisibilityOutlinedIcon />} onclick={() => setEmailVisible(!emailVisible)} />
-						}
+						<EditImportantThingDialog
+							thing='email'
+							hidden={!editEmailDiagVisisble}
+							setHidden={() => setEditEmailDiagVisisble(false)}
+						/>
+						<IconLabelButton
+							text='Bewerken'
+							icon={<EditOutlinedIcon />}
+							onclick={() => setEditEmailDiagVisisble(true)}
+						/>
+						{emailVisible
+							? <IconLabelButton
+								text='Verbergen'
+								icon={<VisibilityOutlinedIcon />}
+								onclick={() => setEmailVisible(!emailVisible)}
+							/>
+							: <IconLabelButton
+								text='Onthullen'
+								icon={<VisibilityOutlinedIcon />}
+								onclick={() => setEmailVisible(!emailVisible)}
+							/>}
 						<div className='dispbl'>
 							<h3>Email</h3>
-							<p>{ (() => {
-								var email = userInfo?.email;
-								if (email && !emailVisible) email = email.replace(/.+?(?=@)/, "************")
-								return email
-								 })() }</p>
+							<p>
+								{(() => {
+									var email = userInfo?.email;
+									if (email && !emailVisible) email = email.replace(/.+?(?=@)/, '************');
+									return email;
+								})()}
+							</p>
 						</div>
 					</div>
 					{false && <>