Browse Source

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

master
Clement G 2 years ago
parent
commit
7f2ed9f4c2
  1. 9
      public/locale/i18n/fr/resource.json
  2. 17
      src/components/CopyField.jsx
  3. 29
      src/components/banner/Facebook.jsx
  4. 107
      src/components/views/CreateSuccess.jsx

9
public/locale/i18n/fr/resource.json

@ -94,5 +94,12 @@
"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 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"
}

17
src/components/CopyField.jsx

@ -16,7 +16,7 @@ const CopyField = props => {
document.execCommand("copy");
};
const { t, value, icon } = props;
const { t, value, iconCopy, iconOpen } = props;
return (
<div className="input-group ">
@ -31,14 +31,25 @@ const CopyField = props => {
<div className="input-group-append">
<Button
className="btn btn-outline-light"
className="btn btn-success"
onClick={handleClickOnButton}
type="button"
>
<FontAwesomeIcon icon={icon} className="mr-2" />
<FontAwesomeIcon icon={iconCopy} className="mr-2" />
{t("Copy")}
</Button>
</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>
);
};

29
src/components/banner/Facebook.jsx

@ -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

107
src/components/views/CreateSuccess.jsx

@ -1,16 +1,17 @@
/* eslint react/prop-types: 0 */
import React, { Component } from "react";
import { Col, Container, Row } from "reactstrap";
import { Link } from "react-router-dom";
import { withTranslation, Trans } from "react-i18next";
import { withTranslation } from "react-i18next";
import {
faCopy,
faUsers,
faExclamationTriangle
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;
@ -44,58 +45,80 @@ class CreateSuccess extends Component {
</>
) : (
<>
<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} />
<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>
{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} />
{this.props.invitationOnly ? null : (
<Facebook
className="btn btn-outline-light m-2"
text={t("Share election Facebook")}
url={this.state.urlOfVote}
title={"app.mieuxvoter.fr"}
/>
)}
</Col>
</Row>
<Row className="mt-4 mb-4">
<Col className="text-center offset-lg-3" lg="6">
<div className=" bg-light text-primary 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>
<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="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>
<Col className="offset-lg-3 text-center" lg="6"></Col>
</Row>
</Container>
);

Loading…
Cancel
Save