ENHANCEMENT: better use of svelte
This commit is contained in:
parent
f9bfc4b281
commit
986b97d143
GPG Key ID:
28CCCB8F62BFADD6
@ -1,88 +1,9 @@
|
||||
<div class="container h-full mx-auto flex justify-center items-center flex-col">
|
||||
<h1 class="my-3">Blackbird Chess</h1>
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
|
||||
{#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>Please select the server to login:</span>
|
||||
<input
|
||||
type="url"
|
||||
name="server"
|
||||
id="login-server-url"
|
||||
class="input"
|
||||
bind:value={serverurl}>
|
||||
</label>
|
||||
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
<script lang="js">
|
||||
import { urls, server } from "../stores.js";
|
||||
import {goto} from "$app/navigation";
|
||||
let message = {
|
||||
visible: false,
|
||||
text: '',
|
||||
class: 'error'
|
||||
};
|
||||
var serverurl = '';
|
||||
function handleSelectServer() {
|
||||
if(!isValidHttpUrl(serverurl)) {
|
||||
serverurl = 'https://' + serverurl;
|
||||
if(!isValidHttpUrl(serverurl)) {
|
||||
return unavailableServer('This server is not a Blackbird Chess Server')
|
||||
}
|
||||
}
|
||||
console.log("Selected server: " + serverurl);
|
||||
fetch(serverurl + urls.capabilities)
|
||||
.then((response) => {
|
||||
if (!response.ok) return unavailableServer('This server is not a Blackbird Chess Server')
|
||||
return response.json()
|
||||
})
|
||||
.then((data) => {
|
||||
if(!data.login) return unavailableServer('This server is unavailable for login currently');
|
||||
server.update(n => serverurl);
|
||||
goto('/login')
|
||||
})
|
||||
.catch((error) => {
|
||||
return unavailableServer('This server is not a Blackbird Chess Server')
|
||||
onMount(async () => {
|
||||
goto("/login");
|
||||
});
|
||||
}
|
||||
|
||||
function isValidHttpUrl(string) {
|
||||
let url;
|
||||
try {
|
||||
url = new URL(string);
|
||||
} catch (_) {
|
||||
return false;
|
||||
}
|
||||
return url.protocol === "http:" || url.protocol === "https:";
|
||||
}
|
||||
|
||||
function unavailableServer(error) {
|
||||
console.log(error);
|
||||
message.text = error;
|
||||
message.class = 'error'
|
||||
message.visible = true;
|
||||
}
|
||||
|
||||
function closeWarning() {
|
||||
message.visible = false;
|
||||
}
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
<script lang="ts">
|
||||
import '../../app.pcss';
|
||||
// The ordering of these imports is critical to your app working properly
|
||||
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
|
||||
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
|
||||
import '@skeletonlabs/skeleton/styles/all.css';
|
||||
// Most of your app wide CSS should be put in this file
|
||||
import '../../app.pcss';
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
@ -1,7 +1,6 @@
|
||||
<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 -->
|
||||
@ -15,17 +14,7 @@
|
||||
</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>
|
||||
<Server on:message={showMessage}/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@ -33,39 +22,29 @@
|
||||
</style>
|
||||
|
||||
<script lang="js">
|
||||
import { urls, server } from "../../stores.js";
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { urls, serverurl } from "../../stores.js";
|
||||
import login from './Login.svelte'
|
||||
import Server from './Server.svelte'
|
||||
|
||||
let message = {
|
||||
visible: false,
|
||||
text: '',
|
||||
class: 'error'
|
||||
};
|
||||
var email = '';
|
||||
var password = '';
|
||||
var serverurl
|
||||
var myserver
|
||||
|
||||
server.subscribe(value => {
|
||||
serverurl = value;
|
||||
serverurl.subscribe(value => {
|
||||
myserver = value;
|
||||
});
|
||||
onMount(async () => {
|
||||
if(serverurl == null) {
|
||||
goto('/')
|
||||
}
|
||||
});
|
||||
|
||||
function handleLogin() {
|
||||
unavailableServer('To be implemented')
|
||||
}
|
||||
|
||||
function unavailableServer(error) {
|
||||
console.log(error);
|
||||
message.text = error;
|
||||
message.class = 'error'
|
||||
message.visible = true;
|
||||
}
|
||||
|
||||
function closeWarning() {
|
||||
message.visible = false;
|
||||
}
|
||||
|
||||
function showMessage(error) {
|
||||
console.log(error);
|
||||
message.text = error.detail.text;
|
||||
message.class = 'error'
|
||||
message.visible = true;
|
||||
}
|
||||
</script>
|
||||
60
src/routes/login/Login.svelte
Normal file
60
src/routes/login/Login.svelte
Normal file
@ -0,0 +1,60 @@
|
||||
<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>
|
||||
58
src/routes/login/Server.svelte
Normal file
58
src/routes/login/Server.svelte
Normal file
@ -0,0 +1,58 @@
|
||||
<form name="login-server" class="flex flex-col">
|
||||
<label class="label my-3">
|
||||
<span>Please select the server to login:</span>
|
||||
<input
|
||||
type="url"
|
||||
name="server"
|
||||
id="login-server-url"
|
||||
class="input"
|
||||
bind:value={server}>
|
||||
</label>
|
||||
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
<script lang="js">
|
||||
import { urls, serverurl } from "../../stores.js";
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
var server = '';
|
||||
function handleSelectServer() {
|
||||
if(!isValidHttpUrl(server)) {
|
||||
server = 'https://' + server;
|
||||
if(!isValidHttpUrl(server)) {
|
||||
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
|
||||
}
|
||||
}
|
||||
console.log("Selected server: " + server);
|
||||
fetch(server + 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')
|
||||
})
|
||||
.catch((error) => {
|
||||
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
|
||||
});
|
||||
}
|
||||
|
||||
function isValidHttpUrl(string) {
|
||||
let url;
|
||||
try {
|
||||
url = new URL(string);
|
||||
} catch (_) {
|
||||
return false;
|
||||
}
|
||||
return url.protocol === "http:" || url.protocol === "https:";
|
||||
}
|
||||
</script>
|
||||
@ -5,4 +5,4 @@ export const urls = {
|
||||
login: "/login"
|
||||
}
|
||||
|
||||
export const server = writable(null);
|
||||
export const serverurl = writable(null);
|
||||
Loading…
Reference in New Issue
Block a user