Merge pull request #10 from horsekitlin/develop

Develop

.travis.yml

@@ -0,0 +1,16 @@
+language: node_js
+node_js:
+  - "10"
+addons:
+  ssh_known_hosts:
+  - 139.162.9.68
+before_install:
+  - 'nvm install-latest-npm'
+env:
+  matrix:
+  - REACT=16.4
+sudo: false
+script:
+  - npm run test
+after_success:
+  - npm run coverage

src/App.js

@@ -36,7 +36,7 @@ class App extends Component {
     <MainScene
       currentPage={this.state.routes.currentPage}
       changePage={this.changeCurrentPage}
-      logout={() => this.setLoginState(false)} />
+      logout={() => this.setLoginState({isLogin: false})} />
 
   LoginScene = () =>
     <LoginScene handleLogin={this.handleLogin}/>

src/MainScene.js

@@ -1,9 +1,25 @@
 import React from 'react';
 import HomeScene from './components/HomeScene';
 import UserManagerScene from './components/UserManagerScene';
+import { Sidebar, Segment, Menu, Button, Dropdown, Icon } from 'semantic-ui-react';
 
+const Navbar = ({handleOpenSidebar, logout}) => 
+  <Menu>
+    <Menu.Item>
+      <Button icon='bars' circular onClick={handleOpenSidebar}/>
+    </Menu.Item>
+    <Menu.Menu position='right'>
+    <Menu.Item>
+      <Dropdown icon='cog' labeled button>
+        <Dropdown.Menu>
+          <Dropdown.Item text='登出'onClick={logout} />
+        </Dropdown.Menu>
+      </Dropdown>
+    </Menu.Item>
+    </Menu.Menu>
+  </Menu>
 
-const MainScene = ({currentPage, ...props}) => {
+const MainSceneContent = ({currentPage, ...props}) => {
   switch (currentPage) {    
     case 'userManager':
       return <UserManagerScene {...props} />;
@@ -13,4 +29,38 @@ const MainScene = ({currentPage, ...props}) => {
   }
 };
 
-export default MainScene;
+class MainContentWithNavbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSidebar: false
+    };
+  }
+
+  render() {
+    return(
+      <Sidebar.Pushable as={Segment} basic style={{width: '100vw', height: '100vh'}}>
+        <Sidebar
+          as={Menu}
+          animation='overlay'
+          icon='labeled'
+          onHide={() => this.setState({showSidebar: false})}
+          vertical
+          visible={this.state.showSidebar}
+          width='thin'>
+          <Menu.Item> <Icon name='user'/>使用者列表</Menu.Item>
+          <Menu.Item> <Icon name='map marker'/>餐廳列表</Menu.Item>
+          <Menu.Item> <Icon name='calendar alternate outline'/>揪團列表</Menu.Item>
+        </Sidebar>
+        <Sidebar.Pusher>
+          <Navbar
+            logout={this.props.logout}
+            handleOpenSidebar={() => this.setState({showSidebar: true})} />
+          <MainSceneContent {...this.props} />
+        </Sidebar.Pusher>
+      </Sidebar.Pushable>
+    );
+  }
+}
+
+export default MainContentWithNavbar;

src/components/HomeScene/index.js

@@ -2,9 +2,6 @@ import React from 'react';
 
 const HomeScene = ({logout, changePage}) =>
   <div>
-    <button onClick={logout}>
-      登出
-    </button>
     <button onClick={() => changePage('userManager')}>
       Go to UserManager
     </button>

src/components/LoginScene/index.js

@@ -1,7 +1,59 @@
 import React, { Component } from 'react';
 import propTypes from 'prop-types';
-import { Form, Label } from 'semantic-ui-react'
+import logo from '../../logo.svg';
+import { Form, Label, Container, Image } from 'semantic-ui-react';
 
+export const checkEmail = v => {
+  if (v === '') {
+    return {
+      emailErr: true,
+      emailErrMsg: 'Email不能為空'
+    };
+  }
+
+  const re = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+  if (!re.test(v)) {
+    return {
+      emailErr: true,
+      emailErrMsg: 'Email格式錯誤'
+    };
+  }
+
+  return {
+    emailErr: false,
+    emailErrMsg: ''
+  };
+};
+
+export const checkPassword = v => {
+  if (v === '') {
+    return {
+      passwordErr: true,
+      passwordErrMsg: '密碼不能為空'
+    };
+  }
+
+  if (v.length < 8) {
+    return {
+      passwordErr: true,
+      passwordErrMsg: '密碼長度至少要8個字元'
+    };
+  }
+
+  return {
+    passwordErr: false,
+    passwordErrMsg: ''
+  };
+};
+
+
+const ErrorMessage = ({isError, message}) =>
+  isError &&
+  (
+    <Label basic pointing style={{color: 'red'}}>
+      {message}
+    </Label>
+  )
 class LoginScene extends Component {
   static propTypes = {
     handleLogin: propTypes.func.isRequired
@@ -10,6 +62,8 @@ class LoginScene extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      emailErr: false,
+      passwordErr: false,
       emailErrMsg: '',
       passwordErrMsg: '',
       email: '',
@@ -25,68 +79,81 @@ class LoginScene extends Component {
     this.setState({
       [name]: value
     });
+
+    this.verifyFields(name, value);
   }
 
-  verifyFields = ({email, password}) => {
-    if(email === '') return {
-      isVerify: false,
-      error: {
-        emailErrMsg: 'Email 不可為空'
-      }
-    };
-
-    if(password === '') return {
-      isVerify: false,
-      error: {
-        passwordErrMsg: 'Password 不可為空'
-      }
-    };
-
-    return {isVerify: true};
+  verifyFields = (name, value) => {
+    switch (name) {
+      case 'email':
+        this.setState(checkEmail(value));
+        break;
+      case 'password':
+        this.setState(checkPassword(value));
+        break;
+      default:
+        break;
+    }
   };
 
-  handleSubmit = () => {
-    const {isVerify, error} = this.verifyFields(this.state);
+  disabledButton = () => {
+    const {emailErr, passwordErr, email, password} = this.state;
 
-    isVerify
-      ? this.props.handleLogin(this.state)
-      : this.setState(error);
+    return emailErr
+      || passwordErr
+      || email === ''
+      || password === '';
   }
 
+  handleSubmit = () =>
+    this.props.handleLogin(this.state)
+
+  emailField = () =>
+    <Form.Field>
+      <Form.Input
+        name='email'
+        error={this.state.emailErrMsg !== ''}
+        placeholder='Email'
+        onChange={this.handleInputChange}
+        value={this.state.email} />
+      <ErrorMessage
+        message={this.state.emailErrMsg}
+        isError={this.state.emailErrMsg !== ''}/>
+    </Form.Field>
+
+  passwordField = () =>
+    <Form.Field>
+      <Form.Input
+        name='password'
+        type='password'
+        error={this.state.passwordErrMsg !== ''}
+        onChange={this.handleInputChange}
+        value={this.state.password}/>
+      <ErrorMessage
+        message={this.state.passwordErrMsg}
+        isError={this.state.passwordErrMsg !== ''}/>
+    </Form.Field>
+
+  loginButton = () =>
+    <Form.Field>
+      <Form.Button
+        primary
+        disabled={this.disabledButton()}
+        onClick={this.handleSubmit} >
+        登入
+      </Form.Button>
+    </Form.Field>
+
   render() {
     return (
-      <div>
+      <Container  text className='p-1'>
+        <Image src={logo}  centered />
         <Form>
-          <Form.Field>
-            <Form.Input
-              name='email'
-              error={this.state.emailErrMsg !== ''}
-              placeholder='Email'
-              onChange={this.handleInputChange}
-              value={this.state.email} />
-            <Label basic pointing style={{color: 'red'}}>
-              {this.state.emailErrMsg}
-            </Label>
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              name='password'
-              error={this.state.passwordErrMsg !== ''}
-              onChange={this.handleInputChange}
-              value={this.state.password}/>
-            <Label basic pointing style={{color: 'red'}}>
-              {this.state.passwordErrMsg}
-            </Label>
-          </Form.Field>
-          <Form.Field>
-            <Form.Button  onClick={this.handleSubmit}>
-              登入
-            </Form.Button>
-
-          </Form.Field>
+          {this.emailField()}
+          {this.passwordField()}
+          {this.loginButton()}
         </Form>
-        <h1>Login Scene</h1>
-      </div>
+      </Container>
     );
   }
 }