tmpl: indent input field params for clarity

[skip ci]

templates/manage/apikeys.tmpl

@@ -22,7 +22,10 @@
 						<label for="hibpApiKey" class="text-purple-500 font-bold">
 							Have I Been Pwned?
 						</label>
-						<input name="hibpApiKey" type="text" placeholder="HIBP API key" {{if and .Data .Data.hibpApiKey}}value="{{.Data.hibpApiKey}}"{{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">
+						<input name="hibpApiKey" type="text"
+							placeholder="HIBP API key" {{if and .Data .Data.hibpApiKey}}value="{{.Data.hibpApiKey}}"{{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">
 						<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>
 					</div>
 					<div class="mt-4 block md:flex md:items-center place-items-end space-x-0 md:space-x-2">
@@ -42,7 +45,10 @@
 						<label for="dehashed-api-key" class="text-purple-500 font-bold">
 							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}} 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">
+						<input name="dehashed-api-key" type="text"
+							placeholder="DeHashed.com API key" {{if and .Data.form .Data.form.DehashedAPIKey}}value="{{.Data.form.DehashedAPIKey}}"{{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">
 						<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>
 					</div>
 					<div class="mt-4 block md:flex md:items-center place-items-end space-x-0 md:space-x-2">

templates/manage/user-edit.tmpl

@@ -32,13 +32,19 @@
 						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
-						<input name="username" type="text" {{if and .Data.user .Data.user.Username}}value="{{.Data.user.Username}}"{{end}} placeholder="Username" required class="block w-full py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="username" type="text"
+							{{if and .Data.user .Data.user.Username}}value="{{.Data.user.Username}}" {{end}}placeholder="Username"
+							required
+							class="block w-full py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					<div class="relative flex items-center mt-4">
 						<span class="absolute" role="img" aria-label="email icon">
 							{{ template "svg-email.tmpl" }}
 						</span>
-						<input name="email" type="email" {{if and .Data.user .Data.user.Email}}value="{{.Data.user.Email}}"{{end}} placeholder="Email address" required class="peer block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="email" type="email"
+							{{if and .Data.user .Data.user.Email}}value="{{.Data.user.Email}}" {{end}}placeholder="Email address"
+							required
+							class="peer block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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 class="mt-2 mx-4 hidden peer-[:not(:placeholder-shown):invalid]:block text-pink-600 text-sm">
 						Please provide a valid email address.
 						</p>
@@ -48,13 +54,19 @@
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="password" type="password" value="" placeholder="Password" required class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="password" type="password"
+							value="" placeholder="Password"
+							required
+							class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					<div class="relative flex items-center mt-4">
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="repeatPassword" type="password" value="" placeholder="Repeat Password" required class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="repeatPassword" type="password"
+							value="" placeholder="Repeat Password"
+							required
+							class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					{{- end -}}
 					<div class="flex pt-2 px-2 items-center justify-center gap-6">

templates/manage/user-new.tmpl

@@ -22,13 +22,21 @@
 						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
-						<input name="username" type="text" {{if and .Data.form .Data.form.Username}}value="{{.Data.form.Username}}"{{end}} placeholder="Username" required class="block w-full py-3 valid:border required:border-blue-300 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="username" type="text"
+							placeholder="Username" {{if and .Data.form .Data.form.Username}}value="{{.Data.form.Username}}"{{end}}
+							autofocus
+							minlength="2"
+							required
+							class="block w-full py-3 valid:border required:border-blue-300 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					<div class="relative flex items-center mt-4">
 						<span class="absolute" role="img" aria-label="email icon">
 							{{ template "svg-email.tmpl" }}
 						</span>
-							<input name="email" type="email" {{if and .Data.form .Data.form.Email}}value="{{.Data.form.Email}}"{{end}} placeholder="Email address" required class="peer block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+							<input name="email" type="email"
+								placeholder="Email address" {{if and .Data.form .Data.form.Email}}value="{{.Data.form.Email}}"{{end}}
+								required
+								class="peer block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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 class="mt-2 mx-4 hidden peer-[:not(:placeholder-shown):invalid]:block text-pink-600 text-sm">
 							Please provide a valid email address.
 						</p>
@@ -37,13 +45,21 @@
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="password" type="password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{end}} placeholder="Password" minlength="20" required class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="password" type="password"
+							placeholder="Password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{end}}
+							 minlength="20"
+							 required
+							 class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					<div class="relative flex items-center mt-4">
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="repeatPassword" type="password" {{if and .Data.form .Data.form.RepeatPassword}}value="{{.Data.form.RepeatPassword}}"{{end}} placeholder="Repeat Password" minlength="20" required class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="repeatPassword" type="password"
+							placeholder="Repeat Password" {{if and .Data.form .Data.form.RepeatPassword}}value="{{.Data.form.RepeatPassword}}"{{end}}
+							minlength="20"
+							required
+							class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					<div class="flex pt-2 px-2 items-center justify-center gap-6">
 						<div class="mb-1 block min-h-3">

templates/signin.tmpl

@@ -25,14 +25,23 @@
 						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
-							<input name="username" type="text" placeholder="Username" {{if and .Data.form .Data.form.Username}}value="{{.Data.form.Username}}"{{end}} autofocus minlength="2" required class="block w-full py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border text-gray-700 bg-white border rounded-lg px-11 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">
+							<input name="username" type="text"
+								placeholder="Username" {{if and .Data.form .Data.form.Username}}value="{{.Data.form.Username}}"{{end}}
+								autofocus
+								minlength="2"
+								required
+								class="block w-full py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border text-gray-700 bg-white border rounded-lg px-11 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">
 					</div>
 					<!-- password field -->
 					<div class="relative flex items-center mt-4">
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="password" type="password" placeholder="Password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{else}}{{end}} minlength=12 required class="block w-full px-10 py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 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">
+						<input name="password" type="password"
+							placeholder="Password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{else}}{{end}}
+							minlength=12
+							required
+							class="block w-full px-10 py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 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">
 					</div>
 
 					<div class="mt-8 md:flex md:items-center">

templates/signup.tmpl

@@ -18,14 +18,21 @@
 						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
-						<input name="username" type="text" placeholder="Username" minlength="2" required class="block w-full py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="username" type="text"
+							placeholder="Username"
+							minlength="2"
+							required
+							class="block w-full py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					<div class="relative flex items-center mt-4">
 						<!-- <label class="block"> -->
 						<span class="absolute" role="img" aria-label="email icon">
 							{{ template "svg-email.tmpl" }}
 						</span>
-						<input name="email" type="email" placeholder="Email address" required class="peer block w-full px-10 py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="email" type="email"
+							placeholder="Email address"
+							required
+							class="peer block w-full px-10 py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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 class="mt-2 mx-4 hidden peer-[:not(:placeholder-shown):invalid]:block text-pink-600 text-sm">
 							Please provide a valid email address.
 						</p>
@@ -35,7 +42,11 @@
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="password" type="password" placeholder="Password" required minlength="20" class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
+						<input name="password" type="password"
+							placeholder="Password"
+							required
+							minlength="20"
+							class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark: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">
 					</div>
 					<div class="mt-8 md:flex md:items-center">
 						<button class="w-full px-6 py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg md:w-1/2 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">