Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up login and invite page UI

Browse Source
This commit is contained in:
Jackson Harper
2022-12-08 12:05:44 +08:00
parent 7b2549c6e7
commit e9757e3391
9 changed files with 418 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/web/components/templates/auth/EmailForgotPassword.tsx
View File

@ -2,32 +2,19 @@ import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
import { useEffect, useState } from 'react'
import { FormInput } from '../../elements/FormElements'
import { BorderedFormInput, FormLabel } from '../../elements/FormElements'
import { fetchEndpoint } from '../../../lib/appConfig'
import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation'
import { styled } from '@stitches/react'
import { useRouter } from 'next/router'
import { formatMessage } from '../../../locales/en/messages'
import { parseErrorCodes } from '../../../lib/queryParamParser'
const BorderedFormInput = styled(FormInput, {
height: '40px',
paddingLeft: '6px',
borderRadius: '6px',
background: 'white',
color: '$omnivoreGray',
border: `1px solid 1px solid rgba(0, 0, 0, 0.06)`,
})
const FormLabel = styled('label', {
fontSize: '16px',
color: '$omnivoreGray',
})
export function EmailForgotPassword(): JSX.Element {
const router = useRouter()
const [email, setEmail] = useState<string>('')
const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(
undefined
)
useEffect(() => {
if (!router.isReady) return
@ -40,9 +27,24 @@ export function EmailForgotPassword(): JSX.Element {
return (
<form action={`${fetchEndpoint}/auth/forgot-password`} method="POST">
<VStack alignment="center" css={{ padding: '16px' }}>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>Reset your password</StyledText>
<VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
<VStack
alignment="center"
css={{
padding: '16px',
background: 'white',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',
borderRadius: '8px',
boxShadow: 'rgb(224 224 224) 9px 9px 9px -9px',
}}
>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
Reset your password
</StyledText>
<VStack
css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
>
<SpanBox css={{ width: '100%' }}>
<FormLabel>Email</FormLabel>
<BorderedFormInput
@ -52,15 +54,16 @@ export function EmailForgotPassword(): JSX.Element {
value={email}
placeholder="Email"
css={{ bg: 'white', color: 'black' }}
onChange={(e) => { e.preventDefault(); setEmail(e.target.value); }}
onChange={(e) => {
e.preventDefault()
setEmail(e.target.value)
}}
/>
</SpanBox>
</VStack>
{errorMessage && (
<StyledText style="error">{errorMessage}</StyledText>
)}
<Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
Reset Password
</Button>
<Button

84
packages/web/components/templates/auth/EmailLogin.tsx
View File

@ -1,9 +1,8 @@
import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
import { StyledText, StyledTextSpan } from '../../elements/StyledText'
import { useEffect, useState } from 'react'
import { FormInput } from '../../elements/FormElements'
import { TermAndConditionsFooter } from '../LoginForm'
import { BorderedFormInput, FormLabel } from '../../elements/FormElements'
import { fetchEndpoint } from '../../../lib/appConfig'
import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation'
import { styled } from '@stitches/react'
@ -12,26 +11,13 @@ import { parseErrorCodes } from '../../../lib/queryParamParser'
import { formatMessage } from '../../../locales/en/messages'
import Link from 'next/link'
const StyledTextSpan = styled('span', StyledText)
const BorderedFormInput = styled(FormInput, {
height: '40px',
paddingLeft: '6px',
borderRadius: '6px',
background: 'white',
border: `1px solid 1px solid rgba(0, 0, 0, 0.06)`,
})
const FormLabel = styled('label', {
fontSize: '16px',
color: '$omnivoreGray',
})
export function EmailLogin(): JSX.Element {
const router = useRouter()
const [email, setEmail] = useState<string | undefined>(undefined)
const [password, setPassword] = useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(
undefined
)
useEffect(() => {
if (!router.isReady) return
@ -44,9 +30,24 @@ export function EmailLogin(): JSX.Element {
return (
<form action={`${fetchEndpoint}/auth/email-login`} method="POST">
<VStack alignment="center" css={{ padding: '16px' }}>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>Login</StyledText>
<VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
<VStack
alignment="center"
css={{
padding: '16px',
background: 'white',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',
borderRadius: '8px',
boxShadow: 'rgb(224 224 224) 9px 9px 9px -9px',
}}
>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
Login
</StyledText>
<VStack
css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
>
<SpanBox css={{ width: '100%' }}>
<FormLabel>Email</FormLabel>
<BorderedFormInput
@ -56,7 +57,10 @@ export function EmailLogin(): JSX.Element {
value={email}
placeholder="Email"
css={{ backgroundColor: 'white', color: 'black' }}
onChange={(e) => { e.preventDefault(); setEmail(e.target.value); }}
onChange={(e) => {
e.preventDefault()
setEmail(e.target.value)
}}
/>
</SpanBox>
@ -73,10 +77,8 @@ export function EmailLogin(): JSX.Element {
/>
</SpanBox>
</VStack>
{errorMessage && (
<StyledText style="error">{errorMessage}</StyledText>
)}
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<HStack
alignment="center"
@ -87,7 +89,11 @@ export function EmailLogin(): JSX.Element {
height: '80px',
}}
>
<Button style={'ctaOutlineYellow'} css={{ color: '$omnivoreGray', borderColor: '$omnivoreLightGray' }} type="button" onClick={async (event) => {
<Button
style={'ctaOutlineYellow'}
css={{ color: '$omnivoreGray', borderColor: '$omnivoreLightGray' }}
type="button"
onClick={async (event) => {
window.localStorage.removeItem('authVerified')
window.localStorage.removeItem('authToken')
try {
@ -100,7 +106,9 @@ export function EmailLogin(): JSX.Element {
>
Cancel
</Button>
<Button type="submit" style={'ctaDarkYellow'}>Login</Button>
<Button type="submit" style={'ctaDarkYellow'}>
Login
</Button>
</HStack>
<StyledText
style="action"
@ -109,12 +117,15 @@ export function EmailLogin(): JSX.Element {
pt: '16px',
width: '100%',
color: '$omnivoreLightGray',
textAlign: 'center'
textAlign: 'center',
whiteSpace: 'normal',
}}
>
Don&apos;t have an account? {' '}
Don&apos;t have an account?{' '}
<Link href="/auth/email-signup" passHref>
<StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>Sign up</StyledTextSpan>
<StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>
Sign up
</StyledTextSpan>
</Link>
</StyledText>
<StyledText
@ -124,12 +135,15 @@ export function EmailLogin(): JSX.Element {
pt: '4px',
width: '100%',
color: '$omnivoreLightGray',
textAlign: 'center'
textAlign: 'center',
whiteSpace: 'normal',
}}
>
Forgot your password? {' '}
Forgot your password?{' '}
<Link href="/auth/forgot-password" passHref>
<StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>Click here</StyledTextSpan>
<StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>
Click here
</StyledTextSpan>
</Link>
</StyledText>
</VStack>

59
packages/web/components/templates/auth/EmailResetPassword.tsx
View File

@ -2,35 +2,20 @@ import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
import { useEffect, useState } from 'react'
import { FormInput } from '../../elements/FormElements'
import { TermAndConditionsFooter } from '../LoginForm'
import { BorderedFormInput, FormLabel } from '../../elements/FormElements'
import { fetchEndpoint } from '../../../lib/appConfig'
import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation'
import { styled } from '@stitches/react'
import { useRouter } from 'next/router'
import { formatMessage } from '../../../locales/en/messages'
import { parseErrorCodes } from '../../../lib/queryParamParser'
import { LoadingView } from '../../patterns/LoadingView'
const BorderedFormInput = styled(FormInput, {
height: '40px',
paddingLeft: '6px',
borderRadius: '6px',
background: 'white',
color: '$omnivoreGray',
border: `1px solid 1px solid rgba(0, 0, 0, 0.06)`,
})
const FormLabel = styled('label', {
fontSize: '16px',
color: '$omnivoreGray',
})
export function EmailResetPassword(): JSX.Element {
const router = useRouter()
const [token, setToken] = useState<string | undefined>(undefined)
const [password, setPassword] = useState<string>('')
const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(
undefined
)
useEffect(() => {
if (!router.isReady) return
@ -38,7 +23,7 @@ export function EmailResetPassword(): JSX.Element {
const errorMsg = errorCode
? formatMessage({ id: `error.${errorCode}` })
: undefined
console.log('errorCode', errorCode, errorMsg)
setErrorMessage(errorMsg)
@ -51,8 +36,21 @@ export function EmailResetPassword(): JSX.Element {
return (
<form action={`${fetchEndpoint}/auth/reset-password`} method="POST">
<VStack alignment="center" css={{ padding: '16px' }}>
<VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
<VStack
alignment="center"
css={{
padding: '16px',
background: 'white',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',
borderRadius: '8px',
boxShadow: 'rgb(224 224 224) 9px 9px 9px -9px',
}}
>
<VStack
css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
>
<SpanBox css={{ width: '100%' }}>
<FormLabel>Enter new password</FormLabel>
<BorderedFormInput
@ -62,18 +60,21 @@ export function EmailResetPassword(): JSX.Element {
value={password}
placeholder="Password"
css={{ bg: 'white', color: 'black' }}
onChange={(e) => { e.preventDefault(); setPassword(e.target.value); }}
onChange={(e) => {
e.preventDefault()
setPassword(e.target.value)
}}
/>
<FormLabel css={{ fontSize: '12px' }}>(Password must be at least 8 chars)</FormLabel>
<FormLabel css={{ fontSize: '12px' }}>
(Password must be at least 8 chars)
</FormLabel>
<input type="hidden" name="token" value={token} />
</SpanBox>
</VStack>
{errorMessage && (
<StyledText style="error">{errorMessage}</StyledText>
)}
<Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
Update Password
</Button>
</VStack>

88
packages/web/components/templates/auth/EmailSignup.tsx
View File

@ -1,8 +1,8 @@
import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { FormInput } from '../../elements/FormElements'
import { StyledText, StyledTextSpan } from '../../elements/StyledText'
import { useCallback, useEffect, useState } from 'react'
import { BorderedFormInput, FormLabel } from '../../elements/FormElements'
import { TermAndConditionsFooter } from '../LoginForm'
import { fetchEndpoint } from '../../../lib/appConfig'
import { useValidateUsernameQuery } from '../../../lib/networking/queries/useValidateUsernameQuery'
@ -13,29 +13,18 @@ import { formatMessage } from '../../../locales/en/messages'
import { parseErrorCodes } from '../../../lib/queryParamParser'
import Link from 'next/link'
const StyledTextSpan = styled('span', StyledText)
const BorderedFormInput = styled(FormInput, {
height: '40px',
paddingLeft: '6px',
borderRadius: '6px',
background: 'white',
border: `1px solid 1px solid rgba(0, 0, 0, 0.06)`,
})
const FormLabel = styled('label', {
fontSize: '16px',
color: '$omnivoreGray',
})
export function EmailSignup(): JSX.Element {
const router = useRouter()
const [email, setEmail] = useState<string | undefined>(undefined)
const [password, setPassword] = useState<string | undefined>(undefined)
const [fullname, setFullname] = useState<string | undefined>(undefined)
const [username, setUsername] = useState<string | undefined>(undefined)
const [debouncedUsername, setDebouncedUsername] = useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
const [debouncedUsername, setDebouncedUsername] = useState<
string | undefined
>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(
undefined
)
useEffect(() => {
if (!router.isReady) return
@ -62,9 +51,24 @@ export function EmailSignup(): JSX.Element {
return (
<form action={`${fetchEndpoint}/auth/email-signup`} method="POST">
<VStack alignment="center" css={{ padding: '16px' }}>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>Sign Up</StyledText>
<VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
<VStack
alignment="center"
css={{
padding: '16px',
background: 'white',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',
borderRadius: '8px',
boxShadow: 'rgb(224 224 224) 9px 9px 9px -9px',
}}
>
<StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
Sign Up
</StyledText>
<VStack
css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
>
<SpanBox css={{ width: '100%' }}>
<FormLabel>Email</FormLabel>
<BorderedFormInput
@ -74,7 +78,10 @@ export function EmailSignup(): JSX.Element {
value={email}
placeholder="Email"
css={{ backgroundColor: 'white', color: 'black' }}
onChange={(e) => { e.preventDefault(); setEmail(e.target.value); }}
onChange={(e) => {
e.preventDefault()
setEmail(e.target.value)
}}
/>
</SpanBox>
@ -132,17 +139,20 @@ export function EmailSignup(): JSX.Element {
{isUsernameValid && (
<StyledText
style="caption"
css={{ m: 0, pl: '$2', alignSelf: 'flex-start', color: '$omnivoreGray' }}
css={{
m: 0,
pl: '$2',
alignSelf: 'flex-start',
color: '$omnivoreGray',
}}
>
Username is available.
</StyledText>
)}
</VStack>
{errorMessage && (
<StyledText style="error">{errorMessage}</StyledText>
)}
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<HStack
alignment="center"
distribution="end"
@ -152,7 +162,11 @@ export function EmailSignup(): JSX.Element {
height: '80px',
}}
>
<Button style={'ctaOutlineYellow'} css={{ color: '$omnivoreGray', borderColor: 'rgba(0, 0, 0, 0.06)' }} type="button" onClick={async (event) => {
<Button
style={'ctaOutlineYellow'}
css={{ color: '$omnivoreGray', borderColor: 'rgba(0, 0, 0, 0.06)' }}
type="button"
onClick={async (event) => {
window.localStorage.removeItem('authVerified')
window.localStorage.removeItem('authToken')
try {
@ -165,7 +179,9 @@ export function EmailSignup(): JSX.Element {
>
Cancel
</Button>
<Button type="submit" style={'ctaDarkYellow'}>Sign Up</Button>
<Button type="submit" style={'ctaDarkYellow'}>
Sign Up
</Button>
</HStack>
<StyledText
@ -173,12 +189,14 @@ export function EmailSignup(): JSX.Element {
css={{
pt: '16px',
color: '$omnivoreLightGray',
textAlign: 'center'
textAlign: 'center',
}}
>
Already have an account? {' '}
Already have an account?{' '}
<Link href="/auth/email-login" passHref>
<StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>Login instead</StyledTextSpan>
<StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>
Login instead
</StyledTextSpan>
</Link>
</StyledText>
<TermAndConditionsFooter />

33
packages/web/components/templates/auth/VerifyEmail.tsx
View File

@ -1,7 +1,5 @@
import { Box, HStack, MediumBreakpointBox, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Box, HStack } from '../../elements/LayoutPrimitives'
import type { LoginFormProps } from '../LoginForm'
import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
import { theme } from '../../tokens/stitches.config'
export function VerifyEmail(props: LoginFormProps): JSX.Element {
return (
@ -13,23 +11,24 @@ export function VerifyEmail(props: LoginFormProps): JSX.Element {
width: '100vw',
height: '100vh',
bg: '$omnivoreYellow',
overflowY: 'clip'
overflowY: 'clip',
}}
>
<Box css={{
width: '100%',
margin: '40px',
color: '$omnivoreGray',
'@xl': { margin: '138px' },
}}>
<h1>Verify your email address</h1>
<Box>
We sent a verification link to the email you provided.
Click the link to verify your email. You may need to check
your spam folder.
<Box
css={{
width: '100%',
margin: '40px',
color: '$omnivoreGray',
'@xl': { margin: '138px' },
}}
>
<h1>Verify your email address</h1>
<Box>
We sent a verification link to the email you provided. Click the
link to verify your email. You may need to check your spam folder.
</Box>
</Box>
</Box>
</HStack>
</HStack>
</>
)
}