junh_eee
2 years ago
9 changed files with 390 additions and 1 deletions
@ -0,0 +1,109 @@
|
||||
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'; |
||||
|
||||
export const AccountFindPassword = props => { |
||||
const [activeTab, setActiveTab] = useState('1') |
||||
|
||||
// ** Function to toggle tabs
|
||||
const toggle = tab => setActiveTab(tab) |
||||
const [modal, setModal] = useState(false) |
||||
|
||||
|
||||
|
||||
return( |
||||
<> |
||||
<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' |
||||
onClick={props.handlerClose} |
||||
> |
||||
취소 |
||||
</Button> |
||||
<Button color='primary' type='button' onClick={() => setModal(!modal)} >확인</Button> |
||||
<Modal isOpen={modal} toggle={() => setModal(!modal)} className='modal-dialog-centered user-search-modal'> |
||||
<ModalHeader toggle={() => setModal(!modal)}>비밀번호 확인</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={() => setModal(!modal)}> |
||||
저장 |
||||
</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
</FormGroup> |
||||
</Form> |
||||
</TabPane> |
||||
</> |
||||
) |
||||
} |
@ -0,0 +1,90 @@
|
||||
import { useState } from "react"; |
||||
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 classnames from 'classnames'; |
||||
import { |
||||
User, |
||||
Info, |
||||
Share, |
||||
X, |
||||
Lock, |
||||
Edit, |
||||
Trash2, |
||||
Image, |
||||
UserCheck, |
||||
Clipboard, |
||||
Settings, |
||||
AlertTriangle |
||||
} from 'react-feather'; |
||||
import { AccountFindUserId } from "./AccountFindUserId"; |
||||
import { AccountFindPassword } from "./AccountFindPassword"; |
||||
import { AccountFindUserIdContainer } from "../../../containers/account/find/AccountFindUserIdContainer"; |
||||
import { AccountFindPasswordContainer } from "../../../containers/account/find/AccountFindPasswordContainer"; |
||||
import { useHistory } from 'react-router-dom' |
||||
|
||||
export const AccountFindTab = props => { |
||||
const [activeTab, setActiveTab] = useState('1'); |
||||
const history = useHistory(); |
||||
|
||||
const toggle = tab => setActiveTab(tab) |
||||
const [centeredModal, setCenteredModal] = useState(false) |
||||
const [centeredModal02, setCenteredModal02] = useState(false) |
||||
|
||||
// const toggle = tab => {
|
||||
// if (activeTab !== tab) setActiveTab(tab);
|
||||
// };
|
||||
|
||||
const handlerClose = () => { |
||||
history.push(`/account/login/AccountLogin`) |
||||
} |
||||
|
||||
return( |
||||
<> |
||||
<div className='card-body-tab-menu'> |
||||
<Nav pills> |
||||
<NavItem> |
||||
{/* <NavLink active={activeTab === '1'} onClick={() => toggle('1')}> */} |
||||
<NavLink |
||||
className={classnames({ 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')}> */} |
||||
<NavLink |
||||
className={classnames({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}> |
||||
<AccountFindUserIdContainer |
||||
handlerClose={handlerClose} |
||||
/> |
||||
<AccountFindPasswordContainer
|
||||
handlerClose={handlerClose} |
||||
/> |
||||
</TabContent> |
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
</> |
||||
) |
||||
|
||||
} |
@ -0,0 +1,118 @@
|
||||
import * as yup from 'yup'; |
||||
import { yupResolver } from '@hookform/resolvers/yup'; |
||||
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'; |
||||
|
||||
export const AccountFindUserId = props => { |
||||
const [activeTab, setActiveTab] = useState('1') |
||||
|
||||
// ** Function to toggle tabs
|
||||
const toggle = tab => setActiveTab(tab) |
||||
const [confirmModal, setConfirmModal] = useState(false) |
||||
const [valiModal, setValiModal] = useState({ |
||||
isOpen: false, |
||||
title: '', |
||||
desc: '' |
||||
}); |
||||
|
||||
const crtfyhpVali = yup.object().shape({ |
||||
memberName: yup.string().trim().required('이름을 입력해 주세요.'), |
||||
hpno: yup.string().required('휴대폰번호를 입력해 주세요.') |
||||
}) |
||||
|
||||
const handlerCrtfySend = () => { |
||||
// const vData = getValues();
|
||||
setValiModal({ |
||||
isOpen: true, |
||||
title: '인증번호 발송', |
||||
desc: '인증번호 발송은 3회 까지만 가능합니다.' |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
|
||||
|
||||
return( |
||||
<> |
||||
<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' |
||||
onClick={handlerCrtfySend} |
||||
> |
||||
인증번호 발송 |
||||
</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-confirmModal'> |
||||
<Button |
||||
color='secondary' |
||||
type='button' |
||||
onClick={props.handlerClose} |
||||
> |
||||
취소 |
||||
</Button> |
||||
<Button color='primary' type='button' onClick={() => setConfirmModal(!confirmModal)} >확인</Button> |
||||
<Modal isOpen={confirmModal} toggle={() => setConfirmModal(!confirmModal)} className='confirmModal-dialog-centered user-search-confirmModal'> |
||||
<ModalHeader toggle={() => setConfirmModal(!confirmModal)}>아이디 확인</ModalHeader> |
||||
<ModalBody> |
||||
회원님의 아이디는<br/><span className='user-search-id'>TEST123123</span> 입니다. |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
{/* <Button color='primary' onClick={() => setConfirmModal(!confirmModal)}> */} |
||||
<Button color='primary' onClick={props.handlerClose}> |
||||
로그인 |
||||
</Button>{' '} |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
</FormGroup> |
||||
</Form> |
||||
</TabPane> |
||||
</> |
||||
) |
||||
} |
@ -0,0 +1,25 @@
|
||||
import { AccountFindTab } from "../../../components/account/find/AccountFindTab"; |
||||
|
||||
import loginImg from '../../../assets/images/login01.png'; |
||||
|
||||
import '../../../assets/css/custom.css'; |
||||
|
||||
export const AccountFindTabContainer = () => { |
||||
|
||||
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'> |
||||
<AccountFindTab /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</> |
||||
|
||||
); |
||||
}; |
@ -0,0 +1,13 @@
|
||||
import { AccountFindPassword } from "../../../components/account/find/AccountFindPassword" |
||||
|
||||
export const AccountFindPasswordContainer = props => { |
||||
|
||||
return( |
||||
|
||||
<> |
||||
<AccountFindPassword |
||||
handlerClose={props.handlerClose} |
||||
/> |
||||
</> |
||||
) |
||||
} |
@ -0,0 +1,13 @@
|
||||
import { AccountFindUserId } from "../../../components/account/find/AccountFindUserId" |
||||
|
||||
export const AccountFindUserIdContainer = props => { |
||||
|
||||
return( |
||||
|
||||
<> |
||||
<AccountFindUserId |
||||
handlerClose={props.handlerClose} |
||||
/> |
||||
</> |
||||
) |
||||
} |
Loading…
Reference in new issue