From d2c2cc62a4c2e1ac10f8434bea7bb834da820869 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 16 Jan 2021 11:40:36 +0100 Subject: semi working next project --- pages/_app.tsx | 6 ++ pages/game.tsx | 84 +++++++++++++++++++++++ pages/index.tsx | 198 +++++++++++++++++++++++++++++++++++++++++++++++++++++ pages/login.tsx | 71 +++++++++++++++++++ pages/register.tsx | 99 +++++++++++++++++++++++++++ pages/settings.tsx | 34 +++++++++ 6 files changed, 492 insertions(+) create mode 100644 pages/_app.tsx create mode 100644 pages/game.tsx create mode 100644 pages/index.tsx create mode 100644 pages/login.tsx create mode 100644 pages/register.tsx create mode 100644 pages/settings.tsx (limited to 'pages') diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 0000000..7be2763 --- /dev/null +++ b/pages/_app.tsx @@ -0,0 +1,6 @@ +import '../styles/global.css'; + +export default function VierOpEenRijWebsite({ Component, pageProps }) { + return +} + diff --git a/pages/game.tsx b/pages/game.tsx new file mode 100644 index 0000000..513fc7a --- /dev/null +++ b/pages/game.tsx @@ -0,0 +1,84 @@ +import { CSSProperties } from 'react'; + +import { NavBar } from '../components/navbar'; +import { CenteredPage } from '../components/page'; +import { VoerBord } from '../components/voerBord'; +import { DialogBox } from '../components/dialogBox'; +import { CurrentGameSettings } from '../components/gameSettings'; +import { Button, SearchBar } from '../components/ui'; +import { GameBar } from '../components/gameBar'; + +import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded'; +import LinkRoundedIcon from '@material-ui/icons/LinkRounded'; + +var InviteButtonStyle: CSSProperties = { + backgroundColor: "var(--page-background)", + height: 160, + padding: 12 +} + +var InviteButtonIconStyle: CSSProperties = { + fontSize: 100, + position: "absolute", + top: 12, + left: "50%", + transform: "translateX(-50%)" +} + +var InviteButtonLabelStyle: CSSProperties = { + position: "absolute", + bottom: 12, + left: "50%", + transform: "translateX(-50%)", + textAlign: "center", + color: "var(--text-alt)", + width: 136, + fontSize: 20, + userSelect: "none" +} + +export default function GamePage() { + return ( +
+ + +
+ + +
+ + +
+ + +
+ + + +
+ ); +} + diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..b3e0e1f --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1,198 @@ +import { CSSProperties, Component, useEffect } from 'react'; +import axios from 'axios'; +import { userInfo } from '../api/api'; + +import { NavBar } from '../components/navbar'; +import { CenteredPage, PageTitle } from '../components/page'; +import { Vierkant, Button } from '../components/ui'; +import { AccountAvatar } from '../components/account'; +import { ToastArea, Toast } from '../components/toast'; + +import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; +import ExtensionIcon from '@material-ui/icons/Extension'; + +import Icon from '@mdi/react'; +import { mdiRobotExcited } from '@mdi/js'; + +var GameModeIconStyle: CSSProperties = { + fontSize: 64, + width: 64, + height: 64, + display: "inline-block", + position: "absolute", + top: 24, + left: "50%", + transform: "translateX(-50%)" +} + +var GameModeTextStyle: CSSProperties = { + whiteSpace: "nowrap", + display: "inline-block", + position: "absolute", + bottom: 24, + left: "50%", + transform: "translateX(-50%)", + userSelect: "none", + fontWeight: 500 +} + +var SquareSize: CSSProperties = { + width: 90, + height: 90 +} + +var LeftAlignedTableColumn: CSSProperties = { + textAlign: "left", + paddingLeft: 16 +} + +var RightAlignedTableColumn: CSSProperties = { + textAlign: "right", + paddingRight: 16 +} + +export default class HomePage extends Component { + state: { + info: userInfo, + loggedIn: boolean + } = { + info: {}, + loggedIn: false + } + + getUserInfo () { + axios.request({ + 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); + + useEffect(() => { + this.setState({ loggedIn: document.cookie.includes("token") }) + if(this.state.loggedIn) this.getUserInfo() + }) + } + + render () { + return
+ + + }/> + + + + 4 op een rij + + + Nieuw spel +
+ + + + Puzzels +
+ + + + Tegen computer +
+ + +
+ Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies +
+
+
+
+
+ +
+
+

{this.state.info.username}

+

Score: 400

+

+ 0 W + / + 0 V + / + 0 G +

+
+
+ + +

Recente partijen

+ + + + + + + + + + + + + + + + + + + +
TegenstanderUitkomstZettenDatum
Naam hierGewonnen7Vandaag
Nog meer namenGelijkspel42Gisteren
+ + +

Nieuws ofzo

+

Chess.com heeft heel veel troep waar niemand naar kijkt

+ + +
+ } +} + diff --git a/pages/login.tsx b/pages/login.tsx new file mode 100644 index 0000000..8528a39 --- /dev/null +++ b/pages/login.tsx @@ -0,0 +1,71 @@ +import { v4 as uuidv4 } from 'uuid'; +import axios from 'axios'; + +import { NavBar } from '../components/navbar'; +import { CenteredPage } from '../components/page'; +import { Vierkant, Input, Button } from '../components/ui'; + +var ids = { + email: uuidv4(), + password: uuidv4() +} + +function submitLogin() { + var formData = { + email: (document.getElementById(ids.email) as HTMLInputElement).value, + password: (document.getElementById(ids.password) as HTMLInputElement).value + } + + if ( !formData.email || + !formData.password ) { + alert("Vul alsjeblieft alle velden in!"); + return; + } + + axios({ + method: "post", + url: `${window.location.origin}/api/auth/login`, + headers: {"content-type": "application/json"}, + data: formData + }) + .then(() => window.location.pathname = "/") + .catch(error => { + if (error.response.status === 401) { + alert("Verkeerde gebruikersnaam/wachtwoord combinatie!") + return; + } + alert("Er is iets fout gegaan!"); + }); +} + +export default function LoginPage() { + return ( +
+ + +
+ + + +
+ + +
+ +
+ +
+ ); +} + diff --git a/pages/register.tsx b/pages/register.tsx new file mode 100644 index 0000000..e0f98de --- /dev/null +++ b/pages/register.tsx @@ -0,0 +1,99 @@ +import { NavBar } from '../components/navbar'; +import { CenteredPage } from '../components/page'; +import { Vierkant, Input, Button } from '../components/ui'; + +import { v4 as uuidv4 } from 'uuid'; +import { validate as validateEmail } from 'email-validator'; +import axios from 'axios'; + +var ids = { + username: uuidv4(), + email: uuidv4(), + password: uuidv4() +} + +function submitRegister() { + var formData = { + username: (document.getElementById(ids.username) as HTMLInputElement).value, + email: (document.getElementById(ids.email) as HTMLInputElement).value, + password: (document.getElementById(ids.password) as HTMLInputElement).value + } + + if ( !formData.username || + !formData.email || + !formData.password ) { + alert("Vul alsjeblieft alle velden in!"); + return; + } + + var passwordRegex: RegExp = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/; + /* + * ^ Begin string + * (?=.*[A-Z]) Minimaal één hoofdletter + * (?=.*[a-z]) Minimaal één kleine letter + * (?=.*[0-9]) Minimaal één getal + * .{8,} Minimaal acht tekens in lengte + * $ Ende string + * https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength + */ + + //TODO: alert -> react toast / material-ui snackbar + if ( formData.username.length > 35 ) { + alert("Je gebruikersnaam kan maximaal 35 tekens lang zijn!"); + return; + } + + if ( !validateEmail(formData.email) ) { + alert("Voer alsjeblieft een geldig e-mail adres in!"); + return; + } + + //TODO: wachtwoord max 72 tekens ivm bcrypt + if ( !formData.password.match(passwordRegex) ) { + alert("Je wachtwoord moet minimaal 8 tekens lang zijn en een hoofdletter, kleine letter, en een nummer bevatten!"); + return; + } + + axios({ + method: "post", + url: `${window.location.origin}/api/auth/signup`, + headers: {"content-type": "application/json"}, + data: formData + }) + .then(() => { + //TODO: email verificatie + // redirect naar home, automatische login + window.location.pathname = "/"; + }) + .catch(error => { + alert("Er is iets fout gegaan!"); + console.log(error); + }); +} + +export default function RegisterPage() { + return ( +
+ + +
+ +
+ + + + +
+ +
+ +
+ ); +} + diff --git a/pages/settings.tsx b/pages/settings.tsx new file mode 100644 index 0000000..2daa90b --- /dev/null +++ b/pages/settings.tsx @@ -0,0 +1,34 @@ +import { CSSProperties } from 'react'; + +import { NavBar } from '../components/navbar'; +import { CenteredPage, PageTitle } from '../components/page'; +import { Vierkant } from '../components/ui'; +/* import { AccountAvatar } from '../components/account'; */ +import { CurrentGameSettings, EditGameSettings } from '../components/gameSettings'; + +var SettingsSectionHeaderStyle: CSSProperties = { + marginBottom: 24 +} + +export default function SettingsPage() { + return ( +
+ + + Instellingen + +

Account

+ + +

Kleuren

+ + +

Standaard spelregels

+ + + + +
+ ); +} + -- cgit v1.2.3 From 3fc06ea736283ad38bb51b932ab0e91dae081159 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 16 Jan 2021 14:51:20 +0100 Subject: home pagina "gefixt" --- package.json | 1 + pages/index.tsx | 13 ++++++------- yarn.lock | 12 ++++++++++++ 3 files changed, 19 insertions(+), 7 deletions(-) (limited to 'pages') diff --git a/package.json b/package.json index e97d3c1..be14a14 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.1", + "swr": "^0.4.0", "typescript": "^4.1.3", "uuid": "^8.3.2", "web-vitals": "^0.2.4" diff --git a/pages/index.tsx b/pages/index.tsx index b3e0e1f..9c56f52 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -63,20 +63,19 @@ export default class HomePage extends Component { getUserInfo () { axios.request({ method: "get", - url: `${window.location.origin}/api/user/info`, + url: `/api/user/info`, headers: {"content-type": "application/json"} }) - .then(request => this.setState({ info: request.data })) + .then(request => this.setState({ + info: request.data, + loggedIn: request.data == {} + })) .catch(console.log); } constructor(props: {}) { super(props); - - useEffect(() => { - this.setState({ loggedIn: document.cookie.includes("token") }) - if(this.state.loggedIn) this.getUserInfo() - }) + this.getUserInfo(); } render () { diff --git a/yarn.lock b/yarn.lock index edd629e..0c61eda 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4437,6 +4437,11 @@ depd@~1.1.2: resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak= +dequal@2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d" + integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug== + des.js@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843" @@ -11438,6 +11443,13 @@ svgo@^1.0.0, svgo@^1.2.2: unquote "~1.1.1" util.promisify "~1.0.0" +swr@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/swr/-/swr-0.4.0.tgz#e76da9f981fe6dee0e133289e9b582fc80d9c41d" + integrity sha512-70qd1FHYHwIdYXW0jTpm5ktitzvPBCtyKz8ZzynWlY/rMqe4drYPgcl/H9Ipuh+Xv6ZW5viNx13ro8EKIWZcoQ== + dependencies: + dequal "2.0.2" + symbol-observable@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" -- cgit v1.2.3 From f1d88fef2107f0d62ed0ab9d01bc97cb057e1d39 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 26 Jan 2021 21:06:15 +0100 Subject: fixed login page id's --- pages/login.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) (limited to 'pages') diff --git a/pages/login.tsx b/pages/login.tsx index 8528a39..0061c70 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -5,15 +5,10 @@ import { NavBar } from '../components/navbar'; import { CenteredPage } from '../components/page'; import { Vierkant, Input, Button } from '../components/ui'; -var ids = { - email: uuidv4(), - password: uuidv4() -} - function submitLogin() { var formData = { - email: (document.getElementById(ids.email) as HTMLInputElement).value, - password: (document.getElementById(ids.password) as HTMLInputElement).value + email: (document.getElementById("email") as HTMLInputElement).value, + password: (document.getElementById("password") as HTMLInputElement).value } if ( !formData.email || @@ -51,8 +46,8 @@ export default function LoginPage() { textAlign: "center" }}> - - + +
Date: Wed, 27 Jan 2021 14:13:32 +0100 Subject: fix home page log in --- pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pages') diff --git a/pages/index.tsx b/pages/index.tsx index 9c56f52..bd7100e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -68,7 +68,7 @@ export default class HomePage extends Component { }) .then(request => this.setState({ info: request.data, - loggedIn: request.data == {} + loggedIn: request.status == 200 })) .catch(console.log); } -- cgit v1.2.3 From 0a41096fa8aa3b02c13478caf27ee60ffb840b80 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Wed, 27 Jan 2021 14:15:22 +0100 Subject: static id's on register page --- pages/register.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) (limited to 'pages') diff --git a/pages/register.tsx b/pages/register.tsx index e0f98de..6e2c73f 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -6,17 +6,11 @@ import { v4 as uuidv4 } from 'uuid'; import { validate as validateEmail } from 'email-validator'; import axios from 'axios'; -var ids = { - username: uuidv4(), - email: uuidv4(), - password: uuidv4() -} - function submitRegister() { var formData = { - username: (document.getElementById(ids.username) as HTMLInputElement).value, - email: (document.getElementById(ids.email) as HTMLInputElement).value, - password: (document.getElementById(ids.password) as HTMLInputElement).value + username: (document.getElementById("username") as HTMLInputElement).value, + email: (document.getElementById("email") as HTMLInputElement).value, + password: (document.getElementById("password") as HTMLInputElement).value } if ( !formData.username || @@ -85,9 +79,9 @@ export default function RegisterPage() { }}>
- - - + + +
-- cgit v1.2.3 From 0c947a9f7d4ff3f9e65d01df21d6d50e9fa51095 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 31 Jan 2021 14:29:48 +0100 Subject: toast color fix --- components/toast.tsx | 4 ++-- pages/index.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'pages') diff --git a/components/toast.tsx b/components/toast.tsx index 1d467bd..e01683f 100644 --- a/components/toast.tsx +++ b/components/toast.tsx @@ -41,8 +41,8 @@ export class Toast extends Component<{ boxShadow: "0 8px 12px -4px #00000033", backgroundColor: this.props.type === "normal" ? "var(--background)" : - this.props.type === "confirmation" ? "var(--disk-a)" : - this.props.type === "error" ? "var(--disk-b)" : "var(--background)", + this.props.type === "confirmation" ? "var(--disk-b)" : + this.props.type === "error" ? "var(--disk-a)" : "var(--background)", ...this.props.style }}> { diff --git a/pages/index.tsx b/pages/index.tsx index bd7100e..ff4e2b7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, Component, useEffect } from 'react'; +import { CSSProperties, Component } from 'react'; import axios from 'axios'; import { userInfo } from '../api/api'; @@ -82,8 +82,9 @@ export default class HomePage extends Component { return
- }/> - + }/> + + 4 op een rij -- cgit v1.2.3 From d2f537f86890949a0d29a5b1761628ea87a9b3c9 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 31 Jan 2021 14:30:02 +0100 Subject: editGameSettings dialog --- components/dialogBox.tsx | 15 ++-- components/gameSettings.tsx | 212 +++++++++++++++++++++++++------------------- pages/settings.tsx | 1 - 3 files changed, 128 insertions(+), 100 deletions(-) (limited to 'pages') diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx index 74fe99b..5ef5c3f 100644 --- a/components/dialogBox.tsx +++ b/components/dialogBox.tsx @@ -1,23 +1,25 @@ -import { ReactNode } from 'react'; +import { ReactNode, CSSProperties } from 'react'; import { Vierkant } from './ui'; import CancelIcon from '@material-ui/icons/Cancel'; -interface DialogBoxProps { +export function DialogBox(props: { children: ReactNode; title: string; -} - -export function DialogBox(props: DialogBoxProps) { + style?: CSSProperties; + onclick?: () => void; +}) { return

{props.title}

+ + {props.children} } diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index fb5188e..c037fe3 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -1,49 +1,63 @@ -import { ReactNode, CSSProperties } from 'react'; +import { ReactNode, Component } from 'react'; import { Button, Vierkant, CheckBox, Input } from './ui'; import { DialogBox } from './dialogBox'; import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; -export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { - return
-

- Geen tijdslimiet
- Standaardregels
- Gerangschikt -

- -
; + left: 0, + transform: "translateY(-50%)" + }}> + Geen tijdslimiet
+ Standaardregels
+ Gerangschikt +

+ + +
; + } } function GameSettingsSection(props: { @@ -73,62 +87,74 @@ function GameSettingsSection(props: { } -function GameRule(props: { - title: string; - description: string; - style?: CSSProperties; -}) { - return
*/ +/*

{props.title}

*/ +/*

{props.description}

*/ +/*
; */ +/* } */ + +/* + +
-

{props.title}

-

{props.description}

-
; -} + + +
+ + + +*/ -export function EditGameSettings() { - return -
- -
- - - -
- - Timer gebruiken voor bijde spelers - - -
- - -
- - - - -
- ; +export class EditGameSettings extends Component<{ + parentState: { editGameRulesDialogVisible: boolean; }; + hideEditGameRules: () => void; +}> { + + render () { + return +
+ +
+ + + +
+ + Timer gebruiken voor bijde spelers + + +
+ ; + } } diff --git a/pages/settings.tsx b/pages/settings.tsx index 2daa90b..6bb7c46 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -26,7 +26,6 @@ export default function SettingsPage() {

Standaard spelregels

 - ); -- cgit v1.2.3