this repo has no description
lustre
frontent
oat-ui
gleam
๐ add input fields for login page
+55
-8
+55
-8
src/client/page/login.gleam
+55
-8
src/client/page/login.gleam
···
1
1
import client/brand
2
2
import client/session
3
3
import gleam/json
4
-
import lustre/attribute.{class}
4
+
import lustre/attribute.{class} as attr
5
5
import lustre/effect
6
6
import lustre/element
7
7
import lustre/element/html
8
+
import lustre/event
8
9
import rsvp
9
10
10
11
pub type Model {
···
79
80
}
80
81
}
81
82
82
-
pub fn view(_session: session.Session, _model: Model) -> element.Element(Msg) {
83
+
pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) {
83
84
// Wrapper
84
85
let wrapper_attr = [
85
86
class("mx-auto max-w-lg h-full"),
···
87
88
]
88
89
89
90
html.div(wrapper_attr, [
90
-
// ๏ฌ Logo with Title
91
+
// ๏ฌ Logo with Title ---
91
92
html.section(
92
93
[class("p-4 w-full"), class("flex gap-4 justify-center items-center")],
93
94
[
···
101
102
],
102
103
),
103
104
104
-
// Form
105
-
html.section([class("p-4 w-full rounded-lg border border-border")], [
106
-
html.h3([class("my-2 font-bold")], [html.text("Entrar na Plataforma")]),
107
-
html.p([class("text-subtext")], [
108
-
html.text("Acesse sua conta para gerenciar contratos de energia"),
105
+
// Form ---
106
+
html.article([class("card")], [
107
+
// Form Header
108
+
html.header([], [
109
+
html.h3([class("my-2 font-bold")], [html.text("Entrar na Plataforma")]),
110
+
html.p([class("text-subtext")], [
111
+
html.text("Acesse sua conta para gerenciar contratos de energia"),
112
+
]),
113
+
]),
114
+
115
+
// Form input fields
116
+
html.div([class("mt-4")], [
117
+
// ๓ฐฎ Email
118
+
html.label([attr.data("field", ""), class("mt-4")], [
119
+
html.text("Email"),
120
+
html.input([
121
+
attr.type_("email"),
122
+
attr.value(model.email),
123
+
attr.placeholder("usuario@email.com"),
124
+
class("py-1 px-2 bg-gray-100 rounded-md text-subtext"),
125
+
class("placeholder:text-gray-400"),
126
+
class("text-sm font-light"),
127
+
]),
128
+
]),
129
+
130
+
// ๏ฃ Password
131
+
html.label([attr.data("field", ""), class("mt-4")], [
132
+
html.text("Senha"),
133
+
html.input([
134
+
attr.type_("password"),
135
+
attr.value(model.password),
136
+
attr.placeholder("********"),
137
+
class("py-1 px-2 bg-gray-100 rounded-md text-subtext"),
138
+
class("placeholder:text-gray-400"),
139
+
class("text-sm font-light"),
140
+
]),
141
+
]),
142
+
]),
143
+
144
+
// Login Button
145
+
html.footer([], [
146
+
html.button([event.on_click(UserClickedSubmit), class("w-full")], [
147
+
html.text("Login"),
148
+
]),
149
+
150
+
// ---
151
+
html.hr([class("my-4")]),
152
+
html.div([class("flex justify-around text-sm")], [
153
+
html.a([], [html.text("Esqueci minha senha")]),
154
+
html.a([], [html.text("Criar Conta")]),
155
+
]),
109
156
]),
110
157
]),
111
158
])