Commit 3bddb53f authored by KangMin An's avatar KangMin An
Browse files

Merge branch 'merger' into kangmin

parents 2be6215c e92762f2
import React, { useState } from 'react'
import '../App.css'
import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth';
function SignupComp() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '1rem'
}
const initValues = {
email: '',
name: ''
}
const [formValues, setFormValues] = useState(initValues)
const [validated, setValidated] = useState(false)
function handleChange(event) {
const { name, value } = event.target
setFormValues({ ...formValues, [name]: value })
}
function handleSubmit(event) {
const form = event.currentTarget;
console.log('formValues', formValues);
console.log('formValues.values', Object.values(formValues)[0].length);
// console.log(form)
// if (Object.values(formValues)[0].length !== 0) { //form.checkValidity() === false
// event.preventDefault();
// event.stopPropagation();
// }
console.log(validated)
setValidated(true);
// const form = event.current
// setFormError(validate(formValues))
// setIsSubmit(true)
}
const [emailSubm, setEmailSubm] = useState(false)
function handleClickSubm() {
// setEmailSubm(true);
const subm = document.getElementById("subm-mailSent");
subm.style.visibility = 'visible'
// const aftermail = document.getElementById('AftermailSent');
// aftermail.style.display = ''
}
const [userExist, setUserExist] = useState(false)
const [alertShow, setAlertShow] = useState(true)
function CheckUserExist() {
setUserExist(!userExist)
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
Create an Account
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Sign up with your social media account or email address
</Card.Subtitle>
<hr />
<Card.Text>
<Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
{!userExist ?
<Alert show={alertShow} variant={'success'}>
<Col>
😊 계정 생성이 완료 되었습니다.
</Col>
<Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
로그인 하러가기
</Alert.Link>
</Alert>
:
<Alert show={alertShow} variant={'danger'}>
<Col>
🤔 이미 존재하는 계정입니다.
</Col>
<Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
로그인 하러가기
</Alert.Link>
</Alert>
}
<Button onClick={() => setAlertShow(true)}>보여주고</Button>
<Button onClick={() => setAlertShow(false)}>안보여주고</Button>
</Row>
<Form style={inboxstyled}
onSubmit={handleSubmit}>
<Form.Group controlId="userEmail">
<Row className='m-auto mb-1 d-flex justify-content-center'>
<Form.Control
type="text"
name="name"
placeholder="Name"
value={formValues.name}
onChange={handleChange}
required
/>
</Row>
<Row>
<p></p>
</Row>
<Row className='m-auto d-flex justify-content-center'>
<Form.Control
type="email"
name="email"
placeholder="Email Address"
value={formValues.email}
onChange={handleChange}
required
/>
</Row>
</Form.Group>
<Button variant='light' className='mt-2' type="submit" id='formbtn' onClick={CheckUserExist}>
Sign Up
</Button>
</Form>
<Row className='d-flex align-items-center m-2'>
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#;" onClick={LoginWithKakao} id='socialLink' >
<img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
</a>
</Row>
</Card.Text>
</Card>
</Row>
)
}
export default SignupComp;
\ No newline at end of file
import React, { Component } from 'react'; import React from 'react';
import { Jumbotron, Container, Row, Card } from 'react-bootstrap'; import { Row, Card } from 'react-bootstrap';
import Clock from 'react-live-clock' import Clock from 'react-live-clock'
import '../App.css' import '../App.css'
function TimeNow() { function TimeNow() {
const cardstyled = { const cardstyled = {
fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
......
import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import '../App.css'
function Trydays() {
const cardstyled = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.712)',
borderRadius: '20px',
color: 'white'
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title>
유저아이디
</Card.Title>
<Card.Subtitle>
지역
울릉면
지역코드
<Button variant='light' style={btnstyled}>
변경
</Button>
</Card.Subtitle>
<Card.Text>
환경을 향한 노력 ㅁㅁㅁ일 입니다.
</Card.Text>
</Card>
</Row>
)
}
export default Trydays;
\ No newline at end of file
...@@ -3,12 +3,11 @@ import { Container, Row, Col } from 'react-bootstrap'; ...@@ -3,12 +3,11 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer'; import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow'; import TimeNow from './../components/TimeNow';
import '../App.css' import '../App.css'
import Trydays from './../components/Trydays';
import EueSuggest from '../components/EueSuggest'; import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine'; import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut'; import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer'; import Footer from './../components/Footer';
import { useEffect } from 'react'; import axios from 'axios';
function Home() { function Home() {
...@@ -32,24 +31,29 @@ function Home() { ...@@ -32,24 +31,29 @@ function Home() {
flexDirection: 'column', flexDirection: 'column',
padding: '0' padding: '0'
} }
useEffect(() => {
console.log('마운트 될때마다 실행'); axios({
}, []); method: 'get',
url: 'localhost:4500/loccode/doe'
}).then((res) => {
console.log(res)
})
return ( return (
<Container fluid className='d-flex justify-content-center position-relative'> <Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled}> <Row style={constyled} className='m-auto'>
<Col xs={12} md={4} className='d-flex justify-content-center' id='stickyy'> <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'> <Row style={col1sty} className='m-auto'>
<MainLayer /> <MainLayer />
</Row> </Row>
</Col> </Col>
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'> <Row style={constyled} className='d-flex mb-2 w-100'>
{/* <KakaoLogin/> */}
{/* <TimeNow /> */} {/* <TimeNow /> */}
<Trydays />
<EueSuggest /> <EueSuggest />
<ChartLine /> <ChartLine />
<ChartDoughnut /> <ChartDoughnut />
......
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import LocCodeChange from '../components/LocCodeChange';
function SignupPage() {
const constyled = {
display: 'flex',
justifyContent: 'space-evenly',
width: '100%',
position: 'relative'
}
const col1sty = {
display: 'flex',
justifyContent: 'start',
alignItems: 'center'
}
const col2sty = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '0'
}
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
<LocCodeChange />
</Row>
</Col>
</Row>
</Container>
);
}
export default SignupPage;
\ No newline at end of file
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import LoginComp from '../components/LoginComp';
function SignupPage() {
const constyled = {
display: 'flex',
justifyContent: 'space-evenly',
width: '100%',
position: 'relative'
}
const col1sty = {
display: 'flex',
justifyContent: 'start',
alignItems: 'center'
}
const col2sty = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '0'
}
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
<LoginComp />
</Row>
</Col>
</Row>
</Container>
);
}
export default SignupPage;
\ No newline at end of file
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image, Alert } from 'react-bootstrap';
import Oauth from '../components/Oauth';
import { useEffect } from 'react';
import axios from 'axios';
import { useState } from 'react';
function LoginwithSocial() {
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '100%',
justifyContent: 'center',
margin: 'auto',
padding: '10px'
}
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
const [isLogin, setIsLogin] = useState(false)
return (
<Row className='m-auto'>
<Modal.Header className='d-flex justify-content-center w-100'>
<Modal.Title id="example-modal-sizes-title-sm">
LOGIN
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={inboxstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant='light' type="submit" id='formbtn'>
LOGIN
</Button>
</Form>
<hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#" onClick={loginWithKakao} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a href="javascript:loginWithKakao()" id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAOHTML
</a>
<a href="javascript:loginWithKakaoPOP()" id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAOPOP
</a>
<a as='button' href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a as='button' href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
</a>
</Row>
</Modal.Body>
</Row>
)
}
export default LoginwithSocial;
\ No newline at end of file
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
// import { KAKAO_AUTH_URL } from '../components/Oauth';
function SignUp() {
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '1rem'
}
return (
<>
<Modal.Header className='d-block text-center'>
<Modal.Title>
Create an Account
</Modal.Title>
<p style={{ color: 'gray', margin: '10px', fontSize: '0.5em' }}>
Sign up with your social media account or email address
</p>
</Modal.Header>
<Modal.Body>
<Form style={inboxstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Username" />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Email Address" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password2" placeholder="Confirm Password" />
</Form.Group>
<Button variant='light' type="submit" className='' id='formbtn'>
Sign Up
</Button>
</Form>
<hr />
<Row style={{margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
{/* <a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
<Image src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a> */}
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
</a>
</Row>
</Modal.Body>
</>
)
}
export default SignUp;
\ No newline at end of file
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import SignupComp from '../components/SignupComp';
function SignupPage() {
const constyled = {
display: 'flex',
justifyContent: 'space-evenly',
width: '100%',
position: 'relative'
}
const col1sty = {
display: 'flex',
justifyContent: 'start',
alignItems: 'center'
}
const col2sty = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '0'
}
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
<SignupComp />
</Row>
</Col>
</Row>
</Container>
);
}
export default SignupPage;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment