@chakra-ui/core#FormErrorMessage JavaScript Examples
The following examples show how to use
@chakra-ui/core#FormErrorMessage.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Login.js From allay-fe with MIT License | 4 votes |
|
Login = ({ login, isLoading, history }) => {
const { handleSubmit, errors, register, formState } = useForm()
const [show, setShow] = React.useState(false)
const handleClick = () => setShow(!show)
function validateEmail(value) {
let error
if (!value) {
error = 'email is required'
} else if (value.length < 5) {
error = 'email needed'
}
return error || true
}
function validatePassword(value) {
let error
if (!value) {
error = 'Password is required'
} else if (value.length < 8) {
error = 'Password must be at least 8 characters'
}
return error || true
}
const submitForm = (creds) => {
// action function here
login(creds).then(() => history.push('/dashboard'))
ReactGA.event({
category: 'User',
action: `Button Login`,
})
}
const gaSignup = () => {
ReactGA.event({
category: 'User',
action: `Link Don't have an account`,
})
}
if (isLoading) {
return (
<Flex justify="center" align="center" w="100%" h="100vh">
<Flex>
<CustomSpinner />
</Flex>
</Flex>
)
}
return (
<Flex className="LoginSplash" w="100%" minH="100vh" justify="center">
<Flex maxW="1440px" w="100%">
<Stack
wrap="wrap"
w="60%"
ml="6.5%"
mb="15%"
justify="center"
align="center"
>
<Text
as="h1"
w="100%"
fontFamily="Poppins"
fontSize="80px"
fontWeight="bold"
>
Allay
</Text>
<Text w="100%" fontFamily="Poppins" fontSize="52px" fontWeight="bold">
We're stronger together.
</Text>
</Stack>
<Flex
w="40%"
mb="10%"
mr="8%"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="473px"
h="480px"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex
as="h2"
fontSize="36px"
fontFamily="Poppins"
justify="center"
mx="1"
my="2%"
>
Welcome back!
</Flex>
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isInvalid={errors.email}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Email
</FormLabel>
<SignupLoginInput
mb="30px"
type="text"
name="email"
label="email"
placeholder="lambda1"
autoCapitalize="none"
ref={register({ validate: validateEmail })}
/>
<FormErrorMessage>
{errors.email && errors.email.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={errors.password}>
<Flex flexDir="column">
<FormLabel
color="#131C4D"
fontSize="18px"
fontFamily="Muli"
>
Password
</FormLabel>
<InputGroup>
<SignupLoginInput
mb="30px"
type={show ? 'text' : 'password'}
name="password"
label="Password"
placeholder="********"
autoCapitalize="none"
ref={register({ validate: validatePassword })}
/>
<InputRightElement width="4.5rem" py="32px">
<Button
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
<FormErrorMessage>
{errors.password && errors.password.message}
</FormErrorMessage>
</Flex>
</FormControl>
<Flex width="100%" justify="center">
<Button
width="85%"
mb="30px"
border="none"
rounded="50px"
h="58px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="loginSubmit"
>
Login
</Button>
</Flex>
</Flex>
<Flex m="15px" justify="center" fontWeight="light">
<Text fontSize="16px" color="#17171B" fontFamily="Muli">
Don't have an account?{' '}
<Link
to="/signup"
onClick={gaSignup}
data-cy="signupLink"
style={{
textDecoration: 'none',
fontWeight: 'bold',
color: '#344CD0',
fontSize: '16px',
}}
>
Sign up here!
</Link>
</Text>
</Flex>
</Flex>
</form>
</Flex>
</Flex>
</Flex>
)
}
Example #2
| Source File: Signup-Additional.js From allay-fe with MIT License | 4 votes |
|
SignupAdditional = ({
register,
errors,
location,
setNewLocation,
stateHelper,
validateFieldOfStudy,
uploadImage,
profile_image,
uploadResume,
profile_resume,
}) => {
// graduated state/helpers
const [graduated, setGraduated] = useState(false)
const isGraduated = () => {
setGraduated(true)
}
const notGraduated = () => {
setGraduated(false)
}
// employed state/helpers
const [employed, setEmployed] = useState(false)
const isEmployed = () => {
setEmployed(true)
}
const notEmployed = () => {
setEmployed(false)
}
//radio button state
const [priorExp, setPriorExp] = useState(false)
const [tlsl, setTlsl] = useState(false)
const [remote, setRemote] = useState(false)
//location helper
useEffect(() => {
setNewLocation({ ...location, myState: location.myState })
// removes numbers, commas, and whitespaces from city
if (location.myCity) {
if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
const tempCity = location.myCity
setNewLocation({
...location,
myCity: tempCity.replace(/^[\s,\d]+/, ''),
})
}
}
}, [location, setNewLocation])
///info for slack ID
const info = (
<Box>
<Image
objectFit="fit"
width="300px"
height="300px"
src={require('../../icons/slack.gif')}
alt="slack info"
/>
</Box>
)
return (
<>
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="61px"
justify="flex-start"
fontSize="16px"
>
<Text color="#131C4D" fontFamily="Muli">
The information below will be visible on your profile page by others
</Text>
</Flex>
{/* CLOUDINARY IMAGE UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="55px"
justify="space-evenly"
alignItems="center"
>
{!profile_image ? (
<Image size="100px" src={require('../../icons/user.svg')} />
) : (
<Image
size="100px"
style={{ borderRadius: '50px' }}
src={profile_image}
/>
)}
<Flex alignItems="center">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={uploadImage}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label for="files" class="btn">
Upload profile image
</label>
</Flex>
</Flex>
{/* LOCATION OF USER */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Location (City, State)
</FormLabel>
<CustomAutocomplete
stateHelper={stateHelper}
w="653px"
h="58px"
mb="30px"
rounded="2px"
variant="outline"
bgColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#17171B"
_hover={{ borderColor: '#BBBDC6' }}
_placeholder={{ color: '#BBBDC6' }}
id="location"
name="location"
label="location"
placeholder="e.g. Los Angeles, CA"
ref={register}
/>
</FormControl>
</Flex>
{/* GRADUATED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={graduated ? '20px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Have you graduated from Lambda yet?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="graduated"
id="graduated-1"
value={true}
isChecked={graduated === true}
onClick={isGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="graduated"
id="graduated-2"
value={false}
isChecked={graduated === false}
onClick={notGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* GRADUATED MONTH AND YEAR */}
{graduated ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you graduate?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradMonth"
label="gradMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradYear"
label="gradYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Background
</Text>
</Flex>
{/* HIGHEST LEVEL OF EDUCATION */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Highest level of education
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="highest_ed"
label="highest_ed"
ref={register}
>
<option fontFamily="Muli" value="">
Select your education level
</option>
<option fontFamily="Muli" value="High school diploma">
High school diploma
</option>
<option fontFamily="Muli" value="Associate's degree">
Associate's degree
</option>
<option fontFamily="Muli" value="Bachelor's degree">
Bachelor's degree
</option>
<option fontFamily="Muli" value="Master's degree">
Master's degree
</option>
<option fontFamily="Muli" value="PhD">
PhD
</option>
</Select>
</FormControl>
{/* FIELD OF STUDY */}
<FormControl isInvalid={errors.fieldOfStudy}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Field of study
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="field_of_study"
label="field_of_study"
placeholder="Enter your field of study"
autoCapitalize="none"
ref={register({ validate: validateFieldOfStudy })}
/>
<FormErrorMessage>
{errors.fieldOfStudy && errors.fieldOfStudy.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PRIOR EXPERIENCE */}
<Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Prior to Lambda did you have any experience in your track?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="prior_experience"
id="priorExp-1"
ref={register}
value={true}
isChecked={priorExp === true}
onChange={() => setPriorExp(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="prior_experience"
id="priorExp-2"
ref={register}
value={false}
isChecked={priorExp === false}
onChange={() => setPriorExp(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* DID YOU TL/SL */}
<Flex wrap="wrap" w="653px" mx="auto" mb="100px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Have you been a TL/SL while at Lambda?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="tlsl_experience"
id="TLSL-1"
value={true}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="tlsl_experience"
id="TLSL-2"
value={false}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Employment
</Text>
</Flex>
{/* EMPLOYED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={employed ? '30px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you currently employed in your field of study?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed"
id="employed-1"
value={true}
isChecked={employed === true}
onClick={isEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed"
id="employed-2"
value={false}
isChecked={employed === false}
onClick={notEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* EMPLOYED COMPANY NAME AND JOB TITLE */}
{employed ? (
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Company name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="employed_company"
label="employed_company"
placeholder="Enter the company name"
autoCapitalize="none"
ref={register}
/>
</FormControl>
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Job title
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="employed_title"
label="employed_title"
placeholder="Enter your job title"
autoCapitalize="none"
ref={register}
/>
</FormControl>
</Flex>
) : null}
{/* REMOTE WORK CHECK */}
{employed ? (
<Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you working remotely?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed_remote"
id="employed_remote-1"
value={true}
ref={register}
isChecked={remote === true}
onChange={() => setRemote(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed_remote"
id="employed_remote-2"
value={false}
ref={register}
isChecked={remote === false}
onChange={() => setRemote(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
) : null}
{/* EMPLOYMENT START DATE */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you start?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workMonth"
label="workMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workYear"
label="workYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Online Presence
</Text>
</Flex>
{/* RESUME UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" color="#131C4D" fontSize="18px" fontFamily="Muli">
Resume
</Text>
<Flex width="270px" justify="flex-end">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={uploadResume}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label for="files" class="btn">
{!profile_resume ? (
'Upload resume'
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
class="far fa-check-circle"
></i>
)}
</label>
</Flex>
</Flex>
<Flex w="653px" mx="auto" justify="flex-start">
<FormHelperText w="653px" mb="30px" color="#9194A8">
Must be a .pdf file
</FormHelperText>
</Flex>
{/* CONTACT EMAIL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Email address
</Text>
<SignupLoginInput
w="318px"
type="email"
name="contact_email"
label="contact_email"
placeholder="Enter your email address"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* PORTFOLIO URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Portfolio URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="portfolio_URL"
label="portfolio_URL"
placeholder="Enter your portfolio URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* LINKEDIN URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
LinkedIn URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="linked_in"
label="linked_in"
placeholder="Enter your LinkedIn URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* SLACK USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Slack ID
<Tooltip hasArrow label={info} placement="top">
<i style={{ paddingLeft: '10px' }} class="fas fa-question"></i>
</Tooltip>
</Text>
<SignupLoginInput
w="318px"
type="text"
name="slack"
label="slack"
placeholder="Enter your Slack ID"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* GITHUB USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Github URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="github"
label="github"
placeholder="Enter your Github URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* DRIBBBLE URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Dribbble URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="dribble"
label="dribble"
placeholder="Enter your Dribbble URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
</>
)
}
Example #3
| Source File: Signup.js From allay-fe with MIT License | 4 votes |
|
Signup = ({ signup, isLoading, history }) => {
const { handleSubmit, errors, register, formState } = useForm()
const [show, setShow] = useState(false)
const [moreInfo, setMoreInfo] = useState(false)
const handleClick = () => setShow(!show)
//location state
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateHelper = (value) => {
setLocation(value)
}
const [profile_image, setProfile_Image] = useState('')
const [profile_resume, setProfile_resume] = useState('')
//validation
function validateFirstName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'First Name is required'
} else if (value.length < 2) {
error = 'First Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'First Name can only contain letters'
}
return error || true
}
function validateLastName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'Last Name is required'
} else if (value.length < 2) {
error = 'Last Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'Last Name can only contain letters'
}
return error || true
}
function validateEmail(value) {
let error
if (!value) {
error = 'Email is required'
} else if (!value.includes('@')) {
error = 'Must be a valid email'
}
return error || true
}
function validateTrack(value) {
let error
if (!value) {
error = 'Lambda track is required'
}
return error || true
}
function validateCohort(value) {
let error
if (!value) {
error = 'Cohort is required'
}
return error || true
}
function validatePassword(value) {
let error
if (!value) {
error = 'Password is required'
} else if (value.length < 8) {
error = 'Password must be at least 8 characters'
}
return error || true
}
function validateFieldOfStudy(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (nameRegex.test(value)) {
error = 'Field of study can only contain letters'
}
return error || true
}
// end validation
//add image to cloudinary
const uploadImage = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setProfile_Image(...profile_image, file.secure_url)
}
//upload resume to cloudinary
const uploadResume = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
console.log('here', file)
setProfile_resume(...profile_resume, file.secure_url)
}
const submitForm = (creds) => {
// correcting grad date format
let graduated = null
if (creds.gradMonth && creds.gradYear) {
graduated = `${creds.gradYear}-${creds.gradMonth}-01`
}
// correcting employed date format
let employed_start = null
if (creds.workMonth && creds.workYear) {
employed_start = `${creds.workYear}-${creds.workMonth}-01`
}
if (creds.confirmPassword === creds.password) {
// formatting the signup state to match the back end columns
signup({
email: creds.email,
password: creds.password,
track_id: Number(creds.track_id),
first_name: creds.firstName,
last_name: creds.lastName,
cohort: creds.cohort,
contact_email: creds.contact_email || null,
location: newLocation
? `${newLocation.myCity} ${newLocation.myState}`
: null,
graduated: graduated,
highest_ed: creds.highest_ed || null,
field_of_study: creds.field_of_study || null,
prior_experience: creds.prior_experience
? JSON.parse(creds.prior_experience)
: false,
tlsl_experience: creds.tlsl_experience
? JSON.parse(creds.tlsl_experience)
: false,
employed_company: creds.employed_company || null,
employed_title: creds.employed_title || null,
employed_remote: creds.employed_remote
? JSON.parse(creds.employed_remote)
: false,
employed_start: employed_start,
resume: profile_resume || null,
linked_in: creds.linked_in || null,
slack: creds.slack || null,
github: creds.github || null,
dribble: creds.dribble || null,
profile_image: profile_image || null,
portfolio: creds.portfolio_URL || null,
}).then(() => history.push('/dashboard'))
} else {
alert('Your Passwords must match!')
}
ReactGA.event({
category: 'User',
action: `Button Sign Up`,
})
}
const switchMoreInfo = () => {
setMoreInfo(!moreInfo)
}
const gaLogin = () => {
ReactGA.event({
category: 'User',
action: `Link Already have an account`,
})
}
if (isLoading) {
return (
<Flex justify="center" align="center" w="100vh" h="100vh">
<Flex>
<CustomSpinner />
</Flex>
</Flex>
)
}
return (
<Flex className="RegisterSplash" w="100%" minH="100vh" justify="center">
<Flex maxW="1440px" w="100%">
<Flex
w="833px"
mx="auto"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="833px"
// h='825px'
p="6"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex
as="h2"
w="653"
fontSize="36px"
fontWeight="600"
fontFamily="Poppins"
justify="center"
my="68px"
>
Let's get started!
</Flex>
{/* FIRST NAME, LAST NAME */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
First Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="firstName"
label="firstName"
placeholder="John"
autoCapitalize="none"
ref={register({ validate: validateFirstName })}
/>
<FormErrorMessage>
{errors.firstName && errors.firstName.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Last Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="lastName"
label="lastName"
placeholder="Doe"
autoCapitalize="none"
ref={register({ validate: validateLastName })}
/>
<FormErrorMessage>
{errors.lastName && errors.lastName.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* EMAIL */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.email}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Email
</FormLabel>
<SignupLoginInput
w="653px"
mb="30px"
type="email"
name="email"
label="email"
placeholder="[email protected]"
autoCapitalize="none"
ref={register({ validate: validateEmail })}
/>
<FormErrorMessage>
{errors.email && errors.email.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* TRACK */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isRequired isInvalid={errors.track_name}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Track
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="track_id"
label="track_id"
ref={register({ validate: validateTrack })}
>
<option fontFamily="Muli" value="">
Select Your Lambda Track
</option>
<option fontFamily="Muli" value={1}>
Android
</option>
<option fontFamily="Muli" value={2}>
DS
</option>
<option fontFamily="Muli" value={3}>
WEB
</option>
<option fontFamily="Muli" value={4}>
IOS
</option>
<option fontFamily="Muli" value={5}>
UX
</option>
</Select>
<FormErrorMessage>
{errors.track_id && errors.track_id.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Cohort
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="cohort"
label="cohort"
placeholder="Ex: FT 1 or PT 1"
autoCapitalize="none"
ref={register({ validate: validateCohort })}
/>
<FormErrorMessage>
{errors.cohort && errors.cohort.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PASSWORD, CONFIRM PASSWORD */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isRequired isInvalid={errors.password}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Password
</FormLabel>
<InputGroup>
<SignupLoginInput
w="318px"
// mb='30px'
mr="17px"
type={show ? 'text' : 'password'}
name="password"
label="Password"
placeholder="********"
autoCapitalize="none"
ref={register({ validate: validatePassword })}
/>
<InputRightElement width="4.5rem" pr="22px" py="32px">
<Button
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
<FormHelperText mb="45px" color="#9194A8">
Must be at least 8 characters
</FormHelperText>
<FormErrorMessage>
{errors.password && errors.password.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Confirm Password
</FormLabel>
<InputGroup>
<SignupLoginInput
w="318px"
mb="30px"
type={show ? 'text' : 'password'}
name="confirmPassword"
label="Confirm Password"
placeholder="********"
autoCapitalize="none"
ref={register}
/>
<InputRightElement width="4.5rem" py="32px">
<Button
data-cy="registerSubmit"
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
</Flex>
{/* CLICK FOR LONGFORM SIGNUP */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={moreInfo ? '0' : '55px'}
cursor="pointer"
justify="flex-start"
data-cy="longFormDropdown"
onClick={switchMoreInfo}
>
<Flex justify="flex-start">
{moreInfo ? (
<Icon
fontWeight="bold"
name="chevron-down"
textAlign="left"
size="30px"
mr="5px"
ml="-8px"
pt="3px"
/>
) : (
<Icon
fontWeight="bold"
name="chevron-right"
textAlign="left"
size="30px"
mr="5px"
ml="-8px"
pt="3px"
/>
)}
<Text fontWeight="bold" fontSize="20px" fontFamily="Muli">
{' '}
Add Additional Information
</Text>
</Flex>
</Flex>
{/* ADDITIONAL INFO COMPONENT */}
{moreInfo ? (
<SignupAdditional
profile_resume={profile_resume}
profile_image={profile_image}
uploadImage={uploadImage}
uploadResume={uploadResume}
register={register}
errors={errors}
location={location}
newLocation={newLocation}
setNewLocation={setNewLocation}
stateHelper={stateHelper}
validateFieldOfStudy={validateFieldOfStudy}
/>
) : null}
<Flex w="100%" justify="center">
<Button
mb="30px"
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="registerSubmit"
>
Sign up
</Button>
</Flex>
<Flex m="15px" justify="center" fontWeight="light">
<Text fontSize="16px" color="#17171B" fontFamily="Muli">
Already have an account?{' '}
<Link
to="/"
onClick={gaLogin}
style={{
textDecoration: 'none',
fontWeight: 'bold',
color: '#344CD0',
fontSize: '16px',
}}
>
Sign in here!
</Link>
</Text>
</Flex>
</Flex>
</form>
</Flex>
</Flex>
</Flex>
)
}
Example #4
| Source File: EditInterviewForm.js From allay-fe with MIT License | 4 votes |
|
EditInterviewForm = ({
review,
getReviewById,
editReview,
match,
history,
isLoading,
}) => {
const { register, handleSubmit, errors, formState } = useForm()
const id = match.params.id
const [editValue, setEditValue] = useState({
id: id,
})
// specifically for the cancel button functionality
const [isOpen, setIsOpen] = useState()
const onClose = () => setIsOpen(false)
const cancelRef = useRef()
// validating salary
function validateSalary(value) {
let error
if (value < 0) {
error = 'Salary cannot be less than zero.'
}
return error || true
}
useEffect(() => {
getReviewById(id)
}, [id, getReviewById])
if (isLoading) {
return (
<Flex justify="center" align="center" w="100vh" h="100vh">
<CustomSpinner />
</Flex>
)
}
const submitEdits = () => {
editReview(review.user_id, review.review_id, editValue).then(() => {
history.push('/dashboard')
})
ReactGA.event({
category: 'Interview Review Edit',
action: `Submit edit`,
})
}
return (
<Flex justify="center" w="100%" minH="100vh" bg="#F2F6FE">
<Flex w="45%" my="10%" px="4%" justify="center" flexDir="column">
<form onSubmit={handleSubmit(submitEdits)}>
<FormControl>
<h2 color="#525252" align="center">
Edit interview review
</h2>
<FormLabel color="#525252" mt="3">
Job title
</FormLabel>
<EditReviewInput
name="job_title"
placeholder={review.job_title}
value={editValue.job_title}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
/>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Job location
</FormLabel>
<Flex justify="space-between" wrap="nowrap">
<EditReviewInput
w="60%"
h="58px"
py="32px"
borderColor="#ECF1FE"
rounded="3px"
name="city"
placeholder={review.city}
value={editValue.city}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
/>
<Select
w="35%"
mb="4"
h="65px"
rounded="3px"
border="1px solid black"
name="state_id"
ref={register}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
>
<option value={0}>{review.state_name}</option>
{states.map((i) => (
<option key={i.id} value={i.id}>
{i.state_name}
</option>
))}
</Select>
</Flex>
</FormControl>
<FormControl isInvalid={errors.salary}>
<FormLabel fontSize="15px" color="#525252">
Salary
</FormLabel>
<InputGroup>
<InputLeftElement
mb="4"
h="58px"
py="32px"
borderColor="#ECF1FE"
color="gray.300"
fontSize="1.2em"
children="$"
/>
<EditReviewInput
pl="6%"
borderColor="#ECF1FE"
rounded="3px"
name="salary"
type="number"
placeholder={review.salary}
ref={register({ validate: validateSalary })}
value={editValue.salary}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
/>
</InputGroup>
<FormErrorMessage>
{errors.salary && errors.salary.message}
</FormErrorMessage>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Job offer
</FormLabel>
<Select
mb="4"
h="65px"
rounded="3px"
border="1px solid black"
color="#494B5B"
name="offer_status_id"
ref={register}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
>
<option value={0}>{review.offer_status}</option>
<option value={1}>No offer</option>
<option value={2}>Offer accepted</option>
<option value={3}>Offer declined</option>
)}
</Select>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Interview difficulty
</FormLabel>
<Select
mb="4"
h="65px"
rounded="3px"
border="1px solid black"
color="#494B5B"
name="difficulty_rating"
ref={register}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
>
<option value={0}>{review.difficulty_rating}</option>
<option value={5}>5 - Very hard</option>
<option value={4}>4 - Somewhat hard</option>
<option value={3}>3 - Somewhat easy</option>
<option value={2}>2 - Easy</option>
<option value={1}>1 - Very easy</option>
</Select>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Interview rounds
</FormLabel>
<EditReviewInput
name="interview_rounds"
type="number"
color="#494B5B"
placeholder={review.interview_rounds}
value={editValue.interview_rounds}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
/>
</FormControl>
<FormLabel mb="2">Interview types </FormLabel>
<Flex mb="4">
<Flex w="50%">
<CheckboxGroup defaultValue={[true]}>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="phone_interview"
value={review.phone_interview}
onClick={() =>
review.phone_interview
? setEditValue({ ...editValue, phone_interview: false })
: setEditValue({ ...editValue, phone_interview: true })
}
>
Phone Screening
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="resume_review"
value={review.resume_review}
onClick={() =>
review.resume_review
? setEditValue({ ...editValue, resume_review: false })
: setEditValue({ ...editValue, resume_review: true })
}
>
Resume Review
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="take_home_assignments"
value={review.take_home_assignments}
onClick={() =>
review.take_home_assignments
? setEditValue({
...editValue,
take_home_assignments: false,
})
: setEditValue({
...editValue,
take_home_assignments: true,
})
}
>
Take Home Assignments
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="online_coding_assignments"
value={review.online_coding_assignments}
onClick={() =>
review.online_coding_assignments
? setEditValue({
...editValue,
online_coding_assignments: false,
})
: setEditValue({
...editValue,
online_coding_assignments: true,
})
}
>
Online Coding Assignments
</Checkbox>
</CheckboxGroup>
</Flex>
<Flex>
<CheckboxGroup defaultValue={[true]}>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="portfolio_review"
value={review.portfolio_review}
onClick={() =>
review.portfolio_review
? setEditValue({ ...editValue, portfolio_review: false })
: setEditValue({ ...editValue, portfolio_review: true })
}
>
Portfoilio Review
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="screen_share"
value={review.screen_share}
onClick={() =>
review.screen_share
? setEditValue({ ...editValue, screen_share: false })
: setEditValue({ ...editValue, screen_share: true })
}
>
Screen Share
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="open_source_contribution"
value={review.open_source_contribution}
onClick={() =>
review.open_source_contribution
? setEditValue({
...editValue,
open_source_contribution: false,
})
: setEditValue({
...editValue,
open_source_contribution: true,
})
}
>
Open Source Contribution
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="side_projects"
value={review.side_projects}
onClick={() =>
review.side_projects
? setEditValue({ ...editValue, side_projects: false })
: setEditValue({ ...editValue, side_projects: true })
}
>
Side Projects
</Checkbox>
</CheckboxGroup>
</Flex>
</Flex>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Job review
</FormLabel>
<Textarea
mb="4"
h="144px"
rounded="3px"
border="1px solid black"
color="#494B5B"
rowsMax={6}
resize="none"
type="text"
name="comment"
placeholder={review.comment}
ref={register}
value={editValue.comment}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
/>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Job rating
</FormLabel>
<Select
mb="4"
h="65px"
rounded="3px"
border="1px solid black"
color="#494B5B"
name="overall_rating"
ref={register}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
>
<option value={0}>{review.overall_rating}</option>
<option value={5}>5 - Great</option>
<option value={4}>4 - Good</option>
<option value={3}>3 - OK </option>
<option value={2}>2 - Poor </option>
<option value={1}>1 - Very poor </option>
</Select>
</FormControl>
<Flex mt="40px">
<Button
bg="#344CD0"
color="white"
isLoading={formState.isSubmitting}
type="submit"
w="65%"
h="72px"
fontSize="18px"
data-cy="companyEditInterviewSubmit"
>
Save changes
</Button>
<Flex
align="center"
justify="center"
isloading
height="72px"
width="30%"
color="#344CD0"
fontSize="18px"
fontWeight="bold"
cursor="pointer"
onClick={() => setIsOpen(true)}
>
Cancel
</Flex>
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={onClose}
>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
Cancel form?
</AlertDialogHeader>
<AlertDialogBody>
Are you sure? You can't undo this action.
</AlertDialogBody>
<AlertDialogFooter>
<Flex>
<Flex
align="center"
justify="center"
isloading
height="56px"
width="30%"
mr="5%"
color="#344CD0"
fontSize="18px"
fontWeight="bold"
cursor="pointer"
ref={cancelRef}
onClick={onClose}
>
Cancel
</Flex>
<Button
h="56px"
rounded="10px"
bg="#344CD0"
border="none"
color="white"
onClick={() => history.push('/dashboard')}
ml={3}
>
Yes I'm sure
</Button>
</Flex>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</Flex>
</form>
</Flex>
</Flex>
)
}
Example #5
| Source File: EditReviewForm.js From allay-fe with MIT License | 4 votes |
|
EditReviewForm = ({
// getReviewById,
// editReview,
match,
history,
location,
}) => {
const state = location.state
const dispatch = useDispatch()
const id = match.params.id
const userId = localStorage.getItem('userId')
// useEffect(() => {
// getReviewById(id)
// }, [id, getReviewById])
const { register, handleSubmit, errors, formState } = useForm({})
const [editValue, setEditValue] = useState({
id: id,
job_title: state.job_title || null,
city: state.city || null,
state_id: null,
salary: state.salary || null,
company_name: state.company_name || null,
work_status_id: null,
start_date: state.start_date || null,
end_date: state.end_date || null,
typical_hours: state.typical_hours || null,
comment: state.comment || null,
overall_rating: state.overall_rating || null,
})
console.log('here', editValue)
// specifically for the cancel button functionality
const [isOpen, setIsOpen] = useState()
const onClose = () => setIsOpen(false)
const cancelRef = useRef()
// validating salary
function validateSalary(value) {
let error
if (value < 0) {
error = 'Salary cannot be less than zero.'
}
return error || true
}
// if (isLoading) {
// return (
// <Flex justify="center" align="center" w="100vh" h="100vh">
// <CustomSpinner />
// </Flex>
// )
// }
// console.log('before sent', editValue)
const submitEdits = () => {
dispatch(editReview(userId, id, editValue)).then(() => {
console.log('sent', editValue)
// history.push('/dashboard')
})
ReactGA.event({
category: 'Company Review Edit',
action: `Submit edit`,
})
}
return (
<Flex w="100%" justify="center" minH="100vh" bg="#F2F6FE">
<Flex w="45%" my="10%" px="4%" justify="center" flexDir="column">
<form onSubmit={handleSubmit(submitEdits)}>
<FormControl>
<h2 color="#525252" align="center">
Edit company review
</h2>
<FormLabel color="#525252" mt="3">
Job title
</FormLabel>
<Input
name="job_title"
type="text"
label="job_title"
placeholder={state.job_title}
value={editValue.job_title}
onChange={(e) =>
setEditValue({ ...editValue, [e.target.name]: e.target.value })
}
/>
</FormControl>
<FormControl>
<FormLabel color="#525252" mt="3">
Company
</FormLabel>
<Input
name="company_name"
placeholder={state.company_name}
value={editValue.company_name}
onChange={(e) =>
setEditValue({ ...editValue, [e.target.name]: e.target.value })
}
/>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Job location
</FormLabel>
<Flex justify="space-between" wrap="nowrap">
<Input
w="60%"
h="58px"
py="32px"
borderColor="#ECF1FE"
rounded="3px"
name="city"
placeholder={state.city}
value={editValue.city}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: e.target.value,
})
}
/>
<Select
w="35%"
mb="4"
h="65px"
rounded="3px"
border="1px solid black"
name="state_id"
ref={register}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: Number(e.target.value),
})
}
>
<option value={0}>{state.state_name}</option>
{states.map((i) => (
<option key={i.id} value={i.id}>
{i.state_name}
</option>
))}
</Select>
</Flex>
</FormControl>
<FormControl isInvalid={errors.salary}>
<FormLabel fontSize="15px" color="#525252">
Salary
</FormLabel>
<InputGroup>
<InputLeftElement
mb="4"
h="58px"
py="32px"
borderColor="#ECF1FE"
color="gray.300"
fontSize="1.2em"
children="$"
/>
<Input
pl="6%"
borderColor="#ECF1FE"
rounded="3px"
name="salary"
type="number"
placeholder={state.salary}
ref={register({ validate: validateSalary })}
value={editValue.salary}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: Number(e.target.value),
})
}
/>
</InputGroup>
<FormErrorMessage>
{errors.salary && errors.salary.message}
</FormErrorMessage>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Work status
</FormLabel>
<Select
mb="4"
h="65px"
rounded="3px"
border="1px solid black"
color="#494B5B"
name="work_status_id"
ref={register}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: Number(e.target.value),
})
}
>
<option value={0}>{state.work_status}</option>
<option value={1}>Current Employee</option>
<option value={2}>Former Employee</option>
<option value={3}>Full Time</option>
<option value={4}>Part Time</option>
<option value={5}>Intern</option>
)}
</Select>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Years of employment
</FormLabel>
<Flex justify="space-between" wrap="nowrap">
<Input
w="48%"
name="start_date"
type="number"
placeholder={`Start - ${state.start_date}`}
value={editValue.start_date}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: Number(e.target.value),
})
}
/>
<Input
w="48%"
name="end_date"
type="number"
placeholder={`End - ${state.end_date}`}
value={editValue.end_date}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: Number(e.target.value),
})
}
/>
</Flex>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Working hours
</FormLabel>
<Input
name="typical_hours"
type="number"
placeholder={state.typical_hours}
value={editValue.typical_hours}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: Number(e.target.value),
})
}
/>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Job review
</FormLabel>
<Textarea
mb="4"
h="144px"
rounded="3px"
border="1px solid black"
color="#494B5B"
rowsMax={6}
resize="none"
type="text"
name="comment"
placeholder={state.comment}
ref={register}
value={editValue.comment}
onChange={(e) =>
setEditValue({ ...editValue, [e.target.name]: e.target.value })
}
/>
</FormControl>
<FormControl>
<FormLabel fontSize="15px" color="#525252">
Job rating
</FormLabel>
<Select
mb="4"
h="65px"
rounded="3px"
border="1px solid black"
color="#494B5B"
name="overall_rating"
ref={register}
onChange={(e) =>
setEditValue({
...editValue,
[e.target.name]: Number(e.target.value),
})
}
>
<option value={0}>{state.overall_rating}</option>
<option value={5}>5 - Great</option>
<option value={4}>4 - Good</option>
<option value={3}>3 - OK </option>
<option value={2}>2 - Poor </option>
<option value={1}>1 - Very Poor </option>
</Select>
</FormControl>
<Flex mt="40px">
<Button
bg="#344CD0"
color="white"
isLoading={formState.isSubmitting}
type="submit"
w="65%"
h="72px"
fontSize="18px"
// data-cy="companyEditstateSubmit"
>
Save changes
</Button>
<Flex
align="center"
justify="center"
isloading
height="72px"
width="30%"
color="#344CD0"
fontSize="18px"
fontWeight="bold"
cursor="pointer"
onClick={() => setIsOpen(true)}
>
Cancel
</Flex>
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={onClose}
>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
Cancel form?
</AlertDialogHeader>
<AlertDialogBody>
Are you sure? You can't undo this action.
</AlertDialogBody>
<AlertDialogFooter>
<Flex>
<Flex
align="center"
justify="center"
isloading
height="56px"
width="30%"
mr="5%"
color="#344CD0"
fontSize="18px"
fontWeight="bold"
cursor="pointer"
ref={cancelRef}
onClick={onClose}
>
Cancel
</Flex>
<Button
h="56px"
rounded="10px"
bg="#344CD0"
border="none"
color="white"
onClick={() => history.push('/dashboard')}
ml={3}
>
Yes I'm sure
</Button>
</Flex>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</Flex>
</form>
</Flex>
</Flex>
)
}
Example #6
| Source File: EditUserProfile.js From allay-fe with MIT License | 4 votes |
|
EditUserProfile = ({ match, history, userData, updateUser }) => {
const id = match.params.id
const userId = window.localStorage.getItem('userId')
// creating form state, setting default values
const { handleSubmit, errors, register, formState } = useForm({
defaultValues: {
firstName: userData.first_name,
lastName: userData.last_name,
gradMonth: userData.graduated ? userData.graduated.slice(5, 7) : null,
gradYear: userData.graduated ? userData.graduated.slice(0, 4) : null,
highest_ed: userData.highest_ed,
field_of_study: userData.field_of_study,
employed_company: userData.employed_company,
employed_title: userData.employed_title,
workMonth: userData.employed_start
? userData.employed_start.slice(5, 7)
: null,
workYear: userData.employed_start
? userData.employed_start.slice(0, 4)
: null,
resume: userData.resume ? userData.resume : null,
portfolio_URL: userData.portfolio ? userData.portfolio : null,
linked_in: userData.linked_in ? userData.linked_in : null,
slack: userData.slack ? userData.slack : null,
github: userData.github ? userData.github : null,
dribble: userData.dribble ? userData.dribble : null,
profile_image: userData.profile_image ? userData.profile_image : null,
},
})
//location state/helpers
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateHelper = (value) => {
setLocation(value)
}
// cloudinary stuff
const [newProfile_image, setNewProfile_Image] = useState('')
const [newProfile_resume, setNewProfile_resume] = useState('')
// graduated state/helpers
const [graduated, setGraduated] = useState(userData.graduated ? true : false)
const isGraduated = () => {
setGraduated(true)
}
const notGraduated = () => {
setGraduated(false)
}
// employed state/helpers
const [employed, setEmployed] = useState(
userData.employed_start ? true : false
)
const isEmployed = () => {
setEmployed(true)
}
const notEmployed = () => {
setEmployed(false)
}
//radio button state
const [priorExp, setPriorExp] = useState(
userData.prior_experience ? userData.prior_experience : false
)
const [tlsl, setTlsl] = useState(
userData.tlsl_experience ? userData.tlsl_experience : false
)
const [remote, setRemote] = useState(
userData.employed_remote ? userData.employed_remote : false
)
//location helper
useEffect(() => {
setNewLocation({ ...location, myState: location.myState })
// removes numbers, commas, and whitespaces from city
if (location.myCity) {
if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
const tempCity = location.myCity
setNewLocation({
...location,
myCity: tempCity.replace(/^[\s,\d]+/, ''),
})
}
}
}, [location])
///info for slack ID
const info = (
<Box>
<Image
objectFit="fit"
width="300px"
height="300px"
src={require('../../../icons/slack.gif')}
alt="slack info"
/>
</Box>
)
//validation
function validateFirstName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'First Name is required'
} else if (value.length < 2) {
error = 'First Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'First Name can only contain letters'
}
return error || true
}
function validateLastName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'Last Name is required'
} else if (value.length < 2) {
error = 'Last Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'Last Name can only contain letters'
}
return error || true
}
function validateFieldOfStudy(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (nameRegex.test(value)) {
error = 'Field of study can only contain letters'
}
return error || true
}
//end validation
//add image to cloudinary
const updateImage = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setNewProfile_Image(...newProfile_image, file.secure_url)
}
//upload resume to cloudinary
const updateResume = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setNewProfile_resume(...newProfile_resume, file.secure_url)
}
// FORM SUBMISSION
const submitForm = (creds) => {
// correcting grad date format
let graduated = null
if (creds.gradMonth && creds.gradYear) {
graduated = `${creds.gradYear}-${creds.gradMonth}-01`
}
// correcting employed date format
let employed_start = null
if (creds.workMonth && creds.workYear) {
employed_start = `${creds.workYear}-${creds.workMonth}-01`
}
// formatting the signup state to match the back end columns
updateUser(id, {
first_name: creds.firstName,
last_name: creds.lastName,
location: newLocation
? `${newLocation.myCity || userData.location} ${newLocation.myState}`
: creds.location,
graduated: graduated,
highest_ed: creds.highest_ed || null,
field_of_study: creds.field_of_study || null,
prior_experience: creds.prior_experience
? JSON.parse(creds.prior_experience)
: false,
tlsl_experience: creds.tlsl_experience
? JSON.parse(creds.tlsl_experience)
: false,
employed_company: creds.employed_company || null,
employed_title: creds.employed_title || null,
employed_remote: creds.employed_remote
? JSON.parse(creds.employed_remote)
: false,
employed_start: employed_start,
resume: newProfile_resume || userData.resume,
linked_in: creds.linked_in || null,
slack: creds.slack || null,
github: creds.github || null,
dribble: creds.dribble || null,
profile_image: newProfile_image || userData.profile_image,
portfolio: creds.portfolio_URL || null,
}).then(() => history.push(`/profile/${id}`))
ReactGA.event({
category: 'User',
action: `Button Update Profile`,
})
}
const returnToProfile = (e) => {
e.preventDefault()
history.push(`/profile/${id}`)
}
//see profilePage component for details
const lazySolution =
userData.location != 'undefined undefined ' &&
userData.location != 'undefined undefined'
? userData.location
: 'Enter your location'
return (
<>
{/* //Top Section */}
<Flex
maxW="1440px"
w="100%"
px="40px"
py="28px"
m="0 auto"
justify="space-between"
align="center"
borderBottom="1px solid #EAF0FE"
>
<Flex>
<Link
style={{
textDecoration: 'none',
color: '#344CD0',
fontFamily: 'Poppins',
fontWeight: '600',
fontSize: '32px',
}}
to="/dashboard"
>
<h1> Allay </h1>
</Link>
</Flex>
{Number(userId) === Number(userData.id) ? (
<Flex>
{userData.profile_image === 'h' ? (
<Image
size="58px"
style={{ opacity: '0.6' }}
src={require('../../../icons/user.svg')}
/>
) : (
<Image
size="58px"
style={{ opacity: '0.6', borderRadius: '50%' }}
src={userData.profile_image}
/>
)}
</Flex>
) : null}
</Flex>
<Flex
w="833px"
mx="auto"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="833px"
p="6"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex w="653px" justify="space-between" my="68px" mx="auto">
<Text
as="h2"
fontSize="24px"
fontWeight="600"
fontFamily="Poppins"
>
Edit Profile
</Text>
<Flex w="150px" justify="space-between">
<Text
as="h3"
fontFamily="Muli"
fontSize="22px"
fontWeight="normal"
color="#9194A8"
style={{ cursor: 'pointer' }}
onClick={returnToProfile}
>
Cancel
</Text>
<Text
as="h3"
fontFamily="Muli"
fontSize="22px"
fontWeight="bold"
color="#344CD0"
style={{ cursor: 'pointer' }}
onClick={handleSubmit(submitForm)}
>
Save
</Text>
</Flex>
</Flex>
{/* CLOUDINARY IMAGE UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="55px"
justify="space-evenly"
alignItems="center"
>
{!newProfile_image ? (
<Avatar
size="2xl"
name={userData.first_name}
style={{ borderRadius: '50%' }}
src={userData.profile_image}
/>
) : (
<Avatar
size="2xl"
style={{ borderRadius: '50%' }}
src={newProfile_image}
/>
)}
<Flex alignItems="center">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={updateImage}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
{!newProfile_image ? (
<label htmlFor="files" className="btn">
Update profile image
</label>
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
className="far fa-check-circle"
></i>
)}
</Flex>
</Flex>
{/* FIRST NAME, LAST NAME */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
First Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="firstName"
label="firstName"
placeholder="John"
autoCapitalize="none"
ref={register({ validate: validateFirstName })}
/>
<FormErrorMessage>
{errors.firstName && errors.firstName.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Last Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="lastName"
label="lastName"
placeholder="Doe"
autoCapitalize="none"
ref={register({ validate: validateLastName })}
/>
<FormErrorMessage>
{errors.lastName && errors.lastName.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* LOCATION OF USER */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Location (City, State)
</FormLabel>
<CustomAutocomplete
stateHelper={stateHelper}
w="653px"
h="58px"
mb="30px"
rounded="2px"
variant="outline"
bgColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#17171B"
_hover={{ borderColor: '#BBBDC6' }}
_placeholder={{ color: '#BBBDC6' }}
id="location"
name="location"
label="location"
placeholder={lazySolution}
ref={register}
/>
</FormControl>
</Flex>
{/* GRADUATED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={graduated ? '20px' : '80px'}
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Have you graduated from Lambda yet?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="graduated"
id="graduated-1"
value={true}
isChecked={graduated === true}
onClick={isGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="graduated"
id="graduated-2"
value={false}
isChecked={graduated === false}
onClick={notGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* GRADUATED MONTH AND YEAR */}
{graduated ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
When did you graduate?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradMonth"
label="gradMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradYear"
label="gradYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Background
</Text>
</Flex>
{/* HIGHEST LEVEL OF EDUCATION */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Highest level of education
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="highest_ed"
label="highest_ed"
ref={register}
>
<option fontFamily="Muli" value="">
Select your education level
</option>
<option fontFamily="Muli" value="High school diploma">
High school diploma
</option>
<option fontFamily="Muli" value="Associate's degree">
Associate's degree
</option>
<option fontFamily="Muli" value="Bachelor's degree">
Bachelor's degree
</option>
<option fontFamily="Muli" value="Master's degree">
Master's degree
</option>
<option fontFamily="Muli" value="PhD">
PhD
</option>
</Select>
</FormControl>
{/* FIELD OF STUDY */}
<FormControl isInvalid={errors.fieldOfStudy}>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Field of study
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="field_of_study"
label="field_of_study"
placeholder="Enter your field of study"
autoCapitalize="none"
ref={register({ validate: validateFieldOfStudy })}
/>
<FormErrorMessage>
{errors.fieldOfStudy && errors.fieldOfStudy.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PRIOR EXPERIENCE */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="30px"
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Prior to Lambda did you have any experience in your track?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="prior_experience"
id="priorExp-1"
ref={register}
value={true}
isChecked={priorExp === true}
onChange={() => setPriorExp(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="prior_experience"
id="priorExp-2"
ref={register}
value={false}
isChecked={priorExp === false}
onChange={() => setPriorExp(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* DID YOU TL/SL */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="100px"
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Have you been a TL/SL while at Lambda?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="tlsl_experience"
id="TLSL-1"
value={true}
ref={register}
isChecked={tlsl === true}
onChange={() => setTlsl(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="tlsl_experience"
id="TLSL-2"
value={false}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* RESUME UPLOAD */}
{/* /// */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
justify="space-between"
align="center"
>
<Text
fontSize="18px"
color="#131C4D"
align="center"
fontFamily="Muli"
>
Resume
</Text>
<Flex width="270px" justify="flex-end">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={updateResume}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label htmlFor="files" className="btn">
{!newProfile_resume ? (
'Upload resume'
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
className="far fa-check-circle"
></i>
)}
</label>
</Flex>
</Flex>
<Flex w="653px" mx="auto" justify="flex-start">
<FormHelperText w="653px" mb="30px" color="#9194A8">
Must be a .pdf file
</FormHelperText>
</Flex>
{/* //// */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Employment
</Text>
</Flex>
{/* EMPLOYED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={employed ? '30px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you currently employed in your field of study?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed"
id="employed-1"
value={true}
isChecked={employed === true}
onClick={isEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed"
id="employed-2"
value={false}
isChecked={employed === false}
onClick={notEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* EMPLOYED COMPANY NAME AND JOB TITLE */}
{employed ? (
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Company name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="employed_company"
label="employed_company"
placeholder="Enter the company name"
autoCapitalize="none"
ref={register}
/>
</FormControl>
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Job title
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="employed_title"
label="employed_title"
placeholder="Enter your job title"
autoCapitalize="none"
ref={register}
/>
</FormControl>
</Flex>
) : null}
{/* REMOTE WORK CHECK */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="30px"
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you working remotely?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed_remote"
id="employed_remote-1"
value={true}
ref={register}
isChecked={remote === true}
onChange={() => setRemote(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed_remote"
id="employed_remote-2"
value={false}
ref={register}
isChecked={remote === false}
onChange={() => setRemote(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
) : null}
{/* EMPLOYMENT START DATE */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you start?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workMonth"
label="workMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workYear"
label="workYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Online Presence
</Text>
</Flex>
{/* PORTFOLIO URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Portfolio URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="portfolio_URL"
label="portfolio_URL"
placeholder="Enter your portfolio URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* LINKEDIN URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
LinkedIn URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="linked_in"
label="linked_in"
placeholder="Enter your LinkedIn URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* SLACK USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Slack ID
<Tooltip hasArrow label={info} placement="top">
<i
style={{ paddingLeft: '10px' }}
className="fas fa-question"
></i>
</Tooltip>
</Text>
<SignupLoginInput
w="318px"
type="text"
name="slack"
label="slack"
placeholder="Enter your Slack ID"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* GITHUB USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Github URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="github"
label="github"
placeholder="Enter your Github URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* DRIBBBLE URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Dribbble URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="dribble"
label="dribble"
placeholder="Enter your Dribbble URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
<Flex
w="100%"
style={{ alignItems: 'center' }}
justify="center"
direction="column"
>
<Button
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="registerSubmit"
>
Save
</Button>
<Button
mb="30px"
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="#9194A8"
backgroundColor="#FDFDFF"
_hover={{ cursor: 'pointer' }}
onClick={returnToProfile}
data-cy="cancelUpdate"
>
Cancel
</Button>
</Flex>
</Flex>
</form>
</Flex>
</>
)
}
