김지은
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