@ant-design/icons#UserAddOutlined JavaScript Examples

function MembersList(props) {
	const [showModal, setShowModal] = useState(false);
	const { userRole } = useContext(UserContext);
	const uid = useSelector((state) => state.User.userId);

	const openInviteModal = () => {
		props.createInvite(props.team.id, props.team.name, props.team.organization_id, uid);
		setShowModal(true);
	};

	return (
		<>
			<div className="dashboard-header">
				<h2>Members ({props.teamMembers.length})</h2>
				{userRole === 1 ? null : (
					// <Button
					// 	style={{ color: "#6954EA", border: "hidden", fontSize: "1rem", textAlign: "left",  borderStyle:"none", backgroundColor:"transparent",boxShadow:"none" }}
						
					// 	className="adding-button"
					// 	onClick={openInviteModal}>
						
					// </Button>
					<UserAddOutlined style={{fontSize:"1.6rem", color: "#6954EA"}} onClick={openInviteModal} />
				)}
			</div>
			<Carousel component={MemberCard} data={props.teamMembers} />
			<InviteModal isVisible={showModal} setVisibility={setShowModal} team={props.team} />
		</>
	);
}

function Public({ component: Component,auth, ...rest }) {

    return(
        <Route {...rest}
               render={props =>
                   !auth.loggedIn ? (
                       <div>
                           <Header>
                               <Menu theme="dark" mode="horizontal" >
                                   <Menu.Item key="1" icon={<UserOutlined />}>
                                       <Link to="/">Login</Link>
                                   </Menu.Item>
                                   <Menu.Item key="2" icon={<UserAddOutlined />}>
                                       <Link to="/register">Register</Link>
                                   </Menu.Item>
                               </Menu>
                           </Header>
                           <Content style={{ marginTop: "100px", marginBottom: "100px" }}>
                               <Row justify="space-around">
                                   <Col span={6} style={{ textAlign: "center" }}>
                                       <Component {...props} />
                                   </Col>
                               </Row>
                           </Content>
                       </div>

                   ) : (
                       <Redirect to={{ pathname: "/list", state: { from: props.location } }} />
                   )
               }
        />
    );
}

function ListOfPresents(props) {

		/*Recebe o evento selecionado pelo organizador*/
		const { evento } = props

		/*Nome do novo participante no input*/
		const [ name, setName ] = useState('')

		/*E-mail do novo participante no input*/
		const [ email, setEmail ] = useState('')

		/*JSON dos participantes*/
		const [ participantes, setParticipantes ] = useState(participantesData)

		/*Variavel que troca a lista de participants pelos certificados*/
		const [ visible, setVisible ] = useState(true)

		/*Variavel que troca a lista de participants pelos formulário*/
		const [ visibleForm, setVisibleForm ] = useState(false)

		/*Participante selecionado*/
		const [ thisParticipante, setThisParticipante ] = useState('')

		/*Variavel que mostrará uma animação enquanto o e-mail é enviado*/
		const [ loadingEmail, setLoadingEmail] = useState(false)

		/*------- Informações adicionais sobre o evento ------*/
		let numeroDeParticipantes = 0
		let certificadosEvenviados = 0
		let participantesConfirmados = 0

		const showModal = (participante) => {
			setVisible(false)
			setThisParticipante(participante)
		}

		/*Valida os campos de input*/
		const verificarCampos = () => {
			if(!name || !email ) {
				message.error('Por favor, preencha todos os campos')

			} else {

				/*Verificando se o e-mail é valido */
			    if( !email.includes('@') || !email.includes('.') ){
			    	message.error('E-mail invalido!')

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

				    participantes.map(itemJson => {

				    	if(itemJson.course === evento.course) {
				    		listEmails.push(itemJson.email)
				    	}
				    })

				    if(!listEmails.includes(email)) {
						
						setParticipantes([
							...participantes, {
								name: name,
								email: email,
								present: true,
								receiveCertificate: false,
								course: evento.course
							}
						])

						/*Volta para a lista de participntes*/
						setVisibleForm(false)
						message.success('Participante criado com sucesso')
						setName('')
						setEmail('')

					} else {

						message.warning('Este participante já está na sua lista')
					}
			    }
			}
		}

		/* ------------- Deletando Participantes ---------------*/
		const deleteParticipant = (participantToBeDeleted) => {

			setParticipantes( participantes.filter(participante => {
				if(participante.name !== participantToBeDeleted) {
					return participante
				}
			}))
		}

		/*Na mudança de check do participante*/
		const onChange = (participante) => {

			setParticipantes(participantes.map(itemParticipante => {
				
				if(itemParticipante.name === participante.name) {
					itemParticipante['present'] = !participante.present

					if(participante.present) {
						message.success('Este participante receberá certificado')

					} else {
						message.info('Este participante não receberá certificado')
					}

					return itemParticipante;
				} else {

					return itemParticipante;
				}
				
			}))
		}
    	
    	/*Função destinada ao envio de e-mail, recebe o e-mail do participante*/
		const sendEmail = (to) =>{	

			/*Este e-mail enviará os certificados*/
			let from = "[email protected]"

			setLoadingEmail(true)
			const input = document.getElementsByClassName('certificate-background')[0];
			window.scrollTo(0,0);
			html2canvas(input, {
					windowWidth: input.scrollWidth,
					windowHeight: input.scrollHeight
				})
				.then((canvas) => {
					const imgData = canvas.toDataURL('image/png');
					const pdf = new jsPDF('l', 'mm', 'a4', true);

					pdf.addImage(imgData, 'PNG', 3, 3, 380, 265, '', 'SLOW');
					var formData = new FormData();
					formData.append('file', new Blob([pdf.output('blob')], {type: 'application/pdf'}), "certificado.pdf");
					formData.append('from', from);
					formData.append('to', to);

					fetch('http://localhost:8080/send-mail', {
						method: 'POST',
						body: formData,
					})
					.then(success =>  message.success("Email enviado com sucesso!"))
					.then(before => setLoadingEmail(false))
					.catch(error => message.error("Não foi possível enviar seu email!")
					.then(before => setLoadingEmail(false))
					);
				});

			

			setParticipantes(participantes.map(itemParticipante => {
				
				/*Buscando o participante que recebeu o email*/
				if(itemParticipante.email === to) {

					itemParticipante['receiveCertificate'] = true
					return itemParticipante;

				} else {

					return itemParticipante;
				}
				
			}))

		}

		const dataSource = []

		/*Preenchendo lista de participantes*/
		participantes.map((participante, key) => {
			if(participante.course === evento.course) {

				let statusCertificate = ''
				let statusPresense = ''
				let colorCertificate = ''
				let colorPresense = ''

				/*Verifica se o participante recebeu certificado*/
				statusCertificate = (participante.receiveCertificate) ? 'Enviado' : 'Não Enviado'
				colorCertificate = (participante.receiveCertificate) ? 'green' : 'orange'

				/*Verifica se o participante está confirmado no evento*/
				statusPresense = (participante.present) ? 'Confirmada' : 'Não Confirmado'
				colorPresense = (participante.present) ? 'green' : 'red'

				dataSource.push({
					key: key,
					checkbox: <Checkbox 
									checked={participante.present} 
									onChange={() => onChange(participante) }>
							   </Checkbox>,

    				participante: participante.name,

    				email: participante.email,

   					status: <Tag color={colorCertificate}>{statusCertificate}</Tag>,

   					presense: <Tag color={colorPresense}>{statusPresense}</Tag>,

   					certificado: <Button 
   									type="primary" 
   									disabled={!participante.present} 
   									className="buttom-ver-certificado" 
   									onClick={() => showModal(participante)}>
									Acessar 
								</Button>,

					delete:
							<Popconfirm 
								title="Você tem certeza de que quer excluir este participante?"
								onConfirm={() => deleteParticipant(participante.name) }
								okText="Sim"
								cancelText="Não"
							>
								<Button danger 
									className="button-delete" 
								> X 
								</Button>
							</Popconfirm>
    			})
			}

		})

		const columns = [
		  {
		  	title: 'Atualizar Presença',
		  	dataIndex: 'checkbox',
		  	key: 'checkbox'
		  },
		  {
		    title: 'Participante',
		    dataIndex: 'participante',
		    key: 'participante',
		  },
		  {
		    title: 'E-mail',
		    dataIndex: 'email',
		    key: 'email',
		  },
		  {
		    title: 'Status',
		    dataIndex: 'status',
		    key: 'status',
		  },
		  {
		    title: 'Presença',
		    dataIndex: 'presense',
		    key: 'presense',
		  },
		  ,
		  {
		    title: 'Certificado',
		    dataIndex: 'certificado',
		    key: 'certificado',
		  }
		  ,
		  {
		    title: 'Excluir da lista',
		    dataIndex: 'delete',
		    key: 'delete',
		  }
		];

		return (
			<>
				<div className="list-participants" style={{ display: visible ?  'grid' : 'none' }} >
					<div className="input-participantes" style={{ display: visibleForm ?  'grid' : 'none' }}>
						<h2>Adicione mais participantes a sua lista:</h2>
						<Input className="input-1" placeholder="Nome do participante" value={name} onChange={newName => setName(newName.target.value)}/>
						<br/>
						<Input className="input-2" placeholder="E-mail do participante" value={email} onChange={newEmail => setEmail(newEmail.target.value)}/>
						<br/>
						<Button className="button-parcipants" type="primary" danger onClick={() => {verificarCampos()}}>Incluir novo participante</Button>
						<Button className="buttom-voltar-participants" onClick={ () => setVisibleForm(false) }>Voltar para a lista</Button>
					</div>

					<div style={{ display: visibleForm ?  'none' : 'block' }}>
						<Button className="button-add-participant" onClick={ () => setVisibleForm(true) }><UserAddOutlined/>Incluir participante</Button>

						<h1 className="title-2">Lista de Participantes</h1>
						<Popover content={<h5>Click para enviar certificados para todos os participantes</h5>}>
							<Button className="buttom-send-to-all">Enviar para todos</Button>
						</Popover>

						<Popover content={<h5>Click para cancelar a presença de todos os participantes</h5>}>
							<Button className="buttom-cancel">Cancelar todos</Button>
						</Popover>
						<Table dataSource={dataSource} columns={columns} />
					</div>				
				
				</div>
				<div style={{ display: visible ?  'none' : 'grid' }}>

					{ loadingEmail && 
						<div className='overlay-content'> 
							<Spinner name="ball-grid-pulse" color="white"/>
						</div>}
					
					<div className="certificate-background">
						<img src={logo} alt="Logo da empresa" className="img-logo-certificate"/>
						<img src={stars} alt="5 estrelas" className="img-stars"/> 
						<p className="p-certificate">A comunidade <span className="info-certificate">{evento.company}</span> confere ao participante <span className="info-certificate">{thisParticipante.name}</span> o presente certificado 
							<br/>referente a sua participação no evento <span className="info-certificate">{evento.course}</span> realizado do 
							<br/>dia <span className="info-certificate">{evento.startDate}</span> ao <span className="info-certificate">{evento.finishDate}</span>, com carga horaria de <span className="info-certificate">{evento.workload} horas.</span>
							<br/>
						</p>
						<img alt="Assinatura Digital" src={evento.digitalSignature} className="digitalSignature" />
						<hr/>
						<p className="p-2-certificate">{evento.user}</p>
					</div>

					<Button className="button-email" type="primary" onClick={() => sendEmail(thisParticipante.email)}>Enviar certificado</Button>
					<Button className="button-voltar" onClick={ () => setVisible(true) }>Voltar para a lista de participantes</Button>
				</div>
			</>
		);
}

AdminUser = ({ users, getAllUsers, removeUser, userEdit }) => {
  const [showUserForm, setShowUserForm] = useState(false);
  const [showUserEditForm, setShowUserEditForm] = useState(false);

  const deleteUser = async id => {
    const data = await Http.delete("/api/users/deleteUser/" + id);
    if (!data.msg) removeUser(id);
  };

  const replenishTable = useCallback(async () => {
    const dataSource = await Http.get("/api/users/getAllUsers");
    getAllUsers(
      dataSource.map(item => {
        item.key = item.id;
        return item;
      })
    );
  }, [getAllUsers]);

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id"
    },
    {
      title: "Nickname",
      dataIndex: "nickname",
      key: "nickname",
      render: text => <span>{text}</span>
    },
    {
      title: "Correo",
      dataIndex: "email",
      key: "email"
    },
    {
      title: "Nombre",
      dataIndex: "nombre",
      key: "nombre"
    },
    {
      title: "Apellidos",
      dataIndex: "apellidos",
      key: "apellidos"
    },
    {
      title: "Permisos",
      key: "admin",
      dataIndex: "admin",
      render: tags => (
        <span>
          {tags ? <Tag color="blue">Admin</Tag> : <Tag color="grey">User</Tag>}
        </span>
      )
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <span>
          <EditOutlined
            style={{ marginRight: 16 }}
            onClick={() => {
              userEdit(record.id);
              setShowUserEditForm(!showUserEditForm);
            }}
          />
          <DeleteOutlined
            style={{ color: "red" }}
            onClick={() => {
              deleteUser(record.id);
            }}
          />
        </span>
      )
    }
  ];

  useEffect(() => {
    // Wait for loading data user
    //setLoading(true);

    replenishTable();
    //setLoading(false);
  }, [replenishTable]);

  return (
    <div>
      <Header />
      <div className="adminUserBody">
        <Button
          className="addUserButton"
          size="large"
          icon={<UserAddOutlined />}
          onClick={() => {
            setShowUserForm(!showUserForm);
            //Modal.info({title:"Crear usuarios",content:(<UserForm/>),onOk(){}})
          }}
        >
          Añadir Usuarios
        </Button>

        <Modal
          title="Crear Usuarios"
          visible={showUserForm}
          okText="Salir"
          destroyOnClose={true}
          onOk={() => {
            setShowUserForm(!showUserForm);
          }}
          cancelText="Cancelar"
          onCancel={() => {
            setShowUserForm(!showUserForm);
          }}
        >
          <UserForm />
        </Modal>
        <Modal
          title="Editar Usuarios"
          visible={showUserEditForm}
          destroyOnClose={true}
          okText="Salir"
          onOk={() => {
            setShowUserEditForm(!showUserEditForm);
          }}
          cancelText="Cancelar"
          onCancel={() => {
            setShowUserEditForm(!showUserEditForm);
          }}
        >
          <UserEditForm />
        </Modal>

        <Table className="tablaUsuarios" columns={columns} dataSource={users} />
      </div>
    </div>
  );
}

ShareExperimentModal = (props) => {
  const { onCancel, experiment } = props;
  const [usersWithAccess, setUsersWithAccess] = useState([]);
  const [addedUsers, setAddedUsers] = useState([]);
  const [currentUser, setCurrentUser] = useState(null);
  const [role, setRole] = useState('explorer');

  const fetchRoles = async () => {
    const getCurrentUser = await Auth.currentAuthenticatedUser();
    setCurrentUser(getCurrentUser.attributes.email);

    const userRole = await loadRoles(experiment.id);
    setUsersWithAccess(userRole);
  };

  useEffect(() => {
    fetchRoles();
  }, []);

  const changeSelectedUsers = (selectedUsers) => {
    const newUser = selectedUsers[selectedUsers.length - 1];
    // check if the entry is in a valid email address format
    const isEmailInvalid = newUser && !newUser?.toLowerCase()
      .match(
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      );
    if (!isEmailInvalid) {
      setAddedUsers(selectedUsers);
    }
  };

  const okButtonText = addedUsers.length ? 'Add' : 'Done';
  const cancelButton = addedUsers.length ? (
    <Button onClick={() => setAddedUsers([])}>Cancel</Button>) : null;

  const inviteUsers = async () => {
    if (!addedUsers.length) return;

    await sendInvites(
      addedUsers,
      {
        experimentId: experiment.id,
        experimentName: experiment.name,
        role,
      },
    );

    onCancel();
  };

  return (
    <Modal
      visible
      title={[<UserAddOutlined />, 'Share with collaborators']}
      onCancel={onCancel}
      okButtonText='Done'
      footer={(
        <Space direction='horizontal'>
          {cancelButton}
          <Button onClick={() => inviteUsers()} type='primary'>{okButtonText}</Button>
        </Space>
      )}
      width='650px'
    >
      <Space direction='vertical' style={{ width: '100%' }}>
        <Text strong>
          {experiment.name}
        </Text>
        <Row gutter={10} style={{ width: '110%' }}>

          <Col span={18}>
            <Select
              value={addedUsers}
              style={{ width: '100%' }}
              mode='tags'
              placeholder='Input an email address. Add multiple addresses with enter.'
              onChange={changeSelectedUsers}
            />
          </Col>
          <Col span={6}>
            <Select defaultValue='explorer' onChange={(val) => setRole(val)}>
              <Select.Option key='explorer' value='explorer'> Explorer </Select.Option>
            </Select>
          </Col>
        </Row>

        <Row>
          <Space direction='vertical' style={{ width: '100%' }} size='large'>

            <Card key='users' style={{ width: '100%', height: '20rem', overflowY: 'auto' }}>
              {
                usersWithAccess.map((user) => (
                  <Row gutter={10}>
                    <Col span={3}>
                      <Avatar
                        style={{
                          backgroundColor: '#f56a00',
                        }}
                        size='large'
                      >
                        {user.name[0].toUpperCase()}
                      </Avatar>
                    </Col>
                    <Col span={13} flex='auto'>
                      <p>
                        {user.name}
                        {' '}
                        {user.email === currentUser ? '(You)' : ''}
                        <br />
                        <span style={{ color: 'grey' }}>{user.email}</span>
                      </p>
                    </Col>
                    <Col span={4}>
                      <p style={{ marginTop: '0.5em' }}>{user.role}</p>
                    </Col>
                    <Col span={2}>
                      <Button
                        type='primary'
                        danger
                        onClick={() => {
                          revokeRole(
                            user.email,
                            { experimentId: experiment.id, experimentName: experiment.name },
                          );

                          onCancel();
                        }}
                        disabled={user.email === currentUser}
                      >
                        Revoke
                      </Button>
                    </Col>
                  </Row>
                ))
              }
              <Row gutter={10} />
            </Card>
            <Text>
              <b>Explorer: </b>
              the user will be able to use Data Exploration and Plots and Tables modules,
              but will not be able to make any changes to samples or metadata in Data Management or
              re-run the pipeline in the Data Processing module.
            </Text>
          </Space>
        </Row>
      </Space>
    </Modal>
  );
}