Multiple Emails UI and Integration

[Pytal]

To Do

• Rewrite php markup and functionality in Vue apps/settings/templates/settings/personal/persona.info.php
• Pass initial state from server to client
• Rewrite js functionality in Vue federationsettingsview.js
  • Save primary email address (with deletion)
  • Federation control
    • With reference to federationscopemenu.js and federationsettingsview.js
    • Override @nextcloud/vue component styles to match non-Vue federation controls
  • Password confirmation
  • Success/Error icon on save
  • Error handling
  • Verification
    • Looks like the verify functionality in apps/settings/js/settings/personalInfo.js line 157 isn't used anymore as it is only shown when both email is not empty and scope is public but scope is never public as found in lib/public/Accounts/IAccountManager.php
    • Not implementing at the moment as it seems unused?
• Validation
  • Vanilla js validation (e.g. checkValidity())
• Debounce API calls
• Additional email functionality
  • Only allow adding an additional email input if all current inputs are valid
  • Add additional email
  • Delete additional email
  • Update additional email
  • Federation control for additional emails
  • Design updates from Jan
    • 3-dot menu on the right of each input field
      • One dropdown entry called "Delete email"
    • Add button with "+" and "Add" label, flush to the right
• Create constants file (to be kept in sync with lib/public/Accounts/IAccountManager.php
• Automaticaly set next additonal email as primary on deletion of primary email [UX]

🐞 Bugs

• Fix unintended page refresh when clicking Actions component
  • Form was being submitted, related Use of some components within a form causes undesired behaviour nextcloud-libraries/nextcloud-vue#2068

Note: The TODO comments are out-of-scope for this PR and will be addressed separately in future PRs

Contributes to #26866

[artonge]

Finally ready for review ! 😄

[artonge]

From a UX perspective, the current UX allows the user to not have a primary email address. That might not be desirable. But maybe I am missing context.

I would not allow the deletion of the primary email but I would allow setting an additional email address as primary, then the user can delete its now additional email addresses if he wants to.

Also, I would have put the "+ Add" button closer to the additional address fields.

But it looks nice overall :)

[skjnldsv]

I would not allow the deletion of the primary email but I would allow setting an additional email address as primary, then the user can delete its now additional email addresses if he wants to.

The issue is that one might want to edit the primary.
So there is a fine line between preventing edition and removal.
I think we could add something to make sure to automatically set a secondary email as primary if it is empty

[Pytal]

From a UX perspective, the current UX allows the user to not have a primary email address. That might not be desirable. But maybe I am missing context.

I would not allow the deletion of the primary email but I would allow setting an additional email address as primary, then the user can delete its now additional email addresses if he wants to.

Refined the primary email deletion UX by automatically setting the next additional email as the the primary email :) as suggested by @skjnldsv

Also, I would have put the "+ Add" button closer to the additional address fields.

I can definitely make some changes, could you elaborate on where you'd like the button? This was based on Jan's suggestions so @jancborchardt any more suggestions would be welcome :) current visual below for reference

[juliusknorr]

Tested and code looks good 👍

[skjnldsv]

Please rebase and LGTM 🚀

[juliusknorr]

Failure unrelated

[juliusknorr]

/backport to stable22

[backportbot-nextcloud]

The backport to stable22 failed. Please do this backport manually.

[skjnldsv]

@Pytal can you backport this manually please? :)

[Pytal]

@Pytal can you backport this manually please? :)

You bet ;)