diff options
Diffstat (limited to 'frontend/src/components/pages')
| -rw-r--r-- | frontend/src/components/pages/ConfigurationPage.jsx | 183 | ||||
| -rw-r--r-- | frontend/src/components/pages/MainPage.jsx | 97 | ||||
| -rw-r--r-- | frontend/src/components/pages/ServiceUnavailablePage.jsx | 34 |
3 files changed, 0 insertions, 314 deletions
diff --git a/frontend/src/components/pages/ConfigurationPage.jsx b/frontend/src/components/pages/ConfigurationPage.jsx deleted file mode 100644 index c8646fb..0000000 --- a/frontend/src/components/pages/ConfigurationPage.jsx +++ /dev/null @@ -1,183 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - */ - -import React, {Component} from "react"; -import {Col, Container, Row} from "react-bootstrap"; -import Table from "react-bootstrap/Table"; -import backend from "../../backend"; -import {createCurlCommand} from "../../utils"; -import validation from "../../validation"; -import ButtonField from "../fields/ButtonField"; -import CheckField from "../fields/CheckField"; -import InputField from "../fields/InputField"; -import TextField from "../fields/TextField"; -import Header from "../Header"; -import LinkPopover from "../objects/LinkPopover"; -import "../panels/common.scss"; -import "./ConfigurationPage.scss"; - -class ConfigurationPage extends Component { - - constructor(props) { - super(props); - this.state = { - settings: { - "config": { - "server_address": "", - "flag_regex": "", - "auth_required": false - }, - "accounts": {} - }, - newUsername: "", - newPassword: "" - }; - } - - saveSettings = () => { - if (this.validateSettings(this.state.settings)) { - backend.post("/setup", this.state.settings).then((_) => { - this.props.onConfigured(); - }).catch((res) => { - this.setState({setupStatusCode: res.status, setupResponse: JSON.stringify(res.json)}); - }); - } - }; - - validateSettings = (settings) => { - let valid = true; - if (!validation.isValidAddress(settings.config["server_address"], true)) { - this.setState({serverAddressError: "invalid ip_address"}); - valid = false; - } - if (settings.config["flag_regex"].length < 8) { - this.setState({flagRegexError: "flag_regex.length < 8"}); - valid = false; - } - - return valid; - }; - - updateParam = (callback) => { - callback(this.state.settings); - this.setState({settings: this.state.settings}); - }; - - addAccount = () => { - if (this.state.newUsername.length !== 0 && this.state.newPassword.length !== 0) { - const settings = this.state.settings; - settings.accounts[this.state.newUsername] = this.state.newPassword; - - this.setState({ - newUsername: "", - newPassword: "", - settings - }); - } else { - this.setState({ - newUsernameActive: this.state.newUsername.length === 0, - newPasswordActive: this.state.newPassword.length === 0 - }); - } - }; - - render() { - const settings = this.state.settings; - const curlCommand = createCurlCommand("/setup", "POST", settings); - - const accounts = Object.entries(settings.accounts).map(([username, password]) => - <tr key={username}> - <td>{username}</td> - <td><LinkPopover text="******" content={password}/></td> - <td><ButtonField variant="red" small rounded name="delete" - onClick={() => this.updateParam((s) => delete s.accounts[username])}/></td> - </tr>).concat(<tr key={"new_account"}> - <td><InputField value={this.state.newUsername} small active={this.state.newUsernameActive} - onChange={(v) => this.setState({newUsername: v})}/></td> - <td><InputField value={this.state.newPassword} small active={this.state.newPasswordActive} - onChange={(v) => this.setState({newPassword: v})}/></td> - <td><ButtonField variant="green" small rounded name="add" onClick={this.addAccount}/></td> - </tr>); - - return ( - <div className="page configuration-page"> - <div className="page-header"> - <Header /> - </div> - - <div className="page-content"> - <div className="pane-container configuration-pane"> - <div className="pane-section"> - <div className="section-header"> - <span className="api-request">POST /setup</span> - <span className="api-response"><LinkPopover text={this.state.setupStatusCode} - content={this.state.setupResponse} - placement="left"/></span> - </div> - - <div className="section-content"> - <Container className="p-0"> - <Row> - <Col> - <InputField name="server_address" value={settings.config["server_address"]} - error={this.state.serverAddressError} - onChange={(v) => this.updateParam((s) => s.config["server_address"] = v)}/> - <InputField name="flag_regex" value={settings.config["flag_regex"]} - onChange={(v) => this.updateParam((s) => s.config["flag_regex"] = v)} - error={this.state.flagRegexError}/> - <div style={{"marginTop": "10px"}}> - <CheckField checked={settings.config["auth_required"]} name="auth_required" - onChange={(v) => this.updateParam((s) => s.config["auth_required"] = v)}/> - </div> - - </Col> - - <Col> - accounts: - <div className="section-table"> - <Table borderless size="sm"> - <thead> - <tr> - <th>username</th> - <th>password</th> - <th>actions</th> - </tr> - </thead> - <tbody> - {accounts} - </tbody> - </Table> - </div> - </Col> - </Row> - </Container> - - <TextField value={curlCommand} rows={4} readonly small={true}/> - </div> - - <div className="section-footer"> - <ButtonField variant="green" name="save" bordered onClick={this.saveSettings}/> - </div> - </div> - </div> - </div> - </div> - ); - } -} - -export default ConfigurationPage; diff --git a/frontend/src/components/pages/MainPage.jsx b/frontend/src/components/pages/MainPage.jsx deleted file mode 100644 index b9a9e6e..0000000 --- a/frontend/src/components/pages/MainPage.jsx +++ /dev/null @@ -1,97 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - */ - -import React, {Component} from "react"; -import {ReflexContainer, ReflexElement, ReflexSplitter} from "react-reflex"; -import "react-reflex/styles.css" -import {Route, Switch} from "react-router-dom"; -import Filters from "../dialogs/Filters"; -import Header from "../Header"; -import Connections from "../panels/ConnectionsPane"; -import MainPane from "../panels/MainPane"; -import PcapsPane from "../panels/PcapsPane"; -import RulesPane from "../panels/RulesPane"; -import SearchPane from "../panels/SearchPane"; -import ServicesPane from "../panels/ServicesPane"; -import StatsPane from "../panels/StatsPane"; -import StreamsPane from "../panels/StreamsPane"; -import "./MainPage.scss"; - -class MainPage extends Component { - - state = { - timelineHeight: 210 - }; - - handleTimelineResize = (e) => { - if (this.timelineTimeoutHandle) { - clearTimeout(this.timelineTimeoutHandle); - } - - this.timelineTimeoutHandle = setTimeout(() => - this.setState({timelineHeight: e.domElement.clientHeight}), 100); - }; - - render() { - let modal; - if (this.state.filterWindowOpen) { - modal = <Filters onHide={() => this.setState({filterWindowOpen: false})}/>; - } - - return ( - <ReflexContainer orientation="horizontal" className="page main-page"> - <div className="fuck-css"> - <ReflexElement className="page-header"> - <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} configured={true}/> - {modal} - </ReflexElement> - </div> - - <ReflexElement className="page-content" flex={1}> - <ReflexContainer orientation="vertical" className="page-content"> - <ReflexElement className="pane connections-pane"> - <Connections onSelected={(c) => this.setState({selectedConnection: c})}/> - </ReflexElement> - - <ReflexSplitter/> - - <ReflexElement className="pane details-pane"> - <Switch> - <Route path="/searches" children={<SearchPane/>}/> - <Route path="/pcaps" children={<PcapsPane/>}/> - <Route path="/rules" children={<RulesPane/>}/> - <Route path="/services" children={<ServicesPane/>}/> - <Route path="/stats" children={<StatsPane/>}/> - <Route exact path="/connections/:id" - children={<StreamsPane connection={this.state.selectedConnection}/>}/> - <Route children={<MainPane version={this.props.version}/>}/> - </Switch> - </ReflexElement> - </ReflexContainer> - </ReflexElement> - - <ReflexSplitter propagate={true}/> - - <ReflexElement className="page-footer" onResize={this.handleTimelineResize}> - - </ReflexElement> - </ReflexContainer> - ); - } -} - -export default MainPage; diff --git a/frontend/src/components/pages/ServiceUnavailablePage.jsx b/frontend/src/components/pages/ServiceUnavailablePage.jsx deleted file mode 100644 index deb4cf8..0000000 --- a/frontend/src/components/pages/ServiceUnavailablePage.jsx +++ /dev/null @@ -1,34 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - */ - -import React, {Component} from "react"; -import "./MainPage.scss"; - -class ServiceUnavailablePage extends Component { - - state = {}; - - render() { - return ( - <div className="main-page"> - - </div> - ); - } -} - -export default ServiceUnavailablePage; |