From 0ea20b4e37252798761c5d4442dc1e0641c86673 Mon Sep 17 00:00:00 2001 From: Jonni Liljamo Date: Tue, 31 Oct 2023 17:28:28 +0200 Subject: [PATCH] feat: apikey refreshing and eye toggle --- internal/components/managepartials.templ | 52 +++++++--- internal/components/managepartials_templ.go | 103 +++++++++++--------- internal/db/domains.go | 9 ++ internal/handlers/domains.go | 23 +++++ internal/routers/frontend.go | 1 + static/styles.css | 40 ++++++-- 6 files changed, 161 insertions(+), 67 deletions(-) diff --git a/internal/components/managepartials.templ b/internal/components/managepartials.templ index 2b5d83d..f6992d7 100644 --- a/internal/components/managepartials.templ +++ b/internal/components/managepartials.templ @@ -3,18 +3,21 @@ package components import "git.src.quest/~skye/felu-ddns/internal/db" import "fmt" +script toggleApiKeyVisibility(id string) { + var input = document.getElementById("domain_apikey_" + id); + var eye_vis = document.getElementById("domain_eye_vis_" + id); + var eye_hid = document.getElementById("domain_eye_hid_" + id); + if (input.type === "password") { + input.type = "text"; + } else { + input.type = "password"; + }; + eye_vis.classList.toggle("hidden"); + eye_hid.classList.toggle("hidden"); +} + templ ManagePartialDomains(domains []db.Domain) { if len(domains) > 0 { - @@ -47,14 +50,33 @@ templ ManagePartialDomains(domains []db.Domain) {
-
- +
- - - show +
+ +
+ + + + + +
+
+ +
diff --git a/internal/components/managepartials_templ.go b/internal/components/managepartials_templ.go index e9e78ee..32d95e9 100644 --- a/internal/components/managepartials_templ.go +++ b/internal/components/managepartials_templ.go @@ -12,6 +12,23 @@ import "bytes" import "git.src.quest/~skye/felu-ddns/internal/db" import "fmt" +func toggleApiKeyVisibility(id string) templ.ComponentScript { + return templ.ComponentScript{ + Name: `__templ_toggleApiKeyVisibility_542b`, + Function: `function __templ_toggleApiKeyVisibility_542b(id){var input = document.getElementById("domain_apikey_" + id); + var eye_vis = document.getElementById("domain_eye_vis_" + id); + var eye_hid = document.getElementById("domain_eye_hid_" + id); + if (input.type === "password") { + input.type = "text"; + } else { + input.type = "password"; + }; + eye_vis.classList.toggle("hidden"); + eye_hid.classList.toggle("hidden");}`, + Call: templ.SafeScript(`__templ_toggleApiKeyVisibility_542b`, id), + } +} + func ManagePartialDomains(domains []db.Domain) templ.Component { return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) { templBuffer, templIsBuffer := w.(*bytes.Buffer) @@ -26,29 +43,20 @@ func ManagePartialDomains(domains []db.Domain) templ.Component { } ctx = templ.ClearChildren(ctx) if len(domains) > 0 { - _, err = templBuffer.WriteString(" ") if err != nil { return err @@ -80,8 +79,8 @@ func ManagePartialDomains(domains []db.Domain) templ.Component { if err != nil { return err } - var var_6 string = domain.Domain - _, err = templBuffer.WriteString(templ.EscapeString(var_6)) + var var_5 string = domain.Domain + _, err = templBuffer.WriteString(templ.EscapeString(var_5)) if err != nil { return err } @@ -89,8 +88,8 @@ func ManagePartialDomains(domains []db.Domain) templ.Component { if err != nil { return err } - var var_7 string = getDomainPattern() - _, err = templBuffer.WriteString(templ.EscapeString(var_7)) + var var_6 string = getDomainPattern() + _, err = templBuffer.WriteString(templ.EscapeString(var_6)) if err != nil { return err } @@ -98,10 +97,10 @@ func ManagePartialDomains(domains []db.Domain) templ.Component { if err != nil { return err } - var_8 := ` TODO: Make this editable + var_7 := ` TODO: Make this editable And refresh the div with /manage/partials/domains ` - _, err = templBuffer.WriteString(var_8) + _, err = templBuffer.WriteString(var_7) if err != nil { return err } @@ -113,50 +112,64 @@ func ManagePartialDomains(domains []db.Domain) templ.Component { if err != nil { return err } - _, err = templBuffer.WriteString("\">
") + _, err = templBuffer.WriteString("") if err != nil { return err } - var_3 := `Domain` + var_3 := `A Record` _, err = templBuffer.WriteString(var_3) if err != nil { return err @@ -57,20 +65,11 @@ func ManagePartialDomains(domains []db.Domain) templ.Component { if err != nil { return err } - var_4 := `A Record` + var_4 := `Api Key` _, err = templBuffer.WriteString(var_4) if err != nil { return err } - _, err = templBuffer.WriteString("") - if err != nil { - return err - } - var_5 := `Api Key` - _, err = templBuffer.WriteString(var_5) - if err != nil { - return err - } _, err = templBuffer.WriteString("
") if err != nil { return err } - _, err = templBuffer.WriteString("\" id=\"") + err = templ.RenderScriptItems(ctx, templBuffer, toggleApiKeyVisibility(domain.Id)) if err != nil { return err } - _, err = templBuffer.WriteString(templ.EscapeString(fmt.Sprintf("domain_apikey_%s", domain.Id))) + _, err = templBuffer.WriteString("") + _, err = templBuffer.WriteString(templ.EscapeString(fmt.Sprintf("domain_eye_vis_%s", domain.Id))) if err != nil { return err } - var_11 := `show` - _, err = templBuffer.WriteString(var_11) + _, err = templBuffer.WriteString("\" class=\"hidden w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">