From 9a47e7a2e2100f0bb7ebfab11f7644d32b68241f Mon Sep 17 00:00:00 2001 From: therealbobo Date: Sun, 13 Sep 2020 00:51:39 +0200 Subject: initial commit --- frontend/src/views/Config.js | 226 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 226 insertions(+) create mode 100644 frontend/src/views/Config.js (limited to 'frontend/src/views/Config.js') diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js new file mode 100644 index 0000000..438e2d6 --- /dev/null +++ b/frontend/src/views/Config.js @@ -0,0 +1,226 @@ +import { + validateIpAddress, +} from "../utils"; +import React, {Component, useState} from 'react'; +import './Config.scss'; +import {Button, ButtonGroup, ToggleButton, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap"; +import axios from 'axios' +import {createCurlCommand} from '../utils'; + +class Config extends Component { + + constructor(props) { + super(props); + + this.state = { + server_address: "", + flag_regex: "", + auth_required: false, + accounts: {}, + showSignup: false, + showConfig: true, + tmpUser:"", + tmpPass:"", + tmpConf:"" + }; + + this.serverIpChanged = this.serverIpChanged.bind(this); + this.flagRegexChanged = this.flagRegexChanged.bind(this); + this.authRequiredChanged = this.authRequiredChanged.bind(this); + this.userChanged = this.userChanged.bind(this); + this.passwdChanged = this.passwdChanged.bind(this); + this.confirmChanged = this.confirmChanged.bind(this); + } + + serverIpChanged(event) { + this.setState({server_address: event.target.value}); + } + + flagRegexChanged(event) { + this.setState({flag_regex: event.target.value}); + } + + authRequiredChanged() { + this.setState({auth_required: !this.value}); + this.checked = !this.checked; + this.value = !this.value; + } + + userChanged(event) { + this.setState({tmpUser: event.target.value}); + } + + passwdChanged(event) { + this.setState({tmpPass: event.target.value}); + } + + confirmChanged(event) { + this.setState({tmpConf: event.target.value}); + } + + setup() { + const requestOptions = { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + config: { + server_address: this.state.server_address, + flag_regex: this.state.flag_regex, + auth_required: this.state.auth_required, + }, + accounts: this.state.accounts + }) + }; + + + fetch('/setup', requestOptions) + .then(function(response){ + console.log(response.status); + console.log(response); + } + ); + + } + + signup(){ + if (this.state.tmpPass === this.state.tmpConf){ + const accounts = {...this.state.accounts}; + accounts[this.state.tmpUser] = this.state.tmpPass; + this.setState({accounts}); + console.log(this.state); + this.setState({showSignup:false,showConfig:true}) + } + this.setState({tmpUser : ""}); + this.setState({tmpPass : ""}); + this.setState({tmpConf : ""}); + } + + render() { + let rows = Object.keys(this.state.accounts).map(u => + + {u} + + ); + + + + return ( + <> + + + + # passwd + + + + + +
+ + username: + + + + + password: + + + + + confirm password: + + + + +
+ + + + + + + + + + + + + + + ~/.config + + + + + + + + + this.authRequiredChanged()} + > + Authentication + + + + + + + + + + + + {rows} + + +
users
+ +
+ + + + + + + +
+ + server_address: + + + + + flag_regex: + + + +
+ + + + + + + + + + + + + + ); + } +} + +export default Config; -- cgit v1.2.3-70-g09d2 From b5f3cd7accf3699fd7ed3053d671a4c254dfeaa3 Mon Sep 17 00:00:00 2001 From: therealbobo Date: Mon, 14 Sep 2020 09:45:18 +0200 Subject: auto startup configuration --- frontend/src/views/App.js | 9 +++++++++ frontend/src/views/Config.js | 9 +++++---- frontend/src/views/Services.js | 10 ---------- 3 files changed, 14 insertions(+), 14 deletions(-) (limited to 'frontend/src/views/Config.js') diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index 229eaed..5b49045 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -18,6 +18,15 @@ class App extends Component { rulesWindowOpen: false, configWindowOpen: false }; + + fetch('/api/services') + .then(response => { + if( response.status === 503){ + this.setState({configWindowOpen: true}); + } + }); + + } render() { diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js index 438e2d6..9b220d9 100644 --- a/frontend/src/views/Config.js +++ b/frontend/src/views/Config.js @@ -4,7 +4,6 @@ import { import React, {Component, useState} from 'react'; import './Config.scss'; import {Button, ButtonGroup, ToggleButton, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap"; -import axios from 'axios' import {createCurlCommand} from '../utils'; class Config extends Component { @@ -74,9 +73,11 @@ class Config extends Component { fetch('/setup', requestOptions) - .then(function(response){ - console.log(response.status); - console.log(response); + .then(response => { + if (response.status === 202 ){ + //this.setState({showConfig:false}); + this.props.onHide(); + } } ); diff --git a/frontend/src/views/Services.js b/frontend/src/views/Services.js index 9f0fbd2..0de021f 100644 --- a/frontend/src/views/Services.js +++ b/frontend/src/views/Services.js @@ -82,16 +82,6 @@ class Services extends Component { } ); - /* - axios.put("/api/services", { - name: this.state.name, - port: this.state.port, - color: this.state.color, - notes: this.state.notes - }); - */ - - this.newService(); this.loadServices(); } -- cgit v1.2.3-70-g09d2 From e1ce4fefede7f956e4b7ae9bc602b4f49fbfad69 Mon Sep 17 00:00:00 2001 From: therealbobo Date: Mon, 14 Sep 2020 11:32:57 +0200 Subject: auto disabling config button --- frontend/src/views/App.js | 9 +++++++-- frontend/src/views/Config.js | 4 ++++ frontend/src/views/Config.scss | 13 +++++++++++++ frontend/src/views/Header.js | 3 ++- 4 files changed, 26 insertions(+), 3 deletions(-) (limited to 'frontend/src/views/Config.js') diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index 5b49045..5a2d913 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -16,13 +16,16 @@ class App extends Component { servicesWindowOpen: false, filterWindowOpen: false, rulesWindowOpen: false, - configWindowOpen: false + configWindowOpen: false, + configDone: false }; fetch('/api/services') .then(response => { if( response.status === 503){ this.setState({configWindowOpen: true}); + } else if (response.status === 200){ + this.setState({configDone: true}); } }); @@ -41,7 +44,8 @@ class App extends Component { modal = this.setState({rulesWindowOpen: false})}/>; } if (this.state.configWindowOpen) { - modal = this.setState({configWindowOpen: false})}/>; + modal = this.setState({configWindowOpen: false})} + onDone={() => this.setState({configDone: true})}/>; } return ( @@ -51,6 +55,7 @@ class App extends Component { onOpenFilters={() => this.setState({filterWindowOpen: true})} onOpenRules={() => this.setState({rulesWindowOpen: true})} onOpenConfig={() => this.setState({configWindowOpen: true})} + onConfigDone={this.state.configDone} /> }/> diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js index 9b220d9..1468b1b 100644 --- a/frontend/src/views/Config.js +++ b/frontend/src/views/Config.js @@ -77,6 +77,8 @@ class Config extends Component { if (response.status === 202 ){ //this.setState({showConfig:false}); this.props.onHide(); + this.props.onDone(); + console.log(this.props.disabled); } } ); @@ -158,6 +160,8 @@ class Config extends Component { +
Warning: once the configuration is completed, it cannot be changed unless you reset caronte :(
+
diff --git a/frontend/src/views/Config.scss b/frontend/src/views/Config.scss index 9946ce9..b0b899f 100644 --- a/frontend/src/views/Config.scss +++ b/frontend/src/views/Config.scss @@ -36,3 +36,16 @@ width: 80px; } } + +.blink{ + + span{ + animation: blink 1s linear infinite; + } + @keyframes blink{ + 0%{opacity: 0;} + 50%{opacity: .5;} + 100%{opacity: 1;} + } + +} diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js index 03e4e5c..3f95bcd 100644 --- a/frontend/src/views/Header.js +++ b/frontend/src/views/Header.js @@ -73,7 +73,8 @@ class Header extends Component { - + -- cgit v1.2.3-70-g09d2 From 83a5fedb95ea211f3bd66ab94d87e82ee1cc51e3 Mon Sep 17 00:00:00 2001 From: therealbobo Date: Mon, 14 Sep 2020 12:11:45 +0200 Subject: added error handling --- frontend/src/views/Config.js | 21 +++++++++++++++++++-- frontend/src/views/Config.scss | 4 ++++ 2 files changed, 23 insertions(+), 2 deletions(-) (limited to 'frontend/src/views/Config.js') diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js index 1468b1b..f5766eb 100644 --- a/frontend/src/views/Config.js +++ b/frontend/src/views/Config.js @@ -20,7 +20,8 @@ class Config extends Component { showConfig: true, tmpUser:"", tmpPass:"", - tmpConf:"" + tmpConf:"", + errors:"" }; this.serverIpChanged = this.serverIpChanged.bind(this); @@ -71,6 +72,7 @@ class Config extends Component { }) }; + let msg = ""; fetch('/setup', requestOptions) .then(response => { @@ -78,7 +80,12 @@ class Config extends Component { //this.setState({showConfig:false}); this.props.onHide(); this.props.onDone(); - console.log(this.props.disabled); + } else { + response.json().then(data => { + this.setState( + {errors : data.error.toString()} + ); + }); } } ); @@ -215,6 +222,16 @@ class Config extends Component { + +
+ + {this.state.errors + .split('\n').map((item, key) => { + return {item}
}) + } + +
+ diff --git a/frontend/src/views/Config.scss b/frontend/src/views/Config.scss index b0b899f..331d7a7 100644 --- a/frontend/src/views/Config.scss +++ b/frontend/src/views/Config.scss @@ -49,3 +49,7 @@ } } + +.error{ + color: red; +} -- cgit v1.2.3-70-g09d2