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

F/styles refactor #771

Merged
merged 10 commits into from
Sep 24, 2024
Merged

F/styles refactor #771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ef2a321
refactor styles
gerouvi Sep 23, 2024
e609cc5
added spacing
gerouvi Sep 23, 2024
a42be37
fixed lint issue
gerouvi Sep 23, 2024
7140d6d
Merge remote-tracking branch 'origin/d/saas' into f/styles-refactor
gerouvi Sep 23, 2024
5944f97
removed authbanner second return
gerouvi Sep 23, 2024
d07c02c
fixed review issues
gerouvi Sep 23, 2024
2bc85a5
create org form
gerouvi Sep 23, 2024
ef0ca37
added foldback error message
gerouvi Sep 23, 2024
8ff14a2
terms and conditions link i18n
gerouvi Sep 23, 2024
9e550c6
fixed links issues
gerouvi Sep 23, 2024
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
6 changes: 4 additions & 2 deletions src/components/Account/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ import { useCallback, useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
import { useAccount } from 'wagmi'
import { CreateAccountParams, useAccountCreate } from '~components/Account/useAccountCreate'
import { ucfirst } from '~constants/strings'
import { Check, Close } from '~theme/icons'
import { useAccountHealthTools } from './use-account-health-tools'
import hello from '/shared/hello.jpeg'
import { CreateAccountParams, useAccountCreate } from '~components/Account/useAccountCreate'

export const AccountCreate = ({ children, ...props }: FlexProps) => {
const { t } = useTranslation()
Expand Down Expand Up @@ -86,7 +86,9 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
mb={1}
placeholder={t('form.account_create.title_placeholder').toString()}
/>
{!!errors.name && <FormErrorMessage>{errors.name?.message?.toString()}</FormErrorMessage>}
{!!errors.name && (
<FormErrorMessage>{errors.name?.message || 'Error performing the operation'}</FormErrorMessage>
)}
</FormControl>

<FormControl mb={5}>
Expand Down
113 changes: 58 additions & 55 deletions src/components/AccountSaas/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,33 @@
import {
Alert,
AlertIcon,
Box,
Checkbox,
Flex,
FlexProps,
FormControl,
FormErrorMessage,
FormLabel,
Heading,
Input,
Text,
Textarea,
} from '@chakra-ui/react'
import { Button } from '@vocdoni/chakra-components'
import { FormProvider, useForm } from 'react-hook-form'
import { Trans, useTranslation } from 'react-i18next'

import { useMutation, UseMutationOptions } from '@tanstack/react-query'
import { useClient } from '@vocdoni/react-providers'
import { useState } from 'react'
import { useAccountCreate } from '~components/Account/useAccountCreate'
import { ApiEndpoints } from '~components/Auth/api'
import { useAuth } from '~components/Auth/useAuth'
import CheckboxCustom from '~components/Layout/CheckboxCustom'
import InputCustom from '~components/Layout/InputCustom'
import {
CountriesTypesSelector,
MembershipSizeTypesSelector,
OrganzationTypesSelector,
SelectOptionType,
} from '~components/Layout/SaasSelector'
import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
import { useMutation, UseMutationOptions } from '@tanstack/react-query'
import { ApiEndpoints } from '~components/Auth/api'
import { useAuth } from '~components/Auth/useAuth'
import { useClient } from '@vocdoni/react-providers'
import { useAccountCreate } from '~components/Account/useAccountCreate'
import { useState } from 'react'

interface OrgInterface {
name: string
Expand Down Expand Up @@ -122,6 +120,9 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
as='form'
id='process-create-form'
direction='column'
gap={6}
maxW='90%'
mx='auto'
{...props}
onSubmit={(e) => {
e.stopPropagation()
Expand All @@ -131,74 +132,76 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
>
{children}
<Box me='auto'>
<Heading color={textColor} fontSize='36px' mb='24px'>
<Heading color={textColor} fontSize='36px' mb={4}>
<Trans i18nKey='create_org.title'>Create Your Organization</Trans>
</Heading>
<Text color={textColor} fontWeight='bold'>
<Trans i18nKey='create_org.public_info'>Public Organization Information</Trans>
</Text>
</Box>
<Text color={textColor} fontWeight='bold' mb='24px'>
<Trans i18nKey='create_org.public_info'>Public Organization Information</Trans>
</Text>
<Box px={{ base: 5, md: 10 }}>
<FormControl isInvalid={!!errors.name} mb='24px'>
<FormLabel display='flex' ms='4px' fontSize='sm' fontWeight='500' color={textColor} mb='8px'>
{t('name', { defaultValue: 'Name' })}
<Text color={textColorBrand}>*</Text>
</FormLabel>
<Input
type='text'
{...register('name', { required })}
placeholder={t('form.account_create.title_placeholder')}
/>
{!!errors.name && <FormErrorMessage>{errors.name?.message}</FormErrorMessage>}
</FormControl>
<FormControl isInvalid={!!errors.name} mb='24px'>
<FormLabel ms='4px' fontSize='sm' fontWeight='500' color={textColor} mb='8px'>
<Trans i18nKey='website'>Website</Trans>
</FormLabel>
<Input type='text' {...register('website')} placeholder={'https://example.com'} />
{!!errors.website && <FormErrorMessage>{errors.website?.message}</FormErrorMessage>}
</FormControl>
<FormControl mb='32px'>

<Flex flexDirection='column' gap={6} px={{ base: 5, md: 10 }}>
<InputCustom
formValue='name'
label={t('name', { defaultValue: 'Name' })}
placeholder={t('form.account_create.title_placeholder', {
defaultValue: "Enter your organization's emial",
})}
type='text'
required
/>
<InputCustom
formValue='website'
label={t('website', { defaultValue: 'Website' })}
placeholder={t('form.account_create.website_placeholder', {
defaultValue: 'https://example.com',
})}
type='text'
required
/>

<FormControl>
<FormLabel ms='4px' fontSize='sm' fontWeight='500' color={textColor}>
<Trans i18nKey='description'>Description</Trans>
</FormLabel>
<Textarea {...register('description')} placeholder={t('form.account_create.description_placeholder')} />
</FormControl>
</Flex>
<Box>
<Text color={textColor} fontWeight='bold' mb={4}>
<Trans i18nKey='create_org.private_org'>Private Organization Details</Trans>
</Text>
<Text color={textColorSecondary} fontSize='sm'>
<Trans i18nKey='create_org.private_org_description'>
Help us tailor your experience with information about your org. We won't share this info
</Trans>
</Text>
</Box>
<Text color={textColor} fontWeight='bold' mb='0px'>
<Trans i18nKey='create_org.private_org'>Private Organization Details</Trans>
</Text>
<Text color={textColorSecondary} mb='24px' fontSize='sm'>
<Trans i18nKey='create_org.private_org_description'>
Help us tailor your experience with information about your org. We won't share this info
</Trans>
</Text>
<Flex px={{ base: 5, md: 10 }} direction={'column'} gap={8}>
<Flex px={{ base: 5, md: 10 }} direction={'column'} gap={6}>
<MembershipSizeTypesSelector name={'sizeSelect'} required />
<OrganzationTypesSelector name={'typeSelect'} required />
<CountriesTypesSelector name={'countrySelect'} required />
</Flex>
<FormControl display='flex' alignItems='start' my='12px'>
<Checkbox {...register('communications')} colorScheme='brandScheme' me='10px' mt='4px' />
<FormLabel mb='0' fontWeight='normal' color={textColor} fontSize='sm'>
<Trans i18nKey='create_org.communication'>
I want to receive communications and be contacted to tailor my governance experience.
</Trans>
</FormLabel>
</FormControl>
<Button form='process-create-form' type='submit' isLoading={isPending} mx='auto' mb='32px' w='80%'>

<CheckboxCustom
formValue='communications'
label={t('create_org.communication', {
defaultValue: ' I want to receive communications and be contacted to tailor my governance experience.',
})}
/>
<Button form='process-create-form' type='submit' isLoading={isPending} mx='auto' mt={8} w='80%'>
{t('organization.create_org')}
</Button>
<Box pt={2}>
<FormControl isInvalid={isError}>
{isError && error !== IgnoreAccountError && (
<FormErrorMessage>
{typeof error === 'string' ? error : error?.message || 'Error al realizar la operación'}
{typeof error === 'string' ? error : error?.message || 'Error performing the operation'}
</FormErrorMessage>
)}
</FormControl>
</Box>
<Text color={textColorSecondary} fontSize='sm'>
<Text color={textColorSecondary} fontSize='sm' textAlign='center' py={5} mt='auto'>
<Trans i18nKey='create_org.already_profile'>
If your organization already have a profile, ask the admin to invite you to your organization.
</Trans>
Expand Down
18 changes: 9 additions & 9 deletions src/components/Auth/ForgotPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,35 +17,35 @@ function ForgotPassword() {
const onSubmit = () => {}

return (
<Flex direction='column'>
<Flex direction='column' gap={6}>
<Box me='auto'>
<Heading color={textColor} fontSize='36px' mb='10px'>
<Heading color={textColor} fontSize='4xl' mb={2.5}>
{t('forgot_password_title')}
</Heading>
<Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='400' fontSize='md'>
<Text color={textColorSecondary} fontWeight='400' fontSize='md'>
{t('forgot_password_subtitle')}
</Text>
</Box>

<FormProvider {...methods}>
<Box as='form' onSubmit={methods.handleSubmit(onSubmit)}>
<Flex as='form' onSubmit={methods.handleSubmit(onSubmit)} flexDirection='column' gap={6}>
<InputCustom
formValue='email'
label={t('email')}
placeholder={t('email_placeholder', { defaultValue: '[email protected]' })}
type='email'
required
/>
<Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h='50' mb='24px'>
<Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h={50}>
{t('forgot_password_reset_link')}
</Button>
</Box>
</Flex>
</FormProvider>
<Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt='0px'>
<Text color={textColorSecondary} fontWeight='400' fontSize='14px'>
<Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt={0}>
<Text color={textColorSecondary} fontWeight='400' fontSize='sm'>
{t('already_member')}
<NavLink to='/signin'>
<Text color={textColorBrand} as='span' ms='5px' fontWeight='500'>
<Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
{t('signin')}
</Text>
</NavLink>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Auth/GoogleAuth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const GoogleAuth = () => {
_active={googleActive}
_focus={googleActive}
>
<Icon as={FcGoogle} w='20px' h='20px' me='10px' />
<Icon as={FcGoogle} w={5} h={5} me={2} />

{t('signin_google')}
</Button>
Expand Down
52 changes: 27 additions & 25 deletions src/components/Auth/SignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { Box, Button, Flex, FormControl, FormErrorMessage, Heading, Text } from '@chakra-ui/react'
import { useState } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
import { NavLink, useNavigate } from 'react-router-dom'
import { UnverifiedApiError } from '~components/Auth/api'
import { ILoginParams } from '~components/Auth/authQueries'
import { useAuth } from '~components/Auth/useAuth'
import { VerifyAccountNeeded } from '~components/Auth/Verify'
import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
import CustomCheckbox from '../Layout/CheckboxCustom'
import InputCustom from '../Layout/InputCustom'
import GoogleAuth from './GoogleAuth'
import { ILoginParams } from '~components/Auth/authQueries'
import { UnverifiedApiError } from '~components/Auth/api'
import { useState } from 'react'
import { VerifyAccountNeeded } from '~components/Auth/Verify'

type FormData = {
keepLogedIn: boolean
Expand Down Expand Up @@ -46,25 +46,25 @@ const SignIn = () => {
}

return (
<Flex direction='column'>
<Flex direction='column' gap={6}>
<Box me='auto'>
<Heading color={textColor} fontSize='36px' mb='10px'>
<Heading color={textColor} fontSize='4xl' mb={2.5}>
{t('signin_title')}
</Heading>
<Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='400' fontSize='md'>
<Text color={textColorSecondary} fontWeight='400' fontSize='md'>
{t('signin_subtitle')}
</Text>
</Box>
<GoogleAuth />
<Flex align='center' my='24px'>
<Flex align='center'>
<HSeparator />
<Text color='gray.400' mx='14px'>
<Text color='gray.400' mx={3.5}>
{t('or')}
</Text>
<HSeparator />
</Flex>
<FormProvider {...methods}>
<Box as='form' onSubmit={handleSubmit(onSubmit)}>
<Flex as='form' onSubmit={handleSubmit(onSubmit)} flexDirection='column' gap={6}>
<InputCustom
formValue='email'
label={t('email')}
Expand All @@ -79,43 +79,45 @@ const SignIn = () => {
type='password'
required
/>
<Flex justifyContent='center' align='center' mb='24px'>
<CustomCheckbox formValue='keepLogedIn' label={t('keep_me_logged', { defaultValue: 'Kepp me logged' })} />
<Flex justifyContent='center' align='center'>
<CustomCheckbox formValue='keepLogedIn' label={t('keep_me_logged', { defaultValue: 'Keep me logged' })} />

<NavLink to='/auth/forgot-password'>
<Text color={textColorBrand} fontSize='sm' w='124px' fontWeight='500'>
<NavLink to='/account/recovery'>
<Text color={textColorBrand} fontSize='sm' fontWeight='500' whiteSpace='nowrap'>
{t('forgot_password')}
</Text>
</NavLink>
</Flex>
<Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h='50' mb='24px'>
<Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h={50}>
{t('signin')}
</Button>
</Box>
</Flex>
</FormProvider>

<Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt='0px'>
<Text fontWeight='400' fontSize='14px'>
<Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt={0}>
<Text fontWeight='400' fontSize='sm'>
{t('not_registred_yet')}
<NavLink to='/signup'>
<Text color={textColorBrand} as='span' ms='5px' fontWeight='500'>
<Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
{t('create_account')}
</Text>
</NavLink>
</Text>
</Flex>
<Box pt={2}>
<FormControl isInvalid={isError}>
{isError && <FormErrorMessage>{error?.message || 'Error al realizar la operación'}</FormErrorMessage>}
</FormControl>
</Box>
{isError && (
<Box>
<FormControl isInvalid={isError}>
<FormErrorMessage>{error?.message || 'Error performing the operation'}</FormErrorMessage>
</FormControl>
</Box>
)}
</Flex>
)
}

export const HSeparator = (props: { variant?: string; [x: string]: any }) => {
const { variant, ...rest } = props
return <Flex h='1px' w='100%' bg='rgba(135, 140, 189, 0.3)' {...rest} />
return <Flex h='px' w='100%' bg='rgba(135, 140, 189, 0.3)' {...rest} />
}

export default SignIn
Loading
Loading