Skip to content

Commit

Permalink
implement Esc keydown event to close all snackbars and modals + CtrlE…
Browse files Browse the repository at this point in the history 
…nter
  • Loading branch information
@krustowski
krustowski committed Aug 28, 2024
1 parent eb2247e commit e2c8140
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 27 deletions.
2 changes: 1 addition & 1 deletion .env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
#

APP_NAME=litter-go
APP_VERSION=0.38.6
APP_VERSION=0.38.7
GOLANG_VERSION=1.23
2 changes: 1 addition & 1 deletion api/swagger.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"name": "MIT",
"url": "https://github.com/krustowski/litter-go/blob/master/LICENSE"
},
"version": "0.38.6"
"version": "0.38.7"
},
"host": "littr.eu",
"basePath": "/api/v1",
Expand Down
59 changes: 53 additions & 6 deletions pkg/frontend/login.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ type loginContent struct {
toastText string

loginButtonDisabled bool

keyDownEventListener func()
}

func (p *LoginPage) OnMount(ctx app.Context) {
Expand Down Expand Up @@ -57,6 +59,12 @@ func (p *LoginPage) Render() app.UI {
)
}

func (c *loginContent) OnMount(ctx app.Context) {
ctx.Handle("dismiss", c.handleDismiss)

c.keyDownEventListener = app.Window().AddEventListener("keydown", c.onKeyDown)
}

func (c *loginContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Navigate("/register")
return
Expand Down Expand Up @@ -85,12 +93,17 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {
nickname := strings.TrimSpace(c.nickname)
passphrase := strings.TrimSpace(c.passphrase)

if passphrase == "" && !app.Window().GetElementByID("passphrase-input").IsNull() {
passphrase = strings.TrimSpace(app.Window().GetElementByID("passphrase-input").Get("value").String())
}

if nickname == "" || passphrase == "" {
toastText = "all fields need to be filled"

ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.loginButtonDisabled = false
})
return
}
Expand All @@ -102,6 +115,7 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.loginButtonDisabled = false
})
return
}
Expand All @@ -121,6 +135,7 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.loginButtonDisabled = false
})
return
}
Expand All @@ -131,6 +146,7 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.loginButtonDisabled = false
})
return
}
Expand All @@ -141,6 +157,7 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.loginButtonDisabled = false
})
return
}
Expand All @@ -151,6 +168,7 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.loginButtonDisabled = false
})
return
}
Expand All @@ -162,6 +180,7 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.loginButtonDisabled = false
})
return
}
Expand All @@ -177,10 +196,38 @@ func (c *loginContent) onClick(ctx app.Context, e app.Event) {

}

func (c *loginContent) handleDismiss(ctx app.Context, a app.Action) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = ""
c.toastShow = false
c.loginButtonDisabled = false
})
}

func (c *loginContent) dismissToast(ctx app.Context, e app.Event) {
c.toastText = ""
c.toastShow = false
c.loginButtonDisabled = false
ctx.NewAction("dismiss")
}

func (c *loginContent) onKeyDown(ctx app.Context, e app.Event) {
if e.Get("key").String() == "Escape" || e.Get("key").String() == "Esc" {
ctx.NewAction("dismiss")
return
}

loginInput := app.Window().GetElementByID("login-input")
passphraseInput := app.Window().GetElementByID("passphrase-input")

if loginInput.IsNull() || passphraseInput.IsNull() {
return
}

if len(loginInput.Get("value").String()) == 0 || len(passphraseInput.Get("value").String()) == 0 {
return
}

if e.Get("ctrlKey").Bool() && e.Get("key").String() == "Enter" {
app.Window().GetElementByID("login-button").Call("click")
}
}

func (c *loginContent) Render() app.UI {
Expand All @@ -207,12 +254,12 @@ func (c *loginContent) Render() app.UI {

// login credentials fields
app.Div().Class("field border label deep-orange-text").Body(
app.Input().Type("text").Required(true).TabIndex(1).OnChange(c.ValueTo(&c.nickname)).MaxLength(configs.NicknameLengthMax).Class("active").Attr("autocomplete", "username"),
app.Input().ID("login-input").Type("text").Required(true).TabIndex(1).OnChange(c.ValueTo(&c.nickname)).MaxLength(configs.NicknameLengthMax).Class("active").Attr("autocomplete", "username"),
app.Label().Text("nickname").Class("active deep-orange-text"),
),

app.Div().Class("field border label deep-orange-text").Body(
app.Input().Type("password").Required(true).TabIndex(2).OnChange(c.ValueTo(&c.passphrase)).MaxLength(50).Class("active").Attr("autocomplete", "current-password"),
app.Input().ID("passphrase-input").Type("password").Required(true).TabIndex(2).OnChange(c.ValueTo(&c.passphrase)).MaxLength(50).Class("active").Attr("autocomplete", "current-password"),
app.Label().Text("passphrase").Class("active deep-orange-text"),
),
app.Article().Class("row surface-container-highest").Body(
Expand All @@ -226,7 +273,7 @@ func (c *loginContent) Render() app.UI {

// login button
app.Div().Class("row center-align").Body(
app.Button().Class("max shrink deep-orange7 white-text bold").Style("border-radius", "8px").TabIndex(3).OnClick(c.onClick).Disabled(c.loginButtonDisabled).Body(
app.Button().ID("login-button").Class("max shrink deep-orange7 white-text bold").Style("border-radius", "8px").TabIndex(3).OnClick(c.onClick).Disabled(c.loginButtonDisabled).Body(
app.Text("login"),
),
),
Expand Down
66 changes: 58 additions & 8 deletions pkg/frontend/register.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ type registerContent struct {
email string

registerButtonDisabled bool

keyDownEventListener func()
}

func (p *RegisterPage) OnNav(ctx app.Context) {
Expand All @@ -50,6 +52,12 @@ func (p *RegisterPage) Render() app.UI {
)
}

func (c *registerContent) OnMount(ctx app.Context) {
ctx.Handle("dismiss", c.handleDismiss)

c.keyDownEventListener = app.Window().AddEventListener("keydown", c.onKeyDown)
}

func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
c.registerButtonDisabled = true
toastText := ""
Expand All @@ -68,6 +76,10 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
passphraseAgain := strings.TrimSpace(c.passphraseAgain)
email := strings.TrimSpace(c.email)

if email == "" {
email = strings.TrimSpace(app.Window().GetElementByID("email-input").Get("value").String())
}

// fetch the users list to compare to
/*resp, ok := litterAPI("GET", "/api/users", nil, nickname, 0)
if !ok {
Expand Down Expand Up @@ -96,6 +108,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand All @@ -107,6 +120,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand All @@ -118,6 +132,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand All @@ -129,6 +144,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand All @@ -142,6 +158,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand Down Expand Up @@ -183,6 +200,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand All @@ -193,6 +211,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand All @@ -204,6 +223,7 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = toastText
c.toastShow = (toastText != "")
c.registerButtonDisabled = false
})
return
}
Expand All @@ -215,10 +235,40 @@ func (c *registerContent) onClickRegister(ctx app.Context, e app.Event) {
})
}

func (c *registerContent) handleDismiss(ctx app.Context, a app.Action) {
ctx.Dispatch(func(ctx app.Context) {
c.toastText = ""
c.toastShow = false
c.registerButtonDisabled = false
})
}

func (c *registerContent) dismissToast(ctx app.Context, e app.Event) {
c.toastText = ""
c.toastShow = false
c.registerButtonDisabled = false
ctx.NewAction("dismiss")
}

func (c *registerContent) onKeyDown(ctx app.Context, e app.Event) {
if e.Get("key").String() == "Escape" || e.Get("key").String() == "Esc" {
ctx.NewAction("dismiss")
return
}

nicknameInput := app.Window().GetElementByID("nickname-input")
passphraseInput := app.Window().GetElementByID("passphrase-input")
passphraseAgainInput := app.Window().GetElementByID("passphrase-again-input")
emailInput := app.Window().GetElementByID("email-input")

if nicknameInput.IsNull() || passphraseInput.IsNull() || passphraseAgainInput.IsNull() || emailInput.IsNull() {
return
}

if len(nicknameInput.Get("value").String()) == 0 || len(passphraseInput.Get("value").String()) == 0 || len(passphraseAgainInput.Get("value").String()) == 0 || len(emailInput.Get("value").String()) == 0 {
return
}

if e.Get("ctrlKey").Bool() && e.Get("key").String() == "Enter" {
app.Window().GetElementByID("register-button").Call("click")
}
}

func (c *registerContent) Render() app.UI {
Expand Down Expand Up @@ -253,7 +303,7 @@ func (c *registerContent) Render() app.UI {
app.Div().Class("space"),

app.Div().Class("field label border deep-orange-text").Body(
app.Input().Type("text").OnChange(c.ValueTo(&c.nickname)).Required(true).Class("active").AutoFocus(true).MaxLength(50).Attr("autocomplete", "username").TabIndex(1).Name("login"),
app.Input().ID("nickname-input").Type("text").OnChange(c.ValueTo(&c.nickname)).Required(true).Class("active").AutoFocus(true).MaxLength(50).Attr("autocomplete", "username").TabIndex(1).Name("login"),
app.Label().Text("nickname").Class("active deep-orange-text"),
),
app.Div().Class("space"),
Expand All @@ -269,11 +319,11 @@ func (c *registerContent) Render() app.UI {
app.Div().Class("space"),

app.Div().Class("field label border deep-orange-text").Body(
app.Input().Type("password").OnChange(c.ValueTo(&c.passphrase)).Required(true).Class("active").MaxLength(50).Attr("autocomplete", "new-password").TabIndex(2),
app.Input().ID("passphrase-input").Type("password").OnChange(c.ValueTo(&c.passphrase)).Required(true).Class("active").MaxLength(50).Attr("autocomplete", "new-password").TabIndex(2),
app.Label().Text("passphrase").Class("active deep-orange-text"),
),
app.Div().Class("field label border deep-orange-text").Body(
app.Input().Type("password").OnChange(c.ValueTo(&c.passphraseAgain)).Required(true).Class("active").MaxLength(50).Attr("autocomplete", "new-password").TabIndex(3),
app.Input().ID("passphrase-again-input").Type("password").OnChange(c.ValueTo(&c.passphraseAgain)).Required(true).Class("active").MaxLength(50).Attr("autocomplete", "new-password").TabIndex(3),
app.Label().Text("passphrase again").Class("active deep-orange-text"),
),
app.Div().Class("space"),
Expand All @@ -289,7 +339,7 @@ func (c *registerContent) Render() app.UI {
app.Div().Class("space"),

app.Div().Class("field label border deep-orange-text").Body(
app.Input().Type("email").OnChange(c.ValueTo(&c.email)).Required(true).Class("active").MaxLength(60).Attr("autocomplete", "email").TabIndex(4),
app.Input().ID("email-input").Type("email").OnChange(c.ValueTo(&c.email)).Required(true).Class("active").MaxLength(60).Attr("autocomplete", "email").TabIndex(4),
app.Label().Text("e-mail").Class("active deep-orange-text"),
),
app.Div().Class("space"),
Expand All @@ -309,7 +359,7 @@ func (c *registerContent) Render() app.UI {
// register button
app.Div().Class("row center-align").Body(
app.If(app.Getenv("REGISTRATION_ENABLED") == "true",
app.Button().Class("max shrink deep-orange7 white-text bold").Style("border-radius", "8px").OnClick(c.onClickRegister).Disabled(c.registerButtonDisabled).TabIndex(5).Body(
app.Button().ID("register-button").Class("max shrink deep-orange7 white-text bold").Style("border-radius", "8px").OnClick(c.onClickRegister).Disabled(c.registerButtonDisabled).TabIndex(5).Body(
app.Text("register"),
),
).Else(
Expand Down
Loading

0 comments on commit e2c8140

Please sign in to comment.