react-icons/fa#FaUnlock TypeScript Examples

The following examples show how to use react-icons/fa#FaUnlock. 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: DisableModal.tsx    From hub with Apache License 2.0 4 votes vote down vote up 
DisableTwoFactorAuthenticationModal = (props: Props) => {
  const [openStatus, setOpenStatus] = useState<boolean>(false);
  const [isProcessing, setIsProcessing] = useState<boolean>(false);
  const [passcode, setPasscode] = useState<string>('');
  const [apiError, setApiError] = useState<null | string>(null);

  const onPasscodeChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPasscode(e.target.value);
    if (!isNull(apiError)) {
      setApiError(null);
    }
  };

  async function disableTFA() {
    try {
      setIsProcessing(true);
      await API.disableTFA(passcode);
      setApiError(null);
      props.onChange();
      setOpenStatus(false);
    } catch (err: any) {
      setIsProcessing(false);
      if (err.kind !== ErrorKind.Unauthorized) {
        setApiError('An error occurred turning off two-factor authentication, please try again later.');
      } else {
        props.onAuthError();
      }
    }
  }

  return (
    <>
      <button
        className="btn btn-danger btn-sm"
        onClick={() => setOpenStatus(true)}
        aria-label="Open disable two-factor authentication modal"
      >
        <div className="d-flex flex-row align-items-center">
          <FaUnlock className="me-2" />
          <span>Disable two-factor authentication</span>
        </div>
      </button>

      <Modal
        modalClassName={styles.modal}
        header={<div className={`h3 m-2 flex-grow-1 text-truncate ${styles.title}`}>Disable 2FA</div>}
        open={openStatus}
        onClose={() => setOpenStatus(false)}
        closeButton={
          <>
            <button
              className="btn btn-sm btn-outline-secondary text-uppercase"
              onClick={() => setOpenStatus(false)}
              aria-label="Cancel"
            >
              <div className="d-flex flex-row align-items-center">
                <IoMdCloseCircle className="me-2" />
                <span>Cancel</span>
              </div>
            </button>

            <button
              className="btn btn-sm btn-danger ms-3"
              onClick={(e) => {
                e.preventDefault();
                disableTFA();
              }}
              disabled={passcode === '' || isProcessing}
              aria-label="Disable two-factor authentication"
            >
              <div className="d-flex flex-row align-items-center text-uppercase">
                {isProcessing ? (
                  <>
                    <span className="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" />
                    <span className="ms-2">Disabling...</span>
                  </>
                ) : (
                  <>
                    <FaUnlock className="me-2" />
                    <span>Disable</span>
                  </>
                )}
              </div>
            </button>
          </>
        }
        error={apiError}
        cleanError={() => setApiError(null)}
      >
        <div className="mw-100">
          <div className={`mb-4 ${styles.label}`}>
            To disable two-factor authentication for your account please enter one of the codes from the 2FA
            authentication app or one of your recovery codes.
          </div>

          <InputField
            type="text"
            name="passcode"
            autoComplete="off"
            value={passcode}
            onChange={onPasscodeChange}
            invalidText={{
              default: 'This field is required',
            }}
            validateOnBlur
            required
          />
        </div>
      </Modal>
    </>
  );
}