@fortawesome/free-solid-svg-icons#faCheck JavaScript Examples

DeckStatusSummary = ({ status }) => {
    let { basicRules, hasConjurations, tenDice, uniques } = status;
    let items = [
        { title: 'Basic rules (deck size)', value: basicRules },
        { title: 'Conjurations included', value: hasConjurations },
        { title: 'Ten dice', value: tenDice },
        { title: 'Phoenixborn unique cards', value: uniques }
    ];

    return (
        <ul className='deck-status-summary'>
            {items.map((item, index) => (
                <li className={item.value ? 'valid' : 'invalid'} key={index}>
                    <FontAwesomeIcon icon={item.value ? faCheck : faTimes} />
                    &nbsp;<Trans>{item.title}</Trans>
                </li>
            ))}
        </ul>
    );
}

ModalConfirm = ({
    message,
    title,
    onAccept,
    onDismiss,
    children,
    large
}) => (
    <Modal
        isOpen
        centered
        toggle={onDismiss}
        size={large ? 'lg' : null}
    >
        <ModalHeader toggle={onDismiss}>
            {title}
        </ModalHeader>
        <ModalBody >
            {message}
            {children}
        </ModalBody>
        <ModalFooter>
            {onAccept && (
                <Button onClick={onAccept} color="primary">
                    <FontAwesomeIcon icon={faCheck}/>
                    &nbsp;Confirmar
                </Button>
            )}
            <Button onClick={onDismiss}>
                <FontAwesomeIcon icon={faBan}/>
                &nbsp;Cancelar
            </Button>
        </ModalFooter>
    </Modal>
)

library.add(
  faFileDownload,
  faTrash,
  faBars,
  faCheckSquare,
  faCheck,
  faPlus,
  faCogs,
  faServer,
  faLaptop,
  faMobileAlt
);

// Register the FontAwesome icons.
library.add(
  faArrowFromLeft,
  faArrowToRight,
  faCheck,
  faEquals,
  faKey,
  faQuestion,
  faThumbtack,
  faTimes
);

library.add(
  faBars,
  faTimes,
  faChevronDown,
  faChevronUp,
  faCalendarAlt,
  faTelegramPlane,
  faTwitter,
  faMediumM,
  faRedditAlien,
  faQuestionCircle,
  faCheck,
  faSearch,
);

constructor(taskService, store, router) {
    this.taskService = taskService;
    this.store = store;
    this.router = router;
    this.faPlus = faPlus;
    this.faCheck = faCheck;
    this.faBars = faBars;
    this.subscription = this.store.state.subscribe(
      (state) => (this.state = state)
    );
  }

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

CourseImportListItem = ({
  intl, course, libraryId, importBlocksHandler, ongoingImportState, taskPaginationParams,
}) => {
  const [importState, setImportState] = useState('default');

  useEffect(() => {
    setImportState(ongoingImportState);
  }, [ongoingImportState]);

  const handleImport = () => {
    importBlocksHandler({ params: { libraryId, courseId: course.id, taskPaginationParams } });
  };

  const importButtonProps = {
    state: ongoingImportState || 'default',
    variant: importState === 'error' ? 'danger' : 'primary',
    labels: {
      default: intl.formatMessage(messages['library.course_import.new_import.label']),
      pending: intl.formatMessage(messages['library.course_import.ongoing_import.label']),
      complete: intl.formatMessage(messages['library.course_import.import_scheduled.label']),
      error: intl.formatMessage(messages['library.course_import.import_schedule_failed.label']),
    },
    icons: {
      default: <FontAwesomeIcon icon={faPlus} className="icon-inline" />,
      pending: <FontAwesomeIcon icon={faSpinner} className="icon-inline fa-spin" />,
      complete: <FontAwesomeIcon icon={faCheck} className="icon-inline" />,
      error: <FontAwesomeIcon icon={faSync} className="icon-inline" />,
    },
    disabledStates: ['pending', 'complete'],
    className: 'btn-lg',
    onClick: handleImport,
  };

  return (
    <div className="library-link">
      <Row className="h-100">
        <Col xs={6} md={6} className="my-auto">
          <h3 className="library-title">{course.title}</h3>
        </Col>
        <Col xs={6} md={6} className="my-auto text-center text-md-right">
          <StatefulButton {...importButtonProps} />
        </Col>
      </Row>
      <div className="library-metadata">
        <span className="library-org metadata-item">
          <span className="label">{intl.formatMessage(messages['library.course_import.list_item.organization'])}</span>
          <span className="value">{course.org}</span>
        </span>
        <span className="library-slug metadata-item">
          <span className="label">{intl.formatMessage(messages['library.course_import.list_item.id'])}</span>
          <span className="value">{course.id}</span>
        </span>
      </div>
    </div>
  );
}

NotificationsList = () => {
    const [notifications, fetchNotifications] = useFetch('/notifications')

    const markNotificationAsRead = notification => {
        secureApiFetch(`/notifications/${notification.id}`, {
            method: 'PUT',
            body: JSON.stringify({ status: 'read' })
        }).then(() => {
            fetchNotifications();
        })
    }

    const deleteNotification = useDelete('/notifications/', fetchNotifications);

    return <>
        <PageTitle value="Notifications" />
        <div className='heading'>
            <Breadcrumb />
        </div>
        <Title title='Notifications' icon={<BellIcon />} />

        <Table>
            <Thead>
                <Tr>
                    <Th w={50}>&nbsp;</Th>
                    <Th w={200}>Date/time</Th>
                    <Th>Content</Th>
                    <Th>&nbsp;</Th>
                </Tr>
            </Thead>
            <Tbody>
                {null === notifications && <LoadingTableRow numColumns={3} />}
                {null !== notifications && notifications.length === 0 && <NoResultsTableRow numColumns={3} />}
                {null !== notifications && notifications.length > 0 &&
                    notifications.map(notification =>
                        <Tr key={notification.id}>
                            <Th>{notification.status === 'read' ? <FontAwesomeIcon icon={faCheck} /> : <>&nbsp;</>}</Th>
                            <Td><RelativeDateFormatter date={notification.insert_ts} /></Td>
                            <Td>
                                <strong>{notification.title}</strong>
                                <div>{notification.content}</div>
                            </Td>
                            <Td textAlign="right">
                                <ButtonGroup>
                                    {notification.status === 'unread' && <Button onClick={() => markNotificationAsRead(notification)} leftIcon={<FontAwesomeIcon icon={faCheck} />}>Mark as read</Button>}
                                    <DeleteIconButton onClick={() => deleteNotification(notification.id)} />
                                </ButtonGroup>
                            </Td>
                        </Tr>
                    )
                }
            </Tbody>
        </Table>
    </>
}

CheckedIcon = props => <FontAwesomeIcon icon={faCheck} {...props}/>

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}

Register = () => {
    const userRef = useRef();
    const errRef = useRef();

    const [user, setUser] = useState('');
    const [validName, setValidName] = useState(false);
    const [userFocus, setUserFocus] = useState(false);

    const [pwd, setPwd] = useState('');
    const [validPwd, setValidPwd] = useState(false);
    const [pwdFocus, setPwdFocus] = useState(false);

    const [matchPwd, setMatchPwd] = useState('');
    const [validMatch, setValidMatch] = useState(false);
    const [matchFocus, setMatchFocus] = useState(false);

    const [errMsg, setErrMsg] = useState('');
    const [success, setSuccess] = useState(false);

    useEffect(() => {
        userRef.current.focus();
    }, [])

    useEffect(() => {
        setValidName(USER_REGEX.test(user));
    }, [user])

    useEffect(() => {
        setValidPwd(PWD_REGEX.test(pwd));
        setValidMatch(pwd === matchPwd);
    }, [pwd, matchPwd])

    useEffect(() => {
        setErrMsg('');
    }, [user, pwd, matchPwd])

    const handleSubmit = async (e) => {
        e.preventDefault();
        // if button enabled with JS hack
        const v1 = USER_REGEX.test(user);
        const v2 = PWD_REGEX.test(pwd);
        if (!v1 || !v2) {
            setErrMsg("Invalid Entry");
            return;
        }
        try {
            const response = await axios.post(REGISTER_URL,
                JSON.stringify({ user, pwd }),
                {
                    headers: { 'Content-Type': 'application/json' },
                    withCredentials: true
                }
            );
            // TODO: remove console.logs before deployment
            console.log(JSON.stringify(response?.data));
            //console.log(JSON.stringify(response))
            setSuccess(true);
            //clear state and controlled inputs
            setUser('');
            setPwd('');
            setMatchPwd('');
        } catch (err) {
            if (!err?.response) {
                setErrMsg('No Server Response');
            } else if (err.response?.status === 409) {
                setErrMsg('Username Taken');
            } else {
                setErrMsg('Registration Failed')
            }
            errRef.current.focus();
        }
    }

    return (
        <>
            {success ? (
                <section>
                    <h1>Success!</h1>
                    <p>
                        <a href="#">Sign In</a>
                    </p>
                </section>
            ) : (
                <section>
                    <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>
                    <h1>Register</h1>
                    <form onSubmit={handleSubmit}>
                        <label htmlFor="username">
                            Username:
                            <FontAwesomeIcon icon={faCheck} className={validName ? "valid" : "hide"} />
                            <FontAwesomeIcon icon={faTimes} className={validName || !user ? "hide" : "invalid"} />
                        </label>
                        <input
                            type="text"
                            id="username"
                            ref={userRef}
                            autoComplete="off"
                            onChange={(e) => setUser(e.target.value)}
                            value={user}
                            required
                            aria-invalid={validName ? "false" : "true"}
                            aria-describedby="uidnote"
                            onFocus={() => setUserFocus(true)}
                            onBlur={() => setUserFocus(false)}
                        />
                        <p id="uidnote" className={userFocus && user && !validName ? "instructions" : "offscreen"}>
                            <FontAwesomeIcon icon={faInfoCircle} />
                            4 to 24 characters.<br />
                            Must begin with a letter.<br />
                            Letters, numbers, underscores, hyphens allowed.
                        </p>


                        <label htmlFor="password">
                            Password:
                            <FontAwesomeIcon icon={faCheck} className={validPwd ? "valid" : "hide"} />
                            <FontAwesomeIcon icon={faTimes} className={validPwd || !pwd ? "hide" : "invalid"} />
                        </label>
                        <input
                            type="password"
                            id="password"
                            onChange={(e) => setPwd(e.target.value)}
                            value={pwd}
                            required
                            aria-invalid={validPwd ? "false" : "true"}
                            aria-describedby="pwdnote"
                            onFocus={() => setPwdFocus(true)}
                            onBlur={() => setPwdFocus(false)}
                        />
                        <p id="pwdnote" className={pwdFocus && !validPwd ? "instructions" : "offscreen"}>
                            <FontAwesomeIcon icon={faInfoCircle} />
                            8 to 24 characters.<br />
                            Must include uppercase and lowercase letters, a number and a special character.<br />
                            Allowed special characters: <span aria-label="exclamation mark">!</span> <span aria-label="at symbol">@</span> <span aria-label="hashtag">#</span> <span aria-label="dollar sign">$</span> <span aria-label="percent">%</span>
                        </p>


                        <label htmlFor="confirm_pwd">
                            Confirm Password:
                            <FontAwesomeIcon icon={faCheck} className={validMatch && matchPwd ? "valid" : "hide"} />
                            <FontAwesomeIcon icon={faTimes} className={validMatch || !matchPwd ? "hide" : "invalid"} />
                        </label>
                        <input
                            type="password"
                            id="confirm_pwd"
                            onChange={(e) => setMatchPwd(e.target.value)}
                            value={matchPwd}
                            required
                            aria-invalid={validMatch ? "false" : "true"}
                            aria-describedby="confirmnote"
                            onFocus={() => setMatchFocus(true)}
                            onBlur={() => setMatchFocus(false)}
                        />
                        <p id="confirmnote" className={matchFocus && !validMatch ? "instructions" : "offscreen"}>
                            <FontAwesomeIcon icon={faInfoCircle} />
                            Must match the first password input field.
                        </p>

                        <button disabled={!validName || !validPwd || !validMatch ? true : false}>Sign Up</button>
                    </form>
                    <p>
                        Already registered?<br />
                        <span className="line">
                            <Link to="/">Sign In</Link>
                        </span>
                    </p>
                </section>
            )}
        </>
    )
}

SelectorTable = ({columns, data, selectedTable}) => {
    const { selectedAddressObj, selectedElement } = useStoreState(state => state.canvas);
    const { insertOrRemoveSelectedColumnAddress } = useStoreActions(actions => actions.canvas);
    const dataBlockId = selectedElement.data.dataBlock.dataBlockId;

    const addressArray = selectedTable.split('@');
    const schema = addressArray[0];
    const category = addressArray[1];
    const table = addressArray[2];

    let listOfSelectedColumn = [];
    try{
        listOfSelectedColumn = selectedAddressObj[dataBlockId][schema][category][table];
        if(typeof listOfSelectedColumn === 'undefined') listOfSelectedColumn = [];
    } catch (e) {
        listOfSelectedColumn = []
    }

    const prepareColumn = () => {
        return [{
            Header: "",
            id: "row",
            filterable: false,
            width: 50,
            Cell: (row) => {
                return (
                    <div
                        className={`
                                flex flex-row justify-center items-center h-6 w-6 rounded-full
                                border-2 border-kuwala-green 
                                cursor-pointer
                                select-none
                            `}
                        onClick={()=> {
                            insertOrRemoveSelectedColumnAddress({
                                columnAddress: row.original.columnAddress,
                                dataBlockId: dataBlockId,
                            })
                        }}
                    >
                        <FontAwesomeIcon
                            icon={faCheck}
                            className={`
                            h-4 w-4 text-kuwala-green
                            ${row.original.selected ? '' : 'hidden'}
                        `}
                        />
                    </div>
                );
            }
        }, {
            Header: 'name',
            accessor: 'column',
            Cell: (row) => {
                return <div className={'font-light select-none'}>
                    {row.value}
                </div>
            }
        }, {
            Header: 'type',
            accessor: 'type',
            Cell: (row) => {
                return (
                    <span className={'bg-gray-100 px-4 py-1 text-sm font-semibold text-gray-400 rounded-lg lowercase'}>
                        {row.value}
                    </span>
                );
            }
        }]
    }

    const memoizedCols = useMemo(()=> {
        return prepareColumn()
    },[]);

    const populatedData = data.map((el)=> {
        return {
            ...el,
            selected: listOfSelectedColumn.includes(el.column),
        }
    });

    let pageSize;
    if (populatedData.length >= 300) pageSize = 300
    else pageSize = populatedData.length

    return (
        <div className={'selector-explorer h-full'}>
            <ReactTable
                data={populatedData}
                columns={memoizedCols}
                defaultPageSize={pageSize}
                showPagination={false}
                showPaginationTop={false}
                showPaginationBottom={false}
                showPageSizeOptions={false}
                style={{
                    height: "100%",
                    overFlowX: 'hidden',
                    overFlowY: 'auto',
                }}
            />
        </div>
    )
}

export default function AddRemoteRepoFormComponent(props) {
  const {
    setReloadView,
    setRemoteForm,
    setFieldMissing,
    setInvalidUrl,
    setAddNewRemote,
    setAddRemoteStatus,
    repoId,
    setStatusCheck,
    setRemoteOperation,
  } = props;

  const remoteNameRef = useRef();
  const remoteUrlRef = useRef();

  const formAddRemote = (formId, placeholder) => {
    return (
      <input
        type="text"
        autoComplete="off"
        id={formId}
        className={`rounded w-full py-2 border-2 text-center xl:text-lg lg:text-lg md:text-base text-base items-center text-gray-800 bg-white`}
        style={{ borderColor: "rgb(113 166 196 / 33%)" }}
        placeholder={placeholder}
        ref={formId === "remoteName" ? remoteNameRef : remoteUrlRef}
        onChange={(event) => {
          setFieldMissing(false);
          setAddRemoteStatus(false);
          setInvalidUrl(false);
          const remoteNameVal = event.target.value;
          if (
            event.target.id === "remoteName" &&
            remoteNameVal.match(/[\s\\//*]/gi)
          ) {
            event.target.value = remoteNameVal.replace(/[\s\\//*]/gi, "-");
          }
        }}
      ></input>
    );
  };

  const addRemote = () => {
    let remoteName = remoteNameRef.current.value.trim();
    let remoteUrl = remoteUrlRef.current.value.trim();

    if (remoteName && remoteUrl && remoteUrl.match(/[^ ]*/g)) {
      if (remoteUrl.match(/(\s)/g)) {
        setInvalidUrl(true);
      } else {
        axios({
          url: globalAPIEndpoint,
          method: "POST",
          data: {
            query: `
                  mutation {
                    addRemote(repoId: "${repoId}", remoteName: "${remoteName}", remoteUrl: "${remoteUrl}"){
                      status
                    }
                  }
                `,
          },
        })
          .then((res) => {
            const { status } = res.data.data.addRemote;
            if (status === "REMOTE_ADD_SUCCESS") {
              remoteNameRef.current.value = "";
              remoteUrlRef.current.value = "";

              setRemoteForm(false);
              setAddNewRemote(true);
              setReloadView(true);
            } else {
              setAddRemoteStatus(true);
            }
            setStatusCheck(false);
            setRemoteOperation(" ");
          })
          .catch((err) => {
            console.log(err);
            setStatusCheck(true);
            setRemoteOperation("add");
          });
      }
    } else {
      setAddNewRemote(false);
      setInvalidUrl(false);
      setFieldMissing(true);
    }
  };

  return (
    <form className="flex items-center w-full my-6 form--data">
      <div className="w-1/4 mx-auto">
        {formAddRemote("remoteName", "Remote name")}
      </div>
      <div className="w-1/2 mx-auto">
        {formAddRemote("remoteURL", "Remote URL")}
      </div>
      <div
        className="flex items-center text-center justify-evenly"
        style={{ outline: "none", width: "22%" }}
      >
        <div
          className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-blue-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-blue-700"
          onClick={() => {
            addRemote();
          }}
        >
          <FontAwesomeIcon
            icon={faCheck}
            className="text-white"
          ></FontAwesomeIcon>
        </div>
        <div
          className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-red-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-red-600"
          onClick={() => {
            setAddNewRemote(true);
            setRemoteForm(false);
            setFieldMissing(false);
            setInvalidUrl(false);
            setAddRemoteStatus(false);
          }}
        >
          <FontAwesomeIcon
            icon={faTimes}
            className="text-white"
          ></FontAwesomeIcon>
        </div>
      </div>
    </form>
  );
}

RecipientsListItem = ({
  index,
  user: { id: userId, fullName, email },
}) => {
  const userNameText = fullName;
  const { docId } = useParams();
  const doc = useSelector(getDocumentById(docId));
  const currentUser = useSelector(getCurrentUser);
  const cfs = useSelector(getArrayOfContentFieldsByDocId(docId));
  const isMe = currentUser.id === userId;

  const userCFs = cfs.filter((cf) => cf.signatoryId === userId);
  const countSigned = userCFs.reduce((acc, curr) => {
    if (/^FILLED/.test(curr.type)) return acc + 1;
    return acc;
  }, 0);

  const isFinal = doc.status === 'Final';
  const anySigned = countSigned > 0;
  const allSigned = anySigned && countSigned === userCFs.length;
  const signedPercent = (countSigned / userCFs.length) * 100;

  const StatusText = () => {
    if (isFinal) return 'Signed';
    if (allSigned)
      return isMe ? (
        <Link to={`/documents/${docId}/sign`}>Signed</Link>
      ) : (
        'Signed'
      );
    if (anySigned)
      return isMe ? (
        <Link to={`/documents/${docId}/sign`}>In Progress</Link>
      ) : (
        'In Progress'
      );
    return isMe ? (
      <Link to={`/documents/${docId}/sign`}>Not yet signed</Link>
    ) : (
      'Not yet signed'
    );
  };

  const StatusIcon = () => {
    if (anySigned) {
      if (allSigned) return <FontAwesomeIcon icon={faCheck} color="green" />;
      return <ProgressCircle radius={15} stroke={4} progress={signedPercent} />;
    }
    return <FontAwesomeIcon icon={faTimes} color="orange" />;
  };

  return (
    <>
      <div className="grid-row-index">{index}</div>
      <div className="grid-row-status">
        {/* <FontAwesomeIcon icon={faSpinner} color="gray" /> */}
      </div>
      <div className="grid-row-user">
        <div>
          <strong>{userNameText}</strong>
        </div>
        <div>
          <p>{email}</p>
        </div>
      </div>
      <div className="grid-row-signed-icon">
        <StatusIcon />
      </div>
      <div className="grid-row-signed-at">
        <div>
          <strong>
            <StatusText />
          </strong>
        </div>
        <div>
          <p>{/* Signed date goes here */}</p>
        </div>
        <div>
          <p>{/* Signed location goes here */}</p>
        </div>
      </div>
    </>
  );
}