From 22463b00dd076c71c7235a5f312238867cd316b2 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Wed, 2 Sep 2020 11:36:18 +0300
Subject: [PATCH] Signup and login: clean up error handling.

---
 src/SignupPage.tsx           | 21 ++++++++++++++++++++-
 src/components/LoginForm.tsx |  6 +++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/SignupPage.tsx b/src/SignupPage.tsx
index f719d77..bbbe835 100644
--- a/src/SignupPage.tsx
+++ b/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);
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
index 1c05f6c..6970e7e 100644
--- a/src/components/LoginForm.tsx
+++ b/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"