Использование контекста вместо props в компонентах аутентификации

src/components/auth/Activation.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
@@ -11,15 +11,7 @@ import styles from './activation.scss';
 import messages from './Activation.messages';
 
 class Body extends BaseAuthBody {
-    static propTypes = {
-        ...BaseAuthBody.propTypes,
-        auth: PropTypes.shape({
-            error: PropTypes.string,
-            login: PropTypes.shape({
-                login: PropTypes.stirng
-            })
-        })
-    };
+    static displayName = 'ActivationBody';
 
     render() {
         return (
@@ -31,7 +23,7 @@ class Body extends BaseAuthBody {
 
                     <div className={styles.descriptionText}>
                         <Message {...messages.activationMailWasSent} values={{
-                            email: (<b>{this.props.user.email}</b>)
+                            email: (<b>{this.context.user.email}</b>)
                         }} />
                     </div>
                 </div>

src/components/auth/AppInfo.jsx

@@ -11,8 +11,8 @@ export default class AppInfo extends Component {
     static displayName = 'AppInfo';
 
     static propTypes = {
-        name: PropTypes.string.isRequired,
-        description: PropTypes.string.isRequired,
+        name: PropTypes.string,
+        description: PropTypes.string,
         onGoToAuth: PropTypes.func.isRequired
     };
 

src/components/auth/BaseAuthBody.jsx

@@ -4,29 +4,32 @@
 import React, { Component, PropTypes } from 'react';
 
 import AuthError from './AuthError';
+import { userShape } from 'components/user/User';
 
 export default class BaseAuthBody extends Component {
-    static propTypes = {
+    static contextTypes = {
         clearErrors: PropTypes.func.isRequired,
         resolve: PropTypes.func.isRequired,
         reject: PropTypes.func.isRequired,
         auth: PropTypes.shape({
-            error: PropTypes.string
-        })
+            error: PropTypes.string,
+            scopes: PropTypes.array
+        }),
+        user: userShape
     };
 
     renderErrors() {
-        return this.props.auth.error
-            ? <AuthError error={this.props.auth.error} onClose={this.onClearErrors} />
+        return this.context.auth.error
+            ? <AuthError error={this.context.auth.error} onClose={this.onClearErrors} />
             : ''
             ;
     }
 
     onFormSubmit() {
-        this.props.resolve(this.serialize());
+        this.context.resolve(this.serialize());
     }
 
-    onClearErrors = this.props.clearErrors;
+    onClearErrors = this.context.clearErrors;
 
     form = {};
 

src/components/auth/ForgotPassword.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
@@ -12,16 +12,7 @@ import messages from './ForgotPassword.messages';
 import styles from './forgotPassword.scss';
 
 class Body extends BaseAuthBody {
-    static propTypes = {
-        ...BaseAuthBody.propTypes,
-        //login: PropTypes.func.isRequired,
-        auth: PropTypes.shape({
-            error: PropTypes.string,
-            login: PropTypes.shape({
-                email: PropTypes.stirng
-            })
-        })
-    };
+    static displayName = 'ForgotPasswordBody';
 
     // Если юзер вводил своё мыло во время попытки авторизации, то почему бы его сюда автоматически не подставить?
     render() {
@@ -50,7 +41,6 @@ class Body extends BaseAuthBody {
 
     onFormSubmit() {
         // TODO: обработчик отправки письма с инструкцией по смене аккаунта
-        //this.props.login(this.serialize());
     }
 }
 

src/components/auth/Login.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
@@ -12,15 +12,7 @@ import messages from './Login.messages';
 import passwordMessages from './Password.messages';
 
 class Body extends BaseAuthBody {
-    static propTypes = {
-        ...BaseAuthBody.propTypes,
-        auth: PropTypes.shape({
-            error: PropTypes.string,
-            login: PropTypes.shape({
-                login: PropTypes.stirng
-            })
-        })
-    };
+    static displayName = 'LoginBody';
 
     render() {
         return (

src/components/auth/PanelTransition.jsx

@@ -10,6 +10,7 @@ import {helpLinks as helpLinksStyles} from 'components/auth/helpLinks.scss';
 import panelStyles from 'components/ui/panel.scss';
 import icons from 'components/ui/icons.scss';
 import authFlow from 'services/authFlow';
+import { userShape } from 'components/user/User';
 
 import * as actions from './actions';
 
@@ -21,6 +22,7 @@ class PanelTransition extends Component {
     static displayName = 'PanelTransition';
 
     static propTypes = {
+        // context props
         auth: PropTypes.shape({
             error: PropTypes.string,
             login: PropTypes.shape({
@@ -28,8 +30,13 @@ class PanelTransition extends Component {
                 password: PropTypes.string
             })
         }).isRequired,
+        user: userShape.isRequired,
         setError: React.PropTypes.func.isRequired,
         clearErrors: React.PropTypes.func.isRequired,
+        resolve: React.PropTypes.func.isRequired,
+        reject: React.PropTypes.func.isRequired,
+
+        // local props
         path: PropTypes.string.isRequired,
         Title: PropTypes.element.isRequired,
         Body: PropTypes.element.isRequired,
@@ -37,6 +44,30 @@ class PanelTransition extends Component {
         Links: PropTypes.element.isRequired
     };
 
+    static childContextTypes = {
+        auth: PropTypes.shape({
+            error: PropTypes.string,
+            login: PropTypes.shape({
+                login: PropTypes.string,
+                password: PropTypes.string
+            })
+        }),
+        user: userShape,
+        clearErrors: React.PropTypes.func,
+        resolve: PropTypes.func,
+        reject: PropTypes.func
+    };
+
+    getChildContext() {
+        return {
+            auth: this.props.auth,
+            user: this.props.user,
+            clearErrors: this.props.clearErrors,
+            resolve: this.props.resolve,
+            reject: this.props.reject
+        };
+    }
+
     state = {
         height: {},
         contextHeight: 0
@@ -236,7 +267,7 @@ class PanelTransition extends Component {
             <div key={`header${key}`} style={style}>
                 {hasBackButton ? backButton : null}
                 <div style={scrollStyle}>
-                    {React.cloneElement(Title, this.props)}
+                    {Title}
                 </div>
             </div>
         );
@@ -264,7 +295,6 @@ class PanelTransition extends Component {
         return (
             <ReactHeight key={`body${key}`} style={style} onHeightReady={this.onUpdateHeight}>
                 {React.cloneElement(Body, {
-                    ...this.props,
                     ref: (body) => {
                         this.body = body;
                     }
@@ -280,7 +310,7 @@ class PanelTransition extends Component {
 
         return (
             <div key={`footer${key}`} style={style}>
-                {React.cloneElement(Footer, this.props)}
+                {Footer}
             </div>
         );
     }
@@ -292,7 +322,7 @@ class PanelTransition extends Component {
 
         return (
             <div key={`links${key}`} style={style}>
-                {React.cloneElement(Links, this.props)}
+                {Links}
             </div>
         );
     }

src/components/auth/Password.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
@@ -13,19 +13,10 @@ import styles from './password.scss';
 import messages from './Password.messages';
 
 class Body extends BaseAuthBody {
-    static propTypes = {
-        ...BaseAuthBody.propTypes,
-        auth: PropTypes.shape({
-            error: PropTypes.string,
-            login: PropTypes.shape({
-                login: PropTypes.stirng,
-                password: PropTypes.stirng
-            })
-        })
-    };
+    static displayName = 'PasswordBody';
 
     render() {
-        const {user} = this.props;
+        const {user} = this.context;
 
         return (
             <div>

src/components/auth/PasswordChange.jsx

@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
-import { Link } from 'react-router';
 
 import buttons from 'components/ui/buttons.scss';
 import { Input } from 'components/ui/Form';
@@ -14,9 +13,7 @@ import icons from 'components/ui/icons.scss';
 import styles from './passwordChange.scss';
 
 class Body extends BaseAuthBody {
-    static propTypes = {
-        ...BaseAuthBody.propTypes
-    };
+    static displayName = 'PasswordChangeBody';
 
     render() {
         return (
@@ -52,7 +49,7 @@ class Body extends BaseAuthBody {
 }
 
 export default function PasswordChange() {
-    return {
+    const componentsMap = {
         Title: () => ( // TODO: separate component for PageTitle
             <Message {...passwordChangedMessages.changePasswordTitle}>
                 {(msg) => <span>{msg}<Helmet title={msg} /></span>}
@@ -64,14 +61,20 @@ export default function PasswordChange() {
                 <Message {...passwordChangedMessages.change} />
             </button>
         ),
-        Links: (props) => (
+        Links: (props, context) => (
             <a href="#" onClick={(event) => {
                 event.preventDefault();
 
-                props.reject();
+                context.reject();
             }}>
                 <Message {...passwordChangedMessages.skipThisStep} />
             </a>
         )
     };
+
+    componentsMap.Links.contextTypes = {
+        reject: PropTypes.func.isRequired
+    };
+
+    return componentsMap;
 }

src/components/auth/Permissions.jsx

@@ -12,17 +12,11 @@ import styles from './permissions.scss';
 import messages from './Permissions.messages';
 
 class Body extends BaseAuthBody {
-    static propTypes = {
-        ...BaseAuthBody.propTypes,
-        auth: PropTypes.shape({
-            error: PropTypes.string,
-            scopes: PropTypes.array.isRequired
-        })
-    };
+    static displayName = 'PermissionsBody';
 
     render() {
-        const {user} = this.props;
-        const scopes = this.props.auth.scopes;
+        const {user} = this.context;
+        const scopes = this.context.auth.scopes;
 
         return (
             <div>
@@ -61,7 +55,7 @@ class Body extends BaseAuthBody {
 }
 
 export default function Permissions() {
-    return {
+    const componentsMap = {
         Title: () => ( // TODO: separate component for PageTitle
             <Message {...messages.permissionsTitle}>
                 {(msg) => <span>{msg}<Helmet title={msg} /></span>}
@@ -73,14 +67,20 @@ export default function Permissions() {
                 <Message {...messages.approve} />
             </button>
         ),
-        Links: (props) => (
+        Links: (props, context) => (
             <a href="#" onClick={(event) => {
                 event.preventDefault();
 
-                props.reject();
+                context.reject();
             }}>
                 <Message {...messages.decline} />
             </a>
         )
     };
+
+    componentsMap.Links.contextTypes = {
+        reject: PropTypes.func.isRequired
+    };
+
+    return componentsMap;
 }

src/components/auth/Register.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
@@ -13,20 +13,7 @@ import activationMessages from './Activation.messages';
 // TODO: password and username can be validate for length and sameness
 
 class Body extends BaseAuthBody {
-    static propTypes = {
-        ...BaseAuthBody.propTypes,
-        register: PropTypes.func.isRequired,
-        auth: PropTypes.shape({
-            error: PropTypes.string,
-            register: PropTypes.shape({
-                email: PropTypes.string,
-                username: PropTypes.stirng,
-                password: PropTypes.stirng,
-                rePassword: PropTypes.stirng,
-                rulesAgreement: PropTypes.boolean
-            })
-        })
-    };
+    static displayName = 'RegisterBody';
 
     render() {
         return (

src/components/ui/Form.jsx

@@ -14,7 +14,7 @@ export class Input extends Component {
             id: PropTypes.string
         }),
         icon: PropTypes.string,
-        color: PropTypes.oneOf(['green', 'blue', 'red'])
+        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue'])
     };
 
     static contextTypes = {