Skip to content

GitLab

Commit 440d957b authored by Spark's avatar Spark
Browse files

로그인 후에 지역정보 입력 페이지로 이동, 로컬 로그아웃 추가, 서버 리다이렉트 링크 수정

parent aa804067
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 440d957b
import React, { useEffect } from 'react';
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
......@@ -8,20 +8,27 @@ import EditPage from './pages/EditPage';
import PrivateRoute from './utils/PrivateRoutes';
import PageNotFound from './components/PageNotFound';
import Footer from './components/Footer';
import { checkCookies } from './utils/CheckDB';
import GetLocFirst from './pages/GetLocFirst';
function App() {
useEffect(() => {
const isLs = localStorage.getItem('login')
function loginDefault() {
if (isLs === null) {
localStorage.setItem('login', false)
}, [checkCookies()])
}
}
return (
<Router>
{loginDefault()}
<Switch>
<Route exact path='/' component={Home} />
<Route path='/signup' component={SignupPage} />
<Route path='/login' component={LoginPage} />
<Route path='/first-local-code' component={GetLocFirst} />
<PrivateRoute path='/edit'>
<EditPage />
......
client/src/Utils/Auth.js
View file @ 440d957b
import axios from 'axios';
import { callUserInfo, checkCookies } from './CheckDB';
export function haveLogined() {
callUserInfo().then((res) => {
if (res && checkCookies()) {
return true
}
else {
console.log('object')
console.log(res)
}
})
}
import Swal from 'sweetalert2';
export function isOauth(value) {
const TFoauth = value
......@@ -28,6 +16,24 @@ export function isLogined() {
}
}
export function logout() {
localStorage.setItem('login', false)
export async function localLogout() {
await axios.get('/api/logout')
.then(function () {
localStorage.clear();
Swal.fire({
title: '로그아웃 성공!',
text: '🙏 안녕히 가세요 🙏',
icon: 'warning',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/')
}
else {
window.location.replace('/')
}
})
})
}
client/src/Utils/CheckDB.js
View file @ 440d957b
......@@ -4,7 +4,7 @@ import { Swal } from 'sweetalert2';
export async function callUserInfo() {
const res = await axios.get("/api/user-info")
return res.data.user_info
return res.data.contents.user_info
}
export function checkCookies() {
......
client/src/Utils/Oauth.js
View file @ 440d957b
import axios from 'axios';
import Swal from 'sweetalert2'
import '../App.css'
......@@ -15,8 +16,6 @@ export function LoginWithKakao() {
success: function (authObj) {
console.log(JSON.stringify(authObj))
console.log('accT ;;', authObj.access_token)
Kakao.API.request({
// 현재 로그인한 사용자의 카카오계정 정보 불러오기
url: '/v2/user/me',
......@@ -25,14 +24,16 @@ export function LoginWithKakao() {
property_keys: ["kakao_account.profile", "kakao_account.email"]
// 파라미터를 통해 특정 사용자 정보만 지정해서 요청
},
success: function (response) {
success: async function (response) {
console.log(response);
console.log(response.kakao_account.profile);
const nickValue = Object.values(response.kakao_account.profile)
localStorage.setItem('nickname', nickValue)
const nickname = localStorage.getItem('nickname')
console.log(nickname)
await axios.post('/api/edit-profile', {nick_name: nickValue})
.then((res) => console.log('kakao', res))
localStorage.setItem('login', true)
Swal.fire({
title: '로그인 성공!',
text: '🙌 환영합니다 🙌',
......@@ -41,10 +42,10 @@ export function LoginWithKakao() {
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/' + '?nickname=' + `${nickname}`)
// window.location.replace('/')
}
else {
window.location.replace('/' + '?nickname=' + `${nickname}`)
// window.location.replace('/')
}
})
}
......
client/src/components/EueSuggest.js
View file @ 440d957b
......@@ -15,8 +15,6 @@ function EueSuggest() {
color: '#04AB70'
}
const airUsing = localStorage.getItem('using-aircondition')
return (
<Row className='text-center w-100 my-2'>
......
client/src/components/LocCodeChange.js
View file @ 440d957b
......@@ -84,7 +84,6 @@ function LocCodeChange() {
&& emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
const saveCodeEmd = emdSelect.value
console.log(saveCodeEmd)
await axios.post('/api/edit-profile', { loc_code: saveCodeEmd }) // loccal code 수정
......@@ -99,10 +98,10 @@ function LocCodeChange() {
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.reload()
window.location.replace('/')
}
else {
window.location.reload()
window.location.replace('/')
}
})
}
......
client/src/components/MainLayer.js
View file @ 440d957b
......@@ -5,7 +5,7 @@ import '../App.css'
import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth';
import UsingAircon from './UsingAircon';
import { isLogined } from '../utils/Auth';
import { isLogined, localLogout } from '../utils/Auth';
function MainLayer() {
......@@ -34,10 +34,7 @@ function MainLayer() {
color: 'white'
}
return (
<Col>
<Row className='d-flex align-items-center m-auto w-100 p-0'>
<Link to='/' className='p-0 m-auto'>
......@@ -49,16 +46,14 @@ function MainLayer() {
<UserInfo />
</Row>
{isLogined() &&
<UsingAircon/>
}
<UsingAircon />
<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' }}>
{isLogined() ?
//true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}>
<Button variant='light' style={btnstyled} onClick={localLogout}>
로그아웃
</Button>
:
......
client/src/components/NicknameChange.js
View file @ 440d957b
import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
import React, { useState } from 'react'
import { Row, Card, Form, Button, FloatingLabel } from 'react-bootstrap';
import Swal from 'sweetalert2';
function NicknameChange() {
......@@ -53,12 +53,10 @@ function NicknameChange() {
})
}
else {
console.log('ERROR')
console.log(response.data.msg);
}
})
}
// window.location.reload();
};
return (
......@@ -76,7 +74,7 @@ function NicknameChange() {
<Card.Text className='m-0'>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel label="Nickname">
<Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} required/>
<Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} required />
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
변 경
......
client/src/components/TimeNow.js
View file @ 440d957b
......@@ -5,26 +5,29 @@ import '../App.css'
function TimeNow() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderWidth: '3px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title style={{color:'black'}}>
<Card.Title>
<p>
현재시각
</p>
</Card.Title>
<Card.Text>
<Clock format={'Y년 M월 D일'} />
<br/>
<br />
<Clock format={'HH : mm : ss'} ticking={true} timezone={"KR"} />
</Card.Text>
</Card>
......
client/src/components/UserInfo.js
View file @ 440d957b
......@@ -2,15 +2,12 @@ import React, { useState, useEffect } from 'react'
import { Row, Card, Button, Col } from 'react-bootstrap';
import '../App.css'
import { Link } from 'react-router-dom';
import { callUserInfo, checkCookies } from '../utils/CheckDB';
import axios from 'axios';
import { callUserInfo } from '../utils/CheckDB';
import { isLogined } from '../utils/Auth';
function UserInfo() {
const islogin = localStorage.getItem('login')
const cardstyled = {
margin: 'auto',
padding: '1em 0.5em 1em 0.5em',
......@@ -48,52 +45,40 @@ function UserInfo() {
const day = now.getDate(); // 일
const stDate = new Date(dateStr[0], dateStr[1], dateStr[2]) // 가입 날짜
const endDate = new Date(year, month, day) // 현재 시간
const btMs = endDate.getTime() - stDate.getTime() // 주어진 날짜 사이의 경과 시간 (밀리 초)
const btDay = btMs / (1000 * 60 * 60 * 24) // 초 -> 일
setCreatedTime(btDay)
}
else {
console.log('Not Logined')
}
})
}, [checkCookies()])
}, [])
const codeInit = {
code_doe: '',
code_sgg: '',
code_emd: ''
}
const [codeValue, setCodeValue] = useState(codeInit)
const [showState, setShowState] = useState('')
const [localState, setLocalState] = useState([])
useEffect(() => {
// user-info 에서 loc_code
callUserInfo().then((res) => {
if (isLogined()) {
console.log(res[0].loc_code)
const newCode = res[0].loc_code
const newdoe = String(newCode).substring(0, 2)
const newsgg = String(newCode).substring(0, 5)
const newemd = String(newCode).substring(0,)
async function CompareCode() {
await axios.get('/api/data/loccode').then((response) => {
console.log(response.data.contents.loc_code)
})
}
CompareCode()
const dbloc = res[0].loc_code
if (dbloc === null) {
setShowState('지역을 입력해주세요')
const localstyle = document.getElementById('local_state')
localstyle.style.display = 'none'
}
else {
console.log(res)
const localName = res[0].loc_name
setLocalState(localName)
}
}
})
}, [])
return (
<Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'>
......@@ -117,21 +102,27 @@ function UserInfo() {
<Row style={{ alignItems: 'center', margin: 'auto', justifyContent: 'center' }}>
<Card.Subtitle>
{isLogined() ?
<p className='mb-2'>
????????
{/*
{`${localname_doe}`}
<div className='mb-2'>
<div>
{showState}
</div>
<div id='local_state'>
{`${localState['doe']}`}
<br />
{`${localname_sgg}`}
{`${localState['sgg']}`}
<br />
{`${localname_emd}`} */}
</p>
{`${localState['emd']}`}
</div>
</div>
:
<p className='mb-2'>
<div className='mb-2'>
로그인 후 이용 가능합니다
</p>
</div>
}
</Card.Subtitle>
{isLogined() &&
<Button variant='light' className='m-auto d-flex' style={btnstyled2}>
<Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
......@@ -141,7 +132,6 @@ function UserInfo() {
}
</Row>
{isLogined() &&
<Card.Text>
<hr />
<Row style={{ color: 'black' }}>
......@@ -149,7 +139,7 @@ function UserInfo() {
환경을 향한 노력
</p>
<h3 style={{ fontWeight: '300', color: '#2b90d9', margin: '0' }}>
{createdTime}일차
<strong>{createdTime}</strong> 일차
</h3>
</Row>
......
client/src/components/UsingAircon.js
View file @ 440d957b
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Form } from "react-bootstrap";
import { callUserInfo } from "../utils/CheckDB";
import { callUserInfo, checkCookies } from "../utils/CheckDB";
import { isLogined } from './../utils/Auth';
function UsingAircon() {
const [airUsing, setAirUsing] = useState(false)
useEffect(() => {
callUserInfo().then((res) => {
if (isLogined()) {
setAirUsing(res[0].using_aircon)
}
else {
console.log(res)
}
})
}, [])
// useEffect(() => {
// callUserInfo().then((res) => {
// if (isLogined()) {
// setAirUsing(res.using_aircon)
// }
// else {
// console.log(res)
// }
// })
// }, [checkCookies()])
async function airChange() {
function airChange() {
setAirUsing(!airUsing)
await axios.post('/api/edit-profile', { using_aircon: !airUsing })
.then(
callUserInfo().then((res) => {
if (isLogined()) {
console.log('using_aircon :', res[0].using_aircon)
}
else {
async function Useair() {
const res = await axios.post('/api/edit-profile', { using_aircon: !airUsing })
console.log(res)
}
})
)
.catch(function (error) {
console.log('err', error);
});
Useair()
}
console.log('airUsing', airUsing)
return (
<>
{isLogined() &&
<Form
key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
<Form.Check
......@@ -48,6 +45,8 @@ function UsingAircon() {
checked={airUsing}
/>
</Form>
}
</>
)
}
......
client/src/pages/GetLocFirst.js 0 → 100644
View file @ 440d957b
import React, { useEffect, useState } from 'react'
import { Container, Row, Col, Modal } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow';
import '../App.css'
import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Donation from '../components/Donation';
import LocCodeChange from '../components/LocCodeChange';
function GetLocFirst() {
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'
}
useEffect(() => {
setTimeout(function () {
setShow(true)
}, 1500)
}, [])
const [show, setShow] = useState(false)
return (
<Container className='m-auto d-flex position-relative'
style={{ flexDirection: 'column' }} fluid>
<Row className='d-flex'>
<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}>
<TimeNow />
<EueSuggest />
<ChartLine />
<ChartDoughnut />
<Donation />
</Col>
<Modal
show={show}
backdrop="static"
style={{ marginTop: '10%' }}>
<Modal.Header className='d-flex justify-content-center top-10'>
<Modal.Title>EUE에 오신걸 환영합니다</Modal.Title>
</Modal.Header>
<Modal.Body className='d-flex justify-content-center top-10'>
<LocCodeChange />
</Modal.Body>
</Modal>
</Row>
</Row>
</Container>
);
}
export default GetLocFirst;
\ No newline at end of file
client/src/pages/Home.js
View file @ 440d957b
......@@ -43,7 +43,7 @@ function Home() {
</Col>
<Col md={6} style={col2sty}>
{/* <TimeNow /> */}
<TimeNow />
<EueSuggest />
<ChartLine />
<ChartDoughnut />
......
client/src/pages/LoginPage.js
View file @ 440d957b
......@@ -3,7 +3,6 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import LoginComp from '../components/LoginComp';
import Footer from './../components/Footer';
function SignupPage() {
const constyled = {
......
client/src/pages/SignupPage.js
View file @ 440d957b
......@@ -3,7 +3,6 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import SignupComp from '../components/SignupComp';
import Footer from './../components/Footer';
function SignupPage() {
const constyled = {
......
server/src/controllers/userController.js
View file @ 440d957b
......@@ -25,12 +25,9 @@ const postMail = async (email, token) => {
from: `EUE Auth Supply <${envs.api.nodemailer.user}>`,
to: email,
subject: "EUE 사용자 계정 확인용 메일.",
html: `<a href="${envs.server.protocol}://${envs.server.host}:${
envs.server.port
}${routes.base + routes.confirm}?token=${token}">${
envs.server.protocol
}://${envs.server.host}:${envs.server.port}${
routes.base + routes.confirm
html: `<a href="${envs.server.protocol}://${envs.server.host}:${envs.server.port
}${routes.base + routes.confirm}?token=${token}">${envs.server.protocol
}://${envs.server.host}:${envs.server.port}${routes.base + routes.confirm
}?token=${token}</a>`,
};
......@@ -127,10 +124,7 @@ export const postLogin = async (req, res) => {
// 로그아웃 요청 처리
export const getLogout = (req, res) => {
res.clearCookie("acs_token").redirect("/api");
// .redirect(
// `${envs.client.protocol}://${envs.client.host}:${envs.client.port}`
// );
res.clearCookie("acs_token")
};
// 메일로 보낸 토큰의 유효성 검사 및 access 토큰 발행 처리
......@@ -158,10 +152,10 @@ export const getConfirm = async (req, res) => {
subject: "userInfo",
});
res.cookie("acs_token", accessT).redirect("/api");
// .redirect(
// `${envs.client.protocol}://${envs.client.host}:${envs.client.port}`
// );
res.cookie("acs_token", accessT)
.redirect(
"http://localhost:3000/first-local-code"
);
} catch (err) {
res.json({ msg: resForm.msg.err, contents: { error: err } });
}
......@@ -244,7 +238,7 @@ export const postEditProfile = async (req, res) => {
let new_nick_name = nick_name ? nick_name : user.nick_name;
let new_loc_code = loc_code ? Number(loc_code) : Number(user.loc_code);
let new_using_aircon = using_aircon
? using_aircon === "true"
? using_aircon === 'true'
: user.using_aircon;
await db.User.update(
......
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