Add factory for auth components

This commit is contained in:
SleepWalker 2016-07-24 13:17:41 +03:00
parent a2e8fbab95
commit 731e0e3c78
10 changed files with 143 additions and 123 deletions

View File

@ -1,17 +1,16 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import messages from './Activation.intl.json';
import Body from './ActivationBody';
export default function Activation() {
return {
Title: () => <AuthTitle title={messages.accountActivationTitle} />,
Body,
Footer: () => <Button color="blue" label={messages.confirmEmail} type="submit" />,
Links: () => <RejectionLink label={messages.didNotReceivedEmail} />
};
}
export default factory({
title: messages.accountActivationTitle,
body: Body,
footer: {
color: 'blue',
label: messages.confirmEmail
},
links: {
label: messages.didNotReceivedEmail
}
});

View File

@ -1,17 +1,16 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import Body from './ChangePasswordBody';
import messages from './ChangePassword.intl.json';
export default function ChangePassword() {
return {
Title: () => <AuthTitle title={messages.changePasswordTitle} />,
Body,
Footer: () => <Button color="darkBlue" label={messages.change} type="submit" />,
Links: () => <RejectionLink label={messages.skipThisStep} />
};
}
export default factory({
title: messages.changePasswordTitle,
body: Body,
footer: {
color: 'darkBlue',
label: messages.change
},
links: {
label: messages.skipThisStep
}
});

View File

@ -0,0 +1,29 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
/**
* @param {object} options
* @param {string|object} options.title - panel title
* @param {ReactElement} options.body
* @param {object} options.footer - config for footer Button
* @param {array|object|null} options.links - link config or an array of link configs
*
* @return {object} - structure, required for auth panel to work
*/
export default function(options) {
return () => ({
Title: () => <AuthTitle title={options.title} />,
Body: options.body,
Footer: () => <Button type="submit" {...options.footer} />,
Links: () => options.links ? (
<span>
{[].concat(options.links).map((link, index) => (
[index ? ' | ' : '', <RejectionLink {...link} key={index} />]
))}
</span>
) : null
});
}

View File

@ -1,17 +1,17 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import messages from './ForgotPassword.intl.json';
import Body from './ForgotPasswordBody';
export default function ForgotPassword() {
return {
Title: () => <AuthTitle title={messages.title} />,
Body,
Footer: () => <Button color="lightViolet" autoFocus label={messages.sendMail} type="submit" />,
Links: () => <RejectionLink label={messages.alreadyHaveCode} />
};
}
export default factory({
title: messages.title,
body: Body,
footer: {
color: 'lightViolet',
autoFocus: true,
label: messages.sendMail
},
links: {
label: messages.alreadyHaveCode
}
});

View File

@ -1,17 +1,14 @@
import React from 'react';
import { Button } from 'components/ui/form';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import Body from './LoginBody';
import messages from './Login.intl.json';
export default function Login() {
return {
Title: () => <AuthTitle title={messages.loginTitle} />,
Body,
Footer: () => <Button color="green" label={messages.next} type="submit" />,
Links: () => null
};
}
export default factory({
title: messages.loginTitle,
body: Body,
footer: {
color: 'green',
label: messages.next
}
});

View File

@ -1,17 +1,16 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import Body from './PasswordBody';
import messages from './Password.intl.json';
export default function Password() {
return {
Title: () => <AuthTitle title={messages.passwordTitle} />,
Body,
Footer: () => <Button color="green" label={messages.signInButton} type="submit" />,
Links: () => <RejectionLink label={messages.forgotPassword} />
};
}
export default factory({
title: messages.passwordTitle,
body: Body,
footer: {
color: 'green',
label: messages.signInButton
},
links: {
label: messages.forgotPassword
}
});

View File

@ -1,17 +1,17 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import messages from './Permissions.intl.json';
import Body from './PermissionsBody';
export default function Permissions() {
return {
Title: () => <AuthTitle title={messages.permissionsTitle} />,
Body,
Footer: () => <Button color="orange" autoFocus label={messages.approve} type="submit" />,
Links: () => <RejectionLink label={messages.decline} />
};
}
export default factory({
title: messages.permissionsTitle,
body: Body,
footer: {
color: 'orange',
autoFocus: true,
label: messages.approve
},
links: {
label: messages.decline
}
});

View File

@ -1,18 +1,17 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import changePassword from 'components/auth/changePassword/ChangePassword.intl.json';
import messages from './RecoverPassword.intl.json';
import Body from './RecoverPasswordBody';
export default function RecoverPassword() {
return {
Title: () => <AuthTitle title={messages.title} />,
Body,
Footer: () => <Button color="lightViolet" label={changePassword.change} type="submit" />,
Links: () => <RejectionLink label={messages.contactSupport} />
};
}
export default factory({
title: messages.title,
body: Body,
footer: {
color: 'lightViolet',
label: changePassword.change
},
links: {
label: messages.contactSupport
}
});

View File

@ -1,25 +1,24 @@
import React from 'react';
import { Button } from 'components/ui/form';
import RejectionLink from 'components/auth/RejectionLink';
import AuthTitle from 'components/auth/AuthTitle';
import factory from 'components/auth/factory';
import activationMessages from 'components/auth/activation/Activation.intl.json';
import forgotPasswordMessages from 'components/auth/forgotPassword/ForgotPassword.intl.json';
import messages from './Register.intl.json';
import Body from './RegisterBody';
export default function Register() {
return {
Title: () => <AuthTitle title={messages.registerTitle} />,
Body,
Footer: () => <Button color="blue" label={messages.signUpButton} type="submit" />,
Links: () => (
<span>
<RejectionLink label={activationMessages.didNotReceivedEmail} payload={{requestEmail: true}} />
{' | '}
<RejectionLink label={forgotPasswordMessages.alreadyHaveCode} />
</span>
)
};
}
export default factory({
title: messages.registerTitle,
body: Body,
footer: {
color: 'blue',
label: messages.signUpButton
},
links: [
{
label: activationMessages.didNotReceivedEmail,
payload: {requestEmail: true}
},
{
label: forgotPasswordMessages.alreadyHaveCode
}
]
});

View File

@ -1,18 +1,17 @@
import React from 'react';
import { Button } from 'components/ui/form';
import AuthTitle from 'components/auth/AuthTitle';
import RejectionLink from 'components/auth/RejectionLink';
import factory from 'components/auth/factory';
import forgotPasswordMessages from 'components/auth/forgotPassword/ForgotPassword.intl.json';
import messages from './ResendActivation.intl.json';
import Body from './ResendActivationBody';
export default function ResendActivation() {
return {
Title: () => <AuthTitle title={messages.title} />,
Body,
Footer: () => <Button color="blue" label={messages.sendNewEmail} type="submit" />,
Links: () => <RejectionLink label={forgotPasswordMessages.alreadyHaveCode} />
};
}
export default factory({
title: messages.title,
body: Body,
footer: {
color: 'blue',
label: messages.sendNewEmail
},
links: {
label: forgotPasswordMessages.alreadyHaveCode
}
});