first commit

makkaba · Aug 14, 2017 · 089327c · 089327c
commit 089327c
Show file tree

Hide file tree

Showing 17 changed files with 9,154 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/src/config
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "login",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "1.0.10"
+  },
+  "dependencies": {
+    "firebase": "^4.2.0",
+    "react": "^15.6.1",
+    "react-bootstrap": "^0.31.2",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.5",
+    "react-router-dom": "^4.1.2",
+    "redux": "^3.7.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,15 @@
+export const LOGIN = 'LOGIN';
+export const LOGOUT = 'LOGOUT';
+
+export function login(user){
+    return {
+        type: LOGIN,
+        user
+    }
+}
+
+export function logout(){
+    return {
+        type: LOGOUT
+    }
+}
diff --git a/src/components/Auth.js b/src/components/Auth.js
@@ -0,0 +1,28 @@
+export function isLogin(){
+        firebase.auth().getRedirectResult().then(function(result) {
+            if (result.credential) {
+                // This gives you a Facebook Access Token. You can use it to access the Facebook API.
+                var token = result.credential.accessToken;
+                console.log('login success');
+                // ...
+            }
+            // The signed-in user info.
+            var user = result.user;
+
+            console.log(user);
+            /* 
+            user.displayName            
+            user.email
+            user.photoURL
+            */
+            }).catch(function(error) {
+            // Handle Errors here.
+            var errorCode = error.code;
+            var errorMessage = error.message;
+            // The email of the user's account used.
+            var email = error.email;
+            // The firebase.auth.AuthCredential type that was used.
+            var credential = error.credential;
+            // ...
+        });
+    }
diff --git a/src/components/DashBoard.js b/src/components/DashBoard.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class DashBoard extends Component{
+    render(){
+        return(
+            <div>dash board!!!</div>
+        );
+    }
+}
+
+export default DashBoard;
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import LoginForm from './LoginForm';
+
+class Home extends Component{
+    render(){
+        return(
+            <div>home!!</div>
+        );
+    }
+}
+
+export default Home;
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {login} from '../actions';
+import { Button } from 'react-bootstrap';
+import firebase from 'firebase';
+
+
+class LoginForm extends Component{
+
+    loginHandler(){
+        var fbProvider = new firebase.auth.FacebookAuthProvider();
+        firebase.auth().signInWithRedirect(fbProvider);
+    }
+    logoutHandler(){
+        firebase.auth().signOut().then(function() {
+            // Sign-out successful.
+            // this.props.logout();
+        }, function(error) {
+        // An error happened.
+        });
+    }
+    render(){
+        return(
+        <div>
+           <Button onClick={()=>this.loginHandler()}>
+               로그인
+            </Button>
+            <Button onClick={()=>this.logoutHandler()}>
+               로그아웃
+            </Button>
+        </div>
+        );
+    }
+}
+
+export default connect(null, {login})(LoginForm);
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { Redirect, Route } from 'react-router';
+// import { connect } from 'react-redux';
+
+
+// const user = this.state.user ? this.state.user : '';
+// console.log("router:", user);
+console.log('private route');
+function PrivateRoute({ component: Component, user, ...rest}){
+  console.log("private user",user);
+  return (
+    <Route {...rest} render={props => (
+      user ? (
+        <Component {...props}/>
+      ) : (
+        <Redirect to={{
+          pathname: '/',
+          state: { from: props.location }
+        }}/>
+      )
+    )}/>  
+  );
+}
+
+/*
+const PrivateRoute = ({ component: Component, ...rest }) => (
+  <Route {...rest} render={props => (
+    props.loggedIn ? (
+      <Component {...props}/>
+    ) : (
+      <Redirect to={{
+        pathname: '/login',
+        state: { from: props.location }
+      }}/>
+    )
+  )}/>
+)
+*/
+// function mapStateToProps(state){
+//   return {
+//     user: state.user
+//   };
+// }
+
+// export default connect(mapStateToProps, null)(PrivateRoute);
+
+export default PrivateRoute;
diff --git a/src/container/App.js b/src/container/App.js
@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import LoginForm from './LoginForm';
+import * as firebase from '../config/firebase';
+import { login } from '../actions';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router';
+import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
+
+import { Provider } from 'react-redux';
+import PrivateRoute from './PrivateRoute';
+import Home from './Home';
+import DashBoard from './DashBoard';
+
+/*
+TODO: 
+1. 로그인 정보를 action을 통해서 store로 넘긴다. (o)
+2. 저장된 user 정보를 PrivateRoute에서 connect를 사용하여 스마트 컴포넌트로 만든 후 
+this.props.user를 조회하여 분기한다.
+*/ 
+
+
+class App extends Component{
+    constructor(){
+        super();
+        this.state  = {
+            loggedIn: false,
+            user: ''
+        };
+        console.log('constructor');
+    }
+
+    componentDidMount(){
+        console.log('didmount');
+
+       /* TODO: 
+       this.state가 안되는 경우 bind 하는 방법을 찾아서 바꾸자
+       */
+        var self = this;
+
+        firebase.auth.onAuthStateChanged(function(user) {
+            if (user) {
+                self.setState({loggedIn: true, user: user});
+            } else {
+                self.setState({loggedIn: false, user: ''});
+            }
+        });
+
+        /*
+        //리다이렉트를 다룸
+        firebase.auth.getRedirectResult().then(function(result) {
+            if (result.credential) {
+                // This gives you a Facebook Access Token. You can use it to access the Facebook API.
+                var token = result.credential.accessToken;
+                console.log('login success');
+                self.setState({loggedIn: true});
+                
+                this.props.login(result.user);
+                console.log('store user');
+            }
+            console.log('방금 리다이렉트 되었음!', result.user);
+            
+            // user.displayName            
+            // user.email
+            // user.photoURL
+            
+            }).catch(function(error) {
+            
+            var errorCode = error.code;
+            var errorMessage = error.message;
+            
+            var email = error.email;
+            // The firebase.auth.AuthCredential type that was used.
+            var credential = error.credential;
+            
+        });
+        */
+    }
+
+    render(){
+        const { loggedIn, user } = this.state;
+        console.log(loggedIn);
+        return (
+                <BrowserRouter>
+                    <div>
+                        <div>
+                            <ul>
+                                <li><Link to='/'>홈</Link></li>    
+                                <li><Link to='/dashboard'>대쉬보드</Link></li>
+                            </ul>
+                            <LoginForm />
+                        </div>
+                        <Switch>
+
+                            <Route exact path ='/' component={Home}/>
+                            <PrivateRoute component={DashBoard} user={user} exact path='/dashboard' />
+                        </Switch>
+                    </div>
+                </BrowserRouter>
+        );
+    }
+}
+
+
+export default connect( null, {login})(App);