Split UserSettings form

[XanderVertegaal]

It's common that different settings connect to different models (in an applications where users have more to do) or that some things like changing your password/email have their own workflow for confirmation/verification.

So rather than using a single <form>, I usually to build a more modular settings menu.

For example, the user settings in LiNT are layed out like this:

My point is not about aesthetics, but the idea is to divide the page into several sections that can function as stand-alone components and use their own <form> (if applicable). For example, the change password option folds out into an old password / new password / repeat new password <form> that has its own submit event. This makes sense because (both here and in LiNT), changing your password connects to a different API endpoint from other settings.

Another advantage of dividing settings into several sub-components is that it's a component that can really grow out of control otherwise.

In this case, it would make sense to divide this page into the following sections:

• Username
• Personal details (i.e. first/last name)
• Email
• Password
• Delete account

_Originally posted by @lukavdplas in https://github.com/CentreForDigitalHumanities/lettercraft/pull/64#discussion_r1598356468_

[XanderVertegaal]

This refactor should also include the /password/change/ endpoint to allow for easy password changes (rather than requesting a password reset link), although that could still be valid as an alternative.