refactor: changed file structure
This commit is contained in:
90
internal/view/component/form/confirmpass.templ
Normal file
90
internal/view/component/form/confirmpass.templ
Normal file
@@ -0,0 +1,90 @@
|
||||
package form
|
||||
|
||||
templ ConfirmPassword(err string) {
|
||||
<form
|
||||
hx-post="/reauthenticate"
|
||||
x-data={ templ.JSFuncCall(
|
||||
"confirmPassData", err,
|
||||
).CallInline }
|
||||
x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
|
||||
>
|
||||
<script>
|
||||
function confirmPassData(err) {
|
||||
return {
|
||||
submitted: false,
|
||||
buttontext: 'Confirm',
|
||||
errMsg: err,
|
||||
reset() {
|
||||
this.err = "";
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<div
|
||||
class="grid gap-y-4"
|
||||
>
|
||||
<div class="mt-5">
|
||||
<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"
|
||||
placeholder="Confirm password"
|
||||
required
|
||||
aria-describedby="password-error"
|
||||
@input="reset()"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 end-0
|
||||
pointer-events-none pe-3 pt-3"
|
||||
x-show="errMsg"
|
||||
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="errMsg"
|
||||
x-cloak
|
||||
x-text="errMsg"
|
||||
></p>
|
||||
</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-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
|
||||
disabled:bg-blue/60 disabled:cursor-default"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full py-3 px-4 inline-flex justify-center items-center
|
||||
gap-x-2 rounded-lg border border-transparent transition
|
||||
bg-surface2 hover:bg-surface1 hover:cursor-pointer
|
||||
disabled:cursor-default"
|
||||
@click="showConfirmPasswordModal=false"
|
||||
>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
55
internal/view/component/form/confirmpass_templ.go
Normal file
55
internal/view/component/form/confirmpass_templ.go
Normal file
@@ -0,0 +1,55 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.833
|
||||
package form
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
func ConfirmPassword(err string) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form hx-post=\"/reauthenticate\" x-data=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSFuncCall(
|
||||
"confirmPassData", err,
|
||||
).CallInline)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/form/confirmpass.templ`, Line: 8, Col: 28}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" x-on:htmx:xhr:loadstart=\"submitted=true;buttontext='Loading...'\"><script>\n function confirmPassData(err) {\n return {\n submitted: false,\n buttontext: 'Confirm', \n errMsg: err,\n reset() {\n this.err = \"\";\n },\n };\n }\n </script><div class=\"grid gap-y-4\"><div class=\"mt-5\"><div class=\"relative\"><input type=\"password\" id=\"password\" name=\"password\" class=\"py-3 px-4 block w-full rounded-lg text-sm\n focus:border-blue focus:ring-blue bg-base\n disabled:opacity-50 disabled:pointer-events-none\" placeholder=\"Confirm password\" required aria-describedby=\"password-error\" @input=\"reset()\"><div class=\"absolute inset-y-0 end-0 \n pointer-events-none pe-3 pt-3\" x-show=\"errMsg\" 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 \n 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0\n 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1\n 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=\"errMsg\" x-cloak x-text=\"errMsg\"></p></div><button x-bind:disabled=\"submitted\" x-text=\"buttontext\" type=\"submit\" class=\"w-full py-3 px-4 inline-flex justify-center items-center \n gap-x-2 rounded-lg border border-transparent transition\n bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer\n disabled:bg-blue/60 disabled:cursor-default\"></button> <button type=\"button\" class=\"w-full py-3 px-4 inline-flex justify-center items-center \n gap-x-2 rounded-lg border border-transparent transition\n bg-surface2 hover:bg-surface1 hover:cursor-pointer\n disabled:cursor-default\" @click=\"showConfirmPasswordModal=false\">Cancel</button></div></form>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
161
internal/view/component/form/loginform.templ
Normal file
161
internal/view/component/form/loginform.templ
Normal file
@@ -0,0 +1,161 @@
|
||||
package form
|
||||
|
||||
// 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) {
|
||||
{{ credErr := "Username or password incorrect" }}
|
||||
<form
|
||||
hx-post="/login"
|
||||
x-data={ templ.JSFuncCall(
|
||||
"loginFormData", loginError, credErr,
|
||||
).CallInline }
|
||||
x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
|
||||
>
|
||||
<script>
|
||||
function loginFormData(err, credError) {
|
||||
return {
|
||||
submitted: false,
|
||||
buttontext: 'Login',
|
||||
errorMessage: err,
|
||||
credentialError: err === credError ? true : false,
|
||||
resetErr() {
|
||||
this.errorMessage = "";
|
||||
this.credentialError = false;
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<div
|
||||
class="grid gap-y-4"
|
||||
>
|
||||
<!-- Form Group -->
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
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"
|
||||
@input="resetErr()"
|
||||
/>
|
||||
<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"
|
||||
@input="resetErr()"
|
||||
/>
|
||||
<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>
|
||||
}
|
||||
60
internal/view/component/form/loginform_templ.go
Normal file
60
internal/view/component/form/loginform_templ.go
Normal file
@@ -0,0 +1,60 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.833
|
||||
package form
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
// 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
|
||||
func LoginForm(loginError string) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
credErr := "Username or password incorrect"
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form hx-post=\"/login\" x-data=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSFuncCall(
|
||||
"loginFormData", loginError, credErr,
|
||||
).CallInline)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/form/loginform.templ`, Line: 13, Col: 28}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" x-on:htmx:xhr:loadstart=\"submitted=true;buttontext='Loading...'\"><script>\n function loginFormData(err, credError) {\n return {\n submitted: false,\n buttontext: 'Login',\n errorMessage: err, \n credentialError: err === credError ? true : false,\n resetErr() {\n this.errorMessage = \"\";\n this.credentialError = false;\n },\n };\n }\n </script><div class=\"grid gap-y-4\"><!-- Form Group --><div><label for=\"username\" 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\n focus:border-blue focus:ring-blue bg-base\n disabled:opacity-50 \n disabled:pointer-events-none\" required aria-describedby=\"username-error\" @input=\"resetErr()\"><div class=\"absolute inset-y-0 end-0 \n 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 \n 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 \n 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 \n 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 \n text-blue decoration-2 hover:underline \n 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\n focus:border-blue focus:ring-blue bg-base\n disabled:opacity-50 disabled:pointer-events-none\" required aria-describedby=\"password-error\" @input=\"resetErr()\"><div class=\"absolute inset-y-0 end-0 \n 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 \n 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0\n 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1\n 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\n 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 \n gap-x-2 rounded-lg border border-transparent transition\n bg-green hover:bg-green/75 text-mantle hover:cursor-pointer\n disabled:bg-green/60 disabled:cursor-default\"></button></div></form>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
209
internal/view/component/form/registerform.templ
Normal file
209
internal/view/component/form/registerform.templ
Normal file
@@ -0,0 +1,209 @@
|
||||
package form
|
||||
|
||||
// Login Form. If loginError is not an empty string, it will display the
|
||||
// contents of loginError to the user.
|
||||
templ RegisterForm(registerError string) {
|
||||
{{
|
||||
usernameErr := "Username is taken"
|
||||
passErrs := []string{
|
||||
"Password exceeds maximum length of 72 bytes",
|
||||
"Passwords do not match",
|
||||
}
|
||||
}}
|
||||
<form
|
||||
hx-post="/register"
|
||||
x-data={ templ.JSFuncCall(
|
||||
"registerFormData", registerError, usernameErr, passErrs,
|
||||
).CallInline }
|
||||
x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
|
||||
>
|
||||
<script>
|
||||
function registerFormData(err, usernameErr, passErrs) {
|
||||
return {
|
||||
submitted: false,
|
||||
buttontext: 'Register',
|
||||
errorMessage: err,
|
||||
errUsername: err === usernameErr ? true : false,
|
||||
errPasswords: passErrs.includes(err) ? true : false,
|
||||
resetErr() {
|
||||
this.errorMessage = "";
|
||||
this.errUsername = false;
|
||||
this.errPasswords = false;
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<div
|
||||
class="grid gap-y-4"
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm mb-2"
|
||||
>Username</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="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"
|
||||
@input="resetErr()"
|
||||
/>
|
||||
<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"
|
||||
@input="resetErr()"
|
||||
/>
|
||||
<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"
|
||||
@input="resetErr()"
|
||||
/>
|
||||
<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>
|
||||
}
|
||||
63
internal/view/component/form/registerform_templ.go
Normal file
63
internal/view/component/form/registerform_templ.go
Normal file
@@ -0,0 +1,63 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.833
|
||||
package form
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
// Login Form. If loginError is not an empty string, it will display the
|
||||
// contents of loginError to the user.
|
||||
func RegisterForm(registerError string) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
|
||||
usernameErr := "Username is taken"
|
||||
passErrs := []string{
|
||||
"Password exceeds maximum length of 72 bytes",
|
||||
"Passwords do not match",
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form hx-post=\"/register\" x-data=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSFuncCall(
|
||||
"registerFormData", registerError, usernameErr, passErrs,
|
||||
).CallInline)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/component/form/registerform.templ`, Line: 17, Col: 28}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" x-on:htmx:xhr:loadstart=\"submitted=true;buttontext='Loading...'\"><script>\n function registerFormData(err, usernameErr, passErrs) {\n return {\n submitted: false,\n buttontext: 'Register',\n errorMessage: err, \n errUsername: err === usernameErr ? true : false, \n errPasswords: passErrs.includes(err) ? true : false,\n resetErr() {\n this.errorMessage = \"\";\n this.errUsername = false;\n this.errPasswords = false;\n },\n };\n }\n </script><div class=\"grid gap-y-4\"><div><label for=\"username\" class=\"block text-sm mb-2\">Username</label><div class=\"relative\"><input type=\"text\" id=\"username\" name=\"username\" class=\"py-3 px-4 block w-full rounded-lg text-sm\n focus:border-blue focus:ring-blue bg-base\n disabled:opacity-50 \n disabled:pointer-events-none\" required aria-describedby=\"username-error\" @input=\"resetErr()\"><div class=\"absolute inset-y-0 end-0 \n 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 \n 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 \n 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 \n 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\n focus:border-blue focus:ring-blue bg-base\n disabled:opacity-50 disabled:pointer-events-none\" required aria-describedby=\"password-error\" @input=\"resetErr()\"><div class=\"absolute inset-y-0 end-0 \n 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 \n 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0\n 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1\n 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\n focus:border-blue focus:ring-blue bg-base\n disabled:opacity-50 disabled:pointer-events-none\" required aria-describedby=\"confirm-password-error\" @input=\"resetErr()\"><div class=\"absolute inset-y-0 end-0 \n 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 \n 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0\n 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1\n 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\n 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 \n gap-x-2 rounded-lg border border-transparent transition\n bg-green hover:bg-green/75 text-mantle hover:cursor-pointer\n disabled:bg-green/60 disabled:cursor-default\"></button></div></form>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
Reference in New Issue
Block a user