diff --git a/packages/components/Signup/Signup.jsx b/packages/components/Signup/Signup.jsx new file mode 100644 index 0000000000000000000000000000000000000000..5c02d7c4d3865998686f06394a82fd82b5102c94 --- /dev/null +++ b/packages/components/Signup/Signup.jsx @@ -0,0 +1,68 @@ +import React from 'react' +import { Field } from 'formik' +import { override } from '@pubsweet/ui-toolkit' +import styled from 'styled-components' + +import { + CenteredColumn, + Link, + H1, + ErrorText, + Button, + TextField, +} from '@pubsweet/ui' + +const FormContainer = styled.div` + ${override('Login.FormContainer')}; +` + +const Logo = styled.div` + ${override('Login.Logo')}; +` + +const UsernameInput = props => ( + <TextField label="Username" {...props.input} placeholder="Username" /> +) + +const EmailInput = props => ( + <TextField label="Email" {...props.input} placeholder="Email" type="email" /> +) +const PasswordInput = props => ( + <TextField + label="Password" + {...props.input} + placeholder="Password" + type="password" + /> +) + +const Signup = ({ error, handleSubmit, logo = null }) => ( + <CenteredColumn small> + {logo && ( + <Logo> + <img alt="pubsweet-logo" src={`${logo}`} /> + </Logo> + )} + <FormContainer> + <H1>Sign up</H1> + + {error && <ErrorText>{error}</ErrorText>} + + <form onSubmit={handleSubmit}> + <Field component={UsernameInput} name="username" /> + <Field component={EmailInput} name="email" /> + <Field component={PasswordInput} name="password" /> + <Button primary type="submit"> + Sign up + </Button> + </form> + + <div> + <span>Already have an account? </span> + <Link to="/login">Login</Link> + </div> + </FormContainer> + </CenteredColumn> +) + +export default Signup diff --git a/packages/components/Signup/package.json b/packages/components/Signup/package.json new file mode 100644 index 0000000000000000000000000000000000000000..07e8c66c53ba8b733aa01d5a8ff5111341b8c3ca --- /dev/null +++ b/packages/components/Signup/package.json @@ -0,0 +1,31 @@ +{ + "name": "pubsweet-component-signup", + "version": "1.0.41", + "description": "Basic signup form component for PubSweet", + "main": "index.js", + "author": "Collaborative Knowledge Foundation", + "license": "MIT", + "dependencies": { + "@pubsweet/ui": "^9.1.3", + "@pubsweet/ui-toolkit": "2.0.7", + "formik": "^1.3.0", + "styled-components": "^4.1.1", + "prop-types": "^15.5.10", + "react-bootstrap": "^0.32.0", + "react-redux": "^5.0.6", + "react-router": "^4.2.0", + "recompose": "^0.30.0", + "redux": "^3.7.2", + "redux-form": "^7.4.2" + }, + "peerDependencies": { + "pubsweet-client": ">=1.0.0", + "react": ">=16", + "react-router-redux": "^4.0.8" + }, + "repository": { + "type": "git", + "url": "https://gitlab.coko.foundation/pubsweet/pubsweet", + "path": "Signup" + } +}