Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

571 signup signin page usable #577

Merged
merged 6 commits into from
Sep 13, 2019
Merged

571 signup signin page usable #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9d202ac
add link to sign-up and sign-in page on header login buttons
BenGamma Sep 12, 2019
75ab12a
Merge branch 'v0.6_new_ui_pp' into 571_signup_signin_page_usable
BenGamma Sep 12, 2019
ae45fca
wip sign-in working
BenGamma Sep 12, 2019
411f9ff
Merge branch 'master' into 571_signup_signin_page_usable
BenGamma Sep 13, 2019
041af3f
display errors on sign-in & redirect to / onSuccess
BenGamma Sep 13, 2019
1a12e9d
allow user sign-up
BenGamma Sep 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/pages/PageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import { EventsPage } from './Events/Events'
import { AdminPage } from './admin/Admin'
import { MapsPage } from './Maps/Maps'
import { User } from './User/User'
import { SignUpPage } from './SignUp/SignUp'
import { SignUpMessagePage } from './SignUp/SignUpMessage'
import { ResendSignUpMessagePage } from './SignUp/ResendSignUpMessage'
import { SignInPage } from './SignIn/SignIn'
import SignUpPage from './SignUp/SignUp'
import SignInPage from './SignIn/SignIn'
import { ForgotPasswordPage } from './Password/ForgotPassword'
import { ForgotPasswordMessagePage } from './Password/ForgotPasswordMessage'

Expand Down
2 changes: 1 addition & 1 deletion src/pages/Settings/content/ProfileDelete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class ProfileDelete extends React.Component<IProps, IState> {
<>
<Button
icon="delete"
variant="light"
variant="tertiary"
mt={3}
onClick={() => this.setState({ showDeleteDialog: true })}
>
Expand Down
242 changes: 150 additions & 92 deletions src/pages/SignIn/SignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import * as React from 'react'
import Flex from 'src/components/Flex'
import { RouteComponentProps, withRouter } from 'react-router'
import Heading from 'src/components/Heading'
import styled from 'styled-components'
import theme from 'src/themes/styled.theme'
import { Button } from 'src/components/Button'
import Text from 'src/components/Text'
import { Link } from 'src/components/Links'
import { InputField } from 'src/components/Form/Fields'
import { inject, observer } from 'mobx-react'
import { Form, Field } from 'react-final-form'
import { UserStore } from 'src/stores/User/user.store'

const Label = styled.label`
font-size: ${theme.fontSizes[2] + 'px'}
margin-bottom: ${theme.space[2] + 'px'}
display: block;
`
interface IFormValues {
email: string
password: string
Expand All @@ -23,15 +18,40 @@ interface IState {
formValues: IFormValues
errorMsg?: string
disabled?: boolean
authProvider?: IAuthProvider
}
interface IProps {
interface IProps extends RouteComponentProps<any> {
onChange?: (e: React.FormEvent<any>) => void
userStore?: UserStore
preloadValues?: any
}

interface IAuthProvider {
provider: string
buttonLabel: string
inputLabel: string
}

const AUTH_PROVIDERS: IAuthProvider[] = [
{
provider: 'DH',
buttonLabel: 'Dave Hakkens',
inputLabel: 'davehakkens.nl Username',
},
{
provider: 'Firebase',
buttonLabel: 'Email / Password',
inputLabel: 'Email Address',
},
]

// validation - return undefined if no error (i.e. valid)
const required = (value: any) => (value ? undefined : 'Required')

@inject('userStore')
@observer
export class SignInPage extends React.Component<IProps, IState> {
class SignInPage extends React.Component<IProps, IState> {
static defaultProps: Partial<IProps>
constructor(props: IProps) {
super(props)
this.state = {
Expand All @@ -43,100 +63,138 @@ export class SignInPage extends React.Component<IProps, IState> {
}
}

onLoginSubmit(e) {
console.log(e)
async onLoginSubmit(v: IFormValues) {
this.setState({ disabled: true })
const provider = (this.state.authProvider as IAuthProvider).provider
try {
await this.props.userStore!.login(provider, v.email, v.password)
this.props.history.push('/')
} catch (error) {
this.setState({ errorMsg: error.message, disabled: false })
}
}

public render() {
const disabled =
this.state.disabled ||
this.state.formValues.email === '' ||
this.state.formValues.password === ''
const auth = this.state.authProvider
return (
<Form
onSubmit={e => this.onLoginSubmit(e)}
render={() => (
<form>
<Flex
bg="inherit"
px={2}
width={1}
css={{ maxWidth: '620px' }}
mx={'auto'}
mt={20}
mb={3}
>
<Flex flexDirection={'column'} width={1}>
<Flex card mediumRadius bg={'softblue'} px={3} py={2} width={1}>
<Heading medium width={1}>
Welcome back homie
</Heading>
</Flex>
<Flex
card
mediumRadius
bg={'white'}
width={1}
mt={3}
px={4}
pt={0}
pb={4}
flexWrap="wrap"
flexDirection="column"
>
<Heading small arrowDown py={4} width={1}>
Log in to your account
</Heading>
<Flex flexDirection={'column'} mb={3}>
<Label htmlFor="title">Email / Username</Label>
<Field
name="email"
type="email"
id="email"
component={InputField}
autoComplete="email"
/>
</Flex>
<Flex flexDirection={'column'} mb={3}>
<Label htmlFor="title">Password</Label>
<Field
name="password"
type="password"
id="password"
component={InputField}
autoComplete="current-password"
/>
</Flex>
<Flex mb={3} justifyContent={'space-between'}>
<Text small color={'grey'} mt={2}>
<Link to="#">Don't have an account?</Link>
</Text>
<Text small color={'grey'} mt={2}>
<Link to="#">Lost password?</Link>
</Text>
onSubmit={v => this.onLoginSubmit(v as IFormValues)}
render={({ submitting, values, invalid, handleSubmit }) => {
const disabled = invalid || submitting
return (
<form onSubmit={handleSubmit}>
<Flex
bg="inherit"
px={2}
width={1}
css={{ maxWidth: '620px' }}
mx={'auto'}
mt={20}
mb={3}
>
<Flex flexDirection={'column'} width={1}>
<Flex
card
mediumRadius
bg={'softblue'}
px={3}
py={2}
width={1}
>
<Heading medium width={1}>
Welcome back homie
</Heading>
</Flex>
<Flex
card
mediumRadius
bg={'white'}
width={1}
mt={3}
px={4}
pt={0}
pb={4}
flexWrap="wrap"
flexDirection="column"
>
{/* Auth Provider Select */}
{!this.state.authProvider && (
<>
<Text mb={3} mt={3}>
Login with :
</Text>
{AUTH_PROVIDERS.map(p => (
<Button
width={1}
key={p.provider}
mb={2}
variant="outline"
onClick={() => this.setState({ authProvider: p })}
>
{p.buttonLabel}
</Button>
))}
</>
)}
{/* Login Form */}
{this.state.authProvider && (
<>
<Heading small arrowDown py={4} width={1}>
Log in to your account
</Heading>
<Flex flexDirection={'column'} mb={3}>
<Text as={'label'} small htmlFor="title">
{auth!.inputLabel}
</Text>
<Field
name="email"
type="email"
component={InputField}
validate={required}
/>
</Flex>
<Flex flexDirection={'column'} mb={3}>
<Text as={'label'} small htmlFor="title">
Password
</Text>
<Field
name="password"
type="password"
component={InputField}
validate={required}
/>
</Flex>
<Text color={'red'}>{this.state.errorMsg}</Text>
<Flex mb={3} justifyContent={'space-between'}>
<Text small color={'grey'} mt={2}>
<Link to={'/sign-up'}>Don't have an account?</Link>
</Text>
<Text small color={'grey'} mt={2}>
<Link to="#">Lost password?</Link>
</Text>
</Flex>

<Flex>
<Button
width={1}
variant={'primary'}
disabled={disabled}
type="submit"
>
Log in
</Button>
<Flex>
<Button
width={1}
variant={'primary'}
disabled={submitting || invalid}
type="submit"
>
Log in
</Button>
</Flex>
</>
)}
</Flex>
</Flex>
<Flex mt={3} justifyContent={'flex-end'}>
<Button variant="tertiary" small>
Close
</Button>
</Flex>
</Flex>
</Flex>
</form>
)}
</form>
)
}}
/>
)
}
}

export default withRouter(SignInPage)
Loading