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

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"
+
 }

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>
   );
 };

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

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>
     );