added dialog on user page when not logged in

4 files changed, 57 insertions, 25 deletions

diff --git a/pages/settings.tsx b/pages/settings.tsx
index cd874bc..f52b332 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import reduce from 'image-blob-reduce';
 import { useContext, useEffect } from 'react';
+import * as cookie from 'react-cookies';
 
 import { AccountAvatar } from '../components/account';
 import { Footer } from '../components/footer';
@@ -12,7 +13,6 @@ import ThemePicker from '../components/themes';
 import { CheckBox, ColorPicker, IconLabelButton, Vierkant } from '../components/ui';
 
 import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
-import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
 import PublishOutlinedIcon from '@material-ui/icons/PublishOutlined';
 import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
 
@@ -42,6 +42,11 @@ async function uploadNewProfileImage() {
 }
 
 export default function SettingsPage() {
+	useEffect(() => {
+		var loggedIn = !!cookie.load('token');
+		if (!loggedIn) window.location.href = '/';
+	}, []);
+
 	var { preferences, updatePreference } = useContext(PreferencesContext);
 
 	return (
diff --git a/pages/user.tsx b/pages/user.tsx
index 9741275..8d7975b 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -4,13 +4,14 @@ import { ReactNode, useContext, useEffect, useState } from 'react';
 
 import { userGames, userInfo } from '../api/api';
 import { AccountAvatar } from '../components/account';
+import { DialogBox } from '../components/dialogBox';
 import { Footer } from '../components/footer';
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import RecentGames from '../components/recentGames';
 import { SocketContext } from '../components/socketContext';
 import { ToastContext } from '../components/toast';
-import { IconLabelButton, Vierkant } from '../components/ui';
+import { Button, IconLabelButton, Vierkant } from '../components/ui';
 
 import ArrowDownwardOutlinedIcon from '@material-ui/icons/ArrowDownwardOutlined';
 import ArrowUpwardOutlinedIcon from '@material-ui/icons/ArrowUpwardOutlined';
@@ -65,18 +66,23 @@ export default function AccountPage() {
 	var { io } = useContext(SocketContext);
 
 	async function getUserData(): Promise<userInfo> {
-		var userReq = await axios.request<userInfo>({
-			method: 'post',
-			url: `/api/user/info`,
-			headers: { 'content-type': 'application/json' },
-			data: reqData,
-		});
-		setUser(userReq.data);
-		return userReq.data;
+		try {
+			var userReq = await axios.request<userInfo>({
+				method: 'post',
+				url: `/api/user/info`,
+				headers: { 'content-type': 'application/json' },
+				data: reqData,
+			});
+			setUser(userReq.data);
+			return userReq.data;
+		} catch (err) {
+			toast({ message: 'error', type: 'error', description: err.toString() });
+		}
 	}
 
 	async function getRelationTo(user: userInfo) {
 		var user = await getUserData();
+		if (!user) return;
 		setRelation(user.relation || 'none');
 	}
 
@@ -98,33 +104,51 @@ export default function AccountPage() {
 	}, []);
 
 	useEffect(() => {
-		(async () => {
-			var userReq = await axios.request<userInfo>({
-				method: 'post',
-				url: `/api/user/info`,
-				headers: { 'content-type': 'application/json' },
+		axios.request<userInfo>({
+			method: 'post',
+			url: `/api/user/info`,
+			headers: { 'content-type': 'application/json' },
+		})
+			.then(response => {
+				setOwnPage(ownPage || response.data.id == pageID);
+			})
+			.catch(err => {
+				toast({ message: 'error', type: 'error', description: err.toString() });
 			});
-			setOwnPage(ownPage || userReq.data.id == pageID);
-		})();
 	}, []);
 
 	// Get recent games
 	useEffect(() => {
-		(async () => {
-			var userGamesReq = await axios.request<userGames>({
-				method: 'post',
-				url: `/api/user/games`,
-				headers: { 'content-type': 'application/json' },
-				data: reqData,
+		axios.request<userGames>({
+			method: 'post',
+			url: `/api/user/games`,
+			headers: { 'content-type': 'application/json' },
+			data: reqData,
+		})
+			.then(response => {
+				setGameInfo(response.data);
+			})
+			.catch(err => {
+				toast({ message: 'error', type: 'error', description: err.toString() });
 			});
-			setGameInfo(userGamesReq.data);
-		})();
 	}, []);
 
 	return <div>
 		<NavBar />
 		<CenteredPage width={802}>
 			<PageTitle>Profiel</PageTitle>
+			<div>
+				{!loggedIn && <DialogBox title='Maak een account aan' onclick={() => window.location.href = '/'}>
+					<p className='center'>
+						Om de accounts van andere gebruikers te zien moet je inloggen of een account aanmaken
+					</p>
+					<div className='pad-s'></div>
+					<div className='sidebyside fullwidth'>
+						<Button href='/register' text='Registreren' className='register w1fr' />
+						<Button href='/login' text='Inloggen' className='login w1fr' />
+					</div>
+				</DialogBox>}
+			</div>
 			<Vierkant className='accountHeader w100m2m pad-l bg-800'>
 				<div className='inner posrel'>
 					<AccountAvatar size={128} id={user?.id || ''} />
diff --git a/styles/ui.css b/styles/ui.css
index 31df20a..5bb67ea 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -68,6 +68,7 @@ html.dark .button { color: var(--foreground); }
 .dialogbox {
 	width: 392px;
 	margin: 0;
+	z-index: 1;
 }
 .dialogbox > .title { margin-bottom: var(--spacing-large); }
 .dialogbox .icon.close {
diff --git a/styles/utility.css b/styles/utility.css
index beec066..3589267 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -52,6 +52,8 @@
 .floatl { float: left; }
 .floatn { float: none; }
 
+.w1fr { width: 1fr; }
+
 .w100m2m { width: calc(100% - var(--spacing-medium)); }
 
 .w100vw { width: 100vw; }