changed sign , added semantic-ui

package.json

@@ -33,6 +33,7 @@
     "react": "^15.5.4",
     "react-dom": "15.5.4",
     "react-router-dom": "^4.1.1",
-    "react-tap-event-plugin": "^2.0.1"
+    "react-tap-event-plugin": "^2.0.1",
+    "semantic-ui-react": "^0.70.0"
   }
 }

src/ts/containers/test/SignIn.tsx

@@ -1,6 +1,6 @@
 import *as React from 'react'
 import {
-  Icon, Label, Input,
+  Icon, Label, Input, InputOnChangeData,
   Select, Button, Header, Modal
 } from 'semantic-ui-react'
 
@@ -15,32 +15,57 @@ export class SignIn extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
-    
+
 
     this.state = {
       forgotPopup: false,
+      sendComPopup: false,
+      email: '',
+      pass: '',
     };
 
 
   }
-forgotPopupOpen = () => this.setState({ forgotPopup: true });
-  forgotPopupClose = () => this.setState({ forgotPopup: false });
+  forgotPopupOpen = () => this.setState({ forgotPopup: true });
+  PopupClose = () => this.setState({ forgotPopup: false, sendComPopup: false });
+  sendComOpen = () => {
+    this.setState({
+      forgotPopup: false,
+      sendComPopup: true,
 
+    });
+  }
+
+  onSignIn = () => {
+    console.log(this.state);
+  }
 
   render() {
 
 
     return (
       <div>
-        <Label>  Email  </Label>
-        <Input placeholder='Email' />
+
+        <Input label='Email ' placeholder='Email' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ email: data.value });
+          }} />
         <br />
 
-        <Label>  Password  </Label>
-        <Input placeholder='Password' type='password' />
+        <Input label='Password ' placeholder='Password' type='password' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ pass: data.value });
+          }} />
         <br />
         <Button onClick={this.forgotPopupOpen}>Forgot Password</Button>
-        <Modal size='small' open={this.state.forgotPopup} onClose={this.forgotPopupClose}>
+        <br />
+
+        <Button onClick={this.onSignIn}>    Sign In  </Button>
+        <Button href='/#/test2'>    Sign Up  </Button>
+
+
+
+        <Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
           <Modal.Header>Change your password Enter email address.</Modal.Header>
           <Modal.Content >
             <Label>  Email  </Label>
@@ -48,16 +73,25 @@ forgotPopupOpen = () => this.setState({ forgotPopup: true });
 
           </Modal.Content>
           <Modal.Actions>
-            <Button basic color='blue'  >              Submit      </Button>
-            <Button onClick={this.forgotPopupClose}>              Cancel      </Button>
+            <Button onClick={this.sendComOpen} basic color='blue'  >              Submit      </Button>
+            <Button onClick={this.PopupClose}>              Cancel      </Button>
+          </Modal.Actions>
+        </Modal>
+
+        <Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}>
+          <Modal.Header>Send Complete</Modal.Header>
+          <Modal.Content>
+            <Modal.Description>
+              <Header>비밀번호 변경이 신청 되었습니다.</Header>
+              <p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
+            </Modal.Description>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={this.PopupClose}>              확인      </Button>
           </Modal.Actions>
         </Modal>
         <br />
 
-        <Button>    Sign In  </Button>
-        <Button href='/#/test2'>    Sign Up  </Button>
-
-
 
       </div>
     );

src/ts/containers/test/SignUp.tsx

@@ -1,7 +1,7 @@
 import *as React from 'react'
 import {
-  Icon, Label, Input,
-  Select, Button
+  Icon, Label, Input, InputOnChangeData,
+  Select, Button, Dropdown
 } from 'semantic-ui-react'
 
 
@@ -20,6 +20,25 @@ export class SignUp extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
+    this.state = {
+      email: '',
+      name: '',
+      pass: '',
+      passCon: '',
+      company: '',
+      phone: '',
+      country: '',
+    };
+
+  }
+
+
+  onSubmit = () => {
+    console.log(this.state)
+
+  }
+
+  onChange = (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
 
   }
 
@@ -29,31 +48,45 @@ export class SignUp extends React.Component<any, any> {
 
     return (
       <div>
-        <Label>  Email  </Label>
-        <Input placeholder='Email' />
-        <br/>
-        <Label>  User Name  </Label>
-        <Input placeholder='Name' />
-        <br/>
-        <Label>  Password  </Label>
-        <Input placeholder='Password' type='password' />
-        <br/>
-        <Label>  Password Confirm  </Label>
-        <Input placeholder='Password Confirm' type='password' />
-        <br/>
-        <Label>  Company Name  </Label>
-        <Input placeholder='Company' />
-        <br/>
-        <Label>  Phone  </Label>
-        <Select placeholder='Select your country' options={options} />
-        <Input placeholder='Phone' />
-        <br/>
-        <Button>
-    Sign Up
-  </Button>
-  <Button>
-    Cancel
-  </Button>
+
+        <Input label='Email ' value={this.state.email} placeholder='Email' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ email: data.value });
+          }} />
+        <br />
+
+        <Input label='User Name ' placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ name: data.value });
+        }} />
+        <br />
+
+        <Input label='Password ' placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ pass: data.value });
+        }} />
+        <br />
+
+        <Input label='Password Confirm ' placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ passCon: data.value });
+        }} />
+        <br />
+
+        <Input label='Company Name ' placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ company: data.value });
+        }} />
+        <br />
+
+        <Input >
+          <Label> Phone </Label>
+          <Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ country: data.value });
+          }} />
+          <Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ phone: data.value });
+          }} />
+        </Input>
+        <br />
+        <Button onClick={this.onSubmit}>   Sign Up  </Button>
+        <Button>    Cancel  </Button>
       </div>
     );
   }