Skip to content

GitLab

Commit b2619b51 authored by Spark's avatar Spark
Browse files

please pg

parent e18ae3f6
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ b2619b51
......@@ -4,5 +4,9 @@
# VScode setting File
.vscode/*
node_modules/*
package-lock.json
package.json
# Arduino File
arduino/code/test/*
\ No newline at end of file
client/src/App.css
View file @ b2619b51
......@@ -8,9 +8,11 @@ body {
#btnlink {
color: white !important;
text-decoration: none !important;
min-width: 100%;
margin: auto;
height: 100%;
}
.btn-primary:active {
outline: white !important;
border-color: white !important;
......@@ -21,6 +23,11 @@ body {
font-size: 1.5em;
}
#impactTitle {
margin: 1em;
font-size: 1.5em;
}
.card .card-subtitle {
display: flex;
color: rgb(129, 129, 129);
......@@ -41,18 +48,20 @@ body {
}
#logpng {
width: 25px;
height: auto;
margin-right: 1em;
width: 50%;
height: 6em;
object-fit: cover;
}
#socialLink {
display: flex;
justify-content: center;
align-items: center;
height: 50%;
padding: 0.5em;
margin: 0.5em;
height: 2.5em;
color: gray;
font-size: 10px;
font-size: 0.8em;
width: fit-content;
}
......
client/src/App.js
View file @ b2619b51
......@@ -2,9 +2,9 @@ import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
import Oauth from './utils/Oauth';
import SignupPage from './pages/SignupPage';
import LoginPage from './pages/LoginPage';
import LocalCodePage from './pages/LocalCodePage';
function App() {
......@@ -15,7 +15,8 @@ function App() {
<Route exact path='/' component={Home} />
<Route exact path='/signup' component={SignupPage} />
<Route exact path='/login' component={LoginPage} />
<Route path='/oauth' component={Oauth} />
<Route exact path='/local_code' component={LocalCodePage} />
</>
</Router>
......
client/src/Utils/Oauth.js
View file @ b2619b51
......@@ -7,175 +7,68 @@ import { useHistory } from 'react-router-dom';
const { Kakao } = window;
export function LoginWithKakao() {
//authObj : response.data에 들어가 있는 부분 object 형식
Kakao.Auth.loginForm({
scope: 'account_email',
// 팝업 + 다른 아이디 로그인시
scope: 'account_email, profile_nickname',
// 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달
success: function (authObj) {
alert('로그인 되었습니다. @@@@@@@@@')
console.log(JSON.stringify(authObj))
const accToken = authObj.access_token
localStorage.setItem('Kakao_token', accToken)
console.log('accT ;;', authObj.access_token)
console.log(typeof (localStorage))
console.log(Object.keys(localStorage)[0])
Kakao.API.request({
// 현재 로그인한 사용자의 카카오계정 정보 불러오기
url: '/v2/user/me',
// 사용자 정보 요청 주소
data: {
property_keys: ["kakao_account.email"]
property_keys: ["kakao_account.profile", "kakao_account.email"]
// 파라미터를 통해 특정 사용자 정보만 지정해서 요청
},
success: function (response) {
console.log(response);
console.log(response.kakao_account.email);
console.log(response.kakao_account.profile);
const userEmail = response.kakao_account.email.split('@')[0];
localStorage.setItem('user_email', userEmail)
const user_email = localStorage.getItem('user_email')
console.log(user_email)
// window.location.replace('/' + '?kakaoemail='+ `${user_email}`)
const nickValue = Object.values(response.kakao_account.profile)
localStorage.setItem('nickname', nickValue)
const nickname = localStorage.getItem('nickname')
console.log(nickname)
window.location.replace('/' + '?nickname=' + `${nickname}`)
}
});
},
fail: function (err) {
alert(JSON.stringify(err))
},
})
}
export function kakaoLogout() {
// 토큰을 만료시켜 더 이상 해당 액세스 토큰으로 카카오 API를 호출할 수 없도록
console.log('geAccesToken()', Kakao.Auth.getAccessToken())
if (!Kakao.Auth.getAccessToken()) {
alert('Not logged in.')
localStorage.clear();
window.location.replace('/')
return
return;
}
Kakao.Auth.logout(function () {
// 로그인 시 발급받은 토큰을 만료시키는 함수
alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
localStorage.clear();
window.location.replace('/')
})
}
export function unlinkApp() {
Kakao.API.request({
url: '/v1/user/unlink',
success: function (res) {
alert('success: ' + JSON.stringify(res))
window.location.replace('/')
},
fail: function (err) {
alert('fail: ' + JSON.stringify(err))
window.location.replace('/')
},
})
}
function Oauth() {
const history = useHistory()
const REST_API_KEY = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
const LOGOUT_REDIRECT_URI = 'http://localhost:3000/logout'
const url = new URL(window.location.href)
const authorizationCode = url.searchParams.get('code')
console.log('인가 코드', authorizationCode);
const kakaoAuthURl = `https://kauth.kakao.com/oauth/token`
// const kakaoAuthURl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
// const payload = {
// grant_type: "authorization_code",
// client_id: `${REST_API_KEY}`,
// redirect_uri: `${REDIRECT_URI}`,
// code: `${authorizationCode}`
// }
const params = new URLSearchParams();
// PAYLOAD
params.append('grant_type', 'authorization_code')
params.append('client_id', `${REST_API_KEY}`)
params.append('redirect_uri', `${REDIRECT_URI}`)
params.append('code', `${authorizationCode}`)
axios.post(kakaoAuthURl, params).then(response => {
console.log('RES_DATA ;;;', response.data);
console.log('acc_token ;;', response.data.access_token);
const accToken = response.data.access_token;
if (accToken) {
console.log('YES login!!!!!!!!!!!!!');
localStorage.setItem('Kakao_token', accToken)
history.push('/')
}
})
// const res = axios.post(kakaoAuthURl, params)
// console.log(res)
// const accessToken = res.data
// console.log(accessToken)
// setTimeout(window.location.replace('/'), 3000)
// const ischecked = () => {
// if (checkAuth) {
// return true;
// }
// else {
// return false;
// }
// }
// console.log(ischecked())
// const isOauthChecked = () => {
// if (checkAuth.access_token) {
// console.log(true)
// return true;
// }
// }
// {
// console.log('accccc', response.data.access_token);
// console.log('%%%', response.data);
// if (response.data.access_token) {
// console.log('YES login!!!!!!!!!!!!!');
// isOauth(true)
// console.log('@@@12', isOauth(true))
// setTimeout(window.location.replace('/'), 3000)
// }
// else {
// isOauth(false)
// }
// })
export function Loading() {
return (
<Row className='d-block'>
<Col className='text-center m-auto' style={{ fontSize: '5px' }} >
{/* 인가코드 : {authorizationCode}
<br />
Params : {params} */}
</Col>
<Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
......@@ -185,6 +78,4 @@ function Oauth() {
</Button>
</Row>
)
}
export default Oauth;
\ No newline at end of file
}
\ No newline at end of file
client/src/components/LocCodeChange.js 0 → 100644
View file @ b2619b51
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image, Alert, Card, DropdownButton, Dropdown, ButtonGroup } from 'react-bootstrap';
import Oauth, { LoginWithKakao } from '../utils/Oauth';
import { useEffect } from 'react';
import axios from 'axios';
import { useState } from 'react';
function LocCodeChange() {
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: '10px'
}
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px'
}
const [locCodeShow, setLocCodeShow] = useState(false)
function handleClickLoc() {
setLocCodeShow(true);
const auth = document.getElementById('loc-code')
auth.style.visibility = 'visible'
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
Local Code
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Please select a region name
</Card.Subtitle>
<hr />
<Card.Text>
<Form style={inboxstyled}>
<Row className='m-auto w-100 d-flex justify-content-center'>
<Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
{['도', '시군구', '읍면동'].map((localname) => (
<DropdownButton
variant='light'
style={btnstyled2}
title='지역코드'
as={ButtonGroup}
title={` ${localname} `}
>
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</DropdownButton>
))}
<Button variant='light' style={btnstyled2} onClick={!locCodeShow && handleClickLoc}>확인</Button>
</Col>
<Col md={6} xs={4} id='loc-code' style={{
margin: '5px',
border: 'solid',
borderColor: 'rgb(110, 189, 142)',
display: 'flex',
justifyContent: 'center',
padding: '2px',
visibility: 'hidden',
transition: 'all 4s'
}}>
지역코드
</Col>
</Row>
</Form>
</Card.Text>
</Card>
</Row>
)
}
export default LocCodeChange;
\ No newline at end of file
client/src/components/LocalCode.js
View file @ b2619b51
......@@ -3,11 +3,12 @@ import { Container, Row, Card, Table, Button, Col, Modal } from 'react-bootstrap
// import db from "../db/index"
import '../App.css'
import { LoginWithKakao } from '../utils/Oauth';
import { Link } from 'react-router-dom';
function LocalCode() {
const kakao_accToken = localStorage.getItem('Kakao_token')
const logined = localStorage.getItem('nickname')
const cardstyled = {
margin: 'auto',
......@@ -29,29 +30,30 @@ function LocalCode() {
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
const [localChange, setLocalChange] = useState(false)
const user_email = localStorage.getItem('user_email')
const nickname = localStorage.getItem('nickname')
return (
<>
<Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'>
<Card.Title>
{kakao_accToken ?
`${user_email}`
{logined ?
`${nickname}`
:
<>
GUEST
</>
}
}, 환영합니다.
</Card.Title>
<Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}>
<Card.Subtitle>
지역코드
</Card.Subtitle>
{kakao_accToken &&
<Button variant='light' className='ml-1' onClick={() => setLocalChange(true)} style={btnstyled2}>
변경
{logined &&
<Button variant='light' className='ml-1' style={btnstyled2}>
<Link to='/local_code' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
변경
</Link>
</Button>
}
</Row>
......
client/src/components/LoginComp.js
View file @ b2619b51
......@@ -23,30 +23,22 @@ function LoginComp() {
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '100%',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '10px'
}
function loginWithKakao2() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
// useEffect(()=> {
// window.location.replace('/')
// },[localStorage.getItem('Kakao_token')])
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title>
<Card.Title id='impactTitle'>
LOGIN
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Log in with your social media account or email address
</Card.Subtitle>
<hr />
<Card.Text>
<Form style={inboxstyled}>
......@@ -54,23 +46,26 @@ function LoginComp() {
<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 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={loginWithKakao2} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a href="#;" onClick={LoginWithKakao} id='socialLink' >
{/* 세미콜론이 붙으면 최상단 이동 x */}
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAOHTML
<img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
</a>
</Row>
......
client/src/components/MainLayer.js
View file @ b2619b51
......@@ -27,10 +27,11 @@ function MainLayer() {
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
margin: 'auto',
marginBottom: '0.5em',
display: 'flex',
justifyContent: 'center',
maxWidth: '100%',
width: '100%',
borderWidth: '2px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
......@@ -38,8 +39,7 @@ function MainLayer() {
color: 'white'
}
const [logshow, setLogshow] = useState(false);
const kakao_accToken = localStorage.getItem('Kakao_token')
const logined = localStorage.getItem('nickname')
return (
<>
......@@ -54,7 +54,7 @@ function MainLayer() {
</Row>
<Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
{kakao_accToken ?
{logined ?
//true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}>
로그아웃
......@@ -67,27 +67,12 @@ function MainLayer() {
</Link>
</Button>
}
<Modal
size="sm"
show={logshow}
onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<LoginComp />
</Modal>
{!kakao_accToken ?
{!logined &&
<Button variant='light' style={btnstyled}>
<Link to='/signup' id='btnlink'>
회원가입
</Link>
</Button>
:
<Button variant='light' style={btnstyled} onClick={unlinkApp}>
연결끊기
</Button>
}
</ButtonGroup>
......
client/src/components/SignupComp.js
View file @ b2619b51
......@@ -4,6 +4,7 @@ import { Form, Modal, Button, Row, Col, Image, DropdownButton, ButtonGroup, Drop
// import { KAKAO_AUTH_URL } from '../components/Oauth';
import { handleLogin } from '../utils/Auth';
import { isOauth } from '../utils/Auth';
import { LoginWithKakao } from '../utils/Oauth';
function SignupComp() {
......@@ -28,38 +29,22 @@ function SignupComp() {
color: '#04AB70'
}
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px'
}
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '100%',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '1rem'
}
const aftershow = {
display : 'none'
}
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
display: 'none'
}
const initValues = {
email: '',
authNumber: '',
email: ''
}
const [formValues, setFormValues] = useState(initValues)
......@@ -69,7 +54,6 @@ function SignupComp() {
function submitForm() {
console.log('formValues', formValues);
console.log(!formValues['username']);
console.log(!formValues['email']);
console.log('Error', formError)
}
......@@ -96,53 +80,26 @@ function SignupComp() {
}
// if (success) {
// alert('회원가입 되었습니다.')
// return <Redirect to='/user' />
// }
const [emailSubm, setEmailSubm] = useState(false)
const [authCodecheck, setAuthCodecheck] = useState(false)
const [locCodeShow, setLocCodeShow] = useState(false)
function handleClickSubm() {
// setEmailSubm(true);
const subm = document.getElementById("subm-mailSent");
subm.style.visibility = 'visible'
const aftermail = document.getElementById('AftermailSent');
aftermail.style.display = ''
}
function handleClickAuth() {
var authToInt = parseInt(formValues.authNumber, 10)
if (authToInt == 0) {
setAuthCodecheck(true);
const auth = document.getElementById('auth-check')
auth.style.visibility = 'visible'
}
else {
setAuthCodecheck(false);
}
console.log(typeof (authToInt))
console.log(authToInt)
}
function handleClickLoc() {
setLocCodeShow(true);
const auth = document.getElementById('loc-code')
auth.style.visibility = 'visible'
// const aftermail = document.getElementById('AftermailSent');
// aftermail.style.display = ''
}
console.log(emailSubm);
// console.log
// const [isOauth, setIsOauth] = useState(false)
const iiiiioauthhh = true
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title>
<Card.Title id='impactTitle'>
Create an Account
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
......@@ -152,60 +109,22 @@ function SignupComp() {
<Card.Text>
<Form style={inboxstyled}
onSubmit={handleSubmit}>
{/* isOauth */}
{iiiiioauthhh ?
<>
<Form.Group controlId="userEmail" className='mb-1'>
<Row className='m-auto d-flex justify-content-center'>
<Col md={9} xs={9}>
<Form.Control
type="email"
name="email"
placeholder="Email Address"
value={formValues.email}
onChange={handleChange}
readOnly={emailSubm}
required
/>
</Col>
<Col md={3} xs={3} className='p-0 d-flex justify-content-center'>
<Button variant='light' type='submit' style={btnstyled2} onClick={!emailSubm && handleClickSubm} disabled={emailSubm}>{emailSubm ? '제출완료' : '제출'}</Button>
</Col>
</Row>
<Row style={noticestyled} id="subm-mailSent">
메일이 발송되었습니다.
</Row>
</Form.Group>
<Form.Group controlId="authNumber" className='mb-1' style={aftershow} id='AftermailSent'>
<Row className='m-auto d-flex justify-content-center'>
<Col md={9} xs={9}>
<Form.Control
type="text"
name="authNumber"
placeholder="인증코드"
value={formValues.authNumber}
onChange={handleChange}
// readOnly={authCodecheck}
required
/>
</Col>
<Col md={3} xs={3} className='p-0 d-flex justify-content-center'>
<Button variant='light' style={btnstyled2} onClick={!authCodecheck && handleClickAuth}>확인</Button>
</Col>
</Row>
<Row style={noticestyled} id='auth-check'>
인증이
</Row>
</Form.Group>
</>
:
<Row>
암것도안나와~
<Form.Group controlId="userEmail" className='mb-1'>
<Row className='m-auto d-flex justify-content-center'>
<Form.Control
type="email"
name="email"
placeholder="Email Address"
value={formValues.email}
onChange={handleChange}
readOnly={emailSubm}
required
/>
</Row>
}
</Form.Group>
{/*
<Row className='m-auto w-100 d-flex justify-content-center'>
<Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
{['도', '시군구', '읍면동'].map((localname) => (
......@@ -237,27 +156,27 @@ function SignupComp() {
}}>
지역코드
</Col>
</Row>
</Row> */}
<Button variant='light' className='mt-2' type="submit" id='formbtn'>
Sign Up
</Button>
</Form>
<Row className='d-flex align-items-center m-2'>
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<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'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
<a href="#;" onClick={LoginWithKakao} id='socialLink' >
{/* 세미콜론이 붙으면 최상단 이동 x */}
<img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
</a>
</Row>
</Card.Text>
......
client/src/pages/Home.js
View file @ b2619b51
......@@ -7,8 +7,7 @@ import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer';
import { isOauth } from './../utils/Auth';
import db from '../db/index'
function Home() {
......@@ -33,6 +32,8 @@ function Home() {
padding: '0'
}
console.log(db.user.findAll())
......@@ -50,8 +51,6 @@ function Home() {
<Row style={constyled} className='d-flex mb-2 w-100'>
{/* <KakaoLogin/> */}
{/* <TimeNow /> */}
<EueSuggest />
<ChartLine />
......
client/src/pages/LocalCodePage.js 0 → 100644
View file @ b2619b51
import React, { useState, useEffect } from 'react'
import { Container, Row, Col, Button } 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
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