tournament settings

[alttp.git] / resources / js / components / tournament / SettingsDialog.js

diff --git a/resources/js/components/tournament/SettingsDialog.js b/resources/js/components/tournament/SettingsDialog.js
index 995c07b8250ee4388a267b26bac67c0b0880ad62..af4d664efe0d2f60c435e169c9a000a395b39bd6 100644 (file)
--- a/resources/js/components/tournament/SettingsDialog.js
+++ b/resources/js/components/tournament/SettingsDialog.js
@@ -1,10 +1,11 @@
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Col, Modal, Row } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
+import DiscordForm from './DiscordForm';
 import DiscordSelect from '../common/DiscordSelect';
 import Icon from '../common/Icon';
 import ToggleSwitch from '../common/ToggleSwitch';
@@ -55,52 +56,72 @@ const setDiscord = async (tournament, guild_id) => {
        }
 };
 
+const inviteUrl = 'https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot';
+
 const SettingsDialog = ({
        onHide,
        show,
        tournament,
 }) =>
-<Modal className="settings-dialog" onHide={onHide} show={show}>
+<Modal
+       className="settings-dialog"
+       onHide={onHide}
+       show={show}
+       size={tournament.discord ? 'lg' : 'md'}
+>
        <Modal.Header closeButton>
                <Modal.Title>
                        {i18n.t('tournaments.settings')}
                </Modal.Title>
        </Modal.Header>
        <Modal.Body>
-               <div className="d-flex align-items-center justify-content-between mb-3">
-                       <span>{i18n.t('tournaments.open')}</span>
-                       <ToggleSwitch
-                               onChange={({ target: { value } }) => value ? open(tournament) : close(tournament)}
-                               value={tournament.accept_applications}
-                       />
-               </div>
-               <div className="d-flex align-items-center justify-content-between mb-3">
-                       <span>{i18n.t('tournaments.locked')}</span>
-                       <ToggleSwitch
-                               onChange={({ target: { value } }) => value ? lock(tournament) : unlock(tournament)}
-                               value={tournament.locked}
-                       />
-               </div>
-               <div className="d-flex align-items-center justify-content-between">
-                       <div>
-                               <p>{i18n.t('tournaments.discord')}</p>
-                               <div>
-                                       <Button
-                                               href="https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot"
-                                               target="_blank"
-                                               variant="discord"
-                                       >
-                                               <Icon.DISCORD />
-                                               {' '}
-                                               {i18n.t('tournaments.inviteBot')}
-                                       </Button>
+               <Row>
+                       <Col sm={tournament.discord ? 6 : 12}>
+                               <div className="d-flex align-items-center justify-content-between mb-3">
+                                       <span>{i18n.t('tournaments.open')}</span>
+                                       <ToggleSwitch
+                                               onChange={({ target: { value } }) => value
+                                                       ? open(tournament) : close(tournament)}
+                                               value={tournament.accept_applications}
+                                       />
+                               </div>
+                               <div className="d-flex align-items-center justify-content-between mb-3">
+                                       <span>{i18n.t('tournaments.locked')}</span>
+                                       <ToggleSwitch
+                                               onChange={({ target: { value } }) => value
+                                                       ? lock(tournament) : unlock(tournament)}
+                                               value={tournament.locked}
+                                       />
+                               </div>
+                               <div className="d-flex align-items-center justify-content-between">
+                                       <div>
+                                               <p>{i18n.t('tournaments.discord')}</p>
+                                               {!tournament.discord ?
+                                                       <div>
+                                                               <Button
+                                                                       href={inviteUrl}
+                                                                       target="_blank"
+                                                                       variant="discord"
+                                                               >
+                                                                       <Icon.DISCORD />
+                                                                       {' '}
+                                                                       {i18n.t('tournaments.inviteBot')}
+                                                               </Button>
+                                                       </div>
+                                               : null}
+                                       </div>
+                                       <DiscordSelect
+                                               onChange={({ target: { value } }) => setDiscord(tournament, value)}
+                                               value={tournament.discord}
+                                       />
                                </div>
-                       </div>
-                       <DiscordSelect
-                               onChange={({ target: { value } }) => setDiscord(tournament, value)}
-                               value={tournament.discord}
-                       />
-               </div>
+                       </Col>
+                       {tournament.discord ?
+                               <Col sm={6}>
+                                       <DiscordForm tournament={tournament} />
+                               </Col>
+                       : null}
+               </Row>
        </Modal.Body>
        <Modal.Footer>
                <Button onClick={onHide} variant="secondary">