登入登出修改完成

README.md

@@ -1,19 +1,33 @@
 # 參與人員
 
-  * [Polo](https://github.com/polo13999)
-  * [Tomas](https://github.com/horsekitlin)
+* [Polo](https://github.com/polo13999)
+* [Tomas](https://github.com/horsekitlin)
 
 # config schema
 
-```json
-export config = {
-  "firebaseConfig": {
-    "apiKey": "string",
-  "authDomain": "string",
-  "databaseURL": "string",
-  "storageBucket": "string",
-  "messagingSenderId": "string",
-  "projectId": "string"
-  }
+configs/initialConfig.js
+
+```javascript
+export const initialAdmin = {
+  logo:
+    "http://play.nownews.com/wp-content/uploads/2017/08/5995a97ec6113d46af747352_201708172234-768x640.jpg",
+  email: "[email protected]",
+  password: "yourpassword",
+  name: "admin",
+  company: "哈囉世界股份有限公司",
+  isAdmin: true
+};
+
+export const firebaseConfig = {
+  apiKey: "string",
+  authDomain: "string",
+  databaseURL: "string",
+  storageBucket: "string",
+  messagingSenderId: "string",
+  projectId: "string"
+};
+
+export const storeKeys = {
+  auth: "_authoration"
 };
-```
+```

src/App.js

@@ -24,14 +24,7 @@ export default class App extends Component {
   render() {
     return (
       <MuiThemeProvider muiTheme={muiTheme}>
-        <Switch>
-          <AuthWrapper>
-            <Route path="/create/menu/:StoreKey" component={CreateNewmenu} />
-            <Route path="/create/store/" component={CreateStore} />
-            <Route path="/store" component={Store} />
-            <Route exact path="/" component={Login} />
-          </AuthWrapper>
-        </Switch>
+        <AuthWrapper />
       </MuiThemeProvider>
     );
   }

src/actions/auth.js

@@ -4,3 +4,7 @@ export const LoginAction = payload => ({
   type: types.LOGIN,
   payload
 });
+
+export const LOGOUTAction = () => ({
+  type: types.LOGOUT
+});

src/components/AuthWrapper/RightIconButton.js

@@ -5,12 +5,14 @@ import IconMenu from "material-ui/IconMenu";
 import IconButton from "material-ui/IconButton";
 import MenuItem from "material-ui/MenuItem";
 import Divider from "material-ui/Divider";
+import { Map } from "immutable";
 
 class RightIconButton extends PureComponent {
   static propTypes = {
     LOGON: propTypes.string.isRequired,
-    user: propTypes.object.isRequired,
-    isAuth: propTypes.bool.isRequired
+    user: propTypes.instanceOf(Map).isRequired,
+    isAuth: propTypes.bool.isRequired,
+    Logout: propTypes.func.isRequired
   };
   render() {
     if (this.props.isAuth === false) {
@@ -22,11 +24,10 @@ class RightIconButton extends PureComponent {
               iconStyle={{ color: "white" }}
             />
           }
-        >
-          <MenuItem onClick={this.props.setLoginModal} primaryText="登入" />
-        </IconMenu>
+        />
       );
     } else {
+      console.log(this.props.user.toObject());
       return (
         <IconMenu
           iconButtonElement={
@@ -35,7 +36,7 @@ class RightIconButton extends PureComponent {
         >
           <MenuItem primaryText="其他選項" />
           <Divider />
-          <MenuItem onClick={this.props.logout} primaryText="登出" />
+          <MenuItem onClick={this.props.Logout} primaryText="登出" />
         </IconMenu>
       );
     }

src/components/AuthWrapper/index.js

@@ -1,72 +1,38 @@
-import React, { PureComponent } from "react";
-import propTypes from "prop-types";
+import React from "react";
 import AppBar from "material-ui/AppBar";
 import { Grid, Row } from "react-flexbox-grid";
-import FirebaseManager from "../../utils/FirebaseManager";
 import RightIconButton from "./RightIconButton";
 import IconButton from "material-ui/IconButton";
+import LoginScene from "../../containers/Login";
 import Sidebar from "../utils/Sidebar";
 
-class AuthWrapper extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sidebar: false
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { auth, match } = this.props;
-    const isAuth = auth.get("isAuth");
-    const nextAuth = nextProps.auth.get("isAuth");
-
-    if (nextAuth !== isAuth && isAuth === false) {
-      this.props.goTo("/");
-    }
-  }
-  componentDidMount() {
-    const { auth, match } = this.props;
-    const isAuth = auth.get("isAuth");
-    if (isAuth === false) {
-      this.props.goTo("/");
-    }
-  }
-  render() {
-    const { auth } = this.props;
-
-    return (
-      <Grid fluid>
-        <AppBar
-          title="訂便當"
-          onLeftIconButtonClick={() => {
-            if (FirebaseManager.user) {
-              this.setState({ sidebar: true });
-            }
-          }}
-          iconElementLeft={
-            <IconButton
-              tooltipPosition="bottom-left"
-              iconClassName="fa fa-bars"
-            />
-          }
-          iconElementRight={
-            <RightIconButton
-              logout={this.logout}
-              setLoginModal={() => this.setState({ LoginModal: true })}
-              isAuth={auth.get("isAuth")}
-              LOGON={auth.get("LOGON")}
-              user={auth.get("user")}
-            />
-          }
-        />
-        <Row>{this.props.children}</Row>
-        <Sidebar
-          openSidebar={() => this.setState({ sidebar: false })}
-          isOpen={this.state.sidebar}
-        />
-      </Grid>
-    );
-  }
-}
+const AuthWrapper = props => {
+  const { auth } = props;
+  console.log(auth.toObject());
+  return !auth.get("isAuth") ? (
+    <LoginScene auth={auth} />
+  ) : (
+    <Grid fluid>
+      <AppBar
+        title="訂便當"
+        iconElementLeft={
+          <IconButton
+            tooltipPosition="bottom-left"
+            iconClassName="fa fa-bars"
+          />
+        }
+        iconElementRight={
+          <RightIconButton
+            Logout={props.Logout}
+            isAuth={auth.get("isAuth")}
+            LOGON={auth.get("LOGON")}
+            user={auth.get("user")}
+          />
+        }
+      />
+      <Sidebar openSidebar={() => false} isOpen={false} />
+    </Grid>
+  );
+};
 
 export default AuthWrapper;

src/components/Login/index.js

@@ -4,6 +4,7 @@ import TextField from "material-ui/TextField";
 import RaisedButton from "material-ui/RaisedButton";
 import styled from "styled-components";
 import { Map } from "immutable";
+import AppBar from "material-ui/AppBar";
 
 const Container = styled.div`
   width: 90vw;
@@ -45,44 +46,47 @@ class LoginScene extends Component {
   render() {
     const { auth } = this.props;
     return (
-      <Container>
-        <LoginForm>
-          <Fieldset>
-            <CenterRow>
-              <TextField
-                onChange={e => this.setState({ account: e.target.value })}
-                hintText="帳號"
-                errorText={auth.get("accountErrorText")}
-              />
-            </CenterRow>
-            <CenterRow>
-              <TextField
-                onChange={e => this.setState({ password: e.target.value })}
-                type="password"
-                hintText="密碼"
-                errorText={auth.get("passwordErrorText")}
-              />
-            </CenterRow>
-            <CenterRow>
-              <RaisedButton
-                onClick={e => this.props.Login(this.state)}
-                style={{ width: "100%", marginTop: 10 }}
-                disabled={auth.get("isFetching")}
-                primary
-                label="登入"
-              />
-            </CenterRow>
-            <CenterRow>
-              <RaisedButton
-                style={{ width: "100%", marginTop: 10 }}
-                primary
-                disabled={auth.get("isFetching")}
-                label="註冊"
-              />
-            </CenterRow>
-          </Fieldset>
-        </LoginForm>
-      </Container>
+      <div>
+        <AppBar title="訂便當" />
+        <Container>
+          <LoginForm>
+            <Fieldset>
+              <CenterRow>
+                <TextField
+                  onChange={e => this.setState({ account: e.target.value })}
+                  hintText="帳號"
+                  errorText={auth.get("accountErrorText")}
+                />
+              </CenterRow>
+              <CenterRow>
+                <TextField
+                  onChange={e => this.setState({ password: e.target.value })}
+                  type="password"
+                  hintText="密碼"
+                  errorText={auth.get("passwordErrorText")}
+                />
+              </CenterRow>
+              <CenterRow>
+                <RaisedButton
+                  onClick={e => this.props.Login(this.state)}
+                  style={{ width: "100%", marginTop: 10 }}
+                  disabled={auth.get("isFetching")}
+                  primary
+                  label="登入"
+                />
+              </CenterRow>
+              <CenterRow>
+                <RaisedButton
+                  style={{ width: "100%", marginTop: 10 }}
+                  primary
+                  disabled={auth.get("isFetching")}
+                  label="註冊"
+                />
+              </CenterRow>
+            </Fieldset>
+          </LoginForm>
+        </Container>
+      </div>
     );
   }
 }

src/components/utils/Sidebar.js

@@ -6,34 +6,42 @@ import MenuItem from "material-ui/MenuItem";
 import Divider from "material-ui/Divider";
 import FontIcon from "material-ui/FontIcon";
 import AppBar from "material-ui/AppBar";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
-class Sidebar extends React.PureComponent{
+class Sidebar extends React.PureComponent {
   static propTypes = {
     isOpen: propTypes.bool.isRequired,
-    openSidebar: propTypes.func.isRequired,
+    openSidebar: propTypes.func.isRequired
   };
 
-  render(){
-    return(
+  render() {
+    return (
       <Drawer width={200} open={this.props.isOpen} zDepth={1}>
-      <AppBar
-        onLeftIconButtonClick={() => console.log("left icon")}
-        iconElementLeft={< div />}
-        iconElementRight={< IconButton onClick = {this.props.openSidebar}
-      iconClassName = "fa fa-arrow-left" iconStyle = {{ color: "white" }}/>}/>
-      <Link to="/store">
-        <MenuItem
-          primaryText="商店列表"
-          leftIcon={< FontIcon className = "fa fa-building" />}/>
-      </Link>
-      <Link to="/settings">
-        <MenuItem
-          primaryText="網站設定"
-          leftIcon={< FontIcon className = "fa fa-gear" />}/>
-      </Link>
-      <Divider/>
-    </Drawer>
+        <AppBar
+          onLeftIconButtonClick={() => "left icon"}
+          iconElementLeft={<div />}
+          iconElementRight={
+            <IconButton
+              onClick={this.props.openSidebar}
+              iconClassName="fa fa-arrow-left"
+              iconStyle={{ color: "white" }}
+            />
+          }
+        />
+        <Link to="/store">
+          <MenuItem
+            primaryText="商店列表"
+            leftIcon={<FontIcon className="fa fa-building" />}
+          />
+        </Link>
+        <Link to="/settings">
+          <MenuItem
+            primaryText="網站設定"
+            leftIcon={<FontIcon className="fa fa-gear" />}
+          />
+        </Link>
+        <Divider />
+      </Drawer>
     );
   }
 }

src/configs/initialConfig.js

@@ -1,8 +1,22 @@
 export const initialAdmin = {
-  logo: "http://play.nownews.com/wp-content/uploads/2017/08/5995a97ec6113d46af747352_201708172234-768x640.jpg",
+  logo:
+    "http://play.nownews.com/wp-content/uploads/2017/08/5995a97ec6113d46af747352_201708172234-768x640.jpg",
   email: "[email protected]",
   password: "abc123",
   name: "admin",
   company: "哈囉世界股份有限公司",
-  isAdmin: true,
+  isAdmin: true
+};
+
+export const firebaseConfig = {
+  apiKey: "AIzaSyCJshSB2O3ZG84vRqT9hOMJPDtQXQqOY7U",
+  authDomain: "dinbandan-46e8c.firebaseapp.com",
+  databaseURL: "https://dinbandan-46e8c.firebaseio.com",
+  storageBucket: "dinbandan-46e8c.appspot.com",
+  messagingSenderId: "544525397793",
+  projectId: "dinbandan-46e8c"
+};
+
+export const storeKeys = {
+  auth: "_authoration"
 };