discovery

.gitignore

@@ -59,4 +59,5 @@ typings/
 
 dist/
 
-.idea/
+.idea/
+yarn.lock

src/ts/App.tsx

@@ -32,11 +32,9 @@ export class App extends React.Component<any, any> {
  
   render() {
     return (
-      <MuiThemeProvider muiTheme={muiTheme}>
         <Router history={history}>
           <Routes />
         </Router>
-      </MuiThemeProvider>
     );
   }
 }

src/ts/Routes.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 import { Switch } from 'react-router';
 import { Link, Route } from 'react-router-dom';
 
- import { TopBar } from './containers/test/TopBar';
- import { SignUp } from './containers/test/SignUp';
- import { SignIn } from './containers/test/SignIn';
- import { PWChange } from './containers/test/PWChange';
- import { ProbeDown } from './containers/test/ProbeDown';
+import { TopBar } from './containers/test/TopBar';
+import { SignUp } from './containers/test/SignUp';
+import { SignIn } from './containers/test/SignIn';
+import { PWChange } from './containers/test/PWChange';
+import { ProbeDown } from './containers/test/ProbeDown';
+import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
+
 
 import { Components } from './containers/test/Components';
 
@@ -21,15 +23,18 @@ export class Routes extends React.Component<any, any> {
         <li><Link to='/test3' >SignIn</Link></li>
         <li><Link to='/test4' >PWChange</Link></li>
         <li><Link to='/test5' >ProbeDown</Link></li>
+        <li><Link to='/test6' >DiscoveryDetails</Link></li>
 
         <li><Link to='/test14' >Insanity</Link></li>
 
+
         <Switch>
           <Route exact path='/test' component={TopBar} />
           <Route exact path='/test2' component={SignUp} />
           <Route exact path='/test3' component={SignIn} />
           <Route exact path='/test4' component={PWChange} />
           <Route exact path='/test5' component={ProbeDown} />
+          <Route exact path='/test6' component={DiscoveryDetails} />
 
           <Route exact path='/test14' component={Components} />
         </Switch>

src/ts/containers/member/InputBox.tsx

@@ -0,0 +1,28 @@
+/**
+ * Created by geek on 17. 7. 7.
+ */
+
+import * as React from 'react';
+import {Input, Button} from 'semantic-ui-react';
+
+// const InputExampleInput = () => (
+//   <Input placeholder='Search...' />
+// )
+//
+// export default InputExampleInput
+
+export class InputBox extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div>
+        <Input  placeholder='search' />
+        <Button > Click </Button>
+      </div>
+    );
+  }
+}

src/ts/containers/member/PasswordChange.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+import {Input} from 'semantic-ui-react'
+
+const styles = {
+  body: {
+    textAlign: 'center',
+  },
+  container: {
+    textAlign: 'center',
+
+  },
+
+  textfield: {
+    width: 300,
+    marginLeft: 3
+  },
+
+  customWidth: {
+    width: 150,
+  },
+  button: {
+    margin: 12,
+  }
+};
+
+
+export class MemberPasswordChange extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+
+    this.state = {
+      open: false,
+      value: 1,
+
+      pw: "",
+      pwConfirm: "",
+      errtext:"",
+    };
+  }
+
+  handleChange = () => this.setState({});
+
+  private emailInput: any;
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false,
+    });
+  }
+
+  handleTouchTap = () => {
+    this.setState({
+      open: true,
+    });
+  }
+
+  handlePasswordChange = () => {
+
+    let output: string;
+    let obj: any; //new object declaration
+
+    console.log(this.state.pw);
+    console.log(this.state.pwConfirm);
+    if (this.state.pw !==  this.state.pwConfirm) {
+      console.log("dddd");
+      this.setState({ errtext: "Password not equal" });
+      return;
+
+    }
+    obj = {
+      "pw": this.state.pw,
+      "pwConfirm": this.state.pwConfirm,
+    };
+
+    let exeObj: any;
+    exeObj = {
+      "serviceName": "Member",
+      "methodName": "PwChange",
+      "param": obj
+    }
+
+
+    output = JSON.stringify(exeObj);
+  }
+
+
+
+  btnTouchTap = () => {
+    alert(event)
+  };
+
+  render() {
+
+    return (
+      <div style={styles.container}>
+        <h1>Log in with a overflow Account:</h1>
+        <br />
+        <TextField
+          hintText="Password11"
+          floatingLabelText="Password"
+          errorText=""
+          type="password"
+          style={styles.textfield}
+          value={this.state.pw}
+          onChange={(e, newValue) => this.setState({ pw: newValue })}
+        />
+
+        <br />
+
+        <TextField
+          hintText="Password Confirm"
+          floatingLabelText="Password Confirm"
+          errorText=""
+          type="password"
+          style={styles.textfield}
+          value={this.state.pwConfirm}
+          onChange={(e, newValue) => this.setState({ pwConfirm: newValue })}
+        />
+        <br />
+
+
+        <RaisedButton label="Password Change" primary={true} style={styles.button} onClick={this.handlePasswordChange.bind(this)} />
+        <Link to="/member/regist"><RaisedButton label="Sign Up" primary={false} style={styles.button} /></Link>
+
+        <Input placeholder='Search...' />
+        </div>
+    );
+  }
+}

src/ts/containers/test/DiscoveryDetails.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Table, Label } from 'semantic-ui-react';
+import { DiscoveryProbe } from './DiscoveryProbe';
+import { DiscoveryTable } from './DiscoveryTable';
+
+export class DiscoveryDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={{ margin: '20px' }}>
+          <DiscoveryProbe />
+        </div>
+        <div style={{ margin: '20px' }}>
+          <DiscoveryTable />
+        </div>
+      </div>
+
+    );
+  }
+}

src/ts/containers/test/DiscoveryProbe.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Table, Label } from 'semantic-ui-react';
+
+
+export class DiscoveryProbe extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {};
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    return (
+      <div>Probe Details...
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Domain</Label>
+              </Table.Cell>
+              <Table.Cell>overFlow's domain111</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Status</Label>
+              </Table.Cell>
+              <Table.Cell>STARTED</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon >Host IP</Label>
+              </Table.Cell>
+              <Table.Cell>192.168.1.103</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon >Host Name</Label>
+              </Table.Cell>
+              <Table.Cell>Geek`s Ubuntu</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Authorized at</Label>
+              </Table.Cell>
+              <Table.Cell>2017-07-13</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Description</Label>
+              </Table.Cell>
+              <Table.Cell>description1111111111</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+
+      </div>
+    )
+  }
+
+}

src/ts/containers/test/DiscoveryTable.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Table, Label, Input } from 'semantic-ui-react';
+
+export class DiscoveryTable extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <Table celled>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell width='1'>Start IP</Table.Cell>
+              <Table.Cell width='6'><Input size='large' placeholder='Start IP'  /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>End IP</Table.Cell>
+              <Table.Cell><Input size='large' placeholder='End IP' /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Exclude IP</Table.Cell>
+              <Table.Cell><Input  size='large' placeholder='Exclude IP' /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Start Port</Table.Cell>
+              <Table.Cell><Input size='large' placeholder='Start Port' /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>End Port</Table.Cell>
+              <Table.Cell><Input size='large' placeholder='End Port' /></Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </div>
+    );
+  }
+}

src/ts/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
+
+
 import { App } from './App';
 
 injectTapEventPlugin();