From c8a4523ea2f0a9d40a9fb2fb1dca01065c2e6ca1 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Fri, 15 Jan 2021 16:20:49 +0100
Subject: login / button changes / account homepage

---
 src/api.ts            |  9 +++++++
 src/components/ui.tsx |  6 +++--
 src/pages/home.tsx    | 70 ++++++++++++++++++++++++++++++++++++++++++++-------
 src/pages/login.tsx   |  2 +-
 4 files changed, 75 insertions(+), 12 deletions(-)
 create mode 100644 src/api.ts

(limited to 'src')

diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 0000000..e2e3d93
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,9 @@
+export interface userInfo {
+	avatar?: string|null,
+	coutry?: string|null,
+	id?: string,
+	registered?: number,
+	type?: string,
+	username?: string,
+};
+
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index c2ce35e..37c24b3 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -31,15 +31,17 @@ export function Button(props: {
 	text?: string;
 	children?: ReactNode;
 	style?: CSSProperties;
+	href?: string;
 	onclick?: (() => void); })
 {
-	return <div onClick={props.onclick} style={{
+	return <a onClick={props.onclick} href={props.href} style={{
 		padding: props.text ? 8 : 16,
 		textAlign: props.text ? "center" : "left",
 		borderRadius: 8,
 		backgroundColor: "var(--disk-a)",
 		cursor: "pointer",
 		position: "relative",
+		textDecoration: "none",
 		...props.style
 	}}>
 	{ 
@@ -51,7 +53,7 @@ export function Button(props: {
 			: undefined
 	}
 	{ props.children }
-	</div>;
+	</a>;
 }
 
 export function Input(props: {
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 3b279e8..27a7271 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,8 +1,10 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, Component } from 'react';
+import axios from 'axios';
+import { userInfo } from '../api';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant } from '../components/ui';
+import { Vierkant, Button } from '../components/ui';
 import { AccountAvatar } from '../components/account';
 
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
@@ -48,9 +50,33 @@ var RightAlignedTableColumn: CSSProperties = {
 	paddingRight: 16
 }
 
-export default function HomePage() {
-	return (
-		<div>
+export default class HomePage extends Component {
+	state: {
+		info: userInfo,
+		loggedIn: boolean
+	} = {
+		info: {},
+		loggedIn: document.cookie.includes("token")
+	}
+	
+	getUserInfo () {
+		axios.request<userInfo>({
+			method: "get",
+			url: `${window.location.origin}/api/user/info`,
+			headers: {"content-type": "application/json"}
+		})
+		.then(request => this.setState({ info: request.data }))
+		.catch(console.log);
+	}
+
+	constructor(props: {}) {
+		super(props);
+
+		if(this.state.loggedIn) this.getUserInfo()
+	}
+
+	render () {
+		return <div>
 			<NavBar/>
 			<CenteredPage width={802}>
 				<PageTitle>4 op een rij</PageTitle>
@@ -69,8 +95,34 @@ export default function HomePage() {
 					<span style={GameModeTextStyle}>Tegen computer</span>
 					<div style={SquareSize}></div>
 				</Vierkant>
-				<Vierkant href="/">
-					<div style={{ position: "relative", width: 280, height: 90 }}>
+				<Vierkant href={ this.state.loggedIn ? "/account" : undefined } style={{ verticalAlign: "top" }}>
+					<div style={{
+						position: "relative",
+						width: 280,
+						height: 90,
+						textAlign: "center",
+						display: this.state.loggedIn ? "none" : "inline-block"
+					}}>
+						<span style={{
+							userSelect: "none",
+							marginBottom: 8,
+							display: "inline-block"
+						}}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span>
+						<div style={{
+							display: "grid",
+							gridGap: 24,
+							gridTemplateColumns: "1fr 1fr"
+						}}>
+							<Button href="/login" text="Inloggen"/>
+							<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)" }}/>
+						</div>
+					</div>
+					<div style={{
+						position: "relative",
+						width: 280,
+						height: 90,
+						display: this.state.loggedIn ? "inline-block" : "none"
+					}}>
 						<div style={{
 							position: "absolute",
 							top: 0, left: 0,
@@ -89,7 +141,7 @@ export default function HomePage() {
 								whiteSpace: "nowrap",
 								overflow: "hidden",
 								textOverflow: "ellipsis",
-							}}>Gebruikersnaam</h2>
+							}}>{this.state.info.username}</h2>
 							<p style={{ marginTop: 6 }}>Score: 400</p>
 							<p style={{ position: "absolute", bottom: 0, left: 0 }}>
 								<span style={{ color: "var(--disk-b-text)" }}>0 W</span>
@@ -130,6 +182,6 @@ export default function HomePage() {
 				</Vierkant>
 			</CenteredPage>
 		</div>
-	);
+	}
 }
 
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index bdaebc6..8528a39 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -59,7 +59,7 @@ export default function LoginPage() {
 							display: "grid",
 							gridTemplateColumns: "1fr 1fr"
 						}}>
-						<Button text="Registreren" style={{ backgroundColor: "var(--background-alt)" }} onclick={() => window.location.pathname = "/register"}></Button>
+							<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)"}}></Button>
 							<Button text="Inloggen" onclick={submitLogin}></Button>
 						</div>
 					</Vierkant>
-- 
cgit v1.2.3