How Users Edit their Email and Password Front End

these features allow users to change the key information that identifies them on your site prerequisites install the secure zones module users must remember their existing password users must be already logged in a secure zone must be added to the form but this can be an "account" secure zone which the user already belongs to introduction this article shows how users who remember their email address and password can change these using a form if you need a feature for users who have forgotten their password, try the password reset feature step 1 set up a form create a form which will be used to update users' email address or password this form should have a secure zone attached but this can be an existing secure zone that you use for accounts e g "my account" or an equivalent you do not need to add any custom fields in the siteglide admin in order to use this feature instead, the feature will be added solely in the form layout you may wish to use one form for updating an email and a separate form for updating password this is fine just adjust these instructions accordingly step 2 create a custom form layout we'll need to modify the form layout, so head to code editor and create a new form layout liquid file this should be in the same folder as the form you created in step 1 step 3 add your form to a page you can add your form to any page select your custom form layout you made in step 2 step 4 add a secure zone to that page editing email and password will only work if the user is already logged in we recommend adding a secure zone to your page to ensure this is the case step 5 add new fields to the form layout in this step we'll be adding fields to the form layout which will allow the user to submit new email and password values pay close attention to the ids of these elements, as this is what siteglide will use to identify them new email address purpose in this field the user will submit a new value for their email address new password purpose in this field the user will submit a new value for their password on most siteglide forms you'll see an email address and password fields with the html id s email and s password these fields are specifically used for users to enter their current email address and password notice that the fields below we use for users to provide new values for their email and password use different ids s email edit and s password edit remember, you do not need to use a single form to edit both email and password you can include these on separate forms if you wish you can use custom javascript to show or hide the fields when needed only when a value is given to the fields will they validate and throw an error if there is a mistake things to check at the end of this step the id attribute of each field will need to be exactly the same as that used in the documentation in order to work the fields should not have an html name attribute this is because we don't wish the information to be stored in the case along with other custom fields step 6 reveal the current password field to logged in users in order to use this feature the user must be already logged in enter their existing password again in this step then, we make sure we are giving the user the opportunity to re enter their password current password the form default layout already includes this field however it is hidden from users who are logged in the simplest way to complete the step is to remove the logic {% unless context exports is logged in data %} {% endif %} things to check make sure any \<label> tags clearly show which field should be used for current password and which should be used for the new password make sure the current password field is only included once in the form layout step 7 optional add a confirmation field for additional validation the last thing the user wishes to do is to reset their password to the wrong value to provide extra validation, you can add confirmation fields new email address confirm new email address new password confirm new password once you've added a confirmation field, our validation will make sure the email fields match and that the password fields match if you choose not to add a confirmation field, it will not be required step 8 optional add autocomplete fields to help the user's browser to understand the difference between current and new password fields, you could add values to the autocomplete attribute autocomplete="current password" autocomplete="new password" current password new password confirm new password next and you're done! you can use this feature along with our other front end crm features to give users control over their data and credentials on your site