josh
/
docker-mailserver-passwords
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nump

This commit is contained in:
Your Name 2024-10-08 18:39:10 -04:00
parent 9872d69495
commit c54252e1ce
4 changed files with 97 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
form.json
View File

@ -1 +1 @@
{"Elements":[{"Name":"email","Label":"Email Address","LabelClasses":"","InputClasses":"","Type":"text","Hint":"","Required":false,"Classes":"","Validator":"email","FailMessage":"Must be a valid email address","Value":"","Autocomplete":"off","Order":1,"OnClick":"","Choices":null},{"Name":"oldpassword","Label":"Old Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"Passsword Incorrect","Value":"","Autocomplete":"off","Order":2,"OnClick":"","Choices":null},{"Name":"newpassword","Label":"New Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"minlength=8;haslowercase;hasuppercase;hasdigit","FailMessage":"Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit","Value":"","Autocomplete":"off","Order":3,"OnClick":"","Choices":null},{"Name":"confirmpassword","Label":"Confirm Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"mustmatch=newpassword","FailMessage":"Passwords do not match","Value":"","Autocomplete":"off","Order":4,"OnClick":"","Choices":null},{"Name":"","Label":"Change Password","LabelClasses":"","InputClasses":"flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600","Type":"submit","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"","Value":"","Autocomplete":"off","Order":5,"OnClick":"","Choices":null}],"Route":"/chpass/changepassword","Classes":"px-1 py-2","LabelClasses":"text-sm font-medium leading-6 text-gray-900","InputClasses":"rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6","ErrorClasses":"text-red-600 text-right font-bold text-xl","ContainerClasses":" bg-gray-200 justify-center py-6 rounded-lg shadow-lg","Editable":true}
{"Elements":[{"Name":"email","Label":"Email Address","LabelClasses":"","InputClasses":"","Type":"text","Hint":"","Required":false,"Classes":"","Validator":"email","FailMessage":"Must be a valid email address","Value":"","Autocomplete":"off","Order":1,"OnClick":"","Choices":null},{"Name":"oldpassword","Label":"Old Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"Passsword Incorrect","Value":"","Autocomplete":"off","Order":2,"OnClick":"","Choices":null},{"Name":"newpassword","Label":"New Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"minlength=8;haslowercase;hasuppercase;hasdigit","FailMessage":"Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit","Value":"","Autocomplete":"off","Order":3,"OnClick":"","Choices":null},{"Name":"confirmpassword","Label":"Confirm Password","LabelClasses":"","InputClasses":"","Type":"password","Hint":"","Required":false,"Classes":"","Validator":"mustmatch=newpassword","FailMessage":"Passwords do not match","Value":"","Autocomplete":"off","Order":4,"OnClick":"","Choices":null},{"Name":"","Label":"Change Password","LabelClasses":"","InputClasses":"flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600","Type":"submit","Hint":"","Required":false,"Classes":"","Validator":"","FailMessage":"","Value":"","Autocomplete":"off","Order":5,"OnClick":"","Choices":null}],"Route":"/chpass/changepassword","Classes":" py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 ","LabelClasses":"block text-sm font-medium text-gray-700","InputClasses":"block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm","ErrorClasses":"text-red-800 font-bold","ContainerClasses":"relative mx-auto gap-x-16 bg-slate-100 w-full lg-w-1/2 lg:px-8 lg:pt-16","Editable":true}

10
main.go
View File

@ -34,12 +34,12 @@ func mwLog(next http.Handler) http.Handler {
func main() {
forms.GlobalStyles.ContainerClasses = " bg-gray-200 justify-center py-6 rounded-lg shadow-lg"
forms.GlobalStyles.ItemClasses = "px-1 py-2"
forms.GlobalStyles.ErrorClasses = "text-red-600 text-right font-bold text-xl"
forms.GlobalStyles.LabelClasses = "text-sm font-medium leading-6 text-gray-900"
forms.GlobalStyles.InputClasses = "rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
f := forms.NewForm()
f.ContainerClasses = "relative mx-auto gap-x-16 bg-slate-100 w-full lg-w-1/2 lg:px-8 lg:pt-16"
f.Classes = " py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 "
f.InputClasses = "block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
f.LabelClasses = "block text-sm font-medium text-gray-700"
f.ErrorClasses = "text-red-800 font-bold"
e := forms.NewElement()
e.Label = "Email Address"
e.Type = "text"

151
style.css
View File

@ -722,6 +722,15 @@ select {
right: 0.75rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.block {
display: block;
}
.inline {
display: inline;
}
@ -746,21 +755,18 @@ select {
justify-content: center;
}
.rounded-lg {
border-radius: 0.5rem;
.gap-x-16 {
-moz-column-gap: 4rem;
column-gap: 4rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.border-0 {
border-width: 0px;
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-indigo-600 {
@ -768,9 +774,9 @@ select {
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
.bg-slate-100 {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.px-3 {
@ -793,25 +799,11 @@ select {
padding-bottom: 0.5rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.text-right {
text-align: right;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
@ -836,14 +828,19 @@ select {
line-height: 1.5rem;
}
.text-gray-900 {
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-red-600 {
.text-indigo-300 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
color: rgb(165 180 252 / var(--tw-text-opacity));
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgb(153 27 27 / var(--tw-text-opacity));
}
.text-white {
@ -851,61 +848,25 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
--tw-ring-inset: inset;
}
.ring-gray-300 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
.placeholder\:text-gray-400::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.placeholder\:text-gray-400::placeholder {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.hover\:bg-indigo-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity));
}
.focus\:ring-inset:focus {
--tw-ring-inset: inset;
}
.focus\:ring-indigo-600:focus {
.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}
.focus-visible\:outline:focus-visible {
@ -929,8 +890,52 @@ select {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
.sm\:leading-6 {
line-height: 1.5rem;
@media (min-width: 768px) {
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.lg\:col-start-2 {
grid-column-start: 2;
}
.lg\:row-start-1 {
grid-row-start: 1;
}
.lg\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.lg\:w-full {
width: 100%;
}
.lg\:max-w-lg {
max-width: 32rem;
}
.lg\:bg-transparent {
background-color: transparent;
}
.lg\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:pt-16 {
padding-top: 4rem;
}
}

26
test.html
View File

@ -2,24 +2,24 @@
<link href="style.css" rel="stylesheet" />
</head>
<body class="h-full">
<form class='px-1 py-2' action='/chpass/changepassword' method='post' enctype='multipart/form-data'>
<div class='display-none text-red-600 text-right font-bold text-xl'></div>
<div class=' bg-gray-200 justify-center py-6 rounded-lg shadow-lg'>
<form class=' py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 ' action='/chpass/changepassword' method='post' enctype='multipart/form-data'>
<div class='display-none text-red-800 font-bold'></div>
<div class='relative mx-auto gap-x-16 bg-slate-100 w-full lg-w-1/2 lg:px-8 lg:pt-16'>
<!-- element order 1 forms.element{Name:"email", Label:"Email Address", LabelClasses:"", InputClasses:"", Type:"text", Hint:"", Required:false, Classes:"", Validator:"email", vreg:(*regexp.Regexp)(nil), valid:false, FailMessage:"Must be a valid email address", Value:"", Autocomplete:"off", Order:1, OnClick:"", Choices:[]forms.choice(nil)}-->
<div class='px-1 py-2'><label for='email'class='text-sm font-medium leading-6 text-gray-900'>Email Address</label><input type='text' autocomplete='off' name='email' class='rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' value=''></div>
<div class='text-red-600 text-right font-bold text-xl' for='email' ><span class='error'>Must be a valid email address</span></div>
<div class=' py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 '><label for='email'class='block text-sm font-medium text-gray-700'>Email Address</label><input type='text' autocomplete='off' name='email' class='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm' value=''></div>
<div class='text-red-800 font-bold' for='email' ><span class='error'>Must be a valid email address</span></div>
<!-- element order 2 forms.element{Name:"oldpassword", Label:"Old Password", LabelClasses:"", InputClasses:"", Type:"password", Hint:"", Required:false, Classes:"", Validator:"", vreg:(*regexp.Regexp)(nil), valid:false, FailMessage:"Passsword Incorrect", Value:"", Autocomplete:"off", Order:2, OnClick:"", Choices:[]forms.choice(nil)}-->
<div class='relative px-1 py-2'><label for='oldpassword' class='text-sm font-medium leading-6 text-gray-900'>Old Password</label><input id='input-oldpassword' autocomplete='off' type='password' name='oldpassword' class='rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' value=''><button class='absolute inline right-3' type="button" onClick='togglePassword("input-oldpassword")'><svg class="svg-icon" style="width: 1.6em; height: 1.6em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" /></svg></div>
<div class='text-red-600 text-right font-bold text-xl' for='oldpassword' ><span class='error'>Passsword Incorrect</span></div>
<div class='relative py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 '><label for='oldpassword' class='block text-sm font-medium text-gray-700'>Old Password</label><input id='input-oldpassword' autocomplete='off' type='password' name='oldpassword' class='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm' value=''><button class='absolute inline right-3' type="button" onClick='togglePassword("input-oldpassword")'><svg class="svg-icon" style="width: 1.6em; height: 1.6em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" /></svg></div>
<div class='text-red-800 font-bold' for='oldpassword' ><span class='error'>Passsword Incorrect</span></div>
<!-- element order 3 forms.element{Name:"newpassword", Label:"New Password", LabelClasses:"", InputClasses:"", Type:"password", Hint:"", Required:false, Classes:"", Validator:"minlength=8;haslowercase;hasuppercase;hasdigit", vreg:(*regexp.Regexp)(nil), valid:false, FailMessage:"Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit", Value:"", Autocomplete:"off", Order:3, OnClick:"", Choices:[]forms.choice(nil)}-->
<div class='relative px-1 py-2'><label for='newpassword' class='text-sm font-medium leading-6 text-gray-900'>New Password</label><input id='input-newpassword' autocomplete='off' type='password' name='newpassword' class='rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' value=''><button class='absolute inline right-3' type="button" onClick='togglePassword("input-newpassword")'><svg class="svg-icon" style="width: 1.6em; height: 1.6em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" /></svg></div>
<div class='text-red-600 text-right font-bold text-xl' for='newpassword' ><span class='error'>Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit</span></div>
<div class='relative py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 '><label for='newpassword' class='block text-sm font-medium text-gray-700'>New Password</label><input id='input-newpassword' autocomplete='off' type='password' name='newpassword' class='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm' value=''><button class='absolute inline right-3' type="button" onClick='togglePassword("input-newpassword")'><svg class="svg-icon" style="width: 1.6em; height: 1.6em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" /></svg></div>
<div class='text-red-800 font-bold' for='newpassword' ><span class='error'>Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter and one digit</span></div>
<!-- element order 4 forms.element{Name:"confirmpassword", Label:"Confirm Password", LabelClasses:"", InputClasses:"", Type:"password", Hint:"", Required:false, Classes:"", Validator:"mustmatch=newpassword", vreg:(*regexp.Regexp)(nil), valid:false, FailMessage:"Passwords do not match", Value:"", Autocomplete:"off", Order:4, OnClick:"", Choices:[]forms.choice(nil)}-->
<div class='relative px-1 py-2'><label for='confirmpassword' class='text-sm font-medium leading-6 text-gray-900'>Confirm Password</label><input id='input-confirmpassword' autocomplete='off' type='password' name='confirmpassword' class='rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' value=''><button class='absolute inline right-3' type="button" onClick='togglePassword("input-confirmpassword")'><svg class="svg-icon" style="width: 1.6em; height: 1.6em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" /></svg></div>
<div class='text-red-600 text-right font-bold text-xl' for='confirmpassword' ><span class='error'>Passwords do not match</span></div>
<div class='relative py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 '><label for='confirmpassword' class='block text-sm font-medium text-gray-700'>Confirm Password</label><input id='input-confirmpassword' autocomplete='off' type='password' name='confirmpassword' class='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm' value=''><button class='absolute inline right-3' type="button" onClick='togglePassword("input-confirmpassword")'><svg class="svg-icon" style="width: 1.6em; height: 1.6em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" /></svg></div>
<div class='text-red-800 font-bold' for='confirmpassword' ><span class='error'>Passwords do not match</span></div>
<!-- element order 5 forms.element{Name:"", Label:"Change Password", LabelClasses:"", InputClasses:"flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Type:"submit", Hint:"", Required:false, Classes:"", Validator:"", vreg:(*regexp.Regexp)(nil), valid:false, FailMessage:"", Value:"", Autocomplete:"off", Order:5, OnClick:"", Choices:[]forms.choice(nil)}-->
<div class='px-1 py-2'><button type='submit' class='flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'><span class='text-sm font-medium leading-6 text-gray-900'>Change Password</span></button></div>
<div class='text-red-600 text-right font-bold text-xl' for=''><span class='error'>Invalid entry.</span></div>
<div class=' py-2 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 '><button type='submit' class='flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'><span class='block text-sm font-medium text-gray-700'>Change Password</span></button></div>
<div class='text-red-800 font-bold' for=''><span class='error'>Invalid entry.</span></div>
</div></form>
<script>function togglePassword(f) { var a=document.getElementById(f); if (a.type=="password") a.type="text"; else a.type="password"; }</script>
</body>