blackbirdchess
/
blackbirdchess-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added login

This commit is contained in:
Jeroen De Meerleer 2023-08-16 20:42:54 +02:00
parent 7833f5326e
commit 6fe708664e
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
17 changed files with 464 additions and 882 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc.cjs
View File

@ -1,16 +1,10 @@
module.exports = { module.exports = {
root: true, root: true,
parser: '@typescript-eslint/parser', extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript')
},
parserOptions: { parserOptions: {
sourceType: 'module', sourceType: 'module',
ecmaVersion: 2020 ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
}, },
env: { env: {
browser: true, browser: true,

1
.npmrc
View File

@ -1 +1,2 @@
engine-strict=true engine-strict=true
resolution-mode=highest

17
jsconfig.json Normal file
View File

@ -0,0 +1,17 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

1079
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

34
package.json
View File

@ -6,40 +6,34 @@
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"test": "playwright test", "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check . && eslint .", "lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.28.1", "@floating-ui/dom": "^1.5.1",
"@skeletonlabs/skeleton": "^1.0.0", "@skeletonlabs/skeleton": "^1.12.0",
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0", "@sveltejs/kit": "^1.5.0",
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.4",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@tailwindcss/typography": "^0.5.9",
"@typescript-eslint/parser": "^5.45.0", "autoprefixer": "^10.4.15",
"autoprefixer": "^10.4.7",
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte": "^2.26.0",
"postcss": "^8.4.14", "postcss": "^8.4.28",
"postcss-load-config": "^4.0.1",
"prettier": "^2.8.0", "prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1", "prettier-plugin-svelte": "^2.8.1",
"sass": "^1.65.1",
"svelte": "^3.54.0", "svelte": "^3.54.0",
"svelte-check": "^3.0.1", "svelte-check": "^3.0.1",
"svelte-preprocess": "^4.10.7", "tailwindcss": "^3.3.3",
"tailwindcss": "^3.1.5", "typescript": "^5.0.0",
"tslib": "^2.4.1", "vite": "^4.3.0"
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vitest": "^0.25.3"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"axios": "^1.3.4" "axios": "^1.4.0"
} }
} }

6
postcss.config.cjs
View File

@ -1,6 +1,6 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {} autoprefixer: {},
} },
}; }

22
src/app.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html > <!DOCTYPE html>
<html lang="en" class="dark"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-theme="skeleton"> <body data-sveltekit-preload-data="hover" data-theme="skeleton">
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

0
src/app.pcss → src/app.postcss
View File

47
src/routes/+layout.svelte
View File

@ -1,11 +1,44 @@
<script lang="ts"> <script lang="ts">
import '../app.pcss'; // The ordering of these imports is critical to your app working properly
// The ordering of these imports is critical to your app working properly import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering import '@skeletonlabs/skeleton/styles/all.css';
import '@skeletonlabs/skeleton/styles/all.css'; // Most of your app wide CSS should be put in this file
// Most of your app wide CSS should be put in this file import '../app.postcss';
import '../app.pcss';
import {alerts, globals} from "$lib/stores.js";
let alertsvar;
let globalvars;
function closeWarning(e) {
let index = e.target.dataset.index;
alerts.update(function (data) {
data.splice(index, 1)
return data;
})
}
alerts.subscribe((value) => {
alertsvar = value;
});
globals.subscribe(value => {
globalvars = value;
});
</script> </script>
{#if typeof globalvars.user !== 'undefined' }
{#each alertsvar as alert, i}
<aside class="alert variant-filled-{alert.class}">
<!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message -->
<p class="alert-message">{alert.text}</p>
<!-- Actions -->
<div class="alert-actions">
<i on:click={closeWarning} data-index={i} class="icon icon-close"></i>
</div>
</aside>
{/each}
{/if}
<slot /> <slot />

19
src/routes/+page.svelte
View File

@ -1,9 +1,22 @@
<script> <script>
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import {globals} from "$lib/stores.js";
onMount(async () => { let globalvars;
goto("/account/login");
globals.subscribe(value => {
globalvars = value;
}); });
</script> onMount(async () => {
if(typeof globalvars.user === 'undefined') {
goto("/account/login");
}
});
</script>
{#if typeof globalvars.user !== 'undefined'}
<h1>Welcome {globalvars.user.name}</h1>
{/if}

39
src/routes/account/+layout.svelte
View File

@ -1,20 +1,23 @@
<div class="container h-full mx-auto flex justify-center items-center flex-col"> <div class="container h-full mx-auto flex justify-center items-center flex-col">
<h1 class="my-3">Blackbird Chess</h1> <h1 class="my-3">Blackbird Chess</h1>
{#each alertsvar as alert, i} {#if typeof globalvars.user == 'undefined' }
<aside class="alert variant-filled-{alert.class}"> {#each alertsvar as alert, i}
<!-- Icon --> <aside class="alert variant-filled-{alert.class} mb-3">
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div> <!-- Icon -->
<!-- Message --> <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<p class="alert-message">{alert.text}</p> <!-- Message -->
<!-- Actions --> <p class="alert-message">{alert.text}</p>
<div class="alert-actions"> <!-- Actions -->
<i on:click={closeWarning} data-index={i} class="icon icon-close"></i> <div class="alert-actions">
</div> <i on:click={closeWarning} data-index={i} class="icon icon-close"></i>
</aside> </div>
{/each} </aside>
{/each}
<slot /> {/if}
<div class="card p-4 w-50 text-token space-y-4">
<slot />
</div>
</div> </div>
@ -23,9 +26,11 @@
</style> </style>
<script lang="js"> <script lang="js">
import {alerts} from "$lib/stores.js"; import {alerts, globals} from "$lib/stores.js";
let alertsvar; let alertsvar;
let globalvars;
function closeWarning(e) { function closeWarning(e) {
let index = e.target.dataset.index; let index = e.target.dataset.index;
alerts.update(function (data) { alerts.update(function (data) {
@ -36,4 +41,8 @@
alerts.subscribe((value) => { alerts.subscribe((value) => {
alertsvar = value; alertsvar = value;
}); });
globals.subscribe(value => {
globalvars = value;
});
</script> </script>

24
src/routes/account/login/Login.svelte
View File

@ -3,7 +3,7 @@
</div> </div>
<form name="login-server" class="flex flex-col"> <form name="login-server" class="flex flex-col">
<label class="label my-3"> <label class="label my-3">
<span>Username:</span> <span>E-Mail:</span>
<input type="email" name="email" id="login-email" class="input" bind:value={email}> <input type="email" name="email" id="login-email" class="input" bind:value={email}>
</label> </label>
<label class="label my-3"> <label class="label my-3">
@ -31,6 +31,9 @@
import { urls, alerts, globals } from "$lib/stores.js"; import { urls, alerts, globals } from "$lib/stores.js";
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import {browser} from "$app/environment"; import {browser} from "$app/environment";
import {requestor} from "../../../serverrequest.js";
import {throwError} from "svelte-preprocess/dist/modules/errors.js";
import {goto} from "$app/navigation";
var email = ''; var email = '';
var password = ''; var password = '';
@ -41,10 +44,23 @@
globalvars = value; globalvars = value;
}); });
const dispatch = createEventDispatcher();
function handleLogin() { async function handleLogin() {
alerts.update(data => [...data, {text: 'Not yet implemented', type: 'notimplemented', class: 'warning'}]); try {
let postdata = {email: email, password: password}
let response = await requestor.post(urls.login, JSON.stringify(postdata));
let responsedata = JSON.parse(response.data);
if(response.status != 200) {
let message = 'Something went wrong during login'
if(typeof responsedata.message !== 'undefined') message = responsedata.message
throwError(message)
}
if(!responsedata.success) return alerts.update(data => [...data, {text: 'Login failed: ' + responsedata.message , class: 'error'}]);
globals.update((globalobj) => ({ ...globalobj, ...{user: responsedata.user }}));
goto('/')
} catch (error) {
return alerts.update(data => [...data, {text: error, class: 'error'}]);
}
} }
function handleGoToServerSelect() { function handleGoToServerSelect() {

4
src/routes/account/register/+page.svelte
View File

@ -166,11 +166,11 @@
let responsejson = JSON.parse(response.data); let responsejson = JSON.parse(response.data);
if (response.status !== 200) { if (response.status !== 200) {
alerts.update(data => data.filter(alert => alert.type !== 'register-errors')); alerts.update(data => data.filter(alert => alert.type !== 'register-errors'));
alerts.update(data => [...data, {text: responsejson.message, type: 'register-errors', class: 'error'}]); alerts.update(data => [...data, {text: responsejson.Message, type: 'register-errors', class: 'error'}]);
return false; return false;
} }
alerts.update(data => []); alerts.update(data => []);
alerts.update(data => [...data, {text: responsejson.message, type: 'register-success', class: 'success'}]); alerts.update(data => [...data, {text: responsejson.Message, type: 'register-success', class: 'success'}]);
return false; return false;
} catch (error) { } catch (error) {
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]); alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]);

3
src/serverrequest.js
View File

@ -3,7 +3,8 @@ import {Axios} from "axios";
var options = { var options = {
headers: { headers: {
'X-BlackbirdChessClient': 'webclient', 'X-BlackbirdChessClient': 'webclient',
"Content-Type": "application/json", 'Content-Type': 'application/json',
'Accept': 'application/json'
} }
} }

14
svelte.config.js
View File

@ -1,18 +1,11 @@
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite'; import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors // Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors // for more information about preprocessors
preprocess: [ preprocess: vitePreprocess(),
vitePreprocess(),
preprocess({
postcss: true
})
],
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter. // If your environment is not supported or you settled on a specific environment, switch out the adapter.
@ -20,5 +13,4 @@ const config = {
adapter: adapter() adapter: adapter()
} }
}; };
export default config;
export default config;

19
tailwind.config.cjs
View File

@ -1,15 +1,14 @@
import { join } from 'path'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import skeleton from '@skeletonlabs/skeleton/tailwind/skeleton.cjs'
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: 'class', darkMode: 'class',
content: [ content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
'./src/**/*.{html,js,svelte,ts}',
require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
],
theme: { theme: {
extend: {} extend: {},
}, },
plugins: [ plugins: [forms,typography,...skeleton()],
...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')(), }
require('@tailwindcss/forms')
]
};

6
vite.config.js Normal file
View File

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});