mirror of
				https://github.com/elyby/accounts-frontend.git
				synced 2025-05-31 14:11:58 +05:30 
			
		
		
		
	Add factory for auth components
This commit is contained in:
		@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										29
									
								
								src/components/auth/factory.jsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										29
									
								
								src/components/auth/factory.jsx
									
									
									
									
									
										Normal 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
 | 
			
		||||
    });
 | 
			
		||||
}
 | 
			
		||||
@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
        }
 | 
			
		||||
    ]
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user