mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-13 02:37:57 +01:00
Initial version of maps list. WIP
This commit is contained in:
parent
5b2bc9390b
commit
b59ede3fcc
@ -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} />
|
||||||
|
@ -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" />
|
||||||
|
@ -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 => {
|
||||||
|
Loading…
Reference in New Issue
Block a user