Skip to content
Snippets Groups Projects
Commit 09d26d07 authored by Bogdan Cochior's avatar Bogdan Cochior
Browse files

style(signup): remove 'author' from ttitle

parent 7683a599
No related branches found
No related tags found
1 merge request!14Sprint #15
import React, { Fragment } from 'react'
import { reduxForm } from 'redux-form'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { compose, withState } from 'recompose'
import styled, { css } from 'styled-components'
import { Icon, Button, TextField, ValidatedField } from '@pubsweet/ui'
import { FormItems } from '../UIComponents'
const { Row, RowItem, Label, RootContainer, FormContainer } = FormItems
const Step1 = ({ handleSubmit }) => (
<CustomFormContainer onSubmit={handleSubmit}>
<Fragment>
<CustomRow noMargin>
<CustomRowItem vertical>
<Label>Email</Label>
<ValidatedField
component={TextField}
name="email"
validate={[required]}
/>
</CustomRowItem>
</CustomRow>
<CustomRow>
<CustomRowItem vertical>
<Label>Password</Label>
<ValidatedField
component={TextField}
name="password"
validate={[required]}
/>
</CustomRowItem>
</CustomRow>
<CustomRow>
<CustomRowItem vertical>
<Label>Confirm password</Label>
<ValidatedField
component={TextField}
name="confirmPassword"
validate={[required]}
/>
</CustomRowItem>
</CustomRow>
</Fragment>
<Button primary type="submit">
Next
</Button>
</CustomFormContainer>
)
const AuthorSignupStep1 = reduxForm({
form: 'authorSignup',
destroyOnUnmount: false,
enableReinitialize: true,
forceUnregisterOnUnmount: true,
})(Step1)
const Step2 = ({ handleSubmit }) => (
<CustomFormContainer onSubmit={handleSubmit}>
<Fragment>
<CustomRow noMargin>
<CustomRowItem vertical>
<Label>First name</Label>
<ValidatedField
component={TextField}
name="firstName"
validate={[required]}
/>
</CustomRowItem>
</CustomRow>
<CustomRow noMargin>
<CustomRowItem vertical>
<Label>Last name</Label>
<ValidatedField
component={TextField}
name="lastName"
validate={[required]}
/>
</CustomRowItem>
</CustomRow>
<CustomRow noMargin>
<CustomRowItem vertical>
<Label>Affiliation</Label>
<ValidatedField
component={TextField}
name="affiliation"
validate={[required]}
/>
</CustomRowItem>
</CustomRow>
<CustomRow noMargin>
<CustomRowItem vertical>
<Label>Title</Label>
<ValidatedField
component={TextField}
name="title"
validate={[required]}
/>
</CustomRowItem>
</CustomRow>
</Fragment>
<Button primary type="submit">
Submit
</Button>
</CustomFormContainer>
)
const AuthorSignupStep2 = reduxForm({
form: 'authorSignup',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
onSubmit: null,
})(Step2)
const AuthorWizard = ({ step, changeStep, history }) => (
<CustomRootContainer>
<IconButton onClick={history.goBack}>
<Icon primary size={3}>
x
</Icon>
</IconButton>
<Title>Author Signup</Title>
{step === 0 && <AuthorSignupStep1 onSubmit={() => changeStep(1)} />}
{step === 1 && <AuthorSignupStep2 />}
</CustomRootContainer>
)
export default compose(withState('step', 'changeStep', 0))(AuthorWizard)
// #region styled-components
const verticalPadding = css`
padding: ${th('subGridUnit')} 0;
`
const CustomRow = Row.extend`
div[role='alert'] {
margin-top: 0;
}
`
const CustomRowItem = RowItem.extend`
& > div {
flex: 1;
& > div {
max-width: 400px;
width: 400px;
}
}
`
const CustomRootContainer = RootContainer.extend`
align-items: center;
border: ${th('borderDefault')};
position: relative;
`
const CustomFormContainer = FormContainer.extend`
align-items: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
`
const Title = styled.span`
font-family: ${th('fontHeading')};
font-size: ${th('fontSizeHeading5')};
${verticalPadding};
`
const IconButton = styled.button`
align-items: center;
background-color: ${th('backgroundColorReverse')};
border: none;
color: ${th('colorPrimary')};
cursor: ${({ hide }) => (hide ? 'auto' : 'pointer')};
display: flex;
font-family: ${th('fontInterface')};
font-size: ${th('fontSizeBaseSmall')};
opacity: ${({ hide }) => (hide ? 0 : 1)};
text-align: left;
position: absolute;
top: ${th('subGridUnit')};
right: ${th('subGridUnit')};
&:active,
&:focus {
outline: none;
}
&:hover {
opacity: 0.7;
}
`
// #endregion
export { default as AuthorSignup } from './AuthorSignup'
export { default as ConfirmAccount } from './ConfirmAccount'
export { default as ReviewerSignUp } from './ReviewerSignUp'
export { default as ReviewerDecline } from './ReviewerDecline'
......
......@@ -34,7 +34,7 @@ export const parseSearchParams = url => {
export const login = (dispatch, values, history) =>
dispatch(loginUser(values))
.then(() => {
history.push('/')
history.replace('/')
})
.catch(handleFormError)
......
......@@ -49,7 +49,7 @@ const Routes = () => (
component={routeParams => (
<SignUpInvitationPage
subtitle={null}
title="Author signup"
title="Sign up"
type="signup"
{...routeParams}
/>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment