Skip to content

Commit

Permalink
Merge branch 'master' into chore/react-router-elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariojsnunes
mariojsnunes committed Jul 11, 2024
2 parents 41b1caa + 5653093 commit fb7ea76
Show file tree
Hide file tree
Showing 10 changed files with 164 additions and 199 deletions.
18 changes: 18 additions & 0 deletions packages/components/assets/images/email.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 0 additions & 12 deletions packages/components/src/CelebrationHero/CelebrationHere.stories.tsx
View file

This file was deleted.

7 changes: 0 additions & 7 deletions packages/components/src/CelebrationHero/CelebrationHero.tsx
View file

This file was deleted.

16 changes: 16 additions & 0 deletions packages/components/src/HeroBanner/HeroBanner.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { HeroBanner } from './HeroBanner'

import type { Meta, StoryFn } from '@storybook/react'

export default {
title: 'Components/HeroBanner',
component: HeroBanner,
} as Meta<typeof HeroBanner>

export const Celebration: StoryFn<typeof HeroBanner> = () => (
<HeroBanner type="celebration" />
)

export const Email: StoryFn<typeof HeroBanner> = () => (
<HeroBanner type="email" />
)
17 changes: 17 additions & 0 deletions packages/components/src/HeroBanner/HeroBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Image } from 'theme-ui'

import Celebration from '../../assets/images/celebration.svg'
import Email from '../../assets/images/email.svg'

export interface IProps {
type: 'celebration' | 'email'
}

export const HeroBanner = ({ type }: IProps) => {
const src = {
celebration: Celebration,
email: Email,
}

return <Image loading="lazy" src={src[type]} />
}
2 changes: 1 addition & 1 deletion packages/components/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export { CommentItem } from './CommentItem/CommentItem'
export { CommentList } from './CommentList/CommentList'
export { CreateReply } from './CreateReply/CreateReply'
export { ConfirmModal } from './ConfirmModal/ConfirmModal'
export { CelebrationHero } from './CelebrationHero/CelebrationHero'
export { CreateComment } from './CreateComment/CreateComment'
export { DiscussionContainer } from './DiscussionContainer/DiscussionContainer'
export { DiscussionTitle } from './DiscussionTitle/DiscussionTitle'
Expand All @@ -29,6 +28,7 @@ export { Guidelines } from './Guidelines/Guidelines'
export { FlagIcon, FlagIconHowTos, FlagIconEvents } from './FlagIcon/FlagIcon'
export { FollowButton } from './FollowButton/FollowButton'
export { GlobalStyles } from './GlobalStyles/GlobalStyles'
export { HeroBanner } from './HeroBanner/HeroBanner'
export { Icon } from './Icon/Icon'
export { IconCountWithTooltip } from './IconCountWithTooltip/IconCountWithTooltip'
export { ImageCrop } from './ImageCrop/ImageCrop'
Expand Down
2 changes: 1 addition & 1 deletion packages/cypress/src/integration/SignUp.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('[User sign-up]', () => {

cy.step('Using valid inputs')
cy.signUpNewUser()
cy.get('div').contains('Sign up successful').should('be.visible')
cy.contains('Yay! You signed up!')
cy.get('[data-cy=user-menu]')
})
})
Expand Down
189 changes: 73 additions & 116 deletions src/pages/SignIn/SignIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,7 @@ import React, { useEffect, useState } from 'react'
import { Field, Form } from 'react-final-form'
import { Link, useNavigate } from 'react-router-dom'
import { observer } from 'mobx-react'
import {
Button,
CelebrationHero,
FieldInput,
TextNotification,
} from 'oa-components'
import { Button, FieldInput, HeroBanner, TextNotification } from 'oa-components'
import { getFriendlyMessage } from 'oa-shared'
import { PasswordField } from 'src/common/Form/PasswordField'
import { useCommonStores } from 'src/common/hooks/useCommonStores'
Expand Down Expand Up @@ -53,7 +48,6 @@ const SignInPage = observer((props: IProps) => {
const navigate = useNavigate()
const [{ authProvider, notificationProps, errorMsg }, setState] =
useState<IState>({
// if passed form values from props initially populate
formValues: {
email: props.preloadValues ? props.preloadValues.email : '',
password: props.preloadValues ? props.preloadValues.password : '',
Expand Down Expand Up @@ -123,125 +117,88 @@ const SignInPage = observer((props: IProps) => {
mb={3}
>
<Flex sx={{ flexDirection: 'column', width: '100%' }}>
<CelebrationHero />
<Card bg={'softblue'}>
<Flex px={3} py={2}>
<Heading>Welcome back</Heading>
</Flex>
</Card>
<Card mt={3}>
<HeroBanner type="celebration" />
<Card sx={{ borderRadius: 3 }}>
<Flex
px={4}
pt={0}
pb={4}
sx={{
flexWrap: 'wrap',
flexDirection: 'column',
padding: 4,
gap: 4,
width: '100%',
}}
>
{/* PauthProvider Provider Select */}
{!authProvider && (
<>
<Text mb={3} mt={3}>
Login with :
</Text>
{Object.values(AUTH_PROVIDERS).map((p) => (
<Button
sx={{ width: '100%' }}
key={p.provider}
mb={2}
variant="outline"
onClick={() =>
setState((state) => ({
...state,
authProvider: p,
}))
}
>
{p.buttonLabel}
</Button>
))}
</>
)}
{/* Login Form */}
{authProvider && (
<>
<Heading
variant="small"
py={4}
sx={{ width: '100%' }}
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<Heading>Log in</Heading>
<Text sx={{ fontSize: 1 }} color={'grey'}>
<Link to={'/sign-up'} data-cy="no-account">
Don't have an account? Sign-up here
</Link>
</Text>
</Flex>

{notificationProps && notificationProps.text && (
<Box>
<TextNotification
isVisible={notificationProps.isVisible}
variant={notificationProps.variant}
>
Log in to your account
</Heading>
<Flex sx={{ flexDirection: 'column' }} mb={3}>
<Label htmlFor="title">
{authProvider!.inputLabel}
</Label>
<Field
name="email"
type="email"
data-cy="email"
component={FieldInput}
validate={required}
/>
</Flex>
<Flex sx={{ flexDirection: 'column' }} mb={3}>
<Label htmlFor="title">Password</Label>
<PasswordField
name="password"
data-cy="password"
component={FieldInput}
validate={required}
/>
</Flex>
<Text color="red">{errorMsg}</Text>
<Flex mb={1} sx={{ justifyContent: 'space-between' }}>
<Text sx={{ fontSize: 1 }} color={'grey'} mt={2}>
<Link to={'/sign-up'} data-cy="no-account">
Don't have an account?
</Link>
</Text>
<Text sx={{ fontSize: 1 }} color={'grey'} mt={2}>
<Link
to="#"
data-cy="lost-password"
onClick={() => resetPasword(values.email)}
>
Lost password?
</Link>
</Text>
</Flex>
{getFriendlyMessage(notificationProps?.text)}
</TextNotification>
</Box>
)}

{notificationProps && (
<Box
sx={{
marginBottom: 3,
}}
>
<TextNotification
isVisible={notificationProps.isVisible}
variant={notificationProps.variant}
>
{getFriendlyMessage(notificationProps?.text)}
</TextNotification>
</Box>
)}
{errorMsg && <Text color="red">{errorMsg}</Text>}

<Flex>
<Button
large
data-cy="submit"
sx={{ width: '100%', justifyContent: 'center' }}
variant={'primary'}
disabled={submitting || invalid}
type="submit"
>
Log in
</Button>
</Flex>
</>
)}
<Flex sx={{ flexDirection: 'column' }}>
<Label htmlFor="title">
{authProvider!.inputLabel}
</Label>
<Field
name="email"
type="email"
data-cy="email"
component={FieldInput}
validate={required}
/>
</Flex>
<Flex sx={{ flexDirection: 'column' }}>
<Label htmlFor="title">Password</Label>
<PasswordField
name="password"
data-cy="password"
component={FieldInput}
validate={required}
/>
</Flex>
<Flex sx={{ justifyContent: 'space-between' }}>
<Text sx={{ fontSize: 1 }} color={'grey'}>
<Link
to="#"
data-cy="lost-password"
onClick={() => resetPasword(values.email)}
>
Forgotten password?
</Link>
</Text>
</Flex>

<Flex>
<Button
large
data-cy="submit"
sx={{
borderRadius: 3,
width: '100%',
justifyContent: 'center',
}}
variant={'primary'}
disabled={submitting || invalid}
type="submit"
>
Log in
</Button>
</Flex>
</Flex>
</Card>
</Flex>
Expand Down
Loading

0 comments on commit fb7ea76

Please sign in to comment.