new update

package.json

@@ -3,17 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "firebase": "^4.1.3",
-    "firebaseui": "^2.3.0",
-    "material-ui": "^0.18.3",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "firebase": "^4.13.1",
+    "firebaseui": "^2.7.0",
+    "material-ui": "^0.18.7",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
     "react-tap-event-plugin": "^2.0.1"
   },
   "devDependencies": {
-    "firebaseui": "^2.2.1",
-    "gh-pages": "^1.0.0",
-    "react-scripts": "1.0.7"
+    "gh-pages": "^1.1.0",
+    "react-scripts": "^1.0.7"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.js

@@ -0,0 +1,117 @@
+import React, {Component} from 'react';
+import * as firebase from "firebase";
+import * as FirebaseUI from 'firebaseui'
+import AppBar from 'material-ui/AppBar';
+import FontIcon from 'material-ui/FontIcon';
+import IconButton from 'material-ui/IconButton';
+import RaisedButton from 'material-ui/RaisedButton';
+
+import Login from './Login';
+import Dashboard from './Dashboard';
+
+var config = {
+    apiKey: "AIzaSyDnIK-Y3rK8joJ5B_nBZMkkmETgKNoY7Us",
+    authDomain: "savethelink-9df2f.firebaseapp.com",
+    databaseURL: "https://savethelink-9df2f.firebaseio.com",
+    projectId: "savethelink-9df2f",
+    storageBucket: "savethelink-9df2f.appspot.com",
+    messagingSenderId: "553681523097"
+};
+firebase.initializeApp(config);
+const ui = new FirebaseUI.auth.AuthUI(firebase.auth());
+
+class App extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            currentUser: '',
+            isLoggedIn: false,
+        };
+
+        this.registerLogin = this.registerLogin.bind(this);
+        this.logout = this.logout.bind(this);
+    }
+
+    checkLogin() {
+        let self = this;
+        firebase.auth().onAuthStateChanged(function (user) {
+            if (user) {
+                self.setState({
+                    currentUser: user,
+                    isLoggedIn: true
+                });
+            }
+            else {
+                self.setState({
+                    isLoggedIn: false
+                });
+            }
+        });
+    }
+
+    registerLogin() {
+        let self = this;
+        let uiConfig = {
+            signInOptions: [
+                firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+                firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+                firebase.auth.TwitterAuthProvider.PROVIDER_ID,
+                firebase.auth.GithubAuthProvider.PROVIDER_ID,
+                firebase.auth.EmailAuthProvider.PROVIDER_ID,
+                firebase.auth.PhoneAuthProvider.PROVIDER_ID
+            ],
+            'callbacks': {
+                signInSuccess: function(currentUser, credential, redirectUrl) {
+                    self.setState({
+                        currentUser: currentUser,
+                        isLoggedIn: true
+                    });
+                }
+            },
+        };
+        ui.start('#firebaseui-auth-container', uiConfig);
+    }
+
+    logout() {
+        let self = this;
+        firebase.auth().signOut().then(function() {
+            // Sign-out successful.
+            self.setState({
+                isLoggedIn: false
+            });
+        }, function(error) {
+            // An error happened.
+        });
+    }
+
+    componentDidMount() {
+        this.checkLogin();
+    }
+
+    render() {
+        if (this.state.isLoggedIn) {
+            return (
+                <div>
+                    <AppBar className={"header"} title="SaveTheLink" iconElementLeft={<IconButton><FontIcon
+                        className="material-icons">bookmark_border</FontIcon></IconButton>}>
+                        <div style={{margin: 15}}>
+                            <RaisedButton label="Logout" primary={true} onClick={this.logout} />
+                        </div>
+                    </AppBar>
+                    <Dashboard currentUser={this.state.currentUser} />
+                </div>
+            );
+        } else {
+            return (
+                <div>
+                    <AppBar className={"header"} title="SaveTheLink" iconElementLeft={<IconButton><FontIcon
+                        className="material-icons">bookmark_border</FontIcon></IconButton>}/>
+                    <Login registerLogin={this.registerLogin} />
+                </div>
+            );
+        }
+    }
+}
+
+export default App;

src/components/Dashboard.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+class Dashboard extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            open: false,
+            currentTab: null
+        };
+
+        this.handleToggle = this.handleToggle.bind(this);
+        this.openTab = this.openTab.bind(this);
+    }
+
+    handleToggle = () => this.setState({open: !this.state.open});
+
+    openTab(tabName) {
+        this.setState({
+            open: false,
+            currentTab: tabName,
+        });
+    }
+
+    render() {
+        return (<h1>sa</h1>);
+    }
+}
+
+export default Dashboard;

src/components/Login.js

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import '../css/firebaseui.css';
+
+class Login extends Component {
+    componentWillMount() {
+        this.props.registerLogin();
+    }
+
+    render() {
+        return (
+            <div>
+                <div id="firebaseui-auth-container"></div>
+            </div>
+        );
+    }
+}
+
+export default Login;