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.
98 lines
4.2 KiB
98 lines
4.2 KiB
import React, {Component} from "react";
|
|
import {Button, Col, Container, Row} from "reactstrap";
|
|
import {Link} from 'react-router-dom';
|
|
import { faCopy, faUsers } from '@fortawesome/free-solid-svg-icons';
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import logoLine from "../../logos/logo-line-white.svg";
|
|
|
|
|
|
class UnknownView extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
const electionSlug = this.props.match.params.handle;
|
|
this.state = {
|
|
urlOfVote: "https://" + window.location.hostname + "/vote/" + electionSlug,
|
|
urlOfResult: "https://" + window.location.hostname + "/result/" + electionSlug
|
|
};
|
|
this.urlVoteField = React.createRef();
|
|
this.urlResultField = React.createRef();
|
|
}
|
|
|
|
handleClickOnField=(event)=>{
|
|
event.target.focus();
|
|
event.target.select();
|
|
};
|
|
|
|
handleClickOnCopyVote=(event)=>{
|
|
const input = this.urlVoteField.current;
|
|
input.focus();
|
|
input.select();
|
|
document.execCommand("copy");
|
|
};
|
|
|
|
handleClickOnCopyResult=(event)=>{
|
|
const input = this.urlResultField.current;
|
|
input.focus();
|
|
input.select();
|
|
document.execCommand("copy");
|
|
};
|
|
|
|
render(){
|
|
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>Vote créé avec succès !</h2>
|
|
<p className="mt-4 mb-1">Vous pouvez maintenant partager le lien du vote aux participants :</p>
|
|
|
|
|
|
<div className="input-group ">
|
|
<input type="text" className="form-control" ref={this.urlVoteField}
|
|
value={this.state.urlOfVote} readOnly onClick={this.handleClickOnField} />
|
|
|
|
<div className="input-group-append">
|
|
<Button className="btn btn-outline-light" onClick={this.handleClickOnCopyVote}
|
|
type="button">
|
|
<FontAwesomeIcon icon={faCopy} className="mr-2"/>Copier</Button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p className="mt-4 mb-1">Voici le lien vers les résultats du vote en temps réel :</p>
|
|
<div className="input-group ">
|
|
<input type="text" className="form-control" ref={this.urlResultField}
|
|
value={this.state.urlOfResult} readOnly onClick={this.handleClickOnField} />
|
|
|
|
<div className="input-group-append">
|
|
<Button className="btn btn-outline-light" onClick={this.handleClickOnCopyResult}
|
|
type="button">
|
|
<FontAwesomeIcon icon={faCopy} className="mr-2"/>Copier</Button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
</Row>
|
|
<Row className="mt-4 mb-4" >
|
|
<Col >
|
|
<div className=" bg-warning text-white p-2 "><p className="m-0 p-0 text-center">Conservez ces liens précieusement !</p>
|
|
<p className="small m-2 p-0"><b>ATTENTION</b> : Vous ne les retrouverez pas ailleurs et nous ne serons pas capable de vous les communiquer. Vous pouvez par exemple les enregistrer dans les favoris de votre
|
|
navigateur.</p></div>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row className="mt-4 mb-4" >
|
|
<Col className="text-center">
|
|
<Link to={ "/vote/" + this.props.match.params.handle} className="btn btn-success"><FontAwesomeIcon icon={faUsers} className="mr-2"/>Participer maintenant !</Link>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
export default UnknownView;
|