#26: incapsulate auth flow rejection logic into a separate component

src/components/auth/BaseAuthBody.jsx

@@ -11,7 +11,6 @@ export default class BaseAuthBody extends Component {
     static contextTypes = {
         clearErrors: PropTypes.func.isRequired,
         resolve: PropTypes.func.isRequired,
-        reject: PropTypes.func.isRequired,
         auth: PropTypes.shape({
             error: PropTypes.string,
             scopes: PropTypes.array

src/components/auth/RejectionLink.jsx

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+
+import { FormattedMessage as Message } from 'react-intl';
+
+export default function RejectionLink(props, context) {
+    return (
+        <a href="#" onClick={(event) => {
+            event.preventDefault();
+
+            context.reject();
+        }}>
+            <Message {...props.label} />
+        </a>
+    );
+}
+
+RejectionLink.displayName = 'RejectionLink';
+RejectionLink.propTypes = {
+    label: PropTypes.shape({
+        id: PropTypes.string
+    }).isRequired
+};
+RejectionLink.contextTypes = {
+    reject: PropTypes.func.isRequired
+};

src/components/auth/activation/Activation.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { FormattedMessage as Message } from 'react-intl';
-
 import { Button } from 'components/ui/form';
+import RejectionLink from 'components/auth/RejectionLink';
 import AuthTitle from 'components/auth/AuthTitle';
 
 import messages from './Activation.intl.json';
@@ -13,10 +12,6 @@ export default function Activation() {
         Title: () => <AuthTitle title={messages.accountActivationTitle} />,
         Body,
         Footer: () => <Button color="blue" label={messages.confirmEmail} />,
-        Links: () => (
-            <a href="#">
-                <Message {...messages.didNotReceivedEmail} />
-            </a>
-        )
+        Links: () => <RejectionLink label={messages.didNotReceivedEmail} />
     };
 }

src/components/auth/changePassword/ChangePassword.jsx

@@ -1,32 +1,17 @@
-import React, { PropTypes } from 'react';
-
-import { FormattedMessage as Message } from 'react-intl';
+import React from 'react';
 
 import { Button } from 'components/ui/form';
+import RejectionLink from 'components/auth/RejectionLink';
 import AuthTitle from 'components/auth/AuthTitle';
 
 import Body from './ChangePasswordBody';
 import messages from './ChangePassword.intl.json';
 
 export default function ChangePassword() {
-    const componentsMap = {
+    return {
         Title: () => <AuthTitle title={messages.changePasswordTitle} />,
         Body,
         Footer: () => <Button color="darkBlue" label={messages.change} />,
-        Links: (props, context) => (
-            <a href="#" onClick={(event) => {
-                event.preventDefault();
-
-                context.reject();
-            }}>
-                <Message {...messages.skipThisStep} />
-            </a>
-        )
+        Links: () => <RejectionLink label={messages.skipThisStep} />
     };
-
-    componentsMap.Links.contextTypes = {
-        reject: PropTypes.func.isRequired
-    };
-
-    return componentsMap;
 }

src/components/auth/forgotPassword/ForgotPassword.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { FormattedMessage as Message } from 'react-intl';
-
 import { Button } from 'components/ui/form';
+import RejectionLink from 'components/auth/RejectionLink';
 import AuthTitle from 'components/auth/AuthTitle';
 
 import messages from './ForgotPassword.intl.json';
@@ -13,10 +12,6 @@ export default function ForgotPassword() {
         Title: () => <AuthTitle title={messages.forgotPasswordTitle} />,
         Body,
         Footer: () => <Button color="lightViolet" label={messages.sendMail} />,
-        Links: () => (
-            <a href="/send-message">
-                <Message {...messages.contactSupport} />
-            </a>
-        )
+        Links: () => <RejectionLink label={messages.contactSupport} />
     };
 }

src/components/auth/password/Password.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
 
-import { FormattedMessage as Message } from 'react-intl';
-import { Link } from 'react-router';
-
 import { Button } from 'components/ui/form';
+import RejectionLink from 'components/auth/RejectionLink';
 import AuthTitle from 'components/auth/AuthTitle';
 
 import Body from './PasswordBody';
@@ -14,10 +12,6 @@ export default function Password() {
         Title: () => <AuthTitle title={messages.passwordTitle} />,
         Body,
         Footer: () => <Button color="green" label={messages.signInButton} />,
-        Links: () => (
-            <Link to="/forgot-password">
-                <Message {...messages.forgotPassword} />
-            </Link>
-        )
+        Links: () => <RejectionLink label={messages.forgotPassword} />
     };
 }

src/components/auth/permissions/Permissions.jsx

@@ -1,32 +1,17 @@
-import React, { PropTypes } from 'react';
-
-import { FormattedMessage as Message } from 'react-intl';
+import React from 'react';
 
 import { Button } from 'components/ui/form';
+import RejectionLink from 'components/auth/RejectionLink';
 import AuthTitle from 'components/auth/AuthTitle';
 
 import messages from './Permissions.intl.json';
 import Body from './PermissionsBody';
 
 export default function Permissions() {
-    const componentsMap = {
+    return {
         Title: () => <AuthTitle title={messages.permissionsTitle} />,
         Body,
         Footer: () => <Button color="orange" autoFocus label={messages.approve} />,
-        Links: (props, context) => (
-            <a href="#" onClick={(event) => {
-                event.preventDefault();
-
-                context.reject();
-            }}>
-                <Message {...messages.decline} />
-            </a>
-        )
+        Links: () => <RejectionLink label={messages.decline} />
     };
-
-    componentsMap.Links.contextTypes = {
-        reject: PropTypes.func.isRequired
-    };
-
-    return componentsMap;
 }

src/components/auth/register/Register.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { FormattedMessage as Message } from 'react-intl';
-
 import { Button } from 'components/ui/form';
+import RejectionLink from 'components/auth/RejectionLink';
 import AuthTitle from 'components/auth/AuthTitle';
 import activationMessages from 'components/auth/activation/Activation.intl.json';
 
@@ -14,10 +13,6 @@ export default function Register() {
         Title: () => <AuthTitle title={messages.registerTitle} />,
         Body,
         Footer: () => <Button color="blue" label={messages.signUpButton} />,
-        Links: () => (
-            <a href="#">
-                <Message {...activationMessages.didNotReceivedEmail} />
-            </a>
-        )
+        Links: () => <RejectionLink label={activationMessages.didNotReceivedEmail} />
     };
 }