Added user registration
This commit is contained in:
@@ -8,11 +8,9 @@ import "fmt"
|
||||
// error icons on the username and password field
|
||||
templ LoginForm(loginError string) {
|
||||
{{
|
||||
var errCreds string
|
||||
errCreds := "false"
|
||||
if loginError == "Username or password incorrect" {
|
||||
errCreds = "true"
|
||||
} else {
|
||||
errCreds = "false"
|
||||
}
|
||||
xdata := fmt.Sprintf(
|
||||
"{credentialError: %s, errorMessage: '%s'}",
|
||||
|
||||
200
view/component/form/registerform.templ
Normal file
200
view/component/form/registerform.templ
Normal file
@@ -0,0 +1,200 @@
|
||||
package form
|
||||
|
||||
import "fmt"
|
||||
|
||||
// Login Form. If loginError is not an empty string, it will display the
|
||||
// contents of loginError to the user.
|
||||
templ RegisterForm(registerError string) {
|
||||
{{
|
||||
errUsername := "false"
|
||||
errPasswords := "false"
|
||||
if registerError == "Username is taken" {
|
||||
errUsername = "true"
|
||||
} else if registerError == "Passwords do not match" {
|
||||
errPasswords = "true"
|
||||
}
|
||||
xdata := fmt.Sprintf(
|
||||
"{errUsername: %s, errPasswords: %s, errorMessage: '%s'}",
|
||||
errUsername,
|
||||
errPasswords,
|
||||
registerError,
|
||||
)
|
||||
}}
|
||||
<form
|
||||
hx-post="/register"
|
||||
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="errUsername"
|
||||
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>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
id="username-error"
|
||||
x-show="errUsername"
|
||||
x-cloak
|
||||
x-text="if (errUsername) return errorMessage;"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm mb-2"
|
||||
>Password</label>
|
||||
</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="errPasswords"
|
||||
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="confirm-password"
|
||||
class="block text-sm mb-2"
|
||||
>Confirm Password</label>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-password"
|
||||
name="confirm-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="confirm-password-error"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 end-0
|
||||
pointer-events-none pe-3 pt-3"
|
||||
x-show="errPasswords"
|
||||
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="errPasswords"
|
||||
x-cloak
|
||||
x-text="if (errPasswords) return 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>
|
||||
}
|
||||
Reference in New Issue
Block a user