Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chore/modernize form components #1408

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Chore/modernize form components #1408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
110f5b6
Revert "revert "Chore/modernize form components #1372 by shayc""
RodriSanchez1 Mar 9, 2023
c2e2874
Add forgot prop to Reset Password component
RodriSanchez1 Mar 9, 2023
35ae83c
Add parameter to handleSubmit on SignUp
RodriSanchez1 Mar 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"echarts-for-react": "^3.0.2",
"file-saver": "^2.0.5",
"fontsource-roboto": "^4.0.0",
"formik": "^1.3.2",
"formik": "^2.2.9",
"history": "^4.10.1",
"i18n-iso-countries": "4.3.1",
"intl": "^1.2.5",
Expand Down Expand Up @@ -85,7 +85,7 @@
"shortid": "^2.2.16",
"source-map-explorer": "^2.5.3",
"swiper": "^6.8.4",
"yup": "^0.32.11"
"yup": "^1.0.0"
},
"devDependencies": {
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
Expand Down
70 changes: 33 additions & 37 deletions src/components/Account/Activate/Activate.container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,44 @@
import React, { Fragment, PureComponent } from 'react';
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { activate } from './Activate.actions';
import './Activate.css';

class ActivateContainer extends PureComponent {
state = {
isActivating: false,
activationStatus: {}
};

componentDidMount() {
const {
match: {
params: { url }
}
} = this.props;
function ActivateContainer({
match: {
params: { url }
}
}) {
const [isActivating, setIsActivating] = useState(false);
const [activationStatus, setActivationStatus] = useState({});

this.setState({ isActivating: true });
useEffect(
() => {
setIsActivating(true);

activate(url)
.then(activationStatus => this.setState({ activationStatus }))
.catch(activationStatus => this.setState({ activationStatus }))
.finally(() => this.setState({ isActivating: false }));
}
activate(url)
.then(response => setActivationStatus(response))
.catch(error => setActivationStatus(error))
.finally(() => setIsActivating(false));
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);

render() {
const { isActivating, activationStatus } = this.state;
return (
<div className="Activate">
{isActivating ? (
'Activating your account...'
) : (
<>
<div>{activationStatus.message}</div>

return (
<div className="Activate">
{isActivating ? (
'Activating your account...'
) : (
<Fragment>
{activationStatus.message}
<br />
<Link to="/" className="Activate_home">
Home page
</Link>
</Fragment>
)}
</div>
);
}
<Link to="/" className="Activate_home">
Home page
</Link>
</>
)}
</div>
);
}

export default ActivateContainer;
5 changes: 4 additions & 1 deletion src/components/Account/ChangePassword/ChangePassword.actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,15 @@ export function storePassword(userid, password, url) {
return Promise.resolve(res);
} catch (err) {
dispatch(storePasswordApiFailure(err.message));

if (err.response != null) {
return Promise.reject(err.response.data);
}
var disonnected = {

const disonnected = {
message: 'Unable to contact server. Try in a moment'
};

return Promise.reject(disonnected);
}
};
Expand Down
237 changes: 116 additions & 121 deletions src/components/Account/ChangePassword/ChangePassword.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { Formik } from 'formik';
Expand All @@ -18,141 +18,136 @@ import { storePassword } from './ChangePassword.actions';
import messages from './ChangePassword.messages';
import './ChangePassword.css';

export class ChangePassword extends Component {
static propTypes = {
intl: intlShape.isRequired
};

state = {
isSending: false,
storePasswordState: {},
redirectMessage: ''
};
export function ChangePassword({
intl,
history,
storePassword,
match: {
params: { userid, url }
}
}) {
const [isSending, setIsSending] = useState(false);
const [storePasswordState, setStorePasswordState] = useState({});
const [redirectMessage, setRedirectMessage] = useState('');
const isButtonDisabled = isSending || !!storePasswordState.success;

sleep = milliseconds => {
function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
};

handleSubmit = values => {
const {
match: {
params: { userid, url }
}
} = this.props;

const { intl, history, storePassword } = this.props;
}

this.setState({
isSending: true,
storePasswordState: {}
});
function handleSubmit(values) {
setIsSending(true);
setStorePasswordState({});

storePassword(userid, values.password, url)
.then(res => {
this.setState({
storePasswordState: res,
redirectMessage: intl.formatMessage(messages.redirect)
});
this.sleep(2000).then(() => {
setStorePasswordState(res);
setRedirectMessage(intl.formatMessage(messages.redirect));

sleep(2000).then(() => {
history.replace('/login-signup');
});
})
.catch(err => this.setState({ storePasswordState: err }))
.finally(() => this.setState({ isSending: false }));
};

render() {
const { isSending, storePasswordState, redirectMessage } = this.state;
const { intl } = this.props;

const isButtonDisabled = isSending || !!storePasswordState.success;

return (
<div className="ChangePassword">
<Dialog open={true} aria-labelledby="changePassword">
<DialogTitle id="changePassword">
<FormattedMessage {...messages.changePassword} />
</DialogTitle>
<DialogContent>
{storePasswordState && !storePasswordState.success && (
<DialogContentText>
<FormattedMessage {...messages.changePasswordText} />
</DialogContentText>
.catch(err => setStorePasswordState(err))
.finally(() => setIsSending(false));
}

return (
<div className="ChangePassword">
<Dialog open={true} aria-labelledby="changePassword">
<DialogTitle id="changePassword">
<FormattedMessage {...messages.changePassword} />
</DialogTitle>

<DialogContent>
{storePasswordState && !storePasswordState.success && (
<DialogContentText>
<FormattedMessage {...messages.changePasswordText} />
</DialogContentText>
)}

<div
className={classNames('ChangePassword__status', {
'ChangePassword__status--error': !storePasswordState.success,
'ChangePassword__status--success': storePasswordState.success
})}
>
{!!storePasswordState.success ? (
<Typography color="inherit">
{intl.formatMessage(messages.changePasswordSuccess)}
</Typography>
) : (
<Typography color="inherit">
{storePasswordState.message}
</Typography>
)}
</div>

{redirectMessage && (
<div
className={classNames('ChangePassword__status', {
'ChangePassword__status--error': !storePasswordState.success,
'ChangePassword__status--success': storePasswordState.success
})}
>
{!!storePasswordState.success ? (
<Typography color="inherit">
{intl.formatMessage(messages.changePasswordSuccess)}
</Typography>
) : (
<Typography color="inherit">
{storePasswordState.message}
</Typography>
className={classNames(
'ChangePassword__status',
'ChangePassword__status--success'
)}
>
<Typography color="inherit">
{intl.formatMessage(messages.redirect)}
</Typography>
</div>
{redirectMessage && (
<div
className={classNames(
'ChangePassword__status',
'ChangePassword__status--success'
)}
>
<Typography color="inherit">
{intl.formatMessage(messages.redirect)}
</Typography>
</div>
)}
{storePasswordState && !storePasswordState.success && (
<Formik
onSubmit={this.handleSubmit}
validationSchema={validationSchema}
>
{({ errors, handleChange, handleSubmit }) => (
<form
className="ChangePassword__form"
onSubmit={handleSubmit}
>
<TextField
error={errors.password}
label={intl.formatMessage(messages.password)}
type="password"
name="password"
onChange={handleChange}
/>
<TextField
error={errors.passwordRepeat}
label={intl.formatMessage(messages.passwordRepeat)}
type="password"
name="passwordRepeat"
onChange={handleChange}
/>
<DialogActions>
<Button
type="submit"
disabled={isButtonDisabled}
variant="contained"
color="primary"
>
{isSending && <LoadingIcon />}
<FormattedMessage {...messages.send} />
</Button>
</DialogActions>
</form>
)}
</Formik>
)}
</DialogContent>
</Dialog>
</div>
);
}
)}

{storePasswordState && !storePasswordState.success && (
<Formik
onSubmit={handleSubmit}
validationSchema={validationSchema}
initialValues={{
password: '',
passwordRepeat: ''
}}
>
{({ errors, handleChange, handleSubmit }) => (
<form className="ChangePassword__form" onSubmit={handleSubmit}>
<TextField
error={errors.password}
label={intl.formatMessage(messages.password)}
type="password"
name="password"
onChange={handleChange}
/>

<TextField
error={errors.passwordRepeat}
label={intl.formatMessage(messages.passwordRepeat)}
type="password"
name="passwordRepeat"
onChange={handleChange}
/>

<DialogActions>
<Button
type="submit"
disabled={isButtonDisabled}
variant="contained"
color="primary"
>
{isSending && <LoadingIcon />}
<FormattedMessage {...messages.send} />
</Button>
</DialogActions>
</form>
)}
</Formik>
)}
</DialogContent>
</Dialog>
</div>
);
}

ChangePassword.propTypes = {
intl: intlShape.isRequired
};

const mapDispatchToProps = {
storePassword
};
Expand Down
4 changes: 0 additions & 4 deletions src/components/Account/ChangePassword/ChangePassword.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@
background: linear-gradient(to right, rgb(121, 22, 254), rgb(172, 47, 138));
}

.ChangePassword_home {
margin-top: 1em;
color: inherit;
}
.ChangePassword__form > div {
width: 100%;
}
Expand Down
Loading