I need help with designing a page which does as below, specifically how do i go about doing this? Use page state to track & display Edit / Save Changes :
Updating fields in Settings Page:
1) Edit Button - Initial State of button shown on settings page
1 a) textfields - r in read only mode (no changes possible)
2) Save Changes - Button text changes to this state on Click
2 a) textfields - r editable (can make changes)
4) Save Changes button - On Click save the fields to DB
4 a) Edit - text on button changes to Edit &
b) textfields - r in read only mode showing latest changes data fetched from Database (no changes possible)
How do i go about achieving the above? I know i can switch the textfields to read only mode to stop editing. How to achive the toggle between Edit & Save Changes on the button? DO i use page state ? If yes then how do i change the text on button between Edit / Save Changes based on this page state? what actions do i need to configure?
Below is the screenshot of the page i am to design
