-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
97 lines (88 loc) · 2.61 KB
/
index.tsx
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { Akord } from '@akord/akord-js'
import type { NextPage } from 'next'
import Head from 'next/head'
import { useState } from 'react'
const Home: NextPage = () => {
const [akord, setAkord] = useState<Akord | null>()
const [email, setEmail] = useState<string>('')
const [pass, setPass] = useState<string>('')
const handleLogin = async (event: any) => {
event.preventDefault();
if (!email) {
throw new Error('Missing email')
}
if (!pass) {
throw new Error('Missing pass')
}
const { jwtToken, wallet } = await Akord.auth.signIn(
email,
pass
);
const akord = await Akord.init(wallet, jwtToken)
setAkord(akord)
}
const loginForm = () => {
return <div className={'p-3'} style={{ width: '340px', backgroundColor: '#fff' }}>
<h1 className="display-6 mb-3">Login</h1>
<form onSubmit={handleLogin}>
<div className="mb-3">
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-3">
<input
type="password"
value={pass}
onChange={(e) => setPass(e.target.value)}
/>
</div>
<button type="submit" className="btn btn-primary">Login</button>
</form>
</div>
}
const handleUpload = async (files: FileList | null) => {
if (!akord) {
throw new Error('Akord-js not initialized')
}
if (!files || !files.length) {
throw new Error('Failed uploading the file')
}
const file = files[0]
const vaults = await akord?.vault.list()
if (!vaults || !vaults.length) {
throw new Error('User does not have any vaults')
}
const vault = vaults[0]
confirm("Uploading file to vault: " + vault.name)
const { stackId } = await akord.stack.create(vault.id, file, file.name)
confirm("Created stack: " + stackId)
setAkord(null)
}
const uploadForm = () => {
return <div className={'p-3'} style={{ width: '340px', backgroundColor: '#fff' }}>
<h1 className="display-6 mb-3">Upload</h1>
<form>
<input
type="file"
onChange={(e) => handleUpload(e.target.files)}
/>
</form>
</div>
}
return (
<div>
<Head>
<title>Home Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="vh-100 d-flex justify-content-center align-items-center">
{akord ? uploadForm() : loginForm()}
</main>
</div>
)
}
export default Home