리액트 썽크(Thunk) 로그인 UI

React Thunk Demo JavaScript File

Developer Park  / Hawaii Scalar

2020-07-03

 

 <MDBContainer className="py-5">
            <MDBRow center>
              <MDBCol md="6">
                <MDBCard>
                  <MDBCardBody>
                    <MDBCardHeader className="form-header deep-blue-gradient rounded">
                      <h3 className="my-3">
                        <MDBIcon icon="lock" /> 로그인
                      </h3>
                    </MDBCardHeader>
                    <form>
                      <div className="grey-text">
                        <MDBInput
                           label="이메일"
                           icon="envelope"
                           group
                           type="email"
                           validate
                           error="wrong"
                           success="right"
                           onChange={this.emailChange}
                        />
                        <MDBInput
                          label="비밀번호"
                          icon="lock"
                          group
                          type="password"
                          onChange={this.pwChange}
                          validate
                        />
                      </div>
                    
                    <div className="text-center mt-4">
                      <MDBBtn
                        color="light-blue"
                        className="mb-3"
                        onClick={this.Login}
                      >
                        Login
                      </MDBBtn>
                    </div>
                    </form>
                    <MDBModalFooter>
                      <div className="font-weight-light">
                         <MDBNavLink to="/join"><p className="btn"> GC.kr에 처음이세요? 회원가입하기</p></MDBNavLink>
                         <p className="blue-text btn"  onClick={this.toggle}>비밀번호를 잊으셨나요?</p>
 
                          <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
                            <MDBModalHeader toggle={this.toggle}>비밀번호 찾기
                            </MDBModalHeader>
                            <MDBModalBody>
                            <div className="grey-text py-4" >
                              <p>비밀번호를 찾고자 하는 GC.KR 이메일 ID를 입력해주시면 <br/>
                                 해당 메일 주소로 임시 비밀번호를 보내드립니다.</p><br/>
                                  <MDBInput
                                    label="이메일"
                                    icon="envelope"
                                    group
                                    type="email"
                                    validate
                                    error="wrong"
                                    success="right"
                                    onChange={this.emailChange}
                                  />
                                </div>
                            </MDBModalBody>
                            <MDBModalFooter>
                              <MDBBtn color="secondary" onClick={this.toggle}>취소</MDBBtn>
                              <MDBBtn color="primary" onClick={this.passFind}>확인</MDBBtn>
                            </MDBModalFooter>
                          </MDBModal>
 
                      </div>
                    </MDBModalFooter>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBRow>
          </MDBContainer>