add admin login

This commit is contained in:
bytedream 2023-08-27 23:33:22 +02:00
parent 7392b61e3e
commit 4b84c475b8
16 changed files with 377 additions and 44 deletions

View File

@ -1,3 +1,5 @@
DATABASE_URI=sqlite://./database.db
ADMIN_USER=admin
ADMIN_PASSWORD=admin
PUBLIC_START_DATE=2023-12-26T00:00:00+0200
PUBLIC_BASE_PATH=

View File

@ -34,5 +34,7 @@ Configurations can be done with env variables
| `HOST` | Host the server should listen on |
| `PORT` | Port the server should listen on |
| `DATABASE_URI` | URI to the database as a connection string. Supported databases are [sqlite](https://www.sqlite.org/index.html) and [mariadb](https://mariadb.org/) |
| `ADMIN_USER` | Name for the root admin user. The admin user won't be available if `ADMIN_USER` or `ADMIN_PASSWORD` is set |
| `ADMIN_PASSWORD` | Password for the root admin user defined via `ADMIN_USER`. The admin user won't be available if `ADMIN_USER` or `ADMIN_PASSWORD` is set |
| `PUBLIC_BASE_PATH` | If running the website on a sub-path, set this variable to the path so that assets etc. can find the correct location |
| `PUBLIC_START_DATE` | The start date when the event starts |

88
package-lock.json generated
View File

@ -8,18 +8,23 @@
"name": "website",
"version": "0.0.1",
"dependencies": {
"bcrypt": "^5.1.1",
"dotenv": "^16.3.1",
"mariadb": "^3.2.0",
"sequelize": "^6.32.1",
"sequelize-typescript": "^2.1.5",
"sqlite3": "^5.1.6"
},
"devDependencies": {
"@sveltejs/adapter-node": "^1.3.1",
"@sveltejs/kit": "^1.20.4",
"@types/bcrypt": "^5.0.0",
"@types/node": "^20.5.6",
"@types/validator": "^13.11.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"daisyui": "^3.5.0",
"daisyui": "^3.6.3",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
@ -946,6 +951,15 @@
"node": ">= 6"
}
},
"node_modules/@types/bcrypt": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-5.0.0.tgz",
"integrity": "sha512-agtcFKaruL8TmcvqbndlqHPSJgsolhf/qPWchFlgnW1gECTN/nKbFcoFnvKAQRFfKbh+BO6A3SWdJu9t+xF3Lw==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/chai": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
@ -998,9 +1012,9 @@
"integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
},
"node_modules/@types/node": {
"version": "20.4.8",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.8.tgz",
"integrity": "sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg=="
"version": "20.5.6",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.6.tgz",
"integrity": "sha512-Gi5wRGPbbyOTX+4Y2iULQ27oUPrefaB0PxGQJnfyWN3kvEDGM3mIB5M/gQLmitZf7A9FmLeaqxD3L1CXpm3VKQ=="
},
"node_modules/@types/pug": {
"version": "2.0.6",
@ -1540,6 +1554,24 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"node_modules/bcrypt": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.1.tgz",
"integrity": "sha512-AGBHOG5hPYZ5Xl9KXzU5iKq9516yEmvCKDg3ecP5kX2aB6UqTeXZxk2ELnDgDm6BQSMlLt9rDB4LoSMx0rYwww==",
"hasInstallScript": true,
"dependencies": {
"@mapbox/node-pre-gyp": "^1.0.11",
"node-addon-api": "^5.0.0"
},
"engines": {
"node": ">= 10.0.0"
}
},
"node_modules/bcrypt/node_modules/node-addon-api": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
"integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
},
"node_modules/binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@ -1951,9 +1983,9 @@
}
},
"node_modules/daisyui": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.5.0.tgz",
"integrity": "sha512-wSaeXwaYdMv4yURv9wj7kKQQN9Jyumfh/skIpZfCNkCb2jLf/so+iNKSM8l4rDN0TRvB5OccMlAvsf2UAtk2gg==",
"version": "3.6.3",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.6.3.tgz",
"integrity": "sha512-VNWogAjx37H8kNYd2E/+r1OXc6dOvJTKlKltqIKAlNMFVfx2BIKPcmnVxaHQLfj2vhv1mYDBjgWj+1enQ+4yZA==",
"dev": true,
"dependencies": {
"colord": "^2.9",
@ -4190,6 +4222,12 @@
"node": ">=8.10.0"
}
},
"node_modules/reflect-metadata": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
"integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
"peer": true
},
"node_modules/resolve": {
"version": "1.22.2",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@ -4436,6 +4474,42 @@
"node": ">= 10.0.0"
}
},
"node_modules/sequelize-typescript": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/sequelize-typescript/-/sequelize-typescript-2.1.5.tgz",
"integrity": "sha512-x1CNODct8gJyfZPwEZBU5uVGNwgJI2Fda913ZxD5ZtCSRyTDPBTS/0uXciF+MlCpyqjpmoCAPtudQWzw579bzA==",
"dependencies": {
"glob": "7.2.0"
},
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"@types/node": "*",
"@types/validator": "*",
"reflect-metadata": "*",
"sequelize": ">=6.20.1"
}
},
"node_modules/sequelize-typescript/node_modules/glob": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
"dependencies": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
},
"engines": {
"node": "*"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",

View File

@ -15,10 +15,13 @@
"devDependencies": {
"@sveltejs/adapter-node": "^1.3.1",
"@sveltejs/kit": "^1.20.4",
"@types/bcrypt": "^5.0.0",
"@types/node": "^20.5.6",
"@types/validator": "^13.11.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"daisyui": "^3.5.0",
"daisyui": "^3.6.3",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
@ -38,9 +41,11 @@
},
"type": "module",
"dependencies": {
"bcrypt": "^5.1.1",
"dotenv": "^16.3.1",
"mariadb": "^3.2.0",
"sequelize": "^6.32.1",
"sequelize-typescript": "^2.1.5",
"sqlite3": "^5.1.6"
}
}

View File

@ -1,4 +1,25 @@
import { sequelize } from '$lib/server/database';
import type { Handle } from '@sveltejs/kit';
import { env } from '$env/dynamic/public';
import { hasSession } from '$lib/server/session';
// make sure that the database and tables exist
await sequelize.sync();
export const handle: Handle = async ({ event, resolve }) => {
if (
event.url.pathname.startsWith(`${env.PUBLIC_BASE_PATH}/admin`) &&
event.url.pathname != `${env.PUBLIC_BASE_PATH}/admin/login`
) {
if (!hasSession(event.cookies.get('session') || '')) {
return new Response(null, {
status: 302,
headers: {
location: `${env.PUBLIC_BASE_PATH}/admin/login`
}
});
}
}
return resolve(event);
};

View File

@ -31,10 +31,11 @@
</span>
</label>
{/if}
<div class="flex items-center">
<div class="flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
<input
class:checkbox={type === 'checkbox'}
class:input,input-bordered,w-[100%],sm:max-w-[16rem]={type !== 'checkbox'}
class:input,input-bordered={type !== 'checkbox'}
class:w-[100%]={initialType !== 'password' && initialType !== 'checkbox'}
class:pr-11={initialType === 'password'}
{id}
{name}

View File

@ -0,0 +1,58 @@
<script lang="ts">
import { IconOutline } from 'svelte-heros-v2';
import { fly } from 'svelte/transition';
import { onDestroy } from 'svelte';
export let timeout = 2000;
export let show = false;
export function reset() {
progressValue = 1;
}
let progressValue = 100;
let intervalClear: ReturnType<typeof setInterval> | undefined;
function startTimout() {
intervalClear = setInterval(() => {
if (++progressValue > 100) {
clearInterval(intervalClear);
show = false;
progressValue = 100;
}
}, timeout / 100);
}
$: if (show) {
progressValue = 0;
startTimout();
}
onDestroy(() => clearInterval(intervalClear));
</script>
{#if show && progressValue !== 0}
<div
in:fly={{ x: 0, duration: 200 }}
out:fly={{ x: 400, duration: 400 }}
class="toast"
on:mouseenter={() => {
clearInterval(intervalClear);
progressValue = 1;
}}
on:mouseleave={startTimout}
role="alert"
>
<div class="alert alert-error border-none relative text-gray-900 overflow-hidden">
<div class="flex gap-2 z-10">
<IconOutline name="exclamation-circle-outline" />
<span>Nutzername oder Passwort falsch</span>
</div>
<progress
class="progress progress-error absolute bottom-0 h-[3px] w-full bg-[rgba(0,0,0,0.6)]"
value={progressValue}
max="100"
/>
</div>
</div>
{/if}

View File

@ -1 +0,0 @@
// place files you want to import through the `$lib` alias in this folder.

View File

@ -1,37 +1,53 @@
import { DataTypes, Sequelize } from 'sequelize';
import { DataTypes } from 'sequelize';
import { env } from '$env/dynamic/private';
import { building, dev } from '$app/environment';
import * as bcrypt from 'bcrypt';
import { BeforeCreate, BeforeUpdate, Column, Model, Sequelize, Table } from 'sequelize-typescript';
@Table({ modelName: 'user' })
export class User extends Model {
@Column({ type: DataTypes.STRING, allowNull: false })
declare firstname: string;
@Column({ type: DataTypes.STRING, allowNull: false })
declare lastname: string;
@Column({ type: DataTypes.DATE, allowNull: false })
declare birthday: Date;
@Column({ type: DataTypes.STRING })
declare telephone: string;
@Column({ type: DataTypes.STRING, allowNull: false })
declare username: string;
@Column({ type: DataTypes.ENUM('java', 'bedrock', 'cracked'), allowNull: false })
declare playertype: 'java' | 'bedrock' | 'cracked';
@Column({ type: DataTypes.STRING })
declare password: string;
@Column({ type: DataTypes.UUIDV4 })
declare uuid: string;
}
@Table({ modelName: 'admin' })
export class Admin extends Model {
@Column({ type: DataTypes.STRING, allowNull: false })
declare username: string;
@Column({ type: DataTypes.STRING, allowNull: false })
declare password: string;
@Column({ type: DataTypes.BIGINT, allowNull: false })
declare permissions: number;
@BeforeCreate
@BeforeUpdate
static hashPassword(instance: Admin) {
if (instance.password != null) {
instance.username = bcrypt.hashSync(instance.password, 10);
}
}
validatePassword(password: string): boolean {
return bcrypt.compareSync(password, this.password);
}
}
export const sequelize = new Sequelize(building ? 'sqlite::memory:' : env.DATABASE_URI, {
// only log sql queries in dev mode
logging: dev ? console.log : false
});
export const User = sequelize.define('user', {
firstname: {
type: DataTypes.STRING,
allowNull: false
},
lastname: {
type: DataTypes.STRING,
allowNull: false
},
birthday: {
type: DataTypes.DATE,
allowNull: false
},
telephone: DataTypes.STRING,
username: {
type: DataTypes.STRING,
allowNull: false
},
playertype: {
type: DataTypes.ENUM('java', 'bedrock', 'cracked'),
allowNull: false
},
password: DataTypes.TEXT,
uuid: {
type: DataTypes.UUIDV4,
allowNull: false
}
logging: dev ? console.log : false,
models: [User, Admin]
});

11
src/lib/server/session.ts Normal file
View File

@ -0,0 +1,11 @@
const sessions: string[] = [];
export function addSession(): string {
const session = 'AAA';
sessions.push(session);
return session;
}
export function hasSession(session: string): boolean {
return sessions.find((v) => v == session) != undefined;
}

View File

@ -80,7 +80,9 @@
/>
<main>
<div class="h-screen w-full">
<slot />
</div>
</main>
<nav>
<div

View File

@ -0,0 +1,3 @@
<div class="h-full">
<slot />
</div>

View File

@ -0,0 +1,3 @@
<div class="flex justify-center items-center w-full h-full">
<slot />
</div>

View File

@ -0,0 +1,86 @@
<script lang="ts">
import Input from '$lib/components/Input/Input.svelte';
import { env } from '$env/dynamic/public';
import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
import { goto } from '$app/navigation';
let passwordValue: string;
async function login() {
// eslint-disable-next-line no-async-promise-executor
loginRequest = new Promise(async (resolve, reject) => {
const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/login`, {
method: 'POST',
body: new FormData(document.forms[0])
});
if (response.ok) {
await goto(`${env.PUBLIC_BASE_PATH}/admin`);
resolve();
} else if (response.status == 403) {
passwordValue = '';
showError = true;
errorToastElement.reset();
resolve();
} else {
reject(Error(`${response.statusText} (${response.status})`));
}
loginRequest = null;
});
}
let loginRequest: Promise<void> | null = null;
let showError = false;
let errorToastElement: ErrorToast;
</script>
<div class="card px-14 py-6 shadow-lg">
<h1 class="text-center text-4xl mt-2 mb-4">Craftattack Admin Login</h1>
<form class="flex flex-col items-center" on:submit|preventDefault={login}>
<div class="flex flex-col justify-center items-center">
<div class="grid gap-4">
<Input id="username" name="username" type="text" required={true}>
<span slot="label">Nutzername</span>
</Input>
<Input
id="password"
name="password"
type="password"
required={true}
bind:value={passwordValue}
>
<span slot="label">Passwort</span>
</Input>
</div>
</div>
<div class="grid w-min mt-6">
<div class="row-[1] col-[1]">
<Input id="submit" type="submit" value="Login" disabled={loginRequest !== null} />
</div>
{#key loginRequest}
{#if loginRequest}
{#await loginRequest}
<span
class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
/>
{:catch error}
<dialog
class="modal"
on:close={() => setTimeout(() => (loginRequest = null), 200)}
open
>
<form method="dialog" class="modal-box">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></button>
<h3 class="font-bold text-lg">Error</h3>
<p class="py-4">{error.message}</p>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
<button>close</button>
</form>
</dialog>
{/await}
{/if}
{/key}
</div>
</form>
</div>
<ErrorToast timeout={2000} bind:show={showError} bind:this={errorToastElement} />

View File

@ -0,0 +1,47 @@
import type { RequestHandler } from '@sveltejs/kit';
import { Admin } from '$lib/server/database';
import { env as publicEnv } from '$env/dynamic/public';
import { env } from '$env/dynamic/private';
import { addSession } from '$lib/server/session';
export const POST = (async ({ request, cookies }) => {
const data = await request.formData();
const username = data.get('username') as string | null;
const password = data.get('password') as string | null;
if (username == null || password == null) {
return new Response(null, {
status: 403
});
}
if (
env.ADMIN_USER &&
env.ADMIN_PASSWORD &&
username == env.ADMIN_USER &&
password == env.ADMIN_PASSWORD
) {
cookies.set('session', addSession(), {
path: `${publicEnv.PUBLIC_BASE_PATH}/admin`,
maxAge: 60 * 60 * 24 * 90,
httpOnly: true,
secure: true
});
return new Response();
}
const user = await Admin.findOne({ where: { username: username } });
if (user && user.validatePassword(password)) {
cookies.set('session', addSession(), {
path: `${publicEnv.PUBLIC_BASE_PATH}/admin`,
maxAge: 60 * 60 * 24 * 90,
httpOnly: true,
secure: true
});
return new Response();
} else {
return new Response(null, {
status: 403
});
}
}) satisfies RequestHandler;

View File

@ -8,7 +8,10 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
"strict": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"target": "es2017"
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//