this repo has no description
lustre
frontent
oat-ui
gleam
🌐 pattern match on the language when displaying the login page
+58
-38
+2
-2
src/client.gleam
+2
-2
src/client.gleam
···
251
251
252
252
rsvp.NetworkError ->
253
253
case model.lang {
254
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
254
+
language.BrazillianPortuguese | language.Portuguese ->
255
255
"Conexão não disponível"
256
256
_ -> "Connection not available"
257
257
}
258
258
259
259
_ ->
260
260
case model.lang {
261
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
261
+
language.BrazillianPortuguese | language.Portuguese ->
262
262
"Ocorreu um erro ao enviar credenciais"
263
263
_ -> "An error occurred when sending credentials"
264
264
}
+3
-3
src/client/language.gleam
+3
-3
src/client/language.gleam
···
1
1
pub type Language {
2
2
BrazillianPortuguese
3
-
PortugalPortuguese
3
+
Portuguese
4
4
English
5
5
German
6
6
Spanish
···
9
9
pub fn to_flag(lang: Language) {
10
10
case lang {
11
11
BrazillianPortuguese -> "🇧🇷"
12
-
PortugalPortuguese -> "🇵🇹"
12
+
Portuguese -> "🇵🇹"
13
13
English -> "🇺🇸"
14
14
German -> "🇩🇪"
15
15
Spanish -> "🇪🇸"
···
22
22
English -> "English"
23
23
German -> "German"
24
24
Spanish -> "Spanish"
25
-
PortugalPortuguese -> "Portugal Portuguese"
25
+
Portuguese -> "Portuguese"
26
26
}
27
27
}
+51
-31
src/client/page/login.gleam
+51
-31
src/client/page/login.gleam
···
1
1
import client/brand
2
-
import client/language
2
+
import client/language as lang
3
3
import client/session
4
4
import gleam/json
5
5
import lustre/attribute.{class} as attr
···
81
81
}
82
82
}
83
83
84
-
pub fn view(model: Model, lang: language.Language) -> element.Element(Msg) {
84
+
pub fn view(model: Model, lang: lang.Language) -> element.Element(Msg) {
85
85
// Wrapper
86
86
let wrapper_attr = [
87
87
class("mx-auto max-w-lg h-full"),
88
88
class("flex flex-col gap-2 items-center"),
89
89
]
90
+
91
+
// Disable button if the any of the fields are empty
92
+
let disabled = model.email == "" || model.password == "" || model.loading
90
93
91
94
html.div(wrapper_attr, [
92
95
// LOGO AND TITLE -------------------------------------------------------
···
96
99
brand.title([class("my-0 text-xl text-center")]),
97
100
html.small([class("hidden sm:inline text-subtext")], [
98
101
html.text(case lang {
99
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
102
+
lang.BrazillianPortuguese | lang.Portuguese ->
100
103
"Soluções Climáticas Inteligentes"
101
-
_ -> "Smart climate solutions"
104
+
lang.English -> "Smart climate solutions"
105
+
lang.German -> "Intelligente Klimalösungen"
106
+
lang.Spanish -> "Soluciones climáticas inteligentes"
102
107
}),
103
108
]),
104
109
]),
···
110
115
html.header([class("hidden mb-4 @md:inline")], [
111
116
html.h3([class("my-2 font-bold")], [
112
117
html.text(case lang {
113
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
118
+
lang.BrazillianPortuguese | lang.Portuguese ->
114
119
"Entrar na Plataforma"
115
-
_ -> "Join the Platform"
120
+
lang.German -> "Melden Sie sich auf der Plattform an."
121
+
lang.English -> "Join the Platform"
122
+
lang.Spanish -> "Inicia sesión en la plataforma"
116
123
}),
117
124
]),
118
125
119
126
html.p([class("text-subtext")], [
120
127
html.text(case lang {
121
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
128
+
lang.BrazillianPortuguese ->
122
129
"Acesse sua conta para gerenciar seus contratos de energia"
123
-
_ -> "Access your account to manage your energy contracts"
130
+
lang.Portuguese ->
131
+
"Aceda à sua conta para gerir os seus contratos de energia"
132
+
lang.English ->
133
+
"Access your account to manage your energy contracts"
134
+
lang.German ->
135
+
"Greifen Sie auf Ihr Konto zu, um Ihre Energieverträge zu verwalten."
136
+
lang.Spanish ->
137
+
"Acceda a su cuenta para gestionar sus contratos de energía."
124
138
}),
125
139
]),
126
140
]),
···
134
148
event.on_input(UserTypedEmail),
135
149
attr.type_("email"),
136
150
attr.value(model.email),
137
-
attr.placeholder(case lang {
138
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
139
-
"usuario@email.com"
140
-
_ -> "user@email.com"
151
+
attr.placeholder({
152
+
case lang {
153
+
lang.BrazillianPortuguese -> "usuario"
154
+
lang.English -> "user"
155
+
lang.Portuguese -> "utilizador"
156
+
lang.German -> "benutzer"
157
+
lang.Spanish -> "usuario"
158
+
}
159
+
<> "@email.com"
141
160
}),
142
161
class("py-1 px-2 bg-gray-100 rounded-md text-subtext"),
143
162
class("placeholder:text-gray-400"),
···
148
167
// Password
149
168
html.label([attr.data("field", ""), class("mt-4")], [
150
169
html.text(case lang {
151
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
152
-
"Senha"
153
-
_ -> "Password"
170
+
lang.BrazillianPortuguese | lang.Portuguese -> "Senha"
171
+
lang.English -> "Password"
172
+
lang.German -> "Passwort"
173
+
lang.Spanish -> "Contraseña"
154
174
}),
155
175
156
176
html.input([
···
166
186
]),
167
187
168
188
html.footer([], [
169
-
// Login Button
189
+
// Login Button
170
190
html.button(
171
191
[
192
+
attr.disabled(disabled),
172
193
event.on_click(UserClickedSubmit),
173
194
attr.aria_busy(model.loading),
174
195
class("w-full"),
175
-
176
-
// Disabled if any of the input fields are empty.
177
-
attr.disabled(
178
-
model.email == "" || model.password == "" || model.loading,
179
-
),
180
196
],
181
197
[html.text("Login")],
182
198
),
183
199
184
-
// Divider
200
+
// Horizontal Ruler
185
201
html.hr([class("my-4")]),
186
202
187
-
// Other links
203
+
// Other links like "Forgot my password".
188
204
html.div(
189
205
[
190
206
class("text-sm text-center"),
191
-
class("grid grid-cols-1 gap-2 @xs:grid-cols-2"),
207
+
class("grid gap-2"),
208
+
class("grid-cols-1 @xs:grid-cols-2"),
192
209
],
193
210
[
194
211
// Forgot my password
195
212
html.a([], [
196
213
html.text(case lang {
197
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
198
-
"Esqueci a senha"
199
-
_ -> "Forgot my password"
214
+
lang.BrazillianPortuguese -> "Esqueci a senha"
215
+
lang.Portuguese -> "Esqueci-me da senha"
216
+
lang.Spanish -> "Olvidé mi contraseña."
217
+
lang.English -> "Forgot my password"
218
+
lang.German -> "Ich habe mein Passwort vergessen."
200
219
}),
201
220
]),
202
221
203
-
// Forgot my password
222
+
// Create account
204
223
html.a([], [
205
224
html.text(case lang {
206
-
language.BrazillianPortuguese | language.PortugalPortuguese ->
207
-
"Criar Conta"
208
-
_ -> "Create account"
225
+
lang.BrazillianPortuguese | lang.Portuguese -> "Criar Conta"
226
+
lang.Spanish -> "Crear cuenta"
227
+
lang.German -> "Benutzerkonto erstellen"
228
+
lang.English -> "Create account"
209
229
}),
210
230
]),
211
231
],