go,tmpl(api-keys): add tooltips, disable buttons

app/settings/api-keys.go

@@ -0,0 +1,20 @@
+// Copyright 2023 wanderer <a_mirre at utb dot cz>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package settings
+
+import (
+	"os"
+)
+
+func (s *Settings) setAPIKeys() {
+	if hibpK := os.Getenv("PCMT_HIBP_API_KEY"); hibpK != "" {
+		log.Info("setting HIBP API key from env var")
+		s.SetAPIKeyHIBP(hibpK)
+	}
+
+	if dehashedK := os.Getenv("PCMT_DEHASHED_API_KEY"); dehashedK != "" {
+		log.Info("setting dehashed.com API key from env var")
+		s.SetAPIKeyDehashed(dehashedK)
+	}
+}

app/settings/settings.go

@@ -40,6 +40,8 @@ type Settings struct {
 	dbType                  string
 	dbIsSetUp               bool
 	RegistrationAllowed     bool
+	hibpAPIKey              string
+	dehashedAPIKey          string
 }
 
 const (
@@ -52,6 +54,8 @@ const (
 	defaultLoggerSkipAssets        = true
 )
 
+var log slogging.Slogger
+
 // cleantgt is a list of ENV vars pertaining to pcmt.
 var cleantgt = []string{
 	"PCMT_LIVE",
@@ -62,6 +66,7 @@ var cleantgt = []string{
 	"PCMT_SESSION_ENCR_SECRET",
 	"PCMT_INIT_ADMIN_PASSWORD",
 	"PCMT_HIBP_API_KEY",
+	"PCMT_DEHASHED_API_KEY",
 }
 
 // New returns a new instance of the settings struct.
@@ -89,8 +94,8 @@ func (s *Settings) DefaultLoggerSkipAssets() bool {
 // the settings struct. Order of preference for values is (from higher to
 // lower) as follows: flag -> Env var -> configuration file.
 func (s *Settings) Consolidate(conf *config.Config, host *string, port *int, devel *bool, version string) {
-	log := *slogging.Logger() // have a local copy.
+	log = *slogging.Logger() // have a local copy.
-	log.Logger = log.Logger.With(
+	log.Logger = log.With(
 		slog.Group("pcmt extra", slog.String("module", "app/settings")),
 	)
 
@@ -174,6 +179,8 @@ func (s *Settings) Consolidate(conf *config.Config, host *string, port *int, dev
 		s.RegistrationAllowed = true
 	}
 
+	s.setAPIKeys()
+
 	s.SetVersion(version)
 }
 
@@ -302,6 +309,16 @@ func (s *Settings) DbIsSetUp() bool {
 	return s.dbIsSetUp
 }
 
+// APIKeyHIBP returns the hibpAPIKey.
+func (s *Settings) APIKeyHIBP() string {
+	return s.hibpAPIKey
+}
+
+// APIKeyDehashed returns the dehashedAPIKey.
+func (s *Settings) APIKeyDehashed() string {
+	return s.dehashedAPIKey
+}
+
 // DbConnstring returns the dbConnString.
 func (s *Settings) DbConnstring() string {
 	return s.dbConnstring
@@ -441,6 +458,16 @@ func (s *Settings) SetDbIsSetUp(is bool) {
 	s.dbIsSetUp = is
 }
 
+// SetAPIKeyHIBP sets the hibpAPIKey.
+func (s *Settings) SetAPIKeyHIBP(k string) {
+	s.hibpAPIKey = k
+}
+
+// SetAPIKeyDehashed sets the dehashedAPIKey.
+func (s *Settings) SetAPIKeyDehashed(k string) {
+	s.dehashedAPIKey = k
+}
+
 // EraseENVs attempts to clear environment vars pertaining to pcmt.
 func (s *Settings) EraseENVs() error {
 	for _, v := range cleantgt {

handlers/manage-apikeys.go

@@ -19,6 +19,14 @@ func ManageAPIKeys() echo.HandlerFunc {
 		p.Current = "api-keys"
 		p.User = u
 
+		if setting.APIKeyHIBP() != "" {
+			p.Data["hibpApiKey"] = setting.APIKeyHIBP()
+		}
+
+		if setting.APIKeyDehashed() != "" {
+			p.Data["dehashedApiKey"] = setting.APIKeyDehashed()
+		}
+
 		err := c.Render(http.StatusOK, "manage/apikeys.tmpl",
 			p,
 		)

templates/manage/apikeys.tmpl

@@ -14,8 +14,9 @@
 				Manage Your API keys
 			</h1>
 
-			<!-- hibp form -->
 			<div class="p-2 mx-auto mt-8 lg:max-w-5xl lg:mt-0 block">
+				{{- $hibpK := .Data.hibpApiKey -}}
+				<!-- hibp form -->
 				<form method="post" class="w-full lg:max-w-7xl px-2">
 					<input type="hidden" name="csrf" value="{{- .CSRF -}}">
 					<div class="items-center">
@@ -23,21 +24,42 @@
 							Have I Been Pwned?
 						</label>
 						<input name="hibpApiKey" type="text"
-							placeholder="HIBP API key" {{if and .Data .Data.hibpApiKey}}value="{{.Data.hibpApiKey}}"{{end}}
+							placeholder="HIBP API key" {{if $hibpK}}value="{{$hibpK}}"{{end}}
 							autofocus
-							class="py-3 px-8 mt-2 w-full valid:border text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:valid:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
+							disabled
-						<p id="hibp-expl" class="hover:cursor-help mt-2 text-sm text-gray-500 dark:text-gray-400">Adds support for querying Troy Hunt's <a href="https://haveibeenpwned.com/API/v3" class="font-medium text-blue-600 hover:underline dark:text-blue-500">Have I Been Pwned? API</a>.</p>
+							class="py-3 px-8 mt-2 w-full valid:border text-gray-500 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:valid:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
+						<p id="hibp-expl"
+							class="group relative hover:cursor-help mt-2 text-sm text-gray-500 dark:text-gray-400">
+								Adds support for querying Troy Hunt's
+							<a href="https://haveibeenpwned.com/API/v3"
+								class="font-medium text-blue-600 hover:underline dark:text-blue-500">Have I Been Pwned? API
+							</a>
+							<span
+								class="absolute hidden group-hover:flex -left-5 -top-2 -translate-y-full w-48 px-2 py-1 bg-gray-700 rounded-lg text-center text-white text-sm after:content-[''] after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700">
+								The input field reflects the value of $PCMT_HIBP_API_KEY environment variable.
+							</span>
+						</p>
 					</div>
-					<div class="mt-4 block md:flex md:items-center place-items-end space-x-0 md:space-x-2">
+					<div class="group relative mt-4 block md:flex md:items-center place-items-end space-x-0 md:space-x-2">
-						<button class="px-2 py-3 w-full md:w-auto text-sm font-medium tracking-wide text-white transition-colors duration-300 transform bg-blue-500 rounded-lg  hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
+						<span
+							class="absolute hidden group-hover:flex -left-5 -top-2 -translate-y-full w-48 px-2 py-1 bg-gray-700 rounded-lg text-center text-white text-sm after:content-[''] after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700">
+							These buttons currently don't perform any actions. The key view is currently read-only.
+						</span>
+						<button
+							disabled
+							class="px-2 py-3 w-full md:w-auto text-sm font-medium tracking-wide text-white transition-colors duration-300 transform bg-blue-500 rounded-lg  hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
 							Save
 						</button>
-						<button {{if and (not .Data) (not .Data.hibpApiKey)}}disabled class="cursor-not-allowed{{else}}class="transition-colors duration-300 transform hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50{{end}} px-2 py-3 mt-2 md:mt-0 w-full md:w-auto text-sm font-medium tracking-wide text-white bg-gray-500 rounded-lg">
+						<button
+							disabled {{if not $hibpK}}{{end}}
+							class="{{if not $hibpK}}cursor-not-allowed{{else}}transition-colors duration-300 transform hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50{{end}} px-2 py-3 mt-2 md:mt-0 w-full md:w-auto text-sm font-medium tracking-wide text-white bg-gray-500 rounded-lg">
 							Test key
 						</button>
 					</div>
 				</form>
 				<hr class="py-2 md:px-14 mt-4 lg:mx-22 sm:max-w-1/2">
+
+				{{- $dehashedK := .Data.dehashedApiKey -}}
 				<!-- dehashed.com form -->
 				<form method="post" class="w-full lg:max-w-7xl px-2">
 					<input type="hidden" name="csrf" value="{{- .CSRF -}}">
@@ -46,16 +68,31 @@
 							DeHashed.com
 						</label>
 						<input name="dehashed-api-key" type="text"
-							placeholder="DeHashed.com API key" {{if and .Data.form .Data.form.DehashedAPIKey}}value="{{.Data.form.DehashedAPIKey}}"{{end}}
+							placeholder="DeHashed.com API key" {{if $dehashedK}}value="{{$dehashedK}}"{{end}}
 							autofocus
-							class="py-3 px-8 mt-2 w-full valid:border text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:valid:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" aria-described-by="dehashed-expl">
+							disabled
-						<p id="dehashed-expl" class="hover:cursor-help mt-2 text-sm text-gray-500 dark:text-gray-400">Adds support for querying <a href="https://dehashed.com/" class="font-medium text-blue-600 hover:underline dark:text-blue-500">DeHashed API</a>.</p>
+							class="py-3 px-8 mt-2 w-full valid:border text-gray-500 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:valid:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+							aria-described-by="dehashed-expl">
+						<p id="dehashed-expl" class="group relative hover:cursor-help mt-2 text-sm text-gray-500 dark:text-gray-400">Adds support for querying <a href="https://dehashed.com/" class="font-medium text-blue-600 hover:underline dark:text-blue-500">DeHashed API</a>
+							<span
+								class="absolute hidden group-hover:flex -left-5 -top-2 -translate-y-full w-54 px-2 py-1 bg-gray-700 rounded-lg text-center text-white text-sm after:content-[''] after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700">
+								Support for dehashed.com is coming up. The input field will reflect the value of $PCMT_DEHASHED_API_KEY environment variable.
+							</span>
+						</p>
 					</div>
-					<div class="mt-4 block md:flex md:items-center place-items-end space-x-0 md:space-x-2">
+					<div class="group relative mt-4 block md:flex md:items-center place-items-end space-x-0 md:space-x-2">
-						<button class="px-2 py-3 w-full md:w-auto text-sm font-medium tracking-wide text-white transition-colors duration-300 transform bg-blue-500 rounded-lg  hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
+						<span
+							class="absolute hidden group-hover:flex -left-5 -top-2 -translate-y-full w-48 px-2 py-1 bg-gray-700 rounded-lg text-center text-white text-sm after:content-[''] after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700">
+							These buttons currently don't perform any actions.
+						</span>
+						<button
+							disabled
+							class="px-2 py-3 w-full md:w-auto text-sm font-medium tracking-wide text-white transition-colors duration-300 transform bg-blue-500 rounded-lg  hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
 							Save
 						</button>
-						<button {{if and (not .Data.form) (not .Data.form.DehashedAPIKey)}}disabled class="cursor-not-allowed{{else}}class="transition-colors duration-300 transform hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50{{end}} px-2 py-3 mt-2 md:mt-0 w-full md:w-auto text-sm font-medium tracking-wide text-white bg-gray-500 rounded-lg">
+						<button
+							disabled {{if not $dehashedK}}{{end}}
+							class="{{if not $dehashedK}}cursor-not-allowed{{else}}transition-colors duration-300 transform hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50{{end}} px-2 py-3 mt-2 md:mt-0 w-full md:w-auto text-sm font-medium tracking-wide text-white bg-gray-500 rounded-lg">
 							Test key
 						</button>
 					</div>