@ant-design/icons#ScheduleOutlined JavaScript Examples

FormRegister = (props) => {

	/*Verifica se o acesso foi aprovado*/
  	const [ acessAproved, setAproved ] = useState(false)

  	/*Organizador do evento*/
  	const [ organizador, setOrganizador ] = useState('')

	const formik = useFormik({
		initialValues: {
			name: "",
			email: "",
			password: "",
			remember: true,
		},
		validationSchema: Yup.object().shape({
			name: Yup.string().required('Digite seu nome'),
			email: Yup.string().email('E-mail inválido').required('Digite seu e-mail'),
			password: Yup.string().min(4).required('Digite uma senha')
		})
	})

	const { handleSubmit, values } = formik

	/*JSON dos usuários*/
	const [ user, setUser ] = useState(users)

	const addNewUser = (name, email, password, avatar) => {

		setUser([
			...user, {
			name: name,
			email: email,
			password: password, 
			token: true,
			avatar: avatar
		}
		])

		setAproved(true)
		setOrganizador(name)
		message.success('Conta criada com sucesso')
	}

	/*Função acionada após criar a conta com o formulário*/
	const actionButton = () => {
			
		if(!values.name || !values.email || !values.password) {
			message.warning('Por favor, preencha todos os campos') 

		} else {
			
			/*Verificando se já existe um usuário cadastrado*/
			let listEmails = []

			user.map(itemJson => {
				listEmails.push(itemJson.email)
			})

			/*Se o e-mail digitado pelo usuário pelo usuário ainda não está no JSON de usuários*/
			if(!listEmails.includes(values.email)) {
				addNewUser(values.name, values.email, values.password, " ")

			} else {
				message.warning('Esta conta já existe')
			}
		}
	}

	/*Função acionada após o login com o Google*/
	const responseGoogle = response => {

		/*Verificando se já existe um usuário cadastrado*/
		let listEmails = []

		user.map(itemJson => {
			listEmails.push(itemJson.email)
		})

		/*Se o e-mail digitado pelo usuário pelo usuário ainda não está no JSON de usuários*/
		if(!listEmails.includes(response.profileObj.email)) {
			addNewUser(response.profileObj.name, response.profileObj.email, true, response.profileObj.imageUrl)

		} else {
			message.warning('Esta conta já existe')
		}
	}

	return (
		<>
			<div className="form" style={{ display: acessAproved ?  'none' : 'block' }}>	
				<h1 className="title-cadastre">Cadastre uma conta já, é simples e rápido</h1>
				<div className="button-google" >
					<GoogleLogin 
						clientId="78039332386-46h93ebkr1bb708hqv47h410pdd89mj9.apps.googleusercontent.com"
						render={renderProps => (
						<button 	
							onClick={renderProps.onClick} disabled={renderProps.disabled} className="loginBtn loginBtn-google"> 
							Cadastrar com o Google </button>
						)}
						buttonText="Cadastrar com o Google"
						onSuccess={responseGoogle}
						onFailure={responseGoogle}
					/>
				</div>

				<p className="ou">OU</p>

				<FormikProvider value={formik}>
					<Form onSubmit={handleSubmit}>
						
						<Field 
							name="name" 
							type="text" 
							className="form-field"
							prefix={<UserOutlined className="site-form-item-icon" />}
							placeholder="Digite seu nome"
						/>
						<ErrorMessage 
							render={msg => <p className="msg-error" >{msg}</p>}
							name="name" />
						
						
						<Field 
							name="email" 
							type="text" 
							className="form-field" 
							prefix={<ScheduleOutlined className="site-form-item-icon" />}
							placeholder="Digite seu e-mail"
							
						/>
						<ErrorMessage 
							render={msg => <p className="msg-error" >{msg}</p>} 
							name="email" />
						
						
						<Field 
							name="password"
							type="password" 
							className="form-field" 
							placeholder="Digite uma senha"
							prefix={<LockOutlined className="site-form-item-icon" />}
						/>
						<ErrorMessage 
							render={msg => <p className="msg-error" >{msg}</p>} 
							name="password" />

						<Button 
							type="submit" 
							onClick={actionButton} 
							className="button"
							
						>Criar conta</Button>
					</Form>
				</FormikProvider>
			</div>
			{/*Renderizando a pagina de lista de eventos*/}
      		{ acessAproved && <ListEvents users={user} organizador={organizador}/>}
		</>
	);
}