frontend: make the add email form messages better

frontend/src/components/AddEmailForm.tsx

@@ -12,15 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Control, Field, Root, Submit } from "@vector-im/compound-web";
+import {
+  Alert,
+  Control,
+  Field,
+  Label,
+  Root,
+  Submit,
+} from "@vector-im/compound-web";
 import { useAtom } from "jotai";
 import { atomWithMutation } from "jotai-urql";
 import { useRef, useTransition } from "react";
 
 import { graphql } from "../gql";
 
-import Typography from "./Typography";
-
 const ADD_EMAIL_MUTATION = graphql(/* GraphQL */ `
   mutation AddEmail($userId: ID!, $email: String!) {
     addEmail(input: { userId: $userId, email: $email }) {
@@ -40,6 +45,7 @@ const AddEmailForm: React.FC<{
   onAdd?: (id: string) => void;
 }> = ({ userId, onAdd }) => {
   const formRef = useRef<HTMLFormElement>(null);
+  const fieldRef = useRef<HTMLInputElement>(null);
   const [addEmailResult, addEmail] = useAtom(addUserEmailAtom);
   const [pending, startTransition] = useTransition();
 
@@ -50,8 +56,10 @@ const AddEmailForm: React.FC<{
     const email = formData.get("email") as string;
     startTransition(() => {
       addEmail({ userId, email }).then((result) => {
-        // Don't clear the form if the email was invalid
-        if (result.data?.addEmail.status === "INVALID") {
+        // Don't clear the form if the email was invalid or already exists
+        if (result.data?.addEmail.status !== "ADDED") {
+          fieldRef.current?.focus();
+          fieldRef.current?.select();
           return;
         }
 
@@ -69,35 +77,27 @@ const AddEmailForm: React.FC<{
   };
 
   const status = addEmailResult.data?.addEmail.status ?? null;
-  const emailAdded = status === "ADDED";
   const emailExists = status === "EXISTS";
   const emailInvalid = status === "INVALID";
 
   return (
     <>
-      {emailAdded && (
-        <div className="pt-4">
-          <Typography variant="subtitle">Email added!</Typography>
-        </div>
-      )}
+      <Root ref={formRef} onSubmit={handleSubmit}>
+        {emailExists && (
+          <Alert type="info" title="Email already exists">
+            The entered email is already added to this account
+          </Alert>
+        )}
 
-      {emailExists && (
-        <div className="pt-4">
-          <Typography variant="subtitle">Email already exists!</Typography>
-        </div>
-      )}
+        {emailInvalid && (
+          <Alert type="critical" title="Invalid email">
+            The entered email is invalid
+          </Alert>
+        )}
 
-      {emailInvalid && (
-        <div className="pt-4 text-alert">
-          <Typography variant="subtitle" bold>
-            Invalid email address
-          </Typography>
-        </div>
-      )}
-
-      <Root ref={formRef} className="flex" onSubmit={handleSubmit}>
-        <Field name="email" className="flex-1 mr-2">
-          <Control disabled={pending} type="email" inputMode="email" />
+        <Field name="email" className="my-2">
+          <Label>Add email</Label>
+          <Control disabled={pending} inputMode="email" ref={fieldRef} />
         </Field>
         <Submit disabled={pending}>Add</Submit>
       </Root>

frontend/src/pages/Account.tsx

@@ -21,11 +21,7 @@ import UserEmailList from "../components/UserEmailList";
 import { isErr, unwrapErr, unwrapOk } from "../result";
 
 const UserAccount: React.FC<{ id: string }> = ({ id }) => {
-  return (
-    <div className="grid grid-cols-1 gap-4">
-      <UserEmailList userId={id} />
-    </div>
-  );
+  return <UserEmailList userId={id} />;
 };
 
 const CurrentUserAccount: React.FC = () => {