Provide email during signup

web/src/app/AccountApi.js

@@ -69,11 +69,12 @@ class AccountApi {
     });
   }
 
-  async create(username, password) {
+  async create(username, password, email) {
     const url = accountUrl(config.base_url);
     const body = JSON.stringify({
       username,
       password,
+      email: email || "",
     });
     console.log(`[AccountApi] Creating user account ${url}`);
     await fetchOrThrow(url, {

web/src/components/Account.jsx

@@ -448,7 +448,8 @@ const Emails = () => {
   }
 
   const emails = account?.emails ?? [];
-  const verifiedEmails = emails.filter((e) => !e.pending);
+  // Verified addresses, primary always first
+  const verifiedEmails = emails.filter((e) => !e.pending).sort((a, b) => (b.primary ? 1 : 0) - (a.primary ? 1 : 0));
   const pendingEmails = emails.filter((e) => e.pending);
   const primaryEmail = verifiedEmails.find((e) => e.primary)?.address ?? "";
   // Recovery nudges (skipped for provisioned users -- they can't reset, and the Add-email dialog
@@ -467,7 +468,9 @@ const Emails = () => {
             key={email.address}
             icon={email.primary ? <StarIcon /> : undefined}
             label={
-              <Tooltip title={t("account_basics_emails_chip_actions")}>
+              <Tooltip
+                title={email.primary ? t("account_basics_emails_chip_actions_primary") : t("account_basics_emails_chip_actions_verified")}
+              >
                 <span>{email.address}</span>
               </Tooltip>
             }
@@ -481,7 +484,7 @@ const Emails = () => {
           <Chip
             key={email.address}
             label={
-              <Tooltip title={t("account_basics_emails_chip_actions")}>
+              <Tooltip title={t("account_basics_emails_chip_actions_unverified")}>
                 <span>
                   {email.address} <em>({t("account_basics_emails_unverified")})</em>
                 </span>
@@ -531,6 +534,12 @@ const Emails = () => {
             <ListItemText>{t("account_basics_emails_resend")}</ListItemText>
           </MenuItem>
         )}
+        <MenuItem onClick={() => runMenuAction(handleDelete)}>
+          <ListItemIcon>
+            <DeleteOutlineIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>{t("account_basics_emails_delete")}</ListItemText>
+        </MenuItem>
       </Menu>
       <AddEmailDialog key={`addEmailDialog${dialogKey}`} open={dialogOpen} onClose={handleDialogClose} />
       <Portal>

web/src/components/Signup.jsx

@@ -15,6 +15,7 @@ const Signup = () => {
   const { t } = useTranslation();
   const [error, setError] = useState("");
   const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirm, setConfirm] = useState("");
   const [showPassword, setShowPassword] = useState(false);
@@ -24,7 +25,7 @@ const Signup = () => {
     event.preventDefault();
     const user = { username, password };
     try {
-      await accountApi.create(user.username, user.password);
+      await accountApi.create(user.username, user.password, email);
       const token = await accountApi.login(user);
       console.log(`[Signup] User signup for user ${user.username} successful, token is ${token}`);
       await session.store(user.username, token);
@@ -64,6 +65,18 @@ const Signup = () => {
           onChange={(ev) => setUsername(ev.target.value.trim())}
           autoFocus
         />
+        {config.enable_emails && (
+          <TextField
+            margin="dense"
+            fullWidth
+            id="email"
+            label={t("signup_form_email")}
+            name="email"
+            type="email"
+            value={email}
+            onChange={(ev) => setEmail(ev.target.value.trim())}
+          />
+        )}
         <TextField
           margin="dense"
           required