159 lines
4.2 KiB
Plaintext
159 lines
4.2 KiB
Plaintext
package form
|
|
|
|
import "fmt"
|
|
|
|
// Login Form. If loginError is not an empty string, it will display the
|
|
// contents of loginError to the user.
|
|
// If loginError is "Username or password incorrect" it will also show
|
|
// error icons on the username and password field
|
|
templ LoginForm(loginError string) {
|
|
{{
|
|
var errCreds string
|
|
if loginError == "Username or password incorrect" {
|
|
errCreds = "true"
|
|
} else {
|
|
errCreds = "false"
|
|
}
|
|
xdata := fmt.Sprintf(
|
|
"{credentialError: %s, errorMessage: '%s'}",
|
|
errCreds,
|
|
loginError,
|
|
)
|
|
}}
|
|
<form
|
|
hx-post="/login"
|
|
x-data="{ submitted: false, buttontext: 'Login' }"
|
|
x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
|
|
>
|
|
<div
|
|
class="grid gap-y-4"
|
|
x-data={ xdata }
|
|
>
|
|
<!-- Form Group -->
|
|
<div>
|
|
<label
|
|
for="email"
|
|
class="block text-sm mb-2"
|
|
>Username</label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
idnutanix="username"
|
|
name="username"
|
|
class="py-3 px-4 block w-full rounded-lg text-sm
|
|
focus:border-blue focus:ring-blue bg-base
|
|
disabled:opacity-50
|
|
disabled:pointer-events-none"
|
|
required
|
|
aria-describedby="username-error"
|
|
/>
|
|
<div
|
|
class="absolute inset-y-0 end-0
|
|
pointer-events-none pe-3 pt-3"
|
|
x-show="credentialError"
|
|
x-cloak
|
|
>
|
|
<svg
|
|
class="size-5 text-red"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8
|
|
4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
|
|
0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
|
|
1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between items-center">
|
|
<label
|
|
for="password"
|
|
class="block text-sm mb-2"
|
|
>Password</label>
|
|
<a
|
|
class="inline-flex items-center gap-x-1 text-sm
|
|
text-blue decoration-2 hover:underline
|
|
focus:outline-none focus:underline font-medium"
|
|
href="/recover-account"
|
|
tabindex="-1"
|
|
>Forgot password?</a>
|
|
</div>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
class="py-3 px-4 block w-full rounded-lg text-sm
|
|
focus:border-blue focus:ring-blue bg-base
|
|
disabled:opacity-50 disabled:pointer-events-none"
|
|
required
|
|
aria-describedby="password-error"
|
|
/>
|
|
<div
|
|
class="absolute inset-y-0 end-0
|
|
pointer-events-none pe-3 pt-3"
|
|
x-show="credentialError"
|
|
x-cloak
|
|
>
|
|
<svg
|
|
class="size-5 text-red"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8
|
|
4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
|
|
0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
|
|
1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p
|
|
class="text-center text-xs text-red mt-2"
|
|
id="password-error"
|
|
x-show="errorMessage"
|
|
x-cloak
|
|
x-text="errorMessage"
|
|
></p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="flex">
|
|
<input
|
|
id="remember-me"
|
|
name="remember-me"
|
|
type="checkbox"
|
|
class="shrink-0 mt-0.5 border-gray-200 rounded
|
|
text-blue focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div class="ms-3">
|
|
<label
|
|
for="remember-me"
|
|
class="text-sm"
|
|
>Remember me</label>
|
|
</div>
|
|
</div>
|
|
<button
|
|
x-bind:disabled="submitted"
|
|
x-text="buttontext"
|
|
type="submit"
|
|
class="w-full py-3 px-4 inline-flex justify-center items-center
|
|
gap-x-2 rounded-lg border border-transparent transition
|
|
bg-green hover:bg-green/75 text-mantle hover:cursor-pointer
|
|
disabled:bg-green/60 disabled:cursor-default"
|
|
></button>
|
|
</div>
|
|
</form>
|
|
}
|