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
|
import { h, withState3, Html } from 'lib/rx'
import * as request from 'request'
import * as route from 'route'
import * as form from 'lib/form'
import * as L from 'lib/loadable'
import { User } from 'models/user'
interface Params {
updateUser: (user: User) => void
}
export function view({ updateUser }: Params): Html {
return withState3<string, string, L.Loadable<void>>(
['', '', L.init],
(emailVar, passwordVar, requestVar) => {
return h('main',
h('form',
{
className: 'g-Login',
onsubmit: emailVar.flatMap(email => passwordVar.map(password => (event: Event) => {
event.preventDefault()
const payload = { email, password }
requestVar.update(_ => L.loading)
request
.post<User>('/api/login', JSON.stringify(payload))
.then(user => {
requestVar.update(_ => L.loaded(undefined))
updateUser(user)
route.push(route.maps)
})
.catch(({ message }) => {
requestVar.update(_ => L.failure(message))
const passwordInput = document.querySelector('input[type=password]') as HTMLInputElement
passwordInput.select()
})
}))
},
h('h1', { className: 'g-Login__Title' }, 'Maps'),
form.input({
label: 'Identifiant',
required: true,
select: true,
onUpdate: value => {
emailVar.update(_ => value)
requestVar.update(_ => L.init)
}
}),
form.input({
label: 'Mot de passe',
type: 'password',
required: true,
onUpdate: value => {
passwordVar.update(_ => value)
requestVar.update(_ => L.init)
}
}),
form.error(requestVar),
form.submit({
className: 'g-Button--FullWidth',
label: 'Connexion',
requestVar
})
)
)
}
)
}
|
