김지은
2 years ago
2 changed files with 218 additions and 1 deletions
@ -0,0 +1,204 @@
|
||||
import { useState, useEffect } from 'react' |
||||
import { useParams, Link } from 'react-router-dom' |
||||
import { useSelector, useDispatch } from 'react-redux' |
||||
|
||||
import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button, |
||||
Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap' |
||||
import { User, Info, CreditCard, Lock, Check, X } from 'react-feather' |
||||
|
||||
import loginImg from '../../assets/images/login01.png'; |
||||
import '../../assets/css/custom.css'; |
||||
|
||||
const DesignPassword = () => { |
||||
// ** States & Vars
|
||||
const [activeTab, setActiveTab] = useState('1'), |
||||
store = useSelector(state => state.users), |
||||
dispatch = useDispatch(), |
||||
{ id } = useParams() |
||||
|
||||
// ** Function to toggle tabs
|
||||
const toggle = tab => setActiveTab(tab) |
||||
const [centeredModal, setCenteredModal] = useState(false) |
||||
const [centeredModal02, setCenteredModal02] = useState(false) |
||||
return ( |
||||
<> |
||||
<div className='login'> |
||||
<div className='login-logo'>Drone Control System</div> |
||||
<div className='login-img'> |
||||
<img src={loginImg} /> |
||||
</div> |
||||
<div className='login-form info-search'> |
||||
<div className='pal-card'> |
||||
<div className='card-body-tab-menu'> |
||||
<Nav pills> |
||||
<NavItem> |
||||
<NavLink active={activeTab === '1'} onClick={() => toggle('1')}> |
||||
<User size={14} /> |
||||
<span className='align-middle d-none d-sm-block'>아이디 찾기</span> |
||||
</NavLink> |
||||
</NavItem> |
||||
<NavItem> |
||||
<NavLink active={activeTab === '2'} onClick={() => toggle('2')}> |
||||
<Lock size={14} /> |
||||
<span className='align-middle d-none d-sm-block'>비밀번호 찾기</span> |
||||
</NavLink> |
||||
</NavItem> |
||||
</Nav> |
||||
</div> |
||||
<Row className='app-user-edit'> |
||||
<Col sm='12'> |
||||
<Card> |
||||
<CardBody className='card-body-tab-cont'> |
||||
<TabContent activeTab={activeTab}> |
||||
<TabPane tabId='1'> |
||||
<Form> |
||||
<FormGroup className='form-label-group position-relative has-icon-left'> |
||||
<InputGroup className=''> |
||||
<InputGroupAddon addonType='prepend'> |
||||
<InputGroupText> |
||||
<User size={14} /> |
||||
</InputGroupText> |
||||
</InputGroupAddon> |
||||
<Input placeholder='이름' /> |
||||
</InputGroup> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<div className='input-btn'> |
||||
<Col md='3' xs='12'> |
||||
<Input type='select' placeholder='+(국가번호)'> |
||||
<option>+82</option> |
||||
<option>21111</option> |
||||
</Input> |
||||
</Col> |
||||
<Col md='6' xs='12'> |
||||
<Input type='number' placeholder='휴대폰번호'/> |
||||
</Col> |
||||
<Col md='3' xs='12'> |
||||
<Button color='primary' type='button'>인증번호 발송</Button> |
||||
</Col> |
||||
</div> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<div className='input-btn'> |
||||
<Col md='9' xs='12' className='timeInput'> |
||||
<Input type='number' placeholder='인증번호 입력'/> |
||||
<span className='time'>남은시간 : 3:00</span> |
||||
</Col> |
||||
<Col md='3' xs='12'> |
||||
<Button color='primary' type='button'>인증번호 확인</Button> |
||||
</Col> |
||||
</div> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<div className='full-btn-2n vertically-centered-modal'> |
||||
<Button color='secondary' type='button'>취소</Button> |
||||
<Button color='primary' type='button' onClick={() => setCenteredModal(!centeredModal)} >확인</Button> |
||||
<Modal isOpen={centeredModal} toggle={() => setCenteredModal(!centeredModal)} className='modal-dialog-centered user-search-modal'> |
||||
<ModalHeader toggle={() => setCenteredModal(!centeredModal)}>아이디 확인</ModalHeader> |
||||
<ModalBody> |
||||
회원님의 아이디는<br/><span className='user-search-id'>TEST123123</span> 입니다. |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color='primary' onClick={() => setCenteredModal(!centeredModal)}> |
||||
로그인 |
||||
</Button>{' '} |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
</FormGroup> |
||||
</Form> |
||||
</TabPane> |
||||
<TabPane tabId='2'> |
||||
<Form> |
||||
<FormGroup className='form-label-group position-relative has-icon-left'> |
||||
<InputGroup className=''> |
||||
<InputGroupAddon addonType='prepend'> |
||||
<InputGroupText> |
||||
<User size={14} /> |
||||
</InputGroupText> |
||||
</InputGroupAddon> |
||||
<Input placeholder='아이디' /> |
||||
</InputGroup> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<div className='input-btn'> |
||||
<Col md='3' xs='12'> |
||||
<Input type='select' placeholder='+(국가번호)'> |
||||
<option>+82</option> |
||||
<option>21111</option> |
||||
</Input> |
||||
</Col> |
||||
<Col md='6' xs='12'> |
||||
<Input type='number' placeholder='휴대폰번호'/> |
||||
</Col> |
||||
<Col md='3' xs='12'> |
||||
<Button color='primary' type='button'>인증번호 발송</Button> |
||||
</Col> |
||||
</div> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<div className='input-btn time-span'> |
||||
<Col md='9' xs='12' className='timeInput'> |
||||
<Input type='number' placeholder='인증번호 입력'/> |
||||
<span className='time'>남은시간 : 3:00</span> |
||||
</Col> |
||||
<Col md='3' xs='12'> |
||||
<Button color='primary' type='button'>인증번호 확인</Button> |
||||
</Col> |
||||
</div> |
||||
</FormGroup> |
||||
<FormGroup> |
||||
<div className='full-btn-2n vertically-centered-modal'> |
||||
<Button color='secondary' type='button'>취소</Button> |
||||
<Button color='primary' type='button' onClick={() => setCenteredModal02(!centeredModal02)} >확인</Button> |
||||
<Modal isOpen={centeredModal02} toggle={() => setCenteredModal02(!centeredModal02)} className='modal-dialog-centered user-search-modal'> |
||||
<ModalHeader toggle={() => setCenteredModal02(!centeredModal02)}>비밀번호 확인</ModalHeader> |
||||
<ModalBody> |
||||
<span class="etc-txt">새로운 비밀번호로 변경해주세요.</span> |
||||
<FormGroup className='form-label-group position-relative has-icon-left'> |
||||
<InputGroup> |
||||
<InputGroupAddon addonType='prepend'> |
||||
<InputGroupText> |
||||
<Lock size={14} /> |
||||
</InputGroupText> |
||||
</InputGroupAddon> |
||||
<Input placeholder='새로운 비밀번호' type='password'/> |
||||
</InputGroup> |
||||
</FormGroup> |
||||
<FormGroup className='form-label-group position-relative has-icon-left mb-0'> |
||||
<InputGroup> |
||||
<InputGroupAddon addonType='prepend'> |
||||
<InputGroupText> |
||||
<Lock size={14} /> |
||||
</InputGroupText> |
||||
</InputGroupAddon> |
||||
<Input placeholder='새로운 비밀번호 확인' type='password'/> |
||||
</InputGroup> |
||||
</FormGroup> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color='primary' onClick={() => setCenteredModal02(!centeredModal02)}> |
||||
저장 |
||||
</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
</FormGroup> |
||||
</Form> |
||||
</TabPane> |
||||
</TabContent> |
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='user-search-link'> |
||||
<Button.Ripple color='flat-warning'>회원가입 바로가기</Button.Ripple> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default DesignPassword; |
Loading…
Reference in new issue