Improve error handling

packages/webapp/src/client/index.ts

@@ -46,19 +46,20 @@ export const parseResponseOnError = (response: any): ErrorInfo => {
                 break;
             default:
                 if (data) {
-                    result = {};
                     // Set global errors ...
-                    if (data.globalErrors) {
+                    result = {};
-                        let msg:string;
+                    let globalErrors = data.globalErrors;
-                        let errors = data.globalErrors;
+                    if (globalErrors && globalErrors.length > 0) {
-                        if (errors.length > 0) {
+                        result.msg = globalErrors[0];
-                            result.msg = errors[0];
-                        }
                     }
 
                     // Set field errors ...
-                    if (data.fieldErrors) {
+                    if (data.fieldErrors && Object.keys(data.fieldErrors).length > 0) {
-                        result.fields = new Map<string, string>();
+                        result.fields = data.fieldErrors;
+                        if (!result.msg) {
+                            const key = Object.keys(data.fieldErrors)[0];
+                            result.msg = data.fieldErrors[key];
+                        }
                     }
 
                 } else {

packages/webapp/src/client/rest-client/index.ts

@@ -13,13 +13,32 @@ export default class RestClient extends MockClient {
     }
     
     fetchAllMaps(): Promise<MapInfo[]> {
-        console.log("Fetching  maps from server")
+        // https://app.wisemapping.com/c/restful/maps/
+        
+        // const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+        //     axios.post(this.baseUrl + '/service/users/',
+        //         JSON.stringify(user),
+        //         { headers: { 'Content-Type': 'application/json' } }
+        //     ).then(response => {
+        //         // All was ok, let's sent to success page ...;
+        //         success();
+        //     }).catch(error => {
+        //         const response = error.response;
+        //         const errorInfo = parseResponseOnError(response);
+        //         reject(errorInfo);
+        //     });
+        // }
+        // return new Promise(handler);
+        // https://app.wisemapping.com/c/restful/maps/
+
+
+        // console.log("Fetching  maps from server")
         return Promise.resolve([]);
     }
 
     registerNewUser(user: NewUser): Promise<void> {
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
-            axios.post(this.baseUrl + '/service/users',
+            axios.post(this.baseUrl + '/service/users/',
                 JSON.stringify(user),
                 { headers: { 'Content-Type': 'application/json' } }
             ).then(response => {
@@ -33,6 +52,7 @@ export default class RestClient extends MockClient {
         }
         return new Promise(handler);
     }
+
     resetPassword(email: string): Promise<void> {
 
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {

packages/webapp/src/components/forgot-password-page/index.tsx

@@ -50,7 +50,7 @@ const ForgotPassword = () => {
 
       <form onSubmit={handleOnSubmit}>
         <Input type="email" name="email" label={{ id: "forgot.email", defaultMessage: "Email" }}
-          autoComplete="email" onChange={e => setEmail(e.target.value)} />
+          autoComplete="email" onChange={e => setEmail(e.target.value)} error={error}/>
 
         <SubmitButton value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
       </form>

packages/webapp/src/components/form/input/index.tsx

@@ -22,14 +22,14 @@ const Input = (props: InputProps) => {
     const name = props.name;
     const value = props.value;
     const onChange = props.onChange ? props.onChange : () => { };
-    const fieldError = Boolean(error?.fields?.get(name));
+    const fieldError = error?.fields?.[name];
     const required = props.required != undefined ? props.required : true;
     const fullWidth = props.fullWidth != undefined ? props.required : true;
 
     return (
         <TextField name={name} type={props.type} label={intl.formatMessage(props.label)}
             value={value} onChange={onChange}
-            error={fieldError} helperText={fieldError}
+            error={Boolean(fieldError)} helperText={fieldError}
             variant="outlined" required={required} fullWidth={fullWidth} margin="dense"/>
 
     );

packages/webapp/src/components/registration-page/index.tsx

@@ -72,16 +72,16 @@ const RegistrationForm = () => {
           <GlobalError error={error} />
 
           <Input name="email" type="email" onChange={handleOnChange} label={{ id: "registration.email", defaultMessage: "Email" }}
-            autoComplete="email" />
+            autoComplete="email" error={error}/>
 
           <Input name="firstname" type="text" onChange={handleOnChange} label={{ id: "registration.firstname", defaultMessage: "First Name" }}
-            autoComplete="given-name" />
+            autoComplete="given-name" error={error}/>
 
           <Input name="lastname" type="text" onChange={handleOnChange} label={{ id: "registration.lastname", defaultMessage: "Last Name" }}
-            autoComplete="family-name" />
+            autoComplete="family-name" error={error}/>
 
           <Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
-            autoComplete="new-password" />
+            autoComplete="new-password" error={error}/>
 
           <div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
             <ReCAPTCHA