Merge branch 'master' of https://git.loafle.net/overflow/Test_Web

src/ts/containers/member/regist.tsx

@@ -56,24 +56,28 @@ const muiTheme = getMuiTheme({
   },
 });
 
+var EMailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
 export class MemberRegist extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handleSignUp = this.handleSignUp.bind(this);
 
-    
+
 
     this.state = {
       open: false,
       value: 1,
 
-      id:0,
+      id: 0,
       email: "",
       name: "",
       company: "",
       phone: "",
       pw: "",
+
+      isEmail: true
     };
   }
 
@@ -81,7 +85,7 @@ export class MemberRegist extends React.Component<any, any> {
 
   private emailInput: any;
 
-  
+
 
   handleSignUp = () => {
 
@@ -95,57 +99,30 @@ export class MemberRegist extends React.Component<any, any> {
       "phone": this.state.phone
     };
 
-     let os: OFRest = new OFRest("Member", "Regist", obj);
+    
-
-     os.Call().then(function (res) {
-        return res.json();
-     }).then(function(json) {
- console.log(json);
- ReactDOM.render(<MemberRegistResult />, document.getElementById('example'));
-     }).catch(function(err) {
-console.log(err);
-     });
-
-    // let exeObj: any;
-    // exeObj = {
-    //   "serviceName": "Member",
-    //   "methodName": "Regist",
-    //   "param": obj
-    // }
-
-
-    // output = JSON.stringify(exeObj);
-
-    // // obj = { "value": output };
-
-    // fetch('http://192.168.1.203:8080/v1/overflow/services', {
-    //   method: 'POST',
-    //   headers: {
-    //     'Accept': 'application/json',
-    //     // mode: 'no-cors'
-    //   },
-    //   body: output
-    // }).then(function (response) {
-    //   return response.json();
-    // }).then(function (json) {
-    //   console.log(json);
-    //   ReactDOM.render(<MemberRegistResult />, document.getElementById('example')
-    //   );
-    // }).catch((err) => {
-    //   console.log(err);
-    // });
-
 
+         let os: OFRest = new OFRest("Member", "Regist", obj);
 
+         os.Call().then(function (res) {
+            return res.json();
+         }).then(function(json) {
+     console.log(json);
+     ReactDOM.render(<MemberRegistResult />, document.getElementById('example'));
+         }).catch(function(err) {
+    console.log(err);
+         });
 
+  }
 
+  public validateEmail(email: any) {
+    return EMailRegex.test(email);
   }
 
   handleTestRead = () => {
     let output: string;
     let obj: any; //new object declaration
     obj = {
-       "id":this.state.id,
+      "id": this.state.id,
       "email": this.state.email,
       "pwSalt": this.state.pw,
       "name": this.state.name,
@@ -176,15 +153,15 @@ console.log(err);
     }).then(function (json) {
       console.log(json);
     }).catch((err) => {
-    console.log(err);
+      console.log(err);
-  });
+    });
-}
+  }
 
-handleTestUpdate = () => {
+  handleTestUpdate = () => {
     let output: string;
     let obj: any; //new object declaration
     obj = {
-       "id":this.state.id,
+      "id": this.state.id,
       "email": this.state.email,
       "pwSalt": this.state.pw,
       "name": this.state.name,
@@ -215,15 +192,15 @@ handleTestUpdate = () => {
     }).then(function (json) {
       console.log(json);
     }).catch((err) => {
-    console.log(err);
+      console.log(err);
-  });
+    });
-}
+  }
 
-handleTestDelete = () => {
+  handleTestDelete = () => {
     let output: string;
     let obj: any; //new object declaration
     obj = {
-      "id":this.state.id,
+      "id": this.state.id,
       "email": this.state.email,
       "pwSalt": this.state.pw,
       "name": this.state.name,
@@ -254,104 +231,109 @@ handleTestDelete = () => {
     }).then(function (json) {
       console.log(json);
     }).catch((err) => {
-    console.log(err);
+      console.log(err);
-  });
+    });
   }
 
 
-handleResultContainer = () => {
+  handleResultContainer = () => {
-  ReactDOM.render(
+    ReactDOM.render(
-    <MemberRegistResult />,
+      <MemberRegistResult />,
-    document.getElementById('example')
+      document.getElementById('example')
-  );
+    );
-}
+  }
 
 
-btnTouchTap = () => {
+  btnTouchTap = () => {
-  alert(event)
+    alert(event)
-};
+  };
 
-render() {
+  render() {
 
-  return (
+    return (
-    <MuiThemeProvider muiTheme={muiTheme}>
+      <MuiThemeProvider muiTheme={muiTheme}>
 
-      <div style={styles.container}>
+        <div style={styles.container}>
-        Get started with Overflow
+          Get started with Overflow
               <br />
-        <TextField
+          <TextField
-          ref="email"
+            ref="email"
-          hintText="smith@gmail.com"
+            hintText="smith@gmail.com"
-          floatingLabelText="Email address*"
+            floatingLabelText="Email address*"
-          errorText=""
+            errorText={this.state.isEmail ? "":"Please Email Format"}
-          style={styles.textfield}
+            style={styles.textfield}
-          underlineShow={true}
+            underlineShow={true}
-          value={this.state.email}
+            value={this.state.email}
-          onChange={(e, newValue) => this.setState({ email: newValue })}
+            onChange={(e, newValue) => {
-        />
+              this.setState({ email: newValue });
-        <br />
-        <TextField
-          ref="name"
-          hintText="Snoop"
-          floatingLabelText="Full Name*"
-          style={styles.textfield}
-          underlineShow={true}
-          value={this.state.name}
-          onChange={(e, newValue) => this.setState({ name: newValue })}
 
-        />
+              this.state.isEmail = this.validateEmail(this.state.email);
-        <br />
+            }
+            }
+          />
+          <br />
+          <TextField
+            ref="name"
+            hintText="Snoop"
+            floatingLabelText="Full Name*"
+            style={styles.textfield}
+            underlineShow={true}
+            value={this.state.name}
+            onChange={(e, newValue) => this.setState({ name: newValue })}
 
-        <TextField
+          />
-          ref="company"
+          <br />
-          hintText="Loafle"
-          floatingLabelText="Company*"
-          style={styles.textfield}
-          underlineShow={true}
-          value={this.state.company}
-          onChange={(e, newValue) => this.setState({ company: newValue })}
-        />
-        <br />
 
-        <TextField
+          <TextField
-          ref="phone"
+            ref="company"
-          hintText="Loafle"
+            hintText="Loafle"
-          floatingLabelText="Phone*"
+            floatingLabelText="Company*"
-          style={styles.textfield}
+            style={styles.textfield}
-          underlineShow={true}
+            underlineShow={true}
-          value={this.state.phone}
+            value={this.state.company}
-          onChange={(e, newValue) => this.setState({ phone: newValue })}
+            onChange={(e, newValue) => this.setState({ company: newValue })}
-        />
+          />
-        <br />
+          <br />
 
-        <TextField
+          <TextField
-          hintText="Password"
+            ref="phone"
-          floatingLabelText="Password"
+            hintText="Loafle"
-          type="password"
+            floatingLabelText="Phone*"
-          style={styles.textfield}
+            style={styles.textfield}
-          value={this.state.pw}
+            underlineShow={true}
-          onChange={(e, newValue) => this.setState({ pw: newValue })}
+            value={this.state.phone}
-        />
+            onChange={(e, newValue) => this.setState({ phone: newValue })}
-        <br />
+          />
+          <br />
+
+          <TextField
+            hintText="Password"
+            floatingLabelText="Password"
+            type="password"
+            style={styles.textfield}
+            value={this.state.pw}
+            onChange={(e, newValue) => this.setState({ pw: newValue })}
+          />
+          <br />
 
 
-        <RaisedButton label="Sign Up" primary={true} style={styles.button} onClick={this.handleSignUp.bind(this)} />
+          <RaisedButton label="Sign Up" primary={true} style={styles.button} onClick={this.handleSignUp.bind(this)} />
-        <RaisedButton label="Read" primary={true} style={styles.button} onClick={this.handleTestRead.bind(this)} />
+          <RaisedButton label="Read" primary={true} style={styles.button} onClick={this.handleTestRead.bind(this)} />
-        <RaisedButton label="Update" primary={true} style={styles.button} onClick={this.handleTestUpdate.bind(this)} />
+          <RaisedButton label="Update" primary={true} style={styles.button} onClick={this.handleTestUpdate.bind(this)} />
-        <RaisedButton label="Delete" primary={true} style={styles.button} onClick={this.handleTestDelete.bind(this)} />
+          <RaisedButton label="Delete" primary={true} style={styles.button} onClick={this.handleTestDelete.bind(this)} />
-        <br/>
+          <br />
-      <TextField
+          <TextField
-          hintText="id"
+            hintText="id"
-          floatingLabelText="id"
+            floatingLabelText="id"
-          
-          style={styles.textfield}
-          value={this.state.id}
-          onChange={(e, newValue) => this.setState({ id: newValue })}
-        />
-      </div>
 
-    </MuiThemeProvider>
+            style={styles.textfield}
-  );
+            value={this.state.id}
-}
+            onChange={(e, newValue) => this.setState({ id: newValue })}
+          />
+        </div>
+
+      </MuiThemeProvider>
+    );
+  }
 }