test web first commit

.gitignore

@@ -0,0 +1,63 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+dist/
+node_modules/
+public/
+.vscode/

.ignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+public/
+.vscode/

gulpfile.js

@@ -0,0 +1,12 @@
+var gulp = require('gulp');
+var webpack = require('webpack');
+var webpackStream = require('webpack-stream');
+var webpackDevServer = require("webpack-dev-server");
+
+gulp.task('webpack', function (callback) {
+    var webpackConfig = require('./webpack.config');
+
+    return webpackStream(webpackConfig, webpack)
+        .pipe(gulp.dest('./dist'));
+});
+

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "web_ui",
+  "version": "0.0.1",
+  "scripts": {
+    "webpack-dev-server": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "@types/material-ui": "^0.17.7",
+    "@types/node": "^7.0.22",
+    "@types/react": "^15.0.24",
+    "@types/react-dom": "^15.5.0",
+    "@types/react-router": "^4.0.9",
+    "@types/react-router-dom": "^4.0.4",
+    "@types/react-tap-event-plugin": "^0.0.30",
+    "awesome-typescript-loader": "^3.1.3",
+    "css-loader": "^0.28.2",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "gulp": "^3.9.1",
+    "image-webpack-loader": "^3.3.1",
+    "node-sass": "^4.5.3",
+    "postcss-loader": "^2.0.5",
+    "react-router-dom": "^4.1.1",
+    "sass-loader": "^6.0.5",
+    "source-map-loader": "^0.2.1",
+    "style-loader": "^0.18.1",
+    "typescript": "^2.3.3",
+    "webpack": "^2.6.0",
+    "webpack-dev-server": "^2.4.5",
+    "webpack-stream": "^3.2.0"
+  },
+  "dependencies": {
+    "material-ui": "^0.18.1",
+    "react": "^15.5.4",
+    "react-dom": "15.5.4",
+    "react-router": "^4.1.1",
+    "react-tap-event-plugin": "^2.0.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')
+    ]
+}

src/scss/components/Hello.scss

@@ -0,0 +1,24 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

src/scss/index.scss

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

src/ts/containers/Main.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import Dialog from 'material-ui/Dialog';
+import {deepOrange500} from 'material-ui/styles/colors';
+import FlatButton from 'material-ui/FlatButton';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+
+const styles = {
+  container: {
+    textAlign: 'center',
+    paddingTop: 200,
+  },
+};
+
+const muiTheme = getMuiTheme({
+  palette: {
+    accent1Color: deepOrange500,
+  },
+});
+
+interface MainState {
+    open: boolean;
+}
+
+export class Main extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context);
+
+        this.handleRequestClose = this.handleRequestClose.bind(this);
+        this.handleTouchTap = this.handleTouchTap.bind(this);
+
+        this.state = {
+            open: false,
+        } as MainState;
+    }
+
+    handleRequestClose() {
+        this.setState({
+            open: false,
+        } as MainState);
+    }
+
+    handleTouchTap() {
+        this.setState({
+            open: true,
+        } );
+    }
+
+    render() {
+        const standardActions = (
+            <FlatButton
+                label="Ok"
+                primary={true}
+                onTouchTap={this.handleRequestClose}
+                />
+        ) as any;
+
+        return (
+            <MuiThemeProvider muiTheme={muiTheme}>
+                <div style={styles.container}>
+                    <Dialog
+                        open={this.state.open}
+                        title="Super Secret Password"
+                        actions={standardActions}
+                        onRequestClose={this.handleRequestClose}
+                        >
+                        1-2-3-4-5
+                    </Dialog>
+                    <h1>Material-UI</h1>
+                    <h2>example project</h2>
+                    <RaisedButton
+                        label="Super Secret Password"
+                        secondary={true}
+                        onTouchTap={this.handleTouchTap}
+                    />
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}

src/ts/containers/member/emailConfirm.tsx

@@ -0,0 +1,44 @@
+
+
+import * as React from "react";
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import { deepOrange500 } from 'material-ui/styles/colors';
+import RaisedButton from 'material-ui/RaisedButton';
+
+const styles = {
+  container: {
+    textAlign: 'center',
+  }
+}
+
+const muiTheme = getMuiTheme({
+  palette: {
+    accent1Color: deepOrange500,
+  },
+});
+
+
+export class MemberEmailConfirm extends  React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+  
+  }
+
+
+  render() {
+
+    return (
+         <MuiThemeProvider muiTheme={muiTheme}>
+             <div style={styles.container}>
+             <h1>Email Conform!</h1>
+            <h2>You Can Do it</h2>
+            <RaisedButton label="Go to Main" primary={true}/>
+            
+             
+</div>
+        </MuiThemeProvider>
+    );
+  }
+}

src/ts/containers/member/regist.tsx

@@ -0,0 +1,212 @@
+/**
+ * In this file, we create a React component
+ * which incorporates components provided by Material-UI.
+ */
+import * as React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import Dialog from 'material-ui/Dialog';
+import { deepOrange500 } from 'material-ui/styles/colors';
+import FlatButton from 'material-ui/FlatButton';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+import * as ReactDOM from 'react-dom';
+
+import Divider from 'material-ui/Divider';
+import Paper from 'material-ui/Paper';
+import TextField from 'material-ui/TextField';
+
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+
+import Slider from 'material-ui/Slider';
+
+import * as http from "http"
+
+import { MemberRegistResult } from './registResult';
+
+
+const styles = {
+  body: {
+    textAlign: 'center',
+  },
+  container: {
+    textAlign: 'center',
+
+  },
+
+  textfield: {
+    width: 300,
+    marginLeft: 3
+  },
+
+  customWidth: {
+    width: 150,
+  },
+  button: {
+    margin: 12,
+  }
+};
+
+const muiTheme = getMuiTheme({
+  palette: {
+    accent1Color: deepOrange500,
+  },
+});
+
+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,
+
+      email:"",
+      name:"",
+      company:"",
+      phone:"",
+      pw:"",
+    };
+  }
+
+  handleChange = () => this.setState({  });
+
+  private emailInput: any;
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false,
+    });
+  }
+
+  handleTouchTap = () => {
+    this.setState({
+      open: true,
+    });
+  }
+
+  handleSignUp = () => {
+  
+    let output: string;
+    let obj: any; //new object declaration
+    obj = {"email":this.state.email,
+            "pwSalt":this.state.pw,
+            "name":this.state.name,
+            "company":this.state.company,
+            "phone":this.state.phone};
+
+
+output = JSON.stringify(obj);
+
+obj = {"value":output};
+
+fetch('http://192.168.1.209:8080/v1/example/echo', {
+  method: 'POST',
+  headers: {
+    'Accept': 'application/json',
+    // mode: 'no-cors'
+  },
+  body: JSON.stringify(obj)
+}).then(function (response) {
+    return response.json();
+}).then(function (json) {
+    console.log(json);
+}).catch((err) => {
+      console.log(err);
+}); 
+   
+
+
+
+
+  }
+  
+
+handleResultContainer = () => {
+  ReactDOM.render(
+    <MemberRegistResult />,
+    document.getElementById('example')
+);
+}
+
+
+  btnTouchTap = () => {
+    alert(event)
+  };
+
+  render() {
+
+    return (
+      <MuiThemeProvider muiTheme={muiTheme}>
+        
+          <div style={styles.container}>
+            Get started with Overflow
+              <br/>
+              <TextField
+                ref="email"
+                hintText="smith@gmail.com"
+                floatingLabelText="Email address*"
+                errorText=""
+                style={styles.textfield}
+                underlineShow={true} 
+                value={this.state.email}
+                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})}
+                
+                />
+              <br/>
+
+            <TextField 
+            ref="company"
+                hintText="Loafle"
+                 floatingLabelText="Company*"
+                style={styles.textfield}
+                underlineShow={true} 
+                value={this.state.company}
+                onChange={(e, newValue) => this.setState({ company: newValue})}
+                />
+              <br/>
+
+              <TextField 
+              ref="phone"
+                hintText="Loafle"
+                 floatingLabelText="Phone*"
+                style={styles.textfield}
+                underlineShow={true} 
+                value={this.state.phone}
+                onChange={(e, newValue) => this.setState({ phone: newValue})}
+                />
+              <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)}/>
+           
+          </div>
+        
+      </MuiThemeProvider>
+    );
+  }
+}
+

src/ts/containers/member/registResult.tsx

@@ -0,0 +1,44 @@
+
+
+import * as React from "react";
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import { deepOrange500 } from 'material-ui/styles/colors';
+import RaisedButton from 'material-ui/RaisedButton';
+
+const styles = {
+  container: {
+    textAlign: 'center',
+  }
+}
+
+const muiTheme = getMuiTheme({
+  palette: {
+    accent1Color: deepOrange500,
+  },
+});
+
+
+export class MemberRegistResult extends  React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+  
+  }
+
+
+  render() {
+
+    return (
+         <MuiThemeProvider muiTheme={muiTheme}>
+             <div style={styles.container}>
+             <h1>Starting Overflow!</h1>
+            <h2>Please Check Email</h2>
+            <RaisedButton label="ReSend Email" primary={true}/>
+            
+             
+</div>
+        </MuiThemeProvider>
+    );
+  }
+}

src/ts/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as injectTapEventPlugin from 'react-tap-event-plugin';
+import { MemberRegist } from './containers/member/regist';
+import { MemberRegistResult } from './containers/member/registResult';
+import { MemberEmailConfirm } from './containers/member/emailConfirm';
+
+
+import '../scss/index.scss';
+
+injectTapEventPlugin();
+
+ReactDOM.render(
+    <MemberRegist />,
+    document.getElementById('example')
+);

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "jsx": "react",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "newLine": "LF",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "outDir": "./dist/src/",
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "target": "es5"
+  },
+  "include": [
+    "./src/ts/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

tslint.json

@@ -0,0 +1,23 @@
+{
+  "rules": {
+    "indent": [
+      true,
+      4,
+      "spaces"
+    ],
+    "quotemark": [
+      "single"
+    ],
+    "no-unused-expression": true,
+    "no-duplicate-variable": true,
+    "curly": true,
+    "class-name": true,
+    "triple-equals": [
+      true
+    ],
+    "semicolon": [
+      true,
+      "always"
+    ]
+  }
+}

webpack.config.js

@@ -0,0 +1,93 @@
+const webpack         = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+    entry: {
+        ts: [
+            './src/ts/index.tsx'
+        ],
+        vendor: [
+            'react',
+            'react-dom',
+            'react-router',
+            'react-router-dom'
+        ]
+    },
+    output: {
+        filename: 'bundle.js',
+        path: __dirname + '/dist',
+    },
+
+    devtool: 'source-map',
+
+    devServer: {
+        hot:         true, // enable HMR on the server
+        inline: true,
+        historyApiFallback: true,
+        contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
+        publicPath:  '/' ,// match the output `publicPath`
+        host: '192.168.1.209',
+        port: 9091,
+        stats: { 
+            colors: true 
+        },
+    },
+
+    resolve: {
+        // Add '.ts' and '.tsx' as resolvable extensions.
+        extensions: ['.ts', '.tsx', '.js', '.json']
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader'
+            },
+            {
+                test: /\.scss$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: ['css-loader', 'postcss-loader', 'sass-loader']
+                })
+            },
+            {
+                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+                // loader: 'url?limit=10000'
+                loaders: [
+                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
+                    'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
+                ]
+            },
+
+            {
+                test: /\.tsx?$/,
+                loader: 'awesome-typescript-loader'
+            }
+
+        ]
+    },
+    plugins:     [
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            minChunks: Infinity,
+            filename: 'vendor.bundle.js'
+        }),
+        new ExtractTextPlugin({
+            filename: __dirname + '/dist/css/[name].bundle.css',
+            disable: false,
+            allChunks: true
+        }),
+        new webpack.HotModuleReplacementPlugin(), // enable HMR globally
+
+    ],
+    // When importing a module whose path matches one of the following, just
+    // assume a corresponding global variable exists and use that instead.
+    // This is important because it allows us to avoid bundling all of our
+    // dependencies, which allows browsers to cache those libraries between builds.
+    // externals: {
+    //     'react': 'React',
+    //     'react-dom': 'ReactDOM'
+    // },
+};