login form

js/components/ascribe_forms/form_login.js

@@ -0,0 +1,57 @@
+'use strict';
+
+import React from 'react';
+
+import apiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+
+let LoginForm = React.createClass({
+    mixins: [FormMixin],
+
+
+    url() {
+        return apiUrls.users_login;
+    },
+    
+    getFormData() {
+        return {
+            email: this.refs.email.state.value,
+            password: this.refs.password.state.value
+        };
+    },
+
+    renderForm() {
+        return (
+            <form id="login_modal_content" role="form" onSubmit={this.submit}>
+                <input className="invisible" type="email" name="fake_consignee"/>
+                <input className="invisible" type="password" name="fake_password"/>
+                <InputText
+                    ref="email"
+                    placeHolder="Email"
+                    required="required"
+                    type="email"
+                    submitted={this.state.submitted}/>
+                <InputText
+                    ref="password"
+                    placeHolder="Password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+                <div>
+                        Forgot your password&#63; <a className="button" href="#" id="request_reset_pwd_from_login_btn">Reset password</a>.
+                </div>
+                <div>
+                    Not a member yet&#63; <a className="button" href="#" id="signup_from_login_btn">Sign up</a>.
+                </div>
+                <ButtonSubmitOrClose
+                    text="LOGIN"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default LoginForm;

js/components/header.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+//import Router from 'react-router';
 
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
@@ -11,9 +11,12 @@ import Navbar from 'react-bootstrap/lib/Navbar';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
+import ModalWrapper from '../components/ascribe_modal/modal_wrapper';
+import LoginForm from '../components/ascribe_forms/form_login';
+
 import { getLangText } from '../utils/lang_utils';
 
-let Link = Router.Link;
+//let Link = Router.Link;
 
 let Header = React.createClass({
 
@@ -33,6 +36,9 @@ let Header = React.createClass({
     onChange(state) {
         this.setState(state);
     },
+    handleLoginSuccess(){
+        UserActions.fetchCurrentUser();
+    },
 
     render() {
         return (
@@ -44,6 +50,13 @@ let Header = React.createClass({
                     </a>
                 </Nav>
                 <Nav right>
+                    <ModalWrapper
+                        button={<div className='btn btn-default btn-sm'>LOGIN</div>}
+                        title='Log in to ascribe'
+                        handleSuccess={this.handleLoginSuccess}
+                        tooltip='Log in to ascribe'>
+                        <LoginForm />
+                    </ModalWrapper>
                     <DropdownButton eventKey="1" title={this.state.currentUser.username}>
                         <MenuItem eventKey="1" href="/art/account_settings/">{getLangText('Account Settings')}</MenuItem>
                         <li className="divider"></li>

js/constants/api_urls.js

@@ -3,7 +3,6 @@
 import AppConstants from './application_constants';
 
 let apiUrls = {
-    'user': AppConstants.baseUrl + 'users/',
     'piece': AppConstants.baseUrl + 'pieces/${piece_id}',
     'pieces_list': AppConstants.baseUrl + 'pieces/',
     'piece_extradata': AppConstants.baseUrl + 'pieces/${piece_id}/extradata/',
@@ -22,9 +21,9 @@ let apiUrls = {
     'ownership_loans': AppConstants.baseUrl + 'ownership/loans/',
     'ownership_loans_confirm': AppConstants.baseUrl + 'ownership/loans/confirm/',
     'ownership_loans_deny': AppConstants.baseUrl + 'ownership/loans/deny/',
-
+    'note_notes': AppConstants.baseUrl + 'note/notes/',
-    'note_notes': AppConstants.baseUrl + 'note/notes/'
+    'user': AppConstants.baseUrl + 'users/',
-
+    'users_login': AppConstants.baseUrl + 'users/login/'
 };
 
 export default apiUrls;