react-icons/ri#RiLock2Line JavaScript Examples

The following examples show how to use react-icons/ri#RiLock2Line. 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: LoginModal.js    From airdnd-frontend with MIT License 4 votes vote down vote up 
LoginModal = ({
  modalVisible,
  form,
  invalid,
  refObj,
  loading,
  result,
  isPwdShown,
  onFormChange,
  cleanupModal,
  openSignupMenuModal,
  closeModal,
  onToggleShowPwd,
  handleSubmit,
}) => {
  const { email, pwd } = form;
  const { emailRef, pwdRef } = refObj;
  return (
    <StLoginModal
      modalState={modalVisible}
      header
      width="570px"
      height="545px"
      title="로그인"
      setModalState={closeModal}
      cleanup={cleanupModal}
    >
      <StLoginModalWrapper>
        <GoogleLogin
          clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
          cookiePolicy={'single_host_origin'}
          onSuccess={res => console.log(res)}
          onFailure={res => console.log(res)}
          render={() => (
            <StFacebookButton>
              <FaFacebookF />
              <StButtonText>페이스북 계정으로 로그인</StButtonText>
            </StFacebookButton>
          )}
        ></GoogleLogin>
        <GoogleLogin
          clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
          cookiePolicy={'single_host_origin'}
          onSuccess={res => console.log(res)}
          onFailure={res => console.log(res)}
          render={() => (
            <StGoogleButton>
              <FcGoogle />
              <StButtonText>구글 계정으로 로그인</StButtonText>
            </StGoogleButton>
          )}
        ></GoogleLogin>
        <StDividerLine />
        <StDividerText>또는</StDividerText>
        <StLoginForm onSubmit={handleSubmit}>
          {result && result !== 'Success' && (
            <StResultWrapper result={result}>
              <StErrorWrapper>
                <AiOutlineWarning></AiOutlineWarning>
              </StErrorWrapper>
              <StResultTextWrapper>
                {result === 'NoId' && (
                  <StResultText>
                    이 이메일 주소와 연결된 계정이 없습니다. 다른 이메일 주소를
                    사용해 보세요.
                  </StResultText>
                )}
                {result === 'WrongPwd' && (
                  <StResultText>비밀번호가 틀립니다.</StResultText>
                )}
              </StResultTextWrapper>
            </StResultWrapper>
          )}
          <StInputWrapper>
            <StInput
              value={email}
              onChange={({ target: { value } }) => onFormChange('email', value)}
              focusBorderColor
              placeholder="이메일 주소"
              ref={emailRef}
              isInvalid={invalid.email}
            ></StInput>
            <RiMailLine />
            {email.length === 0 && invalid.email && (
              <StValidationText isInvalid={invalid.email}>
                이메일을 입력하세요.
              </StValidationText>
            )}
            {email.length > 0 && invalid.email && (
              <StValidationText isInvalid={invalid.email}>
                이메일 형식이 맞지 않습니다.
              </StValidationText>
            )}
          </StInputWrapper>
          <StInputWrapper name="password">
            <StInput
              type={isPwdShown ? 'text' : 'password'}
              value={pwd}
              onChange={({ target: { value } }) => onFormChange('pwd', value)}
              focusBorderColor
              placeholder="비밀번호"
              ref={pwdRef}
              isInvalid={invalid.pwd}
            ></StInput>
            <RiLock2Line />
            {pwd.length === 0 && invalid.pwd && (
              <StValidationText isInvalid={invalid.pwd}>
                비밀번호를 입력하세요.
              </StValidationText>
            )}
            {pwd.length > 0 && invalid.pwd && (
              <StValidationText isInvalid={invalid.pwd}>
                비밀번호는 최소 8글자 이상이어야 합니다. 다시 시도해 주세요.
              </StValidationText>
            )}
          </StInputWrapper>
          <StShowPwdButtonWrapper>
            <StShowPwdButton onClick={onToggleShowPwd}>
              {isPwdShown ? '비밀번호 숨기기' : '비밀번호 보이기'}
            </StShowPwdButton>
          </StShowPwdButtonWrapper>
          <StSubmitButton border="none" type="submit" disabled={loading}>
            {loading ? <StSubmitLoader /> : '로그인하기'}
          </StSubmitButton>
        </StLoginForm>
        <StDividerLine />
        <StSignupButtonWrapper>
          <StSignupText>에어비앤비 계정이 없으세요? </StSignupText>
          <StSignupButton btnType="color" onClick={openSignupMenuModal}>
            회원가입하기
          </StSignupButton>
        </StSignupButtonWrapper>
      </StLoginModalWrapper>
    </StLoginModal>
  );
}