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

Better usage of stores

This commit is contained in:
Jeroen De Meerleer 2023-03-20 19:14:35 +01:00
parent 307bca7678
commit a9190d7d38
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
8 changed files with 793 additions and 631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1206
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
src/stores.js → src/lib/stores.js
View File

@ -2,9 +2,10 @@ import { writable } from 'svelte/store';
export const urls = {
capabilities: "/capabilities",
login: "/login"
login: "/login",
checkusertaken: "/register/checkusertaken"
}
export const alerts = writable([])
export const globals = writable({
server: {
url: '',

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

@ -0,0 +1,39 @@
<div class="container h-full mx-auto flex justify-center items-center flex-col">
<h1 class="my-3">Blackbird Chess</h1>
{#each alertsvar as alert, i}
<aside class="alert variant-filled-error">
<!-- 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}
<slot />
</div>
<style lang="scss">
</style>
<script lang="js">
import {alerts} from "$lib/stores.js";
let alertsvar;
function closeWarning(e) {
let index = e.target.dataset.index;
alerts.update(function (data) {
data.splice(index, 1)
return data;
})
}
alerts.subscribe((value) => {
alertsvar = value;
});
</script>

55
src/routes/account/login/+page.svelte
View File

@ -1,55 +1,18 @@
<div class="container h-full mx-auto flex justify-center items-center flex-col">
<h1 class="my-3">Blackbird Chess</h1>
{#if message.visible}
<aside class="alert variant-filled-error">
<!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message -->
<p class="alert-message">{message.text}</p>
<!-- Actions -->
<div class="alert-actions">
<i on:click={closeWarning} class="icon icon-close"></i>
</div>
</aside>
{/if}
{#if globalvars.server.url == ''}
<Server/>
{:else}
<Login/>
{/if}
{#if globalvars.server.url == ''}
<Server on:message={showMessage} bind:globals={globalvars}/>
{:else}
<Login on:message={showMessage} bind:globals={globalvars}/>
{/if}
</div>
<style lang="scss">
</style>
<script lang="js">
import { globals } from "../../../stores.js";
import Login from './Login.svelte'
import Server from './Server.svelte'
<script>
import Server from "./Server.svelte";
import Login from "./Login.svelte";
import {globals} from "$lib/stores.js";
let globalvars;
let message = {
visible: false,
text: '',
class: 'error'
};
globals.subscribe(value => {
globalvars = value;
});
function closeWarning() {
message.visible = false;
}
function showMessage(error) {
console.log(error);
message.text = error.detail.text;
message.class = 'error'
message.visible = true;
}
</script>

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

@ -10,10 +10,10 @@
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
<div class="flex justify-between">
{#if globals.server.caps.register }
{#if globalvars.server.caps.register }
<a href="/account/register">Register</a>
{/if}
{#if globals.server.caps.reset }
{#if globalvars.server.caps.reset }
<a href="/account/reset">Reset your password</a>
{/if}
</div>
@ -25,17 +25,21 @@
</style>
<script lang="js">
import { urls } from "../../../stores.js";
import { urls, alerts, globals } from "$lib/stores.js";
import { createEventDispatcher } from 'svelte';
var email = '';
var password = '';
export let globals;
let globalvars;
globals.subscribe(value => {
globalvars = value;
});
const dispatch = createEventDispatcher();
function handleLogin() {
dispatch('message', {text: 'Not yet implemented'})
alerts.update(data => [...data, {text: 'Not yet implemented'}]);
}
</script>

18
src/routes/account/login/Server.svelte
View File

@ -16,15 +16,12 @@
</style>
<script lang="js">
import { urls } from "../../../stores.js";
import { urls, alerts, globals } from "$lib/stores.js";
import {createEventDispatcher, onMount} from 'svelte';
import {browser} from "$app/environment";
import { requestor, setBaseUrl } from "../../../serverrequest.js";
export let globals;
var loginserver;
const dispatch = createEventDispatcher();
onMount(() => {
if(sessionStorage.getItem('serverurl') != undefined) {
@ -33,11 +30,12 @@
}
})
async function handleSelectServer() {
if(!isValidHttpUrl(loginserver)) {
loginserver = 'https://' + loginserver;
if(!isValidHttpUrl(loginserver)) {
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
}
}
console.log("Selected server: " + loginserver);
@ -45,18 +43,18 @@
try {
let response = await requestor.get(urls.capabilities);
let data = JSON.parse(response.data);
if(!data.login) return dispatch('message', {text: 'This server is unavailable for login currently'})
globals.server.url = loginserver;
globals.server.caps = data;
let caps = JSON.parse(response.data);
if(!caps.login) return alerts.update(data => [...data, {text: loginserver + ' is unavailable for login currently'}]);
globals.update(data => ({ ...data, ...{server: {url: loginserver, caps: caps}}}));
if(browser) {
sessionStorage.setItem('serverurl', loginserver);
}
} catch (error) {
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
}
}
function isValidHttpUrl(string) {
let url;
try {

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

@ -1 +1,83 @@
<h3>Register page</h3>
{#if globalvars.server.caps.register }
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Username:</span>
<input bind:value="{name}" on:input="{checkName}" type="text" name="email" id="register-name" class="input">
</label>
<label class="label my-3">
<span>E-mail:</span>
<input bind:value="{email}" on:input="{checkEmail}" type="email" name="email" id="register-email" class="input">
</label>
<label class="label my-3">
<span>Password:</span>
<input type="password" name="password" id="register-password" class="input">
</label>
<label class="label my-3">
<span>Repeat password:</span>
<input type="password" name="password2" id="register-password-repeat" class="input">
</label>
<button type="button" id="register-server-submit" class="btn variant-filled-primary my-3">Register</button>
</form>
{:else }
<h3>There is no hope</h3>
{/if}
<style lang="scss">
</style>
<script lang="js">
import {alerts, globals, urls} from "$lib/stores.js";
import { requestor, setBaseUrl } from "../../../serverrequest.js";
let globalvars;
let email = '';
let name = '';
globals.subscribe(value => {
globalvars = value;
});
setBaseUrl(globalvars.server.url);
async function checkEmail(e) {
if(document.querySelector('#register-email').checkValidity() === false) {
alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
return;
}
try {
let response = await requestor.post(urls.checkusertaken, JSON.stringify({ email: email }));
let data = JSON.parse(response.data);
if(typeof data.email == 'undefined') {
alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
}
if(data.email == 'taken') {
alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
alerts.update(data => [...data, {text: 'Email is already taken', type: 'emailtaken'}]);
}
} catch (error) {
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
}
}
async function checkName(e) {
if(document.querySelector('#register-name').checkValidity() === false) {
alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
return;
}
try {
let response = await requestor.post(urls.checkusertaken, JSON.stringify({ name: name }));
let data = JSON.parse(response.data);
if(typeof data.name == 'undefined') {
alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
}
if(data.name == 'taken') {
alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
alerts.update(data => [...data,{text: 'Username is already taken', type: 'usernametaken'}]);
}
} catch (error) {
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
}
}
</script>

3
src/serverrequest.js
View File

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