Refactor login/signup containers

js/components/ascribe_forms/form_signup.js

@@ -1,78 +1,130 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
+
+import { getLangText } from '../../utils/lang_utils';
+
+import UserStore from '../../stores/user_store';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import Form from './form';
+import Property from './property';
+import FormPropertyHeader from './form_property_header';
+import InputCheckbox from './input_checkbox';
 
 import apiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+
-import InputText from './input_text';
-import InputCheckbox from './input_checkbox';
-import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
-import { getLangText } from '../../utils/lang_utils.js'
 
 let SignupForm = React.createClass({
-    mixins: [FormMixin],
 
-    url() {
+    propTypes: {
-        return apiUrls.users_signup;
+        handleSuccess: React.PropTypes.func
     },
 
-    getFormData() {
+    mixins: [Router.Navigation],
-        return {
+
-            email: this.refs.email.state.value,
+    getInitialState() {
-            password: this.refs.password.state.value,
+        return UserStore.getState();
-            password_confirm: this.refs.password_confirm.state.value,
-            terms: this.refs.terms.state.value,
-            promo_code: this.refs.promo_code.state.value
-        };
     },
 
-    renderForm() {
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+
+        // if user is already logged in, redirect him to piece list
+        if(this.state.currentUser && this.state.currentUser.email) {
+            this.transitionTo('pieces');
+        }
+    },
+
+    handleSuccess(response){
+
+        let notificationText = getLangText('Sign up successful');
+        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+        this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email +
+                                 ', ' + getLangText('please confirm') + '.');
+
+    },
+    getFormData(){
+        return {terms: this.refs.form.refs.terms.refs.input.state.value};
+    },
+    render() {
+        let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
+            getLangText('This password is securing your digital property like a bank account') + '.\n ' +
+            getLangText('Store it in a safe place') + '!';
         return (
-            <form id="signup_modal_content" role="form" onSubmit={this.submit}>
+            <Form
-                <input className="invisible" type="email" name="fake_consignee"/>
+                className="ascribe-form-bordered"
-                <input className="invisible" type="password" name="fake_password"/>
+                ref='form'
-                <InputText
+                url={apiUrls.users_signup}
-                    ref="email"
+                handleSuccess={this.handleSuccess}
-                    placeHolder={getLangText('Email')}
+                getFormData={this.getFormData}
-                    required="required"
+                buttons={
+                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
+                        {getLangText('Sign up to ascribe')}
+                    </button>}
+                spinner={
+                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </button>
+                    }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Welcome to ascribe')}</h3>
+                </FormPropertyHeader>
+                <Property
+                    name='email'
+                    label={getLangText('Email')}>
+                    <input
                         type="email"
-                    submitted={this.state.submitted}/>
+                        placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
-                <InputText
+                        autoComplete="on"
-                    ref="password"
+                        required/>
-                    placeHolder={getLangText('Choose a password')}
+                </Property>
-                    required="required"
+                <Property
+                    name='password'
+                    label={getLangText('Password')}
+                    tooltip={tooltipPassword}>
+                    <input
                         type="password"
-                    submitted={this.state.submitted}/>
+                        placeholder={getLangText('Use a combination of minimum 10 chars and numbers')}
-                <InputText
+                        autoComplete="on"
-                    ref="password_confirm"
+                        required/>
-                    placeHolder={getLangText('Confirm password')}
+                </Property>
-                    required="required"
+                <Property
+                    name='password_confirm'
+                    label={getLangText('Confirm Password')}
+                    tooltip={tooltipPassword}>
+                    <input
                         type="password"
-                    submitted={this.state.submitted}/>
+                        placeholder={getLangText('Enter your password once again')}
-                <div>
+                        autoComplete="on"
-                    {getLangText('Your password must be at least 10 characters')}.
+                        required/>
-                    {getLangText('This password is securing your digital property like a bank account')}.
+                </Property>
-                    {getLangText('Store it in a safe place')}!
+                <Property
-                </div>
+                    name='promo_code'
-                <InputCheckbox
+                    label={getLangText('Promocode')}>
-                    ref="terms"
+                    <input
-                    required="required"
-                    label={
-                        <div>
-                            {getLangText('I agree to the')}&nbsp;
-                            <a href="/terms" target="_blank"> {getLangText('Terms of Service')}</a>
-                        </div>}/>
-                <InputText
-                    ref="promo_code"
-                    placeHolder={getLangText('Promocode (Optional)')}
-                    required=""
                         type="text"
-                    submitted={this.state.submitted}/>
+                        placeholder={getLangText('Enter a promocode here (Optional)')}/>
-                <ButtonSubmitOrClose
+                </Property>
-                    text={getLangText('JOIN US')}
+                <Property
-                    onClose={this.props.onRequestHide}
+                    name="terms"
-                    submitted={this.state.submitted} />
+                    className="ascribe-settings-property-collapsible-toggle"
-            </form>
+                    style={{paddingBottom: 0}}>
+                    <InputCheckbox/>
+                </Property>
+            </Form>
         );
     }
 });

js/components/login_container.js

@@ -3,60 +3,24 @@
 import React from 'react';
 import Router from 'react-router';
 
-import GlobalNotificationModel from '../models/global_notification_model';
+import LoginForm from './ascribe_forms/form_login';
-import GlobalNotificationActions from '../actions/global_notification_actions';
-
-import UserStore from '../stores/user_store';
-import UserActions from '../actions/user_actions';
-
-import Form from './ascribe_forms/form';
-import Property from './ascribe_forms/property';
-
-import apiUrls from '../constants/api_urls';
-import AppConstants from '../constants/application_constants';
 
 import { getLangText } from '../utils/lang_utils';
 
 let Link = Router.Link;
 
+
 let LoginContainer = React.createClass({
     propTypes: {
-        message: React.PropTypes.string,
+        message: React.PropTypes.string
-        redirectOnLoggedIn: React.PropTypes.bool,
-        redirectOnLoginSuccess: React.PropTypes.bool
     },
 
-    mixins: [Router.Navigation],
-
     getDefaultProps() {
         return {
-            message: getLangText('Enter') + ' ascribe',
+            message: getLangText('Enter') + ' ascribe'
-            redirectOnLoggedIn: true,
-            redirectOnLoginSuccess: true
         };
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-
-        // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email && this.props.redirectOnLoggedIn) {
-            this.transitionTo('pieces');
-        }
-    },
-
     render() {
         return (
             <div className="ascribe-login-wrapper">
@@ -75,76 +39,5 @@ let LoginContainer = React.createClass({
 });
 
 
-let LoginForm = React.createClass({
-    propTypes: {
-        redirectOnLoginSuccess: React.PropTypes.bool
-    },
-
-    handleSuccess(){
-        let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-
-        // register_piece is waiting for a login success as login_container and it is wrapped
-        // in a slides_container component.
-        // The easiest way to check if the user was successfully logged in is to fetch the user
-        // in the user store (which is obviously only possible if the user is logged in), since
-        // register_piece is listening to the changes of the user_store.
-        UserActions.fetchCurrentUser();
-
-        /* Taken from http://stackoverflow.com/a/14916411 */
-        /*
-        We actually have to trick the Browser into showing the "save password" dialog
-        as Chrome expects the login page to be reloaded after the login.
-        Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future.
-        Until then, we redirect the HARD way, but reloading the whole page using window.location
-        */
-        if(this.props.redirectOnLoginSuccess) {
-            window.location = AppConstants.baseUrl + 'collection';
-        }
-    },
-
-    render() {
-        return (
-            <Form
-                ref="loginForm"
-                url={apiUrls.users_login}
-                handleSuccess={this.handleSuccess}
-                buttons={
-                    <button
-                        type="submit"
-                        className="btn ascribe-btn ascribe-btn-login">
-                        {getLangText('Enter')} ascribe
-                    </button>}
-                spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
-                    }>
-                <Property
-                    name='email'
-                    label={getLangText('Email')}>
-                    <input
-                        type="email"
-                        placeholder={getLangText('Enter your email')}
-                        autoComplete="on"
-                        name="username"
-                        required/>
-                </Property>
-                <Property
-                    name='password'
-                    label={getLangText('Password')}>
-                    <input
-                        type="password"
-                        placeholder={getLangText('Enter your password')}
-                        autoComplete="on"
-                        name="password"
-                        required/>
-                </Property>
-                <hr />
-            </Form>
-        );
-    }
-});
-
 
 export default LoginContainer;

js/components/signup_container.js

@@ -1,50 +1,16 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import SignupForm from './ascribe_forms/form_signup';
-
-import { mergeOptions } from '../utils/general_utils';
-import { getLangText } from '../utils/lang_utils';
-
-import UserStore from '../stores/user_store';
-
-import GlobalNotificationModel from '../models/global_notification_model';
-import GlobalNotificationActions from '../actions/global_notification_actions';
-
-import Form from './ascribe_forms/form';
-import Property from './ascribe_forms/property';
-import FormPropertyHeader from './ascribe_forms/form_property_header';
-import InputCheckbox from './ascribe_forms/input_checkbox';
-
-
-import apiUrls from '../constants/api_urls';
 
+// import { getLangText } from '../utils/lang_utils';
 
 let SignupContainer = React.createClass({
-    mixins: [Router.Navigation],
-
     getInitialState() {
-        return mergeOptions({
+        return {
             submitted: false,
             message: null
-        }, UserStore.getState());
+        };
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-
-        // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email) {
-            this.transitionTo('pieces');
-        }
     },
 
     handleSuccess(message){
@@ -75,93 +41,4 @@ let SignupContainer = React.createClass({
 });
 
 
-let SignupForm = React.createClass({
-    propTypes: {
-        handleSuccess: React.PropTypes.func
-    },
-
-    mixins: [Router.Navigation],
-
-    handleSuccess(response){
-
-        let notificationText = getLangText('Sign up successful');
-        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-        this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email +
-                                 ', ' + getLangText('please confirm') + '.');
-
-    },
-    getFormData(){
-        return {terms: this.refs.form.refs.terms.refs.input.state.value};
-    },
-    render() {
-        let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
-            getLangText('This password is securing your digital property like a bank account') + '.\n ' +
-            getLangText('Store it in a safe place') + '!';
-        return (
-            <Form
-                className="ascribe-form-bordered"
-                ref='form'
-                url={apiUrls.users_signup}
-                handleSuccess={this.handleSuccess}
-                getFormData={this.getFormData}
-                buttons={
-                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
-                        {getLangText('Sign up to ascribe')}
-                    </button>}
-                spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
-                    }>
-                <FormPropertyHeader>
-                    <h3>{getLangText('Welcome to ascribe')}</h3>
-                </FormPropertyHeader>
-                <Property
-                    name='email'
-                    label={getLangText('Email')}>
-                    <input
-                        type="email"
-                        placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
-                        autoComplete="on"
-                        required/>
-                </Property>
-                <Property
-                    name='password'
-                    label={getLangText('Password')}
-                    tooltip={tooltipPassword}>
-                    <input
-                        type="password"
-                        placeholder={getLangText('Use a combination of minimum 10 chars and numbers')}
-                        autoComplete="on"
-                        required/>
-                </Property>
-                <Property
-                    name='password_confirm'
-                    label={getLangText('Confirm Password')}
-                    tooltip={tooltipPassword}>
-                    <input
-                        type="password"
-                        placeholder={getLangText('Enter your password once again')}
-                        autoComplete="on"
-                        required/>
-                </Property>
-                <Property
-                    name='promo_code'
-                    label={getLangText('Promocode')}>
-                    <input
-                        type="text"
-                        placeholder={getLangText('Enter a promocode here (Optional)')}/>
-                </Property>
-                <Property
-                    name="terms"
-                    className="ascribe-settings-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
-                    <InputCheckbox/>
-                </Property>
-            </Form>
-        );
-    }
-});
-
 export default SignupContainer;