Initial version of maps list. WIP

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

@@ -1,15 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { useHistory } from "react-router-dom"
-import { Service } from '../../services/Service'
+import { Service, ErrorInfo } from '../../services/Service'
-
-import { PageContent } from '../../theme/global-style';
-
 
 import Header from '../header'
 import Footer from '../footer'
+import { PageContent } from '../../theme/global-style'
 import FormErrorDialog from '../form-error-dialog'
-
 import SubmitButton from '../submit-button'
 
 type ForgotPasswordProps = {
@@ -19,25 +16,36 @@ type ForgotPasswordProps = {
 const ForgotPassword = (props: ServiceProps) => {
   const [email, setEmail] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
+<<<<<<< HEAD
 
+=======
+>>>>>>> 9a3a179 (Initial version of maps list. WIP)
   const [disableButton, setDisableButton] = useState(false);
 
   const history = useHistory();
   const intl = useIntl();
 
-  const handleSubmit = async (event: React.FormEvent) => {
+  const handleOnSubmit = (event: React.FormEvent<any>) => {
     event.preventDefault();
     setDisableButton(true);
 
     // Call Service ...
+<<<<<<< HEAD
     props.service.resetPassword(
       email,
       () => history.push("/c/forgot-password-success"),
       (errorInfo) => {
         setErrorMsg(errorInfo.msg ? errorInfo.msg : '');
+=======
+    const service = props.service;
+    service.resetPassword(email)
+      .then(() => {
+        history.push("/c/forgot-password-success");
+      }).catch((error: ErrorInfo) => {
+        setErrorMsg(error.msg ? error.msg : '');
+>>>>>>> 9a3a179 (Initial version of maps list. WIP)
         setDisableButton(false);
-      }
+      });
-    );
   }
 
   return (
@@ -45,7 +53,7 @@ const ForgotPassword = (props: ServiceProps) => {
       <h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password"/></h1>
       <p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password"/></p>
 
-      <form onSubmit={e => handleSubmit(e)}>
+      <form onSubmit={handleOnSubmit}>
         <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
 
         <FormErrorDialog message={errorMsg} />

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import ReCAPTCHA from 'react-google-recaptcha'
 import { useHistory } from "react-router-dom"
-import { Service, NewUser } from '../../services/Service'
+import { Service, NewUser, ErrorInfo } from '../../services/Service'
 import FormErrorDialog from '../form-error-dialog'
 
 import Header from '../header'
@@ -18,14 +18,15 @@ const RegistrationForm = (props: ServiceProps) => {
   const [firstname, setFirstname] = useState('');
   const [password, setPassword] = useState('');
   const [recaptchaToken, setRecaptchaToken] = useState<string | null>('');
-  const [errorMsg, setErrorMsg] = useState<string>();
+  const [errorMsg, setErrorMsg] = useState<string | undefined>();
 
   const [disableButton, setDisableButton] = useState(false);
 
   const history = useHistory();
   const intl = useIntl();
 
-  const handleSubmit = async (event: React.FormEvent) => {
+
+  const handleOnSubmit = (event: React.FormEvent<any>): void => {
     event.preventDefault();
     setDisableButton(true);
 
@@ -39,22 +40,25 @@ const RegistrationForm = (props: ServiceProps) => {
     };
 
     // Call Service ...
-    props.service.registerNewUser(
+    const service = props.service;
-      user,
+    service.registerNewUser(user)
-      () => history.push("/c/registration-success"),
+      .then(() => {
-      (errorInfo) => {
+        history.push("/c/registration-success")
-        const errorMsg = errorInfo.msg ? errorInfo.msg : '';
+      }).catch((error: ErrorInfo) => {
-        setErrorMsg(errorMsg); setDisableButton(false);
+        const errorMsg = error.msg ? error.msg : undefined;
-      }
+        setErrorMsg(errorMsg);
-    );
+        setDisableButton(false);
+      });
   }
 
+
+
   return (
     <PageContent>
       <h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
       <p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
 
-      <form onSubmit={e => handleSubmit(e)}>
+      <form onSubmit={handleOnSubmit}>
         <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
         <input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
         <input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />

packages/webapp/src/services/Service.ts

@@ -33,8 +33,8 @@ export type ErrorInfo = {
 }
 
 interface Service {
-    registerNewUser(user: NewUser, onSuccess: () => void, onError: (errorInfo: ErrorInfo) => void):void;
+    registerNewUser(user: NewUser): Promise<void>;
-    resetPassword(email: string, onSuccess: () => void, onError: (errorInfo: ErrorInfo) => void): void;
+    resetPassword(email: string): Promise<void>;
     fetchAllMaps(): Promise<MapInfo[]>;
 
     deleteMap(id: number): Promise<void>;
@@ -62,19 +62,21 @@ class RestService implements Service {
         return Promise.resolve();
     }
 
-    async registerNewUser(user: NewUser, onSuccess: () => void, onError: (errorInfo: ErrorInfo) => void) {
+    registerNewUser(user: NewUser): Promise<void> {
-
+        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
-        await axios.post(this.baseUrl + '/service/users',
+            axios.post(this.baseUrl + '/service/users',
-            JSON.stringify(user),
+                JSON.stringify(user),
-            { headers: { 'Content-Type': 'application/json' } }
+                { headers: { 'Content-Type': 'application/json' } }
-        ).then(response => {
+            ).then(response => {
-            // All was ok, let's sent to success page ...
+                // All was ok, let's sent to success page ...;
-            onSuccess();
+                success();
-        }).catch(error => {
+            }).catch(error => {
-            const response = error.response;
+                const response = error.response;
-            const errorMsg = this.parseResponseOnError(response);
+                const errorInfo = this.parseResponseOnError(response);
-            onError(errorMsg);
+                reject(errorInfo);
-        });
+            });
+        }
+        return new Promise(handler);
     }
 
     async fetchAllMaps(): Promise<MapInfo[]> {
@@ -99,18 +101,23 @@ class RestService implements Service {
         return Promise.resolve(maps);
     }
 
-    async resetPassword(email: string, onSuccess: () => void, onError: (errorInfo: ErrorInfo) => void) {
+    resetPassword(email: string): Promise<void> {
-        await axios.put(this.baseUrl + '/service/users/resetPassword?email=' + email,
+
-            null,
+        const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
-            { headers: { 'Content-Type': 'application/json' } }
+            axios.post(this.baseUrl + '/service/users/resetPassword?email=' + email,
-        ).then(response => {
+                null,
-            // All was ok, let's sent to success page ...
+                { headers: { 'Content-Type': 'application/json' } }
-            onSuccess();
+            ).then(response => {
-        }).catch(error => {
+                // All was ok, let's sent to success page ...;
-            const response = error.response;
+                success();
-            const errorInfo: ErrorInfo = this.parseResponseOnError(response);
+            }).catch(error => {
-            onError(errorInfo);
+                const response = error.response;
-        });
+                const errorInfo = this.parseResponseOnError(response);
+                reject(errorInfo);
+            });
+        }
+        return new Promise(handler);
+
     }
 
     private parseResponseOnError = (response: any): ErrorInfo => {