Skip to content

Commit 4dce594

Browse files
GulianrdgdGulianrdgd
committed
added express
1 parent 24b7ac8 commit 4dce594

15 files changed

+1651
-78
lines changed

‎@types/index.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.png'
2+
declare module '*.jpg'
3+
declare module '*.jpeg'
4+
declare module '*.svg'
5+
declare module '*.gif'

‎api.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as express from 'express'
2+
3+
const router = express.Router();
4+
5+
router.get('/hello', function(req:any, res:any) {
6+
res.send('hello')
7+
});
8+
9+
10+
export default router

‎package.json

+15-9
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,11 @@
44
"license": "MIT",
55
"version": "1.0.0",
66
"scripts": {
7-
"dev": "next dev",
8-
"build": "next build",
9-
"start": "next start",
10-
"type-check": "tsc --pretty --noEmit",
11-
"format": "prettier --write .",
12-
"lint": "eslint . --ext ts --ext tsx --ext js",
13-
"test": "jest",
14-
"test-all": "yarn lint && yarn type-check && yarn test"
7+
"dev": "ts-node --project tsconfig.server.json server.ts",
8+
"build:server": "tsc --project tsconfig.server.json",
9+
"build:next": "next build",
10+
"build": "npm run build:next && npm run build:server",
11+
"start": "NODE_ENV=production node dist/index.js"
1512
},
1613
"husky": {
1714
"hooks": {
@@ -26,10 +23,14 @@
2623
]
2724
},
2825
"dependencies": {
26+
"@emotion/babel-preset-css-prop": "^11.2.0",
2927
"@types/bcrypt": "^3.0.0",
28+
"@types/express": "^4.17.11",
3029
"@types/next-auth": "^3.1.24",
30+
"@types/socket.io": "^2.1.13",
3131
"autoprefixer": "^10.2.4",
3232
"bcrypt": "^5.0.0",
33+
"express": "^4.17.1",
3334
"next": "latest",
3435
"next-auth": "^3.4.1",
3536
"pg": "^8.5.1",
@@ -38,7 +39,11 @@
3839
"postcss-preset-env": "^6.7.0",
3940
"react": "^17.0.1",
4041
"react-dom": "^17.0.1",
41-
"tailwindcss": "^2.0.3"
42+
"socket.io": "^3.1.1",
43+
"socket.io-client": "^3.1.1",
44+
"socketio": "^1.0.0",
45+
"tailwindcss": "^2.0.3",
46+
"ts-node": "^9.1.1"
4247
},
4348
"devDependencies": {
4449
"@testing-library/react": "^11.2.5",
@@ -57,6 +62,7 @@
5762
"jest": "^26.6.3",
5863
"jest-watch-typeahead": "^0.6.1",
5964
"lint-staged": "^10.0.10",
65+
"nodemon": "^2.0.7",
6066
"prettier": "^2.0.2",
6167
"typescript": "^4.1.3"
6268
}

‎pages/admin.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
3+
import { signIn, signOut, useSession } from 'next-auth/client'
4+
import Head from 'next/head'
5+
import { useEffect } from 'react'
6+
import { useRouter } from 'next/router'
7+
import React from 'react';
8+
9+
export function Admin( ) : JSX.Element{
10+
11+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
12+
const [session, loading] = useSession();
13+
const router = useRouter();
14+
15+
useEffect(() => {if(!session && !loading){
16+
router.push("/?error=notLoggedIn");
17+
}});
18+
19+
return(
20+
<>
21+
<Head>
22+
<title>De slimste mens | Admin</title>
23+
<meta charSet="utf-8"/>
24+
<meta name="description" content="De slimste mens admin page"/>
25+
<meta name="author" content="Julian van der Horst"/>
26+
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
27+
<meta name="og:title" property="og:title" content="De slimste mens | Admin"/>
28+
<meta name="og:description" property="og:description" content="Admin screen where the views of the contestants be controlled"/>
29+
</Head>
30+
<div className={"flex flex-row justify-center"}>
31+
<h1>Welcome to the admin page</h1>
32+
<button onClick={() => signOut()}>Sign out</button>
33+
</div>
34+
<footer className={"bottom-0 absolute h-20 w-screen bg-gray-200"}>
35+
<div className="text-center flex justify-center flex-col">
36+
<p className={"mt-4"}>
37+
<strong>De slimste mens</strong> by <a className={"text-primary"} href="https://vdhorst.dev">Julian van
38+
der
39+
Horst</a><br />
40+
You can look at the source code on <a
41+
href={"https://github.com/Gulianrdgd/Bussen-online-drinking-game-v2"}> my github</a>
42+
</p>
43+
</div>
44+
</footer>
45+
</>
46+
)
47+
}
48+
49+
export default Admin;

‎pages/api/auth/[...nextauth].ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ const options: InitOptions = {
2525
// Add logic here to look up the user from the credentials supplied
2626
// const hash = await bcrypt.hash(credentials.password, saltRounds);
2727
const data = await query(credentials.username);
28-
// // eslint-disable-next-line no-console
29-
// console.log("cred: ", credentials, "data: ", data);
3028
if (data[0]) {
3129
const res = await bcrypt.compare(credentials.password, data[0].password_hash)
3230
if (res) {
@@ -117,13 +115,13 @@ const options: InitOptions = {
117115
// signIn: async (user, account, profile) => { return Promise.resolve(true) },
118116
// redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
119117
session: async(session, user :User) => {
120-
return { ...session, user: { username: user.username} };
118+
return { ...session, user: { username: user.username, role: user.role} };
121119
},
122120
// eslint-disable-next-line @typescript-eslint/no-unused-vars
123121
jwt: async (token, user: User, account, profile, isNewUser) => {
124122
// eslint-disable-next-line no-console
125123
//console.log('user Hier: ', user, ',\n account Hier: ', account, ',\n profile Hier: ', profile, ',\n newUser Hier: ', isNewUser)
126-
if(user){token.username = user.username}
124+
if(user){token.username = user.username; token.role = user.role}
127125
return token;
128126
}
129127
},

‎pages/api/ws/server.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const io = require('socket.io');
2+
export {}

‎pages/contestant.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
export function Contestant( ) : JSX.Element {
3+
4+
return (<div>Joe</div>)
5+
}
6+
export default Contestant

‎pages/index.tsx

+37-25
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import Head from 'next/head'
22
import Slimste from '../public/images/deslimste.svg'
33
import { signIn, signOut, useSession } from 'next-auth/client'
44
import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
5-
import { router } from 'next/client'
6-
7-
5+
import { useRouter } from 'next/router'
6+
import User from '../models/User'
87
// eslint-disable-next-line @typescript-eslint/no-unused-vars
98
export function Index( ) : JSX.Element{
109

@@ -14,9 +13,16 @@ export function Index( ) : JSX.Element{
1413

1514
// eslint-disable-next-line @typescript-eslint/no-unused-vars
1615
const [session, loading] = useSession();
17-
useEffect(() => {
18-
setState({...state, auth_error: window.location.href.includes("CredentialsSignin")});
19-
});
16+
const router = useRouter();
17+
18+
let init = true;
19+
20+
if(init) {
21+
useEffect(() => {
22+
setState({ ...state, auth_error: window.location.href.includes("CredentialsSignin") });
23+
}, []);
24+
init = false;
25+
}
2026

2127
const [state, setState]= useState({
2228
username: "",
@@ -31,25 +37,32 @@ export function Index( ) : JSX.Element{
3137
function handlePasswordChange(event: ChangeEvent<HTMLInputElement>) {
3238
setState({...state,password: event.target.value})
3339
}
34-
function handleSignInSubmit(event: FormEvent<HTMLFormElement>) {
40+
async function handleSignInSubmit(event: FormEvent<HTMLFormElement>) {
3541
event.preventDefault();
36-
// eslint-disable-next-line no-console
37-
signIn('credentials',{
42+
await signIn('credentials',{
3843
username: state.username,
3944
password: state.password
4045
})
41-
.then(authenticated => {
42-
// eslint-disable-next-line no-console
43-
console.log("Auth: ", authenticated);
44-
//router.push(`/auth/callback`);
45-
})
46-
.catch(() => {
47-
alert("Authentication failed.");
48-
});
4946
}
50-
return(
47+
48+
function toTheGame() {
49+
if('role' in session.user) {
50+
switch ((session.user as User).role) {
51+
case "admin":
52+
router.push("/admin")
53+
break;
54+
case "overlay":
55+
router.push("/stream-overlay");
56+
break;
57+
case "user":
58+
router.push("/contestant");
59+
break;
60+
}
61+
}
62+
}
63+
64+
return(
5165
<>
52-
<div>
5366
<Head>
5467
<title>De slimste mens | welcome</title>
5568
<meta charSet="utf-8"/>
@@ -59,7 +72,6 @@ export function Index( ) : JSX.Element{
5972
<meta name="og:title" property="og:title" content="De slimste mens | Portal"/>
6073
<meta name="og:description" property="og:description" content="Please login to get to your slimste mens screen"/>
6174
</Head>
62-
<body>
6375
<div className={"flex flex-row justify-center"}>
6476
<div className={"ml-20"}>
6577
<Slimste />
@@ -85,6 +97,7 @@ export function Index( ) : JSX.Element{
8597
id="username"
8698
className={"mt-3 form-control rounded-full py-3 px-6"}
8799
onChange={handleUsernameChange}
100+
value={state.username}
88101
/>
89102
</p>
90103
<p className={"mt-5"}>
@@ -96,10 +109,11 @@ export function Index( ) : JSX.Element{
96109
placeholder=""
97110
id="password"
98111
className={"mt-3 form-control rounded-full py-3 px-6"}
112+
value={state.password}
99113
onChange={handlePasswordChange}
100114
/>
101-
<p className={"mt-5 text-red-400 text-l"}>{state.auth_error && "Wrong credentials"}</p>
102115
</p>
116+
<p className={"mt-5 text-red-400 text-l"}>{state.auth_error && "Wrong credentials"}</p>
103117
<button
104118
id="submitButton"
105119
type="submit"
@@ -112,9 +126,9 @@ export function Index( ) : JSX.Element{
112126
}
113127
{session &&
114128
<div className={"mr-20"}>
115-
<h1 className={"text-white italic text-6xl"}>Hello {Capital(session.user.username)}</h1>
129+
<h1 className={"text-white italic text-6xl"}>Hello {Capital((session.user as User).username)}</h1>
116130
<div className={"flex flex-col justify-center"}>
117-
<button className={"mt-10 bg-dsm p-5 rounded-full py-3 px-6 text-black font-bold w-64"}>Get to your
131+
<button className={"mt-10 bg-dsm p-5 rounded-full py-3 px-6 text-black font-bold w-64"} onClick={toTheGame} >Get to your
118132
game screen
119133
</button>
120134
<button className={"mt-10 bg-dsm p-5 rounded-full py-3 px-6 w-32 text-black font-bold"}
@@ -126,7 +140,6 @@ export function Index( ) : JSX.Element{
126140
</div>
127141
</div>
128142
</div>
129-
</body>
130143
<footer className={"bottom-0 absolute h-20 w-screen bg-gray-200"}>
131144
<div className="text-center flex justify-center flex-col">
132145
<p className={"mt-4"}>
@@ -138,7 +151,6 @@ export function Index( ) : JSX.Element{
138151
</p>
139152
</div>
140153
</footer>
141-
</div>
142154
</>
143155
)
144156
}

‎pages/streamOverlay.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export function streamOverlay( ) : JSX.Element {
2+
3+
return (<div>Joe</div>)
4+
}
5+
export default streamOverlay

‎public/images/deslimste.svg

+59
Loading

‎server.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import express, { Request, Response } from "express";
2+
import next from "next";
3+
4+
const dev = process.env.NODE_ENV !== "production";
5+
const app = next({ dev });
6+
const handle = app.getRequestHandler();
7+
const port = process.env.PORT || 3000;
8+
9+
(async () => {
10+
try {
11+
await app.prepare();
12+
const server = express();
13+
server.all("*", (req: Request, res: Response) => {
14+
return handle(req, res);
15+
});
16+
server.listen(port, (err?: any) => {
17+
if (err) throw err;
18+
console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`);
19+
});
20+
} catch (e) {
21+
console.error(e);
22+
process.exit(1);
23+
}
24+
})();

0 commit comments

Comments
 (0)