1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<script lang="ts">
export let whereami: string;
import { postToServer } from "./utils";
let pt = "";
let mode = "login",
// email = "maks@maks.pl",
email = "asd@asd",
login = "maks",
password = "qwerty";
async function register() {
if ([email, login, password].includes("")) {
pt = "Not all required data given";
return;
}
const res = await postToServer(
"/login",
{ email, login, password, mode },
true
);
console.log(res);
if (res === "ok") {
whereami = "books";
} else {
pt = "Wrong login or password";
}
}
</script>
<main>
{#if mode === "register"}
<label for="email">Email:</label>
<input bind:value={email} type="email" id="email" maxlength="254" /><br
/><br />
{/if}
<label for="login">Login:</label>
<input bind:value={login} type="text" id="login" maxlength="256" /><br /><br
/>
<label for="password">Password:</label>
<input bind:value={password} type="password" id="password" /><br /><br />
<button type="button" on:click={register}>
{mode === "login" ? "Login" : "Register"}
</button><br /><br />
<label for="mode">Register:</label>
<input
type="checkbox"
id="mode"
on:click={() => (mode = mode === "login" ? "register" : "login")}
/>
<p>{pt}</p>
</main>
<style>
:root {
font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell;
}
main {
text-align: center;
padding: 1em;
margin: 0 auto;
font-size: 2em;
}
input,
button {
font-size: 1em;
margin-left: 10px;
}
input[type="checkbox"] {
width: 25px;
height: 25px;
}
p {
color: red;
}
</style>
|
