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
|
#signup-page-content {
border: 1px solid #888;
padding: 1rem;
max-width: 700px;
margin: 1rem auto;
--count: '0';
--cssx-disgustingly-set-innerhtml:
"<h1 class='form-title'>Sign-<b>Up</b></h1>";
--cssx-children: form#form;
}
.form-title {
font-size: 2rem;
padding: 0;
border-bottom: 1px solid gray;
font-weight: normal;
color: gray;
}
.form-title b {
font-weight: bold;
color: black;
}
#form {
display: block;
--cssx-on-submit:
prevent-default()
add-class(form, 'submitting')
try(
do(
request('/examples'),
add-class(form, 'submitted')
),
js-eval(string('alert("', get-var(--error), '")'))
)
remove-class(form, 'submitting')
;
--cssx-children:
input#input-email
input#input-password
#actions
h(#message[data-attr="wiow"], map(--wow: "wow"),
div#wow
div#yay
h(div#yay, map(--wow: "wow"))
)
;
}
#form.submitted #message::after {
display: block;
content: 'Form submitted successfully';
}
#form.submitting #submit-btn {
pointer-events: none;
opacity: 0.5;
}
#form input {
display: block;
width: 100%;
padding: 0.4rem 0.8rem;
margin-top: 1rem;
}
#input-email {
--cssx-on-mount: set-attr('type', 'email') set-attr('name', 'email')
set-attr('required', 'true')
set-attr('placeholder', 'Email. Eg:- mail@postbox.com');
}
#input-password {
--cssx-on-mount: set-attr('type', 'password') set-attr('name', 'password')
set-attr('required', 'true')
set-attr(
'placeholder',
'Password. Eg:- password, password1, password2, password123'
);
}
#actions {
text-align: right;
padding-top: 1rem;
--cssx-children: button#submit-btn;
}
#submit-btn {
padding: 0.4rem 0.7rem;
--cssx-on-mount: set-attr('type', 'submit');
}
#submit-btn::after {
content: 'Sign-Up';
}
|
