password reset

modal switch problems

js/components/ascribe_forms/form_login.js

@@ -7,6 +7,9 @@ import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
+import SignupModal from '../ascribe_modal/modal_signup';
+import PasswordResetRequestModal from '../ascribe_modal/modal_password_request_reset';
+
 let LoginForm = React.createClass({
     mixins: [FormMixin],
 
@@ -21,7 +24,6 @@ let LoginForm = React.createClass({
             password: this.refs.password.state.value
         };
     },
-
     renderForm() {
         return (
             <form id="login_modal_content" role="form" onSubmit={this.submit}>
@@ -40,10 +42,14 @@ let LoginForm = React.createClass({
                     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>.
+                    Forgot your password&#63;
+                    <PasswordResetRequestModal
+                        button={<a className="button" href="#"> Reset password</a>}/>
                 </div>
                 <div>
-                    Not a member yet&#63; <a className="button" href="#" id="signup_from_login_btn">Sign up</a>.
+                    Not a member yet&#63;
+                    <SignupModal
+                        button={<a className="button" href="#"> Sign up</a>}/>
                 </div>
                 <ButtonSubmitOrClose
                     text="LOGIN"

js/components/ascribe_forms/form_signup.js

@@ -60,8 +60,7 @@ let SignupForm = React.createClass({
                         <div>
                             I agree to the&nbsp;
                             <a href="/terms" target="_blank"> Terms of Service</a>
-                        </div>}
+                        </div>}/>
-                />)
                 <InputText
                     ref="promo_code"
                     placeHolder="Promocode (Optional)"

js/components/ascribe_modal/modal_login.js

@@ -0,0 +1,32 @@
+'use strict';
+
+import React from 'react';
+
+import ModalWrapper from './modal_wrapper';
+import LoginForm from '../ascribe_forms/form_login';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+let LoginModal = React.createClass({
+    handleLoginSuccess(){
+        this.props.handleSuccess();
+        let notificationText = 'Login successful';
+        let notification = new GlobalNotificationModel(notificationText, 'success');
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    render() {
+        return (
+            <ModalWrapper
+                button={this.props.button}
+                title='Log in to ascribe'
+                handleSuccess={this.handleLoginSuccess}
+                tooltip='Log in to ascribe'>
+                <LoginForm />
+            </ModalWrapper>
+        );
+    }
+});
+
+export default LoginModal;

js/components/ascribe_modal/modal_password_request_reset.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+
+import ModalWrapper from './modal_wrapper';
+import PasswordResetRequestForm from '../ascribe_forms/form_password_reset_request';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+let PasswordResetRequestModal = React.createClass({
+    handleResetSuccess(){
+        let notificationText = 'Request succesfully sent, check your email';
+        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+    render() {
+        return (
+            <ModalWrapper
+                button={this.props.button}
+                title='Reset your password'
+                handleSuccess={this.handleResetSuccess}
+                tooltip='Reset your password'>
+                <PasswordResetRequestForm />
+            </ModalWrapper>
+        );
+    }
+});
+
+export default PasswordResetRequestModal;

js/components/ascribe_modal/modal_signup.js

@@ -0,0 +1,31 @@
+'use strict';
+
+import React from 'react';
+
+import ModalWrapper from './modal_wrapper';
+import SignupForm from '../ascribe_forms/form_signup';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+let SignupModal = React.createClass({
+    handleSignupSuccess(response){
+        let notificationText = 'We sent an email to your address ' + response.user.email + ', please confirm.';
+        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    render() {
+        return (
+            <ModalWrapper
+                button={this.props.button}
+                title='Create an account'
+                handleSuccess={this.handleSignupSuccess}
+                tooltip='Sign up to ascribe'>
+                <SignupForm />
+            </ModalWrapper>
+        );
+    }
+});
+
+export default SignupModal;

js/components/header.js

@@ -7,7 +7,6 @@ import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
 import apiUrls from '../constants/api_urls.js';
-
 import PieceListActions from '../actions/piece_list_actions';
 
 import Nav from 'react-bootstrap/lib/Nav';
@@ -16,8 +15,9 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
-import ModalWrapper from '../components/ascribe_modal/modal_wrapper';
+import LoginModal from '../components/ascribe_modal/modal_login';
-import LoginForm from '../components/ascribe_forms/form_login';
+import SignupModal from '../components/ascribe_modal/modal_signup';
+
 
 import { getLangText } from '../utils/lang_utils';
 
@@ -41,20 +41,14 @@ let Header = React.createClass({
     onChange(state) {
         this.setState(state);
     },
-    handleLoginSuccess(){
+
+    refreshData(){
         UserActions.fetchCurrentUser();
         PieceListActions.fetchPieceList(1, 10);
     },
-
     render() {
-        let account = (
+        let account = null;
-            <ModalWrapper
+        let signup = null;
-                button={<NavItem to="pieces">LOGIN</NavItem>}
-                title='Log in to ascribe'
-                handleSuccess={this.handleLoginSuccess}
-                tooltip='Log in to ascribe'>
-                <LoginForm />
-            </ModalWrapper>);
         if (this.state.currentUser.username){
             account = (
                 <DropdownButton eventKey="1" title={this.state.currentUser.username}>
@@ -67,6 +61,15 @@ let Header = React.createClass({
                   </DropdownButton>
             );
         }
+        else {
+            account = (
+                <LoginModal
+                    button={<NavItem to="pieces">LOGIN</NavItem>}
+                    handleSuccess={this.refreshData}/>);
+            signup = (
+                <SignupModal
+                    button={<NavItem to="pieces">SIGNUP</NavItem>} />);
+        }
         return (
             <Navbar>
                 <Nav>
@@ -77,6 +80,7 @@ let Header = React.createClass({
                 </Nav>
                 <Nav right>
                     {account}
+                    {signup}
                 </Nav>
             </Navbar>
         );

js/routes.js

@@ -6,7 +6,7 @@ import Router from 'react-router';
 import AscribeApp from './components/ascribe_app';
 import PieceList from './components/piece_list';
 import EditionContainer from './components/edition_container';
-
+import PasswordResetForm from './components/ascribe_forms/form_password_reset';
 import AppConstants from './constants/application_constants';
 
 let Route = Router.Route;
@@ -18,6 +18,7 @@ let routes = (
     <Route name="app" path={baseUrl} handler={AscribeApp}>
         <Route name="pieces" path="collection" handler={PieceList} />
         <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
+        <Route name="password_reset" path="password_reset" handler={PasswordResetForm} />
 
         <Redirect from={baseUrl} to="pieces" />
         <Redirect from={baseUrl + '/'} to="pieces" />