feat(create-election-success) : improve layout/ux and add tool for send by mail (front only)

pull/73/head
Clement G 4 years ago
parent ab04929cd4
commit 7f2ed9f4c2

@ -94,5 +94,12 @@
"Results available at the close of the vote": "Résultats disponibles à la clôture du vote", "Results available at the close of the vote": "Résultats disponibles à la clôture du vote",
"The results page will not be accessible until all participants have voted.":"La page de résultats ne sera pas accessible tant que tous les participants n'auront pas voté.", "The results page will not be accessible until all participants have voted.":"La page de résultats ne sera pas accessible tant que tous les participants n'auront pas voté.",
"The results page will not be accessible until the end date is reached.": "La page de résultats ne sera pas accessible tant que la date de fin ne sera pas atteinte.", "The results page will not be accessible until the end date is reached.": "La page de résultats ne sera pas accessible tant que la date de fin ne sera pas atteinte.",
"No one will be able to see the result until the end date is reached or until all participants have voted.": "Personne ne pourra voir le résultat tant que la date de fin n'est pas atteinte ou que tous les participants n'ont pas voté." "No one will be able to see the result until the end date is reached or until all participants have voted.": "Personne ne pourra voir le résultat tant que la date de fin n'est pas atteinte ou que tous les participants n'ont pas voté.",
"Send me this link" : "Envoyez moi ce lien",
"Send me these links" : "Envoyez moi ces liens",
"Open" : "Ouvrir",
"Voting address" : "Adresse du vote",
"Results address" : "Adresse des résultats",
"Share election Facebook" : "Partager le vote sur Facebook"
} }

@ -16,7 +16,7 @@ const CopyField = props => {
document.execCommand("copy"); document.execCommand("copy");
}; };
const { t, value, icon } = props; const { t, value, iconCopy, iconOpen } = props;
return ( return (
<div className="input-group "> <div className="input-group ">
@ -31,14 +31,25 @@ const CopyField = props => {
<div className="input-group-append"> <div className="input-group-append">
<Button <Button
className="btn btn-outline-light" className="btn btn-success"
onClick={handleClickOnButton} onClick={handleClickOnButton}
type="button" type="button"
> >
<FontAwesomeIcon icon={icon} className="mr-2" /> <FontAwesomeIcon icon={iconCopy} className="mr-2" />
{t("Copy")} {t("Copy")}
</Button> </Button>
</div> </div>
<div className="input-group-append">
<a
className="btn btn-secondary"
href={value}
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={iconOpen} className="mr-2" />
{t("Open")}
</a>
</div>
</div> </div>
); );
}; };

@ -0,0 +1,29 @@
/* eslint react/prop-types: 0 */
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebookSquare } from "@fortawesome/free-brands-svg-icons";
const Facebook = props => {
const handleClick = () => {
const url =
"https://www.facebook.com/sharer.php?u=" +
props.url +
"&t=" +
props.title;
window.open(
url,
"",
"menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700"
);
};
return (
<button className={props.className} onClick={handleClick} type="button">
<FontAwesomeIcon icon={faFacebookSquare} className="mr-2" />
{props.text}
</button>
);
};
export default Facebook;
//i

@ -1,16 +1,17 @@
/* eslint react/prop-types: 0 */ /* eslint react/prop-types: 0 */
import React, { Component } from "react"; import React, { Component } from "react";
import { Col, Container, Row } from "reactstrap"; import { Col, Container, Row } from "reactstrap";
import { Link } from "react-router-dom"; import { withTranslation } from "react-i18next";
import { withTranslation, Trans } from "react-i18next";
import { import {
faCopy, faCopy,
faUsers, faExclamationTriangle,
faExclamationTriangle faPaperPlane,
faExternalLinkAlt
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AppContext } from "../../AppContext"; import { AppContext } from "../../AppContext";
import CopyField from "../CopyField"; import CopyField from "../CopyField";
import Facebook from "../banner/Facebook";
class CreateSuccess extends Component { class CreateSuccess extends Component {
static contextType = AppContext; static contextType = AppContext;
@ -44,58 +45,80 @@ class CreateSuccess extends Component {
</> </>
) : ( ) : (
<> <>
<p className="mt-4 mb-1"> <p className="mt-4 mb-1">{t("Voting address")}</p>
{t("You can now share the election link to participants:")} <CopyField
</p> value={this.state.urlOfVote}
<CopyField value={this.state.urlOfVote} icon={faCopy} t={t} /> iconCopy={faCopy}
iconOpen={faExternalLinkAlt}
t={t}
/>
</> </>
); );
return ( return (
<Container> <Container>
<Row className="mt-5"> <Row className="mt-5">
<Col className="text-center offset-lg-3" lg="6"> <Col className="text-center offset-lg-3" lg="6">
<h2>{t("Successful election creation!")}</h2> <h2>{t("Successful election creation!")}</h2>
{this.props.invitationOnly ? null : (
{electionLink} <Facebook
className="btn btn-outline-light m-2"
<p className="mt-4 mb-1"> text={t("Share election Facebook")}
{t("Here is the link for the results in real time:")} url={this.state.urlOfVote}
</p> title={"app.mieuxvoter.fr"}
<CopyField value={this.state.urlOfResult} icon={faCopy} t={t} /> />
)}
</Col> </Col>
</Row> </Row>
<Row className="mt-4 mb-4"> <Row className="mt-4 mb-4">
<Col className="text-center offset-lg-3" lg="6"> <Col className="offset-lg-3" lg="6">
<div className=" bg-light text-primary p-2 "> {electionLink}
<h4 className="m-0 p-0 text-center">
<FontAwesomeIcon <p className="mt-4 mb-1">{t("Results address")}</p>
icon={faExclamationTriangle} <CopyField
className="mr-2" value={this.state.urlOfResult}
/> iconCopy={faCopy}
{t("Keep these links carefully")} iconOpen={faExternalLinkAlt}
</h4> t={t}
<p className="small m-2 p-0"> />
<Trans i18nKey="t"> <h5 className="mt-5 mb-3 text-center">
<b>Warning</b>: you will have no other choices to recover the <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" />
links, and we will not be able to share them with you. For {t("Keep these links carefully")}
example, you can bookmark them in your browser. </h5>
</Trans> <div className="input-group ">
</p> <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>
{/*<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> </Col>
</Row> </Row>
<Row className="mt-4 mb-4"> <Row className="mt-4 mb-4">
<Col className="text-center"> <Col className="offset-lg-3 text-center" lg="6"></Col>
<Link
to={"/vote/" + this.props.match.params.slug}
className="btn btn-success"
>
<FontAwesomeIcon icon={faUsers} className="mr-2" />
{t("Participate now!")}
</Link>
</Col>
</Row> </Row>
</Container> </Container>
); );

Loading…
Cancel
Save