Initial version of maps list. WIP

This commit is contained in:
Paulo Gustavo Veiga 2020-12-15 18:04:12 -08:00
parent 5b2bc9390b
commit b59ede3fcc
3 changed files with 67 additions and 48 deletions

View File

@ -1,15 +1,12 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { FormattedMessage, useIntl } from 'react-intl' import { FormattedMessage, useIntl } from 'react-intl'
import { useHistory } from "react-router-dom" 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 Header from '../header'
import Footer from '../footer' import Footer from '../footer'
import { PageContent } from '../../theme/global-style'
import FormErrorDialog from '../form-error-dialog' import FormErrorDialog from '../form-error-dialog'
import SubmitButton from '../submit-button' import SubmitButton from '../submit-button'
type ForgotPasswordProps = { type ForgotPasswordProps = {
@ -19,25 +16,36 @@ type ForgotPasswordProps = {
const ForgotPassword = (props: ServiceProps) => { const ForgotPassword = (props: ServiceProps) => {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [errorMsg, setErrorMsg] = useState(''); const [errorMsg, setErrorMsg] = useState('');
<<<<<<< HEAD
=======
>>>>>>> 9a3a179 (Initial version of maps list. WIP)
const [disableButton, setDisableButton] = useState(false); const [disableButton, setDisableButton] = useState(false);
const history = useHistory(); const history = useHistory();
const intl = useIntl(); const intl = useIntl();
const handleSubmit = async (event: React.FormEvent) => { const handleOnSubmit = (event: React.FormEvent<any>) => {
event.preventDefault(); event.preventDefault();
setDisableButton(true); setDisableButton(true);
// Call Service ... // Call Service ...
<<<<<<< HEAD
props.service.resetPassword( props.service.resetPassword(
email, email,
() => history.push("/c/forgot-password-success"), () => history.push("/c/forgot-password-success"),
(errorInfo) => { (errorInfo) => {
setErrorMsg(errorInfo.msg ? errorInfo.msg : ''); 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); setDisableButton(false);
} });
);
} }
return ( return (
@ -45,7 +53,7 @@ const ForgotPassword = (props: ServiceProps) => {
<h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password"/></h1> <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> <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" /> <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} /> <FormErrorDialog message={errorMsg} />

View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import { FormattedMessage, useIntl } from 'react-intl' import { FormattedMessage, useIntl } from 'react-intl'
import ReCAPTCHA from 'react-google-recaptcha' import ReCAPTCHA from 'react-google-recaptcha'
import { useHistory } from "react-router-dom" 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 FormErrorDialog from '../form-error-dialog'
import Header from '../header' import Header from '../header'
@ -18,14 +18,15 @@ const RegistrationForm = (props: ServiceProps) => {
const [firstname, setFirstname] = useState(''); const [firstname, setFirstname] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [recaptchaToken, setRecaptchaToken] = useState<string | null>(''); const [recaptchaToken, setRecaptchaToken] = useState<string | null>('');
const [errorMsg, setErrorMsg] = useState<string>(); const [errorMsg, setErrorMsg] = useState<string | undefined>();
const [disableButton, setDisableButton] = useState(false); const [disableButton, setDisableButton] = useState(false);
const history = useHistory(); const history = useHistory();
const intl = useIntl(); const intl = useIntl();
const handleSubmit = async (event: React.FormEvent) => {
const handleOnSubmit = (event: React.FormEvent<any>): void => {
event.preventDefault(); event.preventDefault();
setDisableButton(true); setDisableButton(true);
@ -39,22 +40,25 @@ const RegistrationForm = (props: ServiceProps) => {
}; };
// Call Service ... // 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 ( return (
<PageContent> <PageContent>
<h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1> <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> <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="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="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" /> <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" />

View File

@ -33,8 +33,8 @@ export type ErrorInfo = {
} }
interface Service { 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[]>; fetchAllMaps(): Promise<MapInfo[]>;
deleteMap(id: number): Promise<void>; deleteMap(id: number): Promise<void>;
@ -62,19 +62,21 @@ class RestService implements Service {
return Promise.resolve(); 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[]> { async fetchAllMaps(): Promise<MapInfo[]> {
@ -99,18 +101,23 @@ class RestService implements Service {
return Promise.resolve(maps); 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 => { private parseResponseOnError = (response: any): ErrorInfo => {