pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

아이디,비밀번호 찾기

pull/2/head
김지은 2 years ago
parent
03efeb3393
commit
25a4665621
2 changed files with 218 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/assets/css/custom.css
  2. 204
      src/views/design/DesignPassword.js

15
src/assets/css/custom.css
Unescape View File

@ -706,7 +706,8 @@ background-size: 75% auto;
} */
/*datepicker-custom*/
.datepicker-custom {display: flex;align-items:center;}
.datepicker-custom {display: flex;align-items:center;cursor: pointer;}
.datepicker-custom input{cursor: pointer;}
.datepicker-custom .react-datepicker{background:#161d31;border-color:#161d31;color:#b4b7bd;font-size:0.875rem;font-weight:400;}
.datepicker-custom .react-datepicker__header{background:transparent;border-color:transparent;color:#b4b7bd;font-size: 1.1rem;font-weight:300;}
.datepicker-custom .react-datepicker__year-read-view--down-arrow,
@ -753,3 +754,15 @@ background-size: 75% auto;
margin-top:0px;
}
}
.login .info-search .pal-card{width:95%;}
.login-form.info-search form{padding:0;}
.info-search .input-btn button{width:100%; padding: 0.786rem 1.5rem;}
.full-btn-2n{display:flex;justify-content:space-between;}
.full-btn-2n button{width:49%;}
.timeInput{position:relative;}
.timeInput .time{position:absolute;right:16px;top:50%;transform: translateY(-50%);font-size:14px;}
.user-search-id{font-weight:500;}
.user-search-modal .modal-body{font-size:1.125rem;padding:30px 20px}
.user-search-modal .modal-body .etc-txt{display:block;font-weight:500;margin-bottom:1rem}
.user-search-link button{font-size:0.875rem;margin-top:20px}

204
src/views/design/DesignPassword.js
Unescape View File

@ -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;
Write Preview
Loading…
Cancel
Save