Signup and login: clean up error handling.

src/SignupPage.tsx

@@ -91,7 +91,26 @@ export default function SignupPage() {
       }));
       dispatch(login(etebase));
     } catch (e) {
-      errors.errorGeneral = e.toString();
+      if ((e instanceof Etebase.HttpError) && (e.content)) {
+        let found = false;
+        if (e.content.errors) {
+          for (const field of e.content.errors) {
+            if (field.field === "user.username") {
+              errors.errorUsername = field.detail;
+              found = true;
+            } else if (!field.field) {
+              errors.errorGeneral = field.detail;
+              found = true;
+            }
+          }
+        }
+
+        if (!found) {
+          errors.errorGeneral = e.content.detail ?? e.toString();
+        }
+      } else {
+        errors.errorGeneral = e.toString();
+      }
       setErrors(errors);
     } finally {
       setLoading(false);

src/components/LoginForm.tsx

@@ -12,6 +12,7 @@ import ExternalLink from "../widgets/ExternalLink";
 
 import * as C from "../constants";
 import LoadingIndicator from "../widgets/LoadingIndicator";
+import Alert from "@material-ui/lab/Alert";
 
 interface FormErrors {
   errorEmail?: string;
@@ -110,7 +111,6 @@ export default function LoginForm(props: PropsType) {
 
   return (
     <React.Fragment>
-      {(props.error) && (<div>Error! {props.error.message}</div>)}
       <form style={styles.form} onSubmit={generateEncryption}>
         <TextField
           type="text"
@@ -149,6 +149,10 @@ export default function LoginForm(props: PropsType) {
         </FormGroup>
         {advancedSettings}
 
+        {props.error && (
+          <Alert severity="error" style={styles.textField}>{props.error.message}</Alert>
+        )}
+
         <div style={styles.submit}>
           <Button
             variant="contained"