-
Notifications
You must be signed in to change notification settings - Fork 2
/
+page.svelte
73 lines (59 loc) · 1.53 KB
/
+page.svelte
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
<script lang="ts">
import { PUBLIC_USERFRONT_ACCOUNT_ID } from '$env/static/public';
import Userfront from '@userfront/core';
Userfront.init(PUBLIC_USERFRONT_ACCOUNT_ID);
let user = Userfront.user;
// Bindings:
let name = user.name || '';
let phoneNumber = user.phoneNumber || '+13335557777';
let authorizationHeader = `Bearer ${Userfront.tokens.accessToken}`;
async function handleSubmit() {
const payload = {
name,
phoneNumber
};
const response = await fetch('/api/update-user', {
method: 'PUT',
headers: {
'content-type': 'application/json',
authorization: authorizationHeader
},
body: JSON.stringify(payload)
});
await Userfront.tokens.refresh();
user = Userfront.user;
console.log(response);
console.log(await response.json());
}
</script>
<h1>Dashboard</h1>
<article>
<header>
<h4>{user.name || user.email}</h4>
<button on:click={() => Userfront.logout()}>Log out</button>
</header>
<textarea readonly rows="6">Userfront.user = {JSON.stringify(user, null, 4)}</textarea>
<section>
<form action="">
<label>Name<input bind:value={name} /></label>
<label>Phone Number<input bind:value={phoneNumber} /></label>
<label>
Authorization Header
<input bind:value={authorizationHeader} />
</label>
<input type="submit" on:click={handleSubmit} />
</form>
</section>
</article>
<style>
article header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: hidden;
}
</style>