[#140382397] #10 Create login script

assets/js/__test__/LoginForm-test.jsx

@@ -10,7 +10,7 @@ import 'babel-polyfill';
 
 describe('LoginForm', () => {
   it('created without problem', () => {
-    const formLogin = new FormLogin({ url: 'tes' });
+    const formLogin = new LoginForm({ url: 'tes' });
     expect(formLogin).to.be.an.instanceof(LoginForm);
   });
 
@@ -42,7 +42,7 @@ describe('LoginForm', () => {
     expect(formLogin.state.email).to.equal(email);
   });
 
-  it('submit form without problem', () => {
+  it('handle password input without problem', () => {
     const formLogin = ReactTestUtils.renderIntoDocument(
       <LoginForm url="" />);
 
@@ -56,11 +56,11 @@ describe('LoginForm', () => {
     expect(formLogin.state.password).to.equal(password);
   });
 
-  it('handle password input without problem', () => {
+  it('submit form without problem', () => {
     const formLogin = ReactTestUtils.renderIntoDocument(
       <LoginForm url="" />);
 
-    const submitButton = ReactDOM.findDOMNode(formLogin.refs.submit);
+    const submitButton = ReactTestUtils.findRenderedDOMComponentWithTag(formLogin, 'Button');
     ReactTestUtils.Simulate.click(submitButton);
 
     const form = ReactTestUtils.findRenderedDOMComponentWithTag(formLogin, 'Form');

assets/js/components/FormLogin.jsx → assets/js/components/LoginForm.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, Input, Button, Image } from 'semantic-ui-react';
 import Server from '../lib/server';
 
-export default class FormLogin extends React.Component {
+export default class LoginForm extends React.Component {
 
   static propTypes = {
     url: React.PropTypes.string.isRequired,
@@ -41,18 +41,18 @@ export default class FormLogin extends React.Component {
         <Form.Group widths="equal">
           <Form.Field>
             <label htmlFor="id"> Email </label>
-            <Input ref="email" type="text" id="email" icon="user" iconPosition="left" placeholder="email" onChange={this.handleChange.bind(this, 'email')} />
+            <Input type="text" id="email" icon="user" iconPosition="left" placeholder="email" onChange={this.handleChange.bind(this, 'email')} />
           </Form.Field>
         </Form.Group>
 
         <Form.Group widths="equal">
           <Form.Field>
             <label htmlFor="password"> Password </label>
-            <Input ref="password" type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={this.handleChange.bind(this, 'password')} />
+            <Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={this.handleChange.bind(this, 'password')} />
           </Form.Field>
         </Form.Group>
 
-        <Button ref="submit" type="submit" fluid color="blue">Login</Button>
+        <Button type="submit" fluid color="blue">Login</Button>
 
       </Form>
     </div>

assets/js/login.jsx

 import React from 'react';
 import { Grid, Segment } from 'semantic-ui-react';
-import FormLogin from './components/FormLogin';
-import SSOLogin from './components/SSOLogin';
+import FormLogin from './components/LoginForm';
+// import SSOLogin from './components/SSOLogin';
 
 export default class Login extends React.Component {
 
@@ -20,14 +20,14 @@ export default class Login extends React.Component {
     <Grid columns={2} relaxed>
       <Grid.Column>
         <Segment basic>
-          <FormLogin />
+          <LoginForm url="/login/company" imgSrc="logo.png" imgSize="small" />
           {this.props.children}
         </Segment>
       </Grid.Column>
 
       <Grid.Column>
         <Segment basic>
-          <SSOLogin />
+          <LoginForm url="/login/sso" imgSrc="login.png" imgSize="small" />
           {this.props.children}
         </Segment>
       </Grid.Column>