You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

113 lines
3.4 KiB

import React, {Component} from 'react';
import {Col, Container, Row} from 'reactstrap';
import {Link} from 'react-router-dom';
import {withTranslation, Trans} from 'react-i18next';
import {faCopy, faUsers, faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import logoLine from '../../logos/logo-line-white.svg';
import {AppContext} from '../../AppContext';
import CopyField from '../CopyField';
class CreateSuccess extends Component {
static contextType = AppContext;
constructor(props) {
super(props);
const electionSlug = this.props.match.params.slug;
this.state = {
urlOfVote:
window.location.origin + '/vote/' + electionSlug,
urlOfResult:
window.location.origin + '/result/' + electionSlug,
};
this.urlVoteField = React.createRef();
this.urlResultField = React.createRef();
}
handleClickOnCopyResult = event => {
const input = this.urlResultField.current;
input.focus();
input.select();
document.execCommand('copy');
};
render() {
const {t} = this.props;
const electionLink = this.props.invitationOnly ? (
<>
<p className="mt-4 mb-1">
{t('Voters received a link to vote by email. Each link can be used only once!')}
</p>
</>
) : (
<>
<p className="mt-4 mb-1">
{t('You can now share the election link to participants:')}
</p>
<CopyField
value={this.state.urlOfVote}
icon={faCopy}
t={t}
/>
</>
);
return (
<Container>
<Row>
<Link to="/" className="d-block ml-auto mr-auto mb-4">
<img src={logoLine} alt="logo" height="128" />
</Link>
</Row>
<Row className="mt-4">
<Col className="text-center offset-lg-3" lg="6">
<h2>{t('Successful election creation!')}</h2>
{electionLink}
<p className="mt-4 mb-1">
{t('Here is the link for the results in real time:')}
</p>
<CopyField
value={this.state.urlOfResult}
icon={faCopy}
t={t}
/>
</Col>
</Row>
<Row className="mt-4 mb-4">
<Col className="text-center offset-lg-3" lg="6">
<div className=" bg-danger text-white p-2 ">
<h4 className="m-0 p-0 text-center">
<FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" />
{t('Keep these links carefully')}
</h4>
<p className="small m-2 p-0">
<Trans i18nKey="t">
<b>Warning</b>: you will have no other choices to recover the
links, and we will not be able to share them with you. For
example, you can bookmark them in your browser.
</Trans>
</p>
</div>
</Col>
</Row>
<Row className="mt-4 mb-4">
<Col className="text-center">
<Link
to={'/vote/' + this.props.match.params.slug}
className="btn btn-success">
<FontAwesomeIcon icon={faUsers} className="mr-2" />
{t('Participate now!')}
</Link>
</Col>
</Row>
</Container>
);
}
}
export default withTranslation()(CreateSuccess);