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.
mvfront-react/src/components/views/CreateSuccess.jsx

128 lines
4.0 KiB

/* eslint react/prop-types: 0 */
import React, { Component } from "react";
import { Col, Container, Row } from "reactstrap";
import { withTranslation } from "react-i18next";
import {
faCopy,
faExclamationTriangle,
faPaperPlane,
faExternalLinkAlt
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AppContext } from "../../AppContext";
import CopyField from "../CopyField";
import Facebook from "../banner/Facebook";
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 = () => {
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("Voting address")}</p>
<CopyField
value={this.state.urlOfVote}
iconCopy={faCopy}
iconOpen={faExternalLinkAlt}
t={t}
/>
</>
);
return (
<Container>
<Row className="mt-5">
<Col className="text-center offset-lg-3" lg="6">
<h2>{t("Successful election creation!")}</h2>
{this.props.invitationOnly ? null : (
<Facebook
className="btn btn-outline-light m-2"
text={t("Share election on Facebook")}
url={this.state.urlOfVote}
title={"app.mieuxvoter.fr"}
/>
)}
</Col>
</Row>
<Row className="mt-4 mb-4">
<Col className="offset-lg-3" lg="6">
{electionLink}
<p className="mt-4 mb-1">{t("Results address")}</p>
<CopyField
value={this.state.urlOfResult}
iconCopy={faCopy}
iconOpen={faExternalLinkAlt}
t={t}
/>
<h5 className="mt-5 mb-3 text-center">
<FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" />
{t("Keep these links carefully")}
</h5>
<div className="input-group ">
<input
type="text"
className="form-control"
value=""
placeholder="email@domaine.com"
/>
<div className="input-group-append">
<a
className="btn btn-success"
href=""
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faPaperPlane} className="mr-2" />
{this.props.invitationOnly
? t("Send me this link")
: t("Send me these links")}
</a>
</div>
</div>
{/*<div className="text-center">
<button
type="button"
className="btn btn-success m-2"
>
<FontAwesomeIcon icon={faPaperPlane} className="mr-2" />
{(this.props.invitationOnly?t("Send me this link by email"):t("Send me these links by email"))}
</button>
</div>*/}
</Col>
</Row>
<Row className="mt-4 mb-4">
<Col className="offset-lg-3 text-center" lg="6"></Col>
</Row>
</Container>
);
}
}
export default withTranslation()(CreateSuccess);