User forms UI twig and cleanup

[cconard96]

Checklist before requesting a review

• I have read the CONTRIBUTING document.
• I have performed a self-review of my code.
• I have added tests that prove my fix is effective or that my feature works.
• This change requires a documentation update.

Description

This was going to just be a simple migration of the User forms to Twig, but the old layout looked worse when migrated as-is. In both the old and new, the form felt cluttered as well. The picture and password sections specifically felt messy.

Changes:

• Merge of regular User form and the "My user/My settings" user form into a single template, but still only showing certain fields on the My Settings page.
• New UI/UX for changing user pictures. The old display of having the picture, file upload and clear checkbox directly in the form took up a lot of room and didn't look right with the new form layout. Now, only the picture is shown. When you hover over the picture, you get a pointer and tooltip to indicate you can click to change the picture. This opens a modal that lets you go back to the default picture (initials), or upload a new one. Unlike the previous UI, this new one updates the displayed picture in real time to show what the new image will be once the form is saved.
• Simplified password management
  • New user form shows the same fields as before
  • Existing internal user forms only show a "Change password" button in the "Passwords and access keys" section (was "Remote access keys") at the bottom of the form. This opens a modal to prompt for a new password. The checkbox to randomize the password and send an email (labeled "Send an email to the user to set their own new password") is not present.
  • You own "My settings" user form shows a similar "Change password" button, but it redirects you to the regular password update form which was previously not linked anywhere except when the password was expired.
  • New massive action for sending password reset emails. This action does not randomize the current password like the "Send an email to the user to set their own new password" checkbox does.
• Moved "Last login" to "Authentication" field of the form
• Moved emails and phone numbers to a "Contact information" section.
• Cleaner password requirement list. Now shows a "Minimum length" label instead of just printing the minimum length.

Screenshots

Original form:

Super-Admin looking at own, full user form:

LDAP User form:

Technician looking at super-admin form:

Looking at own "My settings" form:

New user form (Ability to set picture for a new user was already missing):

Change other user's password:

Change password field text after setting new password, but before saving the form:

[orthagh]

Ok ! this was indeed a long overdue work.
I agree with functional choice for password change, picture management, and organization of the fields.

One suggestion for password init in the new form, I think the related fields could be better placed on the right (where there is an empty space), if possible

[cconard96]

One suggestion for password init in the new form, I think the related fields could be better placed on the right (where there is an empty space), if possible

The empty space is from me grouping all of the password fields together to keep them inline. Maybe they would be better at the end of the form?

[orthagh]

it would probably be better, yes.

[cedric-anne]

The new E2E test fails.