This repository has been archived by the owner on Jun 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 143
/
login-component-render.js
91 lines (82 loc) · 2.3 KB
/
login-component-render.js
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
'use strict';
var hg = require('../../index.js');
var h = require('../../index.js').h;
var styles = require('./styles.js');
module.exports = render;
function render(state) {
return state.registerMode ?
renderRegister(state) :
renderLogin(state);
}
function renderLogin(state) {
var channels = state.channels;
return h('div', {
'ev-event': hg.sendSubmit(channels.login)
}, [
h('fieldset', [
h('legend', 'Login Form'),
labeledInput('Email: ', {
name: 'email',
error: state.emailError
}),
labeledInput('Password: ', {
name: 'password',
type: 'password'
}),
h('div', [
h('button', {
'ev-click': hg.send(channels.switchMode,
!state.registerMode)
}, 'Register new User'),
h('button', 'Login')
])
])
]);
}
function renderRegister(state) {
var channels = state.channels;
return h('div', {
'ev-event': hg.sendSubmit(channels.register)
}, [
h('fieldset', [
h('legend', 'Register Form'),
labeledInput('Email: ', {
name: 'email',
error: state.emailError
}),
labeledInput('Password: ', {
name: 'password',
type: 'password',
error: state.passwordError
}),
labeledInput('Repeat Password: ', {
name: 'repeatPassword',
type: 'password'
}),
h('div', [
h('button', {
'ev-click': hg.send(channels.switchMode,
!state.registerMode)
}, 'Login into existing User'),
h('button', 'Register')
])
])
]);
}
function labeledInput(label, opts) {
opts.className = opts.error ?
styles.inputError.className : '';
return h('div', [
h('label', {
className: opts.error ? styles.error.className : ''
}, [
label,
h('input', opts)
]),
h('div', {
className: styles.error.className
}, [
opts.error
])
]);
}