1 files changed, 67 insertions, 0 deletions
diff --git a/frontend/ts/src/pages/login.ts b/frontend/ts/src/pages/login.ts
new file mode 100644
index 0000000..32da92a
--- /dev/null
+++ b/frontend/ts/src/pages/login.ts
@@ -0,0 +1,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
+                    })
+                )
+            )
+        }
+    )
+}