aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
Diffstat (limited to 'pages')
-rw-r--r--pages/settings.tsx140
1 files changed, 87 insertions, 53 deletions
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 && <>