ENHANCEMENT: using global vars for server-capabilities

This commit is contained in:
Jeroen De Meerleer 2023-03-19 18:08:57 +01:00
parent 3c650de9fd
commit fa9f8d3a83
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
7 changed files with 75 additions and 79 deletions

View File

@ -3,7 +3,7 @@
import { onMount } from 'svelte';
onMount(async () => {
goto("/login");
goto("/account/login");
});
</script>

View File

@ -14,7 +14,11 @@
</aside>
{/if}
<Server on:message={showMessage}/>
{#if globalvars.server.url == ''}
<Server on:message={showMessage} bind:globals={globalvars}/>
{:else}
<Login on:message={showMessage} bind:globals={globalvars}/>
{/if}
</div>
<style lang="scss">
@ -22,19 +26,20 @@
</style>
<script lang="js">
import { urls, serverurl } from "../../stores.js";
import login from './Login.svelte'
import { globals } from "../../../stores.js";
import Login from './Login.svelte'
import Server from './Server.svelte'
let globalvars;
let message = {
visible: false,
text: '',
class: 'error'
};
var myserver
serverurl.subscribe(value => {
myserver = value;
globals.subscribe(value => {
globalvars = value;
});
function closeWarning() {

View File

@ -0,0 +1,41 @@
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Username:</span>
<input type="email" name="email" id="login-email" class="input" bind:value={email}>
</label>
<label class="label my-3">
<span>Password:</span>
<input type="password" name="password" id="login-password" class="input" bind:value={password}>
</label>
<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 }
<a href="/account/register">Register</a>
{/if}
{#if globals.server.caps.reset }
<a href="/account/reset">Reset your password</a>
{/if}
</div>
</form>
<style lang="scss">
</style>
<script lang="js">
import { urls } from "../../../stores.js";
import { createEventDispatcher } from 'svelte';
var email = '';
var password = '';
export let globals;
const dispatch = createEventDispatcher();
function handleLogin() {
dispatch('message', {text: 'Not yet implemented'})
}
</script>

View File

@ -6,7 +6,7 @@
name="server"
id="login-server-url"
class="input"
bind:value={server}>
bind:value={loginserver}>
</label>
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
</form>
@ -16,30 +16,30 @@
</style>
<script lang="js">
import { urls, serverurl } from "../../stores.js";
import { urls } from "../../../stores.js";
import { createEventDispatcher } from 'svelte';
import { goto } from "$app/navigation";
export let globals;
const dispatch = createEventDispatcher();
var server = '';
var loginserver;
function handleSelectServer() {
if(!isValidHttpUrl(server)) {
server = 'https://' + server;
if(!isValidHttpUrl(server)) {
if(!isValidHttpUrl(loginserver)) {
loginserver = 'https://' + loginserver;
if(!isValidHttpUrl(loginserver)) {
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
}
}
console.log("Selected server: " + server);
fetch(server + urls.capabilities)
console.log("Selected server: " + loginserver);
fetch(loginserver + urls.capabilities)
.then((response) => {
if (!response.ok) return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
return response.json()
})
.then((data) => {
if(!data.login) return dispatch('message', {text: 'This server is unavailable for login currently'})
serverurl.update(n => server);
goto('/login')
globals.server.url = loginserver;
globals.server.caps = data;
})
.catch((error) => {
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})

View File

@ -0,0 +1 @@
<h3>Register page</h3>

View File

@ -1,60 +0,0 @@
<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}
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Username:</span>
<input type="email" name="email" id="login-email" class="input" bind:value={email}>
</label>
<label class="label my-3">
<span>Password:</span>
<input type="password" name="password" id="login-password" class="input" bind:value={email}>
</label>
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
</form>
</div>
<style lang="scss">
</style>
<script lang="js">
import { urls, serverurl } from "../../stores.js";
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
let message = {
visible: false,
text: '',
class: 'error'
};
var email = '';
var password = '';
var bbcserver
bbcserver.subscribe(value => {
bbcserver = value;
});
onMount(async () => {
if(serverurl == null) {
goto('/')
}
});
function handleLogin() {
unavailableServer('To be implemented')
}
</script>

View File

@ -5,4 +5,13 @@ export const urls = {
login: "/login"
}
export const serverurl = writable(null);
export const globals = writable({
server: {
url: '',
caps: {
register: false,
login: false,
reset: false
},
}
});