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

Added possibility to register

This commit is contained in:
Jeroen De Meerleer 2023-08-16 15:13:54 +02:00
parent a9190d7d38
commit 7833f5326e
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG Key ID: 28CCCB8F62BFADD6
5 changed files with 130 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/stores.js
View File

@ -3,7 +3,8 @@ import { writable } from 'svelte/store';
export const urls = {
capabilities: "/capabilities",
login: "/login",
checkusertaken: "/register/checkusertaken"
checkusertaken: "/register/checkusertaken",
register: "/register"
}
export const alerts = writable([])
export const globals = writable({

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

@ -2,7 +2,7 @@
<h1 class="my-3">Blackbird Chess</h1>
{#each alertsvar as alert, i}
<aside class="alert variant-filled-error">
<aside class="alert variant-filled-{alert.class}">
<!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message -->

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

@ -1,3 +1,6 @@
<div class="flex justify-between">
<a href="/account/login" on:click="{handleGoToServerSelect}">Go Back</a>
</div>
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Username:</span>
@ -27,6 +30,7 @@
<script lang="js">
import { urls, alerts, globals } from "$lib/stores.js";
import { createEventDispatcher } from 'svelte';
import {browser} from "$app/environment";
var email = '';
var password = '';
@ -40,6 +44,13 @@
const dispatch = createEventDispatcher();
function handleLogin() {
alerts.update(data => [...data, {text: 'Not yet implemented'}]);
alerts.update(data => [...data, {text: 'Not yet implemented', type: 'notimplemented', class: 'warning'}]);
}
function handleGoToServerSelect() {
if(sessionStorage.getItem('serverurl') != undefined) {
if(browser) sessionStorage.removeItem('serverurl');
globals.update((data) => ({ ...data, ...{server: {url: '', caps: {}}} }));
}
}
</script>

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

@ -35,7 +35,7 @@
if(!isValidHttpUrl(loginserver)) {
loginserver = 'https://' + loginserver;
if(!isValidHttpUrl(loginserver)) {
return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server', class: 'error'}]);
}
}
console.log("Selected server: " + loginserver);
@ -44,13 +44,13 @@
try {
let response = await requestor.get(urls.capabilities);
let caps = JSON.parse(response.data);
if(!caps.login) return alerts.update(data => [...data, {text: loginserver + ' is unavailable for login currently'}]);
if(!caps.login) return alerts.update(data => [...data, {text: loginserver + ' is unavailable for login currently', class: 'error'}]);
globals.update(data => ({ ...data, ...{server: {url: loginserver, caps: caps}}}));
if(browser) {
sessionStorage.setItem('serverurl', loginserver);
}
} catch (error) {
return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server', class: 'error'}]);
}
}

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

@ -1,25 +1,26 @@
<div class="flex justify-between">
<a href="/account/login">Go Back</a>
</div>
{#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">
<input bind:value="{name}" on:input="{triggerCheck}" 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">
<input bind:value="{email}" on:input="{triggerCheck}" 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">
<input bind:value={password} on:input="{triggerCheck}" 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">
<input bind:value={password2} on:input="{triggerCheck}" 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>
<button on:click="{register}"type="submit" id="register-server-submit" class="btn variant-filled-primary my-3">Register</button>
</form>
{:else }
<h3>There is no hope</h3>
{/if}
@ -30,10 +31,14 @@
<script lang="js">
import {alerts, globals, urls} from "$lib/stores.js";
import { requestor, setBaseUrl } from "../../../serverrequest.js";
import {onMount} from "svelte";
import {goto} from "$app/navigation";
let globalvars;
let email = '';
let name = '';
let password = '';
let password2 = '';
globals.subscribe(value => {
globalvars = value;
@ -41,43 +46,135 @@
setBaseUrl(globalvars.server.url);
async function checkEmail(e) {
onMount(async () => {
if(globalvars.server.url == '' ) {
alerts.update(data => data.filter(alert => alert.type !== 'noregister'));
alerts.update(data => [...data,{text: 'You cannot register without selecting a server', type: 'noregister', class: 'error'}]);
goto('/account/login');
return;
}
if(globalvars.server.caps.register == false ) {
alerts.update(data => data.filter(alert => alert.type !== 'noregister'));
alerts.update(data => [...data,{text: 'You cannot register on this server', type: 'noregister', class: 'error'}]);
}
})
function triggerCheck(evt) {
switch(evt.target.id) {
case 'register-name':
checkName(false);
break;
case 'register-email':
checkEmail(false);
break;
case 'register-password':
case 'register-password-repeat':
checkPassword(false);
break;
}
}
async function checkEmail(errorempty = false) {
if (email.length == 0) {
alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
if(errorempty) alerts.update(data => [...data,{text: 'Email cannot be empty', type: 'emailtaken', class: 'error'}]);
return false
}
if(document.querySelector('#register-email').checkValidity() === false) {
alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
return;
if(errorempty) alerts.update(data => [...data,{text: 'Email is invalid', type: 'emailtaken', class: 'error'}]);
return false;
}
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'));
return true
}
if(data.email == 'taken') {
alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
alerts.update(data => [...data, {text: 'Email is already taken', type: 'emailtaken'}]);
alerts.update(data => [...data, {text: 'Email is already taken', type: 'emailtaken', class: 'error'}]);
return false;
}
} catch (error) {
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]);
return false;
}
}
async function checkName(e) {
async function checkName(errorempty = false) {
if (name.length == 0) {
if(errorempty) alerts.update(data => [...data,{text: 'Username cannot be empty', type: 'usernametaken', class: 'error'}]);
return false
}
if(document.querySelector('#register-name').checkValidity() === false) {
alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
return;
if(errorempty) alerts.update(data => [...data,{text: 'Username cannot be empty', type: 'usernametaken', class: 'error'}]);
return false;
}
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'));
return true;
}
if(data.name == 'taken') {
alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
alerts.update(data => [...data,{text: 'Username is already taken', type: 'usernametaken'}]);
alerts.update(data => [...data,{text: 'Username is already taken', type: 'usernametaken', class: 'error'}]);
return false
}
} catch (error) {
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]);
return false
}
}
async function checkPassword(errorempty = false) {
if (password == '') {
alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
if(errorempty) alerts.update(data => [...data,{text: 'Password cannot be empty', type: 'passwordnotequal', class: 'error'}]);
return false
}
if (password2 == '') {
alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
if(errorempty) alerts.update(data => [...data,{text: 'Password cannot be empty', type: 'passwordnotequal', class: 'error'}]);
return false
}
if (password != password2) {
alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
alerts.update(data => [...data,{text: 'Passwords are not equal', type: 'passwordnotequal', class: 'error'}]);
return false
} else {
alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
return true
}
}
async function register() {
let emailok = await checkEmail(true);
let nameok = await checkName(true);
let passwordok = await checkPassword(true);
alerts.update(data => data.filter(alert => alert.type !== 'register-errors'));
if(!(emailok && nameok && passwordok )) {
alerts.update(data => [...data, {text: 'Errors in fields, please check', type: 'register-errors', class: 'error'}]);
return false;
}
try {
let response = await requestor.post(urls.register, JSON.stringify({ email: email, name: name, password: password }));
let responsejson = JSON.parse(response.data);
if (response.status !== 200) {
alerts.update(data => data.filter(alert => alert.type !== 'register-errors'));
alerts.update(data => [...data, {text: responsejson.message, type: 'register-errors', class: 'error'}]);
return false;
}
alerts.update(data => []);
alerts.update(data => [...data, {text: responsejson.message, type: 'register-success', class: 'success'}]);
return false;
} catch (error) {
alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]);
return false;
}
}
</script>