diff options
| -rw-r--r-- | api/user/info.py | 6 | ||||
| -rw-r--r-- | src/api.ts | 9 | ||||
| -rw-r--r-- | src/components/ui.tsx | 6 | ||||
| -rw-r--r-- | src/pages/home.tsx | 70 | ||||
| -rw-r--r-- | src/pages/login.tsx | 2 |
5 files changed, 79 insertions, 14 deletions
diff --git a/api/user/info.py b/api/user/info.py index ffa004e..7bf3ee3 100644 --- a/api/user/info.py +++ b/api/user/info.py @@ -1,12 +1,14 @@ from flask import Blueprint, request from main import cursor from auth.login_token import token_login +import json info = Blueprint('info', __name__) -@info.route('/info') +@info.route('/info', methods = ['GET', 'POST']) def index(): - data = request.get_json() + data_string = request.data or "{}" + data = json.loads(data_string) username = data.get("username") or "" id = data.get("id") or "" 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> |