import { LockOutlined, UserOutlined } from '@ant-design/icons'; import { useReactiveVar } from '@apollo/client'; import { Button, Form, Image, Input, Select, message } from 'antd'; import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import styled, { useTheme } from 'styled-components/macro'; import analytics, { EventType } from '@app/analytics'; import { isLoggedInVar } from '@app/auth/checkAuthStatus'; import styles from '@app/auth/login.module.css'; import useGetInviteTokenFromUrlParams from '@app/auth/useGetInviteTokenFromUrlParams'; import { Message } from '@app/shared/Message'; import { useAppConfig } from '@app/useAppConfig'; import { PageRoutes } from '@conf/Global'; import { useAcceptRoleMutation } from '@graphql/mutations.generated'; type FormValues = { fullName: string; email: string; password: string; confirmPassword: string; title: string; }; const FormInput = styled(Input)` &&& { height: 32px; font-size: 12px; border: 1px solid #555555; border-radius: 5px; background-color: transparent; color: white; line-height: 1.5715; } > .ant-input { color: white; font-size: 14px; background-color: transparent; } > .ant-input:hover { color: white; font-size: 14px; background-color: transparent; } `; const TitleSelector = styled(Select)` .ant-select-selector { color: white; border: 1px solid #555555 !important; background-color: transparent !important; } .ant-select-arrow { color: white; } `; const StyledFormItem = styled(Form.Item)` .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not( .ant-input-affix-wrapper-borderless ).ant-input-affix-wrapper { background-color: transparent; } `; export type SignUpProps = Record; export const SignUp: React.VFC = () => { const history = useHistory(); const isLoggedIn = useReactiveVar(isLoggedInVar); const inviteToken = useGetInviteTokenFromUrlParams(); const themeConfig = useTheme(); const [loading, setLoading] = useState(false); const { refreshContext } = useAppConfig(); const [acceptRoleMutation] = useAcceptRoleMutation(); const acceptRole = () => { acceptRoleMutation({ variables: { input: { inviteToken, }, }, }) .then(({ errors }) => { if (!errors) { message.success({ content: `Accepted invite!`, duration: 2, }); } }) .catch((e) => { message.destroy(); message.error({ content: `Failed to accept invite: \n ${e.message || ''}`, duration: 3, }); }); }; const handleSignUp = useCallback( (values: FormValues) => { setLoading(true); const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fullName: values.fullName, email: values.email, password: values.password, title: values.title, inviteToken, }), }; fetch('/signUp', requestOptions) .then(async (response) => { if (!response.ok) { const data = await response.json(); const error = (data && data.message) || response.status; return Promise.reject(error); } isLoggedInVar(true); refreshContext(); analytics.event({ type: EventType.SignUpEvent, title: values.title }); return Promise.resolve(); }) .catch((_) => { message.error(`Failed to log in! An unexpected error occurred.`); }) .finally(() => setLoading(false)); }, [refreshContext, inviteToken], ); useEffect(() => { if (isLoggedIn && !loading) { acceptRole(); history.push(PageRoutes.ROOT); } }); return (
{loading && }
Email} > } data-testid="email" /> Full Name} > } data-testid="name" /> ({ validator() { if (getFieldValue('password').length < 8) { return Promise.reject( new Error('Your password is fewer than 8 characters'), ); } return Promise.resolve(); }, }), ]} name="password" // eslint-disable-next-line jsx-a11y/label-has-associated-control label={} > } type="password" data-testid="password" /> ({ validator() { if (getFieldValue('confirmPassword') !== getFieldValue('password')) { return Promise.reject(new Error('Your passwords do not match')); } return Promise.resolve(); }, }), ]} name="confirmPassword" // eslint-disable-next-line jsx-a11y/label-has-associated-control label={} > } type="password" data-testid="confirmPassword" /> Title} > Data Analyst Data Engineer Data Scientist Software Engineer Manager Product Manager Other {({ getFieldsValue }) => { const { fullName, email, password, confirmPassword, title } = getFieldsValue() as { fullName: string; email: string; password: string; confirmPassword: string; title: string; }; const fieldsAreNotEmpty = !!fullName && !!email && !!password && !!confirmPassword && !!title; const passwordsMatch = password === confirmPassword; const formIsComplete = fieldsAreNotEmpty && passwordsMatch; return ( ); }}
); };